LewisAndClark-CSD · StevenWThomp · Nov 6, 2018 · Nov 6, 2018 · Nov 6, 2018 · Nov 6, 2018
diff --git a/case1/gp_cover.html b/case1/gp_cover.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+   <!--
+          New Perspectives on HTML5 and CSS3, 7th Edition
+          Tutorial 5
+          Case Problem 1
+
+          Ghost of the Deep Cover Page
+
+          Author:   Steven Thompson & James Allen
+          Date:     November 7, 2018      
+
+          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>
+
+<body>
+   <header>
+      <img src="gp_logo.png" alt="Golden Pulp" />
+   </header>
+   <nav class="horizontal">
+      <ul>
+         <li><a href="#">Home</a></li>
+         <li><a href="#">Comic Books</a></li>
+         <li><a href="#">Characters</a></li>
+         <li><a href="#">Artists</a></li>
+         <li><a href="#">Writers</a></li>
+      </ul>
+   </nav>
+
+   <section id="sheet">
+      <h1>Capt. Marvel and the Ghost of the Deep</h1>
+      <img src="gp_panel01.png" class="panel size1" alt="" />
+      <footer>
+            <a href="gp_page1.html"><img src="gp_next.png" alt="next" /></a>
+      </footer>
+   </section>
+
+   <article>
+      <h1>Fawcett Comics</h1>
+      <p>One of the most successful comic book publisher in the 1940's, Fawcett Publications 
+         began in 1919 with the magazine, <cite>Captain Billy's Whiz Bang</cite>. Its total
+         circulation from all of its publications eventually reached over 10 million issues
+         a month.</p>
+      <p>Fawcett is best known for its popular superhero, Captain Marvel, based on the
+         adventures of radio reporter Billy Batson who would turn into Captain Marvel
+         upon uttering the word <em>Shazam!</em>. Other successful characters include
+         Ibis the Invincible, Hopalong Cassidy, and Mister Scarlet. Fawcett was also known 
+         for its series of horror comics including <cite>Beware! Terror Tales</cite>, 
+         <cite>Worlds of Fear</cite>, and <cite>Strange Suspense Stories</cite>. The
+         company branched out into humor comic magazines with <cite>Otis and Babs</cite> 
+         and <cite>Hoppy the Marvel Bunny</cite> among its most popular titles.</p>
+      <p>Facing declining sales, Fawcett Comics ceased publication of its superhero
+         titles in 1953. Several of its titles were eventually sold to Charlton
+         Comics.</p>
+   </article>
+
+   <footer>
+      Golden Pulps: A Comic Book Resource for Collectors and Fans
+   </footer>
+
+</body>
+</html>
diff --git a/case1/gp_layout.css b/case1/gp_layout.css
@@ -0,0 +1,160 @@
+@charset "utf-8";
+
+/*
+   New Perspectives on HTML5 and CSS3, 7th Edition
+   Tutorial 5
+   Case Problem 1
+
+   Author:   Steven Thompson & James Allen
+   Date:     November 7, 2018
+
+   Filename: gp_layout.css
+
+   This file contains the layout styles and media
+   queries used with sample pages from the Golden
+   Pulps website.
+
+   Cross-Browser extensions:
+    -webkit-box
+    -moz-box
+    -ms-flexbox
+    -webkit-flex
+    flex
+
+*/
+
+
+/* Import Basic Design Styles Used on All Screens */
+
+@import url("gp_designs.css");
+
+/* Flex Layout Styles */
+    body{
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+
+        -webkit-box-flow: row wrap;
+        -moz-box-flow: row wrap;
+        -ms-flexbox: row wrap;
+        -webkit-flex-flow: row wrap;
+        flex-flow: row wrap;
+    }
+    body header img#logo{
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+
+        -webkit-box-flow: row wrap;
+        -moz-box-flow: row wrap;
+        -ms-flexbox: row wrap;
+        -webkit-flex-flow: row wrap;
+        flex-flow: row wrap;
+
+        -webkit-box-flex: 1 3 301px;
+        -moz-box-flex: 1 3 301px;
+        -ms-flexbox: 1 3 301px;
+        -webkit-flex: 1 3 301px;
+        flex: 1 3 301px;
+    }
+
+    section#sheet{
+        -webkit-box-flex: 3 1 301px;
+        -moz-box-flex: 3 1 301px;
+        -ms-flexbox: 3 1 301px;
+        -webkit-flex: 3 1 301px;
+        flex: 3 1 301px;
+    }
+
+    article{
+        -webkit-box-flex: 1 3 180px;
+        -moz-box-flex: 1 3 180px;
+        -ms-flexbox: 1 3 180px;
+        -webkit-flex: 1 3 180px;
+        flex: 1 3 180px;
+    }
+
+
+
+/* ============================================
+	Mobile Devices: 0 - 480 pixels
+   ============================================
+*/
+
+@media only screen and (max-width: 480px){
+
+    .panel img{
+        width: 100%;
+    }
+
+    .horizontal {
+        -webkit-box-order: 99;
+        -moz-box-order: 99;
+        -ms-order: 99;
+        -webkit-order: 99;
+        order: 99;
+    }
+
+    body > footer{
+        -webkit-box-order: 100;
+        -moz-box-order: 100;
+        -ms-order: 100;
+        -webkit-order: 100;
+        order: 100;
+    }
+}
+
+
+
+/* ===================================================
+	Tablet and Desktop Devices: Greater than 480 pixels
+   ===================================================
+*/
+
+@media only screen and (min-width: 481px){
+    .horizontal ul{
+
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-box-flow: row nowrap;
+        -moz-box-flow: row nowrap;
+        -ms-flexbox: row nowrap;
+        -webkit-flex-flow: row nowrap;
+        flex-flow: row nowrap;
+
+        height: 40px;
+
+    }
+
+    .horizontal ul li{
+        -webkit-box: 1 1 auto;
+        -moz-box: 1 1 auto;
+        -ms-flexbox: 1 1 auto;
+        -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_page1.html b/case1/gp_page1.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+   <!--
+          New Perspectives on HTML5 and CSS3, 7th Edition
+          Tutorial 5
+          Case Problem 1
+
+          Ghost of the Deep Page 1
+          Author:   Steven Thompson & James Allen
+          Date:     November 7, 2018
+
+          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>
+   <header>
+      <img src="gp_logo.png" alt="Golden Pulp" />
+   </header>
+
+   <nav class="horizontal">
+      <ul>
+         <li><a href="#">Home</a></li>
+         <li><a href="#">Comic Books</a></li>
+         <li><a href="#">Characters</a></li>
+         <li><a href="#">Artists</a></li>
+         <li><a href="#">Writers</a></li>
+      </ul>
+   </nav>
+
+   <section id="sheet">
+      <h1>Capt. Marvel and the Ghost of the Deep</h1>
+
+      <img src="gp_panel02.png" class="panel size1" alt="" /> 
+      <img src="gp_panel03.png" class="panel size2" alt="" /> 
+      <img src="gp_panel04.png" class="panel size3" alt="" /> 
+
+      <footer>
+         <a href="gp_cover.html"><img src="gp_prev.png" alt="prev" /></a>
+         <a href="gp_page2.html"><img src="gp_next.png" alt="next" /></a>
+      </footer>
+
+   </section>
+
+   <article>
+      <h1>Captain Marvel</h1>
+      <p>In response to the popularity of Superman and Batman, Fawcett Comics introduced
+         Captain Thunder in the 1939 issue of <a href="#">Flash Comics #1</a>. The issue
+         was an <em>ashcan copy</em>, a term for low-print runs whose purpose was not sales
+         but to establish a trademark claim for legal purposes. Due to trademark infringements 
+         with another established character, Captain Thunder became Captain Marvelous and later
+         Captain Marvel. Flash Comics became Whiz Comics (also due to trademark issues.)</p>
+      <p>Captain Marvel's alter ego was a 12-year old radio reporter named Billy Batson, a
+         copy of Superman's alter ego, reporter Clark Kent, but younger to appeal to adolescent
+         readers. Billy Batson's name was partially based on the nickname given to Fawcett Publication's
+         founder Wilford Fawcett &mdash; "Captain Billy".</p>
+   </article>
+
+   <footer>
+      Golden Pulps: A Comic Book Resource for Collectors and Fans
+   </footer>
+</body>
+</html>
diff --git a/case1/gp_page2.html b/case1/gp_page2.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+   <!--
+          New Perspectives on HTML5 and CSS3, 7th Edition
+          Tutorial 5
+          Case Problem 1
+
+          Ghost of the Deep Page 2
+
+          Author:   Steven Thompson & James Allen
+          Date:     November 7, 2018
+
+          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>
+   <header>
+      <img src="gp_logo.png" alt="Golden Pulp" />
+   </header>
+
+   <nav class="horizontal">
+      <ul>
+         <li><a href="#">Home</a></li>
+         <li><a href="#">Comic Books</a></li>
+         <li><a href="#">Characters</a></li>
+         <li><a href="#">Artists</a></li>
+         <li><a href="#">Writers</a></li>
+      </ul>
+   </nav>
+
+   <section id="sheet">
+      <h1>Capt. Marvel and the Ghost of the Deep</h1>
+
+      <img src="gp_panel05.png" class="panel size2" alt="" /> 
+      <img src="gp_panel06.png" class="panel size3" alt="" /> 
+      <img src="gp_panel07.png" class="panel size2" alt="" /> 
+      <img src="gp_panel08.png" class="panel size3" alt="" /> 
+      <img src="gp_panel09.png" class="panel size4" alt="" /> 
+      <img src="gp_panel10.png" class="panel size4" alt="" /> 
+      <img src="gp_panel11.png" class="panel size3" alt="" /> 
+
+
+      <footer>
+         <a href="gp_page1.html"><img src="gp_prev.png" alt="prev" /></a>
+         <a href="gp_page3.html"><img src="gp_next.png" alt="next" /></a>                 
+      </footer>
+   </section>
+
+   <article>
+      <h1>Marvel's Adversaries</h1>
+      <p>Captain Marvel's arch enemy was the mad scientist <a href="#">Doctor Sivana</a>,
+         who regularly plotted elaborate schemes to rule the world and defeat both
+         Captain Marvel and America.
+         Sivana had four children who also had prominent roles in Captain Marvel's adventures.
+         Two evil children, Georgia and Sivana, Jr., resembled their father both physically
+         and in their desire to conquer the Earth. Sivana's daughter Beautia however, loved
+         Captain Marvel and Sivana's son, Magnificus, was also a sometime-ally of the
+         Captain.</p>
+      <p>Marvel's other adversaries included <a href="#">Captain Nazi</a> and a nuclear-powered
+         robot named <a href="#">Mister Atom</a>. Matching Captain Marvel's adopted power from
+         ancient heroes was <a href="#">Ibac</a>, an evil magician who gained his power from
+         the ancient villians <strong>I</strong>van the Terrible, Cesare <strong>B</strong>orgia,
+         <strong>A</strong>ttila the Hun, and <strong>C</strong>aligula.</p>
+      <p>One of the more popular serials in the Fawcett Comics run of Captain Marvel adventures
+         was the <a href="#">Monster Society of Evil</a> story arc which involved several
+         of Marvel's adversaries from previous issues, including Doctor Sivana, Captain Nazi,
+         and Ibac. The society was led by the cunning <a href="#">Mister Mind</a>, a character who was
+         eventually revealed to be a highly intelligent worm from another planet.</p>
+   </article>
+
+   <footer>
+      Golden Pulps: A Comic Book Resource for Collectors and Fans
+   </footer>
+</body>
+</html>