LewisAndClark-CSD · LaneDoyle · Nov 6, 2018 · Nov 6, 2018 · Nov 6, 2018 · Nov 6, 2018
diff --git a/README.md b/README.md
@@ -1 +1,37 @@
-# html05
+## Welcome to GitHub Pages
+
+You can use the [editor on GitHub](https://github.com/LaneDoyle/html05/edit/master/README.md) to maintain and preview the content for your website in Markdown files.
+
+Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files.
+
+### Markdown
+
+Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
+
+```markdown
+Syntax highlighted code block
+
+# Header 1
+## Header 2
+### Header 3
+
+- Bulleted
+- List
+
+1. Numbered
+2. List
+
+**Bold** and _Italic_ and `Code` text
+
+[Link](url) and ![Image](src)
+```
+
+For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/).
+
+### Jekyll Themes
+
+Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/LaneDoyle/html05/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file.
+
+### Support or Contact
+
+Having trouble with Pages? Check out our [documentation](https://help.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out.
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-cayman
diff --git a/case1/gp_cover.html b/case1/gp_cover.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+   <!--
+          New Perspectives on HTML5 and CSS3, 7th Edition
+          Tutorial 5
+          Case Problem 1
+
+          Ghost of the Deep Cover Page
+          Author: Dylan B and Lane D
+          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>
+
+<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,110 @@
+@charset "utf-8";
+
+/*
+   New Perspectives on HTML5 and CSS3, 7th Edition
+   Tutorial 5
+   Case Problem 1
+
+   Author:   Dylan B and Lane D
+   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-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    -webkit-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;
+    }
+
+    body > 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-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        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.size1 {
+        width: 100%;
+    }
+
+    img.size2 {
+        width: 60%;
+    }
+
+    img.size3 {
+        width: 40%;
+    }
+
+    img.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: Dylan B and Lane D
+          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>
+   <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,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+   <!--
+          New Perspectives on HTML5 and CSS3, 7th Edition
+          Tutorial 5
+          Case Problem 1
+
+          Ghost of the Deep Page 2
+          Author: Dylan B and Lane D
+          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>
+   <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>