Untitled
unknown
plain_text
2 months ago
19 kB
6
Indexable
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1
Ghost of the Deep Page 1
Author: John Robert Cabatbat
Date: 02/08/2025
Filename: gp_page1.html
-->
<title>Ghost of the Deep Page 1</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="gp_reset.css">
<link rel="stylesheet" href="gp_layout.css" media="screen">
<link rel="stylesheet" href="gp_print.css" 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>
<nav id="arrows">
<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>
</nav>
<nav id="pages">
<a href="gp_cover.html">Cover</a>
<a href="gp_page1.html" id="current"> 1 </a><a href="gp_page2.html"> 2 </a><a href="gp_page3.html"> 3 </a>
<a href="#"> 4 </a><a href="#"> 5 </a><a href="#"> 6 </a>
<a href="#"> 7 </a><a href="#"> 8 </a><a href="#"> 9 </a>
<a href="#"> 10 </a><a href="#"> 11 </a><a href="#"> 12 </a>
<a href="#"> 13 </a><a href="#"> 14 </a><a href="#"> 15 </a>
<a href="#"> 16 </a><a href="#"> 17 </a><a href="#"> 18 </a>
<a href="#"> 19 </a><a href="#"> 20 </a><a href="#"> 21 </a>
</nav>
</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 — "Captain Billy".</p>
<p>Billy Batson makes his transformation in Captain Marvel by speaking the word <em>Shazam!</em>,
an acronymn of the six powers possessed by heroes of the ancient world: the wisdom of
<strong>S</strong>olomon, the strength of <strong>H</strong>ercules, the stamina of
<strong>A</strong>tlas, the power of <strong>Z</strong>eus, the courage of
<strong>A</strong>chilles, and the speed of <strong>M</strong>ercury.</p>
</article>
<footer>
Golden Pulps: A Comic Book Resource for Collectors and Fans
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1
Ghost of the Deep Page 2
Author: John Robert Cabatbat
Date: 02/08/2025
Filename: gp_page2.html
-->
<title>Ghost of the Deep Page 2</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="gp_reset.css">
<link rel="stylesheet" href="gp_layout.css" media="screen">
<link rel="stylesheet" href="gp_print.css" 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>
<nav id="pages">
<a href="gp_cover.html">Cover</a>
<a href="gp_page1.html"> 1 </a><a href="gp_page2.html" id="current"> 2 </a><a href="gp_page3.html"> 3 </a>
<a href="#"> 4 </a><a href="gp_page2.html"> 5 </a><a href="#"> 6 </a>
<a href="#"> 7 </a><a href="gp_page2.html"> 8 </a><a href="#"> 9 </a>
<a href="#"> 10 </a><a href="gp_page2.html"> 11 </a><a href="#"> 12 </a>
<a href="#"> 13 </a><a href="gp_page2.html"> 14 </a><a href="#"> 15 </a>
<a href="#"> 16 </a><a href="gp_page2.html"> 17 </a><a href="#"> 18 </a>
<a href="#"> 19 </a><a href="gp_page2.html"> 20 </a><a href="#"> 21 </a>
</nav>
</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>
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1
Ghost of the Deep Page 3
Author: John Robert Cabatbat
Date: 02/08/2025
Filename: gp_page3.html
-->
<title>Ghost of the Deep Page 3</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="gp_reset.css">
<link rel="stylesheet" href="gp_layout.css" media="screen">
<link rel="stylesheet" href="gp_print.css" 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_panel12.png" class="panel size2" alt="" />
<img src="gp_panel13.png" class="panel size3" alt="" />
<img src="gp_panel14.png" class="panel size3" alt="" />
<img src="gp_panel15.png" class="panel size2" alt="" />
<img src="gp_panel16.png" class="panel size3" alt="" />
<img src="gp_panel17.png" class="panel size2" alt="" />
<footer>
<a href="gp_page2.html"><img src="gp_prev.png" alt="prev" /></a>
<nav id="pages">
<a href="gp_cover.html">Cover</a>
<a href="gp_page1.html"> 1 </a><a href="gp_page2.html"> 2 </a><a href="gp_page3.html" id="current"> 3 </a>
<a href="#"> 4 </a><a href="gp_page2.html"> 5 </a><a href="#"> 6 </a>
<a href="#"> 7 </a><a href="gp_page2.html"> 8 </a><a href="#"> 9 </a>
<a href="#"> 10 </a><a href="gp_page2.html"> 11 </a><a href="#"> 12 </a>
<a href="#"> 13 </a><a href="gp_page2.html"> 14 </a><a href="#"> 15 </a>
<a href="#"> 16 </a><a href="gp_page2.html"> 17 </a><a href="#"> 18 </a>
<a href="#"> 19 </a><a href="gp_page2.html"> 20 </a><a href="#"> 21 </a>
</nav>
</footer>
</section>
<article>
<h1>Marvel and the Nazis</h1>
<p>The drama of World War II also played itself out in the adventures of the golden-era
comic books. Many of Captain Marvel's adventures were based on thwarting nefarious
plots hatched by Nazis and Nazi sympathizers. The most prominent of Captain
Marvel's opponents in this regard was certainly <a href="#">Captain Nazi</a>.</p>
<p>Captain Nazi was a genetically altered "super soldier" given superhuman strength,
stamina, and the ability to fly. Acting as a Adolph Hitler's champion, Captain
Nazi was sent personally by the fuhrer to do battle with America's superheroes
including both Captain Marvel and <a href="#">Bulletman</a>. He made in last
appearance in a Fawcett comic book in 1944 but was later revised his role in
several DC Comics reboots of the Captain Marvel franchise.</p>
<p>The <a href="#">Monster Society of Evil</a> was home to several infamous characters
from the Second World War. Adolph Hitler, Benito Mussolini and Tojo.
were charters members, along with other prominent Nazis and war criminals.
One of the schemes hatched by the society involved using
Captain Nazi to steal magic fortune-telling pearls from an Egyptian princess.
Another plot saw the society attempting to use a giant cannon to blow holes in
various countries across the world. In all of these schemes, Captain Marvel was
always there to save the day for the freedom-loving countries of the world.</p>
</article>
<footer>
Golden Pulps: A Comic Book Resource for Collectors and Fans
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1
Ghost of the Deep Cover Page
Author: John Robert Cabatbat
Date: 02/08/2025
Filename: gp_cover.html
-->
<title>Ghost of the Deep Cover Page</title>
<meta charset="utf-8" />
<meta name="viewport" cotent="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="gp_reset.css">
<link rel="stylesheet" href="gp_layout.css" media="screen">
<link rel="stylesheet" href="gp_print.css" 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>
<nav id="arrows">
<a href="gp_page1.html"><img src="gp_next.png" alt="next" /></a>
</nav>
<nav id="pages">
<a href="gp_cover.html" id="current">Cover</a>
<a href="gp_page1.html"> 1 </a><a href="gp_page2.html"> 2 </a><a href="gp_page3.html"> 3 </a>
<a href="#"> 4 </a><a href="gp_page2.html"> 5 </a><a href="#"> 6 </a>
<a href="#"> 7 </a><a href="gp_page2.html"> 8 </a><a href="#"> 9 </a>
<a href="#"> 10 </a><a href="gp_page2.html"> 11 </a><a href="#"> 12 </a>
<a href="#"> 13 </a><a href="gp_page2.html"> 14 </a><a href="#"> 15 </a>
<a href="#"> 16 </a><a href="gp_page2.html"> 17 </a><a href="#"> 18 </a>
<a href="#"> 19 </a><a href="gp_page2.html"> 20 </a><a href="#"> 21 </a>
</nav>
</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>
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1
Author: John Robert Cabatbat
Date: 02/08/2025
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: flex;
flex-wrap: wrap;
flex-direction: row;
}
section#sheet {
flex-grow: 3;
flex-shrink: 1;
flex-basis: 301px;
}
article {
flex-grow: 1;
flex-shrink: 3;
flex-basis: 180px;
}
/* ============================================
Mobile Devices: 0 - 480 pixels
============================================
*/
@media screen and (max-width: 480px){
img.panel {
width: 100%;
}
nav.horizontal {
order: 99;
}
body > footer {
order:100;
}
}
/* ===================================================
Tablet and Desktop Devices: Greater than 480 pixels
===================================================
*/
@media screen and (min-width: 480px) {
nav.horizontal ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 40px;
}
nav.horizontal ul li {
flex: 1 1 auto;
}
img.size1 {
width: 100%;
}
img.size2 {
width: 60%;
}
img.size3 {
width: 40%;
}
img.size4 {
width: 30px;
}
}
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1
Author: John Robert Cabatbat
Date: 02/08/2025
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: 0 auto;
}
img.size1 {
width: 5in;
}
img.size2 {
width: 3in;
}
img.size3 {
width: 2in;
}
img.size4 {
width: 1.5in;
}
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1
Golden Pulps Reset Style Sheet
Filename: gp_reset.css
*/
/* Basic styles to be used with all devices and under all conditions */
article, aside, figcaption, figure,
footer, header, main, nav, section {
display: block;
}
address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, nav a, ol, p, section, span, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Set the default page element styles */
body {
line-height: 1.2em;
}
ul, ol {
list-style: none;
}
nav ul {
list-style: none;
list-style-image: none;
}
nav a {
text-decoration: none;
}
Editor is loading...
Leave a Comment