Skip to content

E. Ruiz and Cameron Odom #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ruiz2019 wants to merge 24 commits into
base: master
Choose a base branch
from
Open

E. Ruiz and Cameron Odom #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
b9799b9
linked stylesheets to home.html and set up structure for the organiza…
ruiz2019 Nov 6, 2018
08c5cf7
forgot to save before previous commit
ruiz2019 Nov 6, 2018
24d347c
began adding style rules to specifically format content for devices w…
ruiz2019 Nov 6, 2018
7d9040a
completed tutorial and fixed css error that caused webpage to not dis…
ruiz2019 Nov 6, 2018
654ce46
completed 5.1 and fixed css error that caused the webpage to not disp…
ruiz2019 Nov 6, 2018
893362f
started adding style rules for displaying prek.html in smaller screen…
ruiz2019 Nov 6, 2018
a822185
completed 5.2 with adding hover functionality to navigation bar links…
ruiz2019 Nov 6, 2018
2f499b4
finished html05 tutorial
ruiz2019 Nov 6, 2018
47cc8bd
finished up to step 16 on html05 review
ruiz2019 Nov 6, 2018
7ee1b26
Merge branch 'master' of https://github.com/LewisAndClark-CSD/html05
ruiz2019 Nov 6, 2018
8ea7642
completed tutorial after adding tablet (>481px) styles and styles for…
ruiz2019 Nov 7, 2018
a14e26d
Finsihed all of case 1
ruiz2019 Nov 7, 2018
bbbb9b7
completed case 2
ruiz2019 Nov 7, 2018
3f1bb54
began creating styles for home.html in case 3
ruiz2019 Nov 7, 2018
8ea4aa3
Finished html05 case3
Nov 8, 2018
7081618
Merge pull request #1 from JamesCameron01/master
ruiz2019 Nov 12, 2018
6e53f50
retroactively added flexbox support for older browsers in tutorial th…
ruiz2019 Nov 12, 2018
ac0a175
began html for case 4
ruiz2019 Nov 12, 2018
95bdc17
worked on layout and aesthetic design of case 4 website
ruiz2019 Nov 12, 2018
633a73f
added more visual elements to the desktop site
Nov 14, 2018
658ebdd
Merge pull request #2 from JamesCameron01/master
ruiz2019 Nov 14, 2018
ecf759b
worked on formatting the flexbox containing the slang terms in case 4
ruiz2019 Nov 14, 2018
3051932
FINALLY completed the navicon
ruiz2019 Nov 16, 2018
7380983
finished fixing mobile and desktop styles for case 4
ruiz2019 Nov 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions case1/gp_cover.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1

Author:Cameron Odom & Ruiz
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>
97 changes: 97 additions & 0 deletions case1/gp_layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
@charset "utf-8";

/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1

Author:Cameron Odom & Ruiz
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.

*/


/* 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.horrizontal ul{
-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%;
}
}
71 changes: 71 additions & 0 deletions case1/gp_page1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:Cameron Odom & Ruiz
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>
83 changes: 83 additions & 0 deletions case1/gp_page2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:Cameron Odom & Ruiz
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>
Loading