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