LewisAndClark-CSD · JeremySnider01 · Nov 6, 2018 · Nov 6, 2018 · Nov 7, 2018 · Nov 7, 2018
diff --git a/background1.jpg b/background1.jpg
diff --git a/case1/gp_cover_txt.html → case1/gp_cover.html b/case1/gp_cover_txt.html → case1/gp_cover.html
@@ -7,16 +7,20 @@
           Case Problem 1
 
           Ghost of the Deep Cover Page
-          Author: 
-          Date:   
-
+          Author:   Brett and Jeremy
+          Date:     11/7/18 
           Filename: gp_cover.html
          -->
 
    <title>Ghost of the Deep Cover Page</title>
    <meta charset="utf-8" />
+   <meta name="viewport" 
+         content="width=device-width, initial-scale=1" />
+   <link href="gp_reset.css" rel="stylesheet" media="all"/>
+   <link href="gp_layout.css" rel="stylesheet" media="screen"/>
+   <link href="gp_print.css" rel="stylesheet" media="print"/>
 
-</head>
+</head>   
 
 <body>
    <header>

diff --git a/case1/gp_layout.css b/case1/gp_layout.css
@@ -0,0 +1,110 @@
+@charset "utf-8";
+
+/*
+   New Perspectives on HTML5 and CSS3, 7th Edition
+   Tutorial 5
+   Case Problem 1
+
+   Author:   Brett and Jeremy
+   Date:     11/7/18 
+
+   Filename: gp_layout.css
+
+   This file contains the layout styles and media
+   queries used with sample pages from the Golden
+   Pulps website.
+
+*/
+
+
+/* Import Basic Design Styles Used on All Screens */
+
+@import url("gp_designs.css");
+
+/* Flex Layout Styles */
+body{
+    display: -webkit-flex;
+    display: -khtml-flex;
+    display: -moz-flex;
+    display: -ms-flex;
+    display: -o-flex;
+    display: flex;
+    -webkit-flex-flow: row wrap;
+    -khtml-flex-flow: row wrap;
+    -moz-flex-flow: row wrap;
+    -ms-flex-flow: row wrap;
+    -o-flex-flow: row wrap;
+    flex-flow: row wrap;
+}
+
+section#sheet {
+    -webkit-flex: 3 1 301px;
+    flex: 3 1 301px;
+}
+
+article{
+    -webkit-flex: 1 3 180px;
+    flex: 1 3 180px;
+}
+
+
+
+
+/* ============================================
+	Mobile Devices: 0 - 480 pixels
+   ============================================
+*/
+@media only screen and (max-width: 480px){
+    img.panel{
+        width:100%
+    }
+
+    nav.horizontal{
+        -webkit-order: 99;
+        order: 99;
+    }
+
+    footer{
+        -webkit-order: 100;
+        order: 100;
+    }
+
+}
+
+
+
+
+/* ===================================================
+	Tablet and Desktop Devices: Greater than 480 pixels
+   ===================================================
+*/
+@media only screen and (min-width: 481px){
+    nav.horizontal ul{
+        display: -webkit-flex;
+        display: flex;
+        -webkit-flex-flow: row nowrap;
+        flex-flow: row nowrap;
+        height: 40px;
+    }
+
+    nav.horizontal ul li{
+        -webkit-flex: 1 1 auto;
+        flex: 1 1 auto;
+    }
+
+    img[class^="panel size1"] {
+        width: 100%;
+    }
+
+    img[class^="panel size2"] {
+        width: 60%;
+    }
+    img[class^="panel size3"] {
+        width: 40%;
+    }
+    img[class^="panel size4"] {
+        width: 30%;
+    }
+
+}
+
diff --git a/case1/gp_layout_txt.css b/case1/gp_layout_txt.css
diff --git a/case1/gp_page1_txt.html → case1/gp_page1.html b/case1/gp_page1_txt.html → case1/gp_page1.html
@@ -7,14 +7,18 @@
           Case Problem 1
 
           Ghost of the Deep Page 1
-          Author: 
-          Date:   
-
+          Author:   Brett and Jeremy
+          Date:     11/7/18 
           Filename: gp_page1.html
          -->
 
    <title>Ghost of the Deep Page 1</title>
    <meta charset="utf-8" />
+   <meta name="viewport" 
+         content="width=device-width, initial-scale=1" />
+   <link href="gp_reset.css" rel="stylesheet" media="all"/>
+   <link href="gp_layout.css" rel="stylesheet" media="screen"/>
+   <link href="gp_print.css" rel="stylesheet" media="print"/>
    </head>
 
 <body>

diff --git a/case1/gp_page2_txt.html → case1/gp_page2.html b/case1/gp_page2_txt.html → case1/gp_page2.html
@@ -7,14 +7,19 @@
           Case Problem 1
 
           Ghost of the Deep Page 2
-          Author: 
-          Date:   
+          Author:   Brett and Jeremy
+          Date:     11/7/18 
 
           Filename: gp_page2.html
          -->
 
    <title>Ghost of the Deep Page 2</title>
    <meta charset="utf-8" />
+   <meta name="viewport" 
+         content="width=device-width, initial-scale=1" />
+   <link href="gp_reset.css" rel="stylesheet" media="all"/>
+   <link href="gp_layout.css" rel="stylesheet" media="screen"/>
+   <link href="gp_print.css" rel="stylesheet" media="print"/>
    </head>
 
 <body>

diff --git a/case1/gp_page3_txt.html → case1/gp_page3.html b/case1/gp_page3_txt.html → case1/gp_page3.html
@@ -7,14 +7,19 @@
           Case Problem 1
 
           Ghost of the Deep Page 3
-          Author: 
-          Date:   
+          Author:   Brett and Jeremy
+          Date:     11/7/18 
 
           Filename: gp_page3.html
          -->
 
    <title>Ghost of the Deep Page 3</title>
    <meta charset="utf-8" />
+      <meta name="viewport" 
+         content="width=device-width, initial-scale=1" />
+   <link href="gp_reset.css" rel="stylesheet" media="all"/>
+   <link href="gp_layout.css" rel="stylesheet" media="screen"/>
+   <link href="gp_print.css" rel="stylesheet" media="print"/>
    </head>
 
 <body>

diff --git a/case1/gp_print.css b/case1/gp_print.css
@@ -0,0 +1,61 @@
+@charset "utf-8";
+/*
+   New Perspectives on HTML5 and CSS3, 7th Edition
+   Tutorial 5
+   Case Problem 1
+
+   Author:   Brett and Jeremy
+   Date:     11/7/18 
+
+   Filename: gp_print.css
+
+   This file contains the printer styles used with the sample
+   comic book pages from Golden Pulps.
+
+*/
+
+
+
+/* Hidden Objects */
+nav, footer, article {
+    display: none;
+}
+
+
+
+
+
+
+/* Comic Book Sheet Styles */
+section#sheet {
+    width: 6in;
+    margin-top: 0in;
+    margin-bottom: 0in;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+img[class^="panel size1"] {
+    width: 5in;
+}
+
+img[class^="panel size2"] {
+    width: 3in;
+}
+img[class^="panel size3"] {
+    width: 2in;
+}
+img[class^="panel size4"] {
+    width: 1.5in;
+}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/case1/gp_print_txt.css b/case1/gp_print_txt.css