gp_designs.css
@charset "utf-8";
html {
background-color: rgb(211, 255, 211);
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
}
body {
background-color: rgb(242, 221, 174);
box-shadow: 15px 0px 30px rgb(51, 51, 51),
-15px 0px 30px rgb(51, 51, 51);
margin: 0px auto;
max-width: 1024px;
}
body > header {
background: url("gp_back1.png") center center / cover no-repeat;
text-align: center;
width: 100%;
}
body > header > img {
display: inline;
width: 70%;
max-width: 400px;
text-align: center;
}
/* Horizontal Navigation Styles */
nav.horizontal {
height: auto;
width: 100%;
}
nav.horizontal ul {
background-color: rgb(212, 175, 55);
text-align: center;
width: 100%;
}
nav.horizontal li {
font-family: 'Comic Sans MS', cursive;
font-size: 1.4em;
line-height: 2em;
list-style-type: none;
width: 100%;
}
nav.horizontal li a {
color: black;
display: block;
width: 100%;
}
nav.horizontal li a:hover, nav.horizontal li a:active {
color: white;
background-color: rgb(51, 51, 51);
}
/* Article Styles */
article {
padding: 10px;
}
article h1 {
text-align: center;
font-size: 1.4em;
letter-spacing: 3px;
}
article p {
font-size: 1.4em;
line-height: 1.2;
margin: 20px 0px;
}
/* Comic Book Sheet Styles */
section#sheet {
border: 1px solid rgb(101, 101, 101);
background-color: white;
padding: 10px 10px 0px 10px;
}
section#sheet h1 {
font-size: 1.4em;
text-align: center;
letter-spacing: 3px;
margin: 5px;
}
section#sheet footer {
text-align: center;
width: 100%;
clear: left;
}
nav#pages {
padding-bottom: 10px;
}
nav#pages::after {
content: "";
display: table;
clear: both;
}
nav#pages a {
background-color: rgb(242, 221, 174);
border: 1px solid rgb(101, 101, 101);
box-shadow: rgb(51, 51, 51) 2px 2px 5px;
display: block;
float: left;
margin: 4px;
padding: 2px;
text-align: center;
width: 20px;
}
nav#pages a:first-of-type {
width: 80px;
}
nav#pages a#current {
background-color: rgb(51, 51, 51);
color: white;
}
img.panel {
float: left;
display: block;
}
body > footer {
color: white;
background-color: rgb(51, 51, 51);
text-align: center;
line-height: 2em;
width: 100%;
}
gp_layout.css
@charset "utf-8";
/* Import Basic Design Styles Used on All Screens */
@import url("gp_designs.css");
/* Flex Layout Styles */
body {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
/*This makes the entire body flexible and wrapable for resizing.*/
section#sheet {
-webkit-flex: 3 1 301px;
flex: 3 1 301px;
}
/*This makes the section have a scale factor of 3, a shrink factor of 1, and a basis of 301 pixels.*/
article {
-webkit-flex: 1 3 180px;
flex: 1 3 180px;
}
/*This makes the section have a scale factor of 1, a shrink factor of 3, and a basis of 180 pixels.*/
/* ============================================
Mobile Devices: 0 - 480 pixels
============================================
*/
@media only screen and (max-width: 480px) {
nav {
-webkit-order: 99;
order: 99;
}
body footer {
-webkit-order: 100;
order: 100;
}
}
/*This entire media style rule makes the nav go ontop of the body footer for when the screen reaches mobile size.*/
/* ===================================================
Tablet and Desktop Devices: Greater than 480 pixels
===================================================
*/
@media only screen and (min-width: 481px) {
nav.horizontal ul {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
height: 40px;
}
/*This section makes the nav element in screens 481 pixels or greater flexible with no wrap, and gives a height of 40 pixels.*/
nav.horizontal ul li {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
/*This makes the text in the nav element have a scale and shrink factor of 1, and makes the basis automatically determined by the computer.*/
img.size1 {
width: 100%;
}
img.size2 {
width: 60%;
}
img.size3 {
width: 40%;
}
img.size4 {
width: 30%;
}
}
/*These four image styles make the images sized to fit like a comic book, and makes certain images certain sized depending on the class name.*/
gp_page1.html
<!DOCTYPE html>
<html>
<head>
<title>Ghost of the Deep Page 1</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="gp_reset.css" media="all">
<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>
<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>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>
gp_page3.html
<!DOCTYPE html>
<html>
<head>
<title>Ghost of the Deep Page 3</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="gp_reset.css" media="all">
<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>
</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>
gp_print.css
@charset "utf-8";
/* Hidden Objects */
nav, footer, article {
display: none;
}
/*This hides the 3 element when printing the website.*/
/* Comic Book Sheet Styles */
section#sheet {
width: 6in;
margin: 0 auto;
}
/*This makes the width 6 inches and positions the element so that it's centered.*/
img.size1 {
width: 5in;
}
img.size2 {
width: 3in;
}
img.size3 {
width: 2in;
}
img.size4 {
width: 1.5in;
}
/*These 4 elements set the size of the images to look like it's in a comic book by sizing them to properly fit into the page.*/
gp_reset.css
@charset "utf-8";
/* 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;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ghost of the Deep Cover Page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="gp_reset.css" media="all">
<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>
<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>
Note:-----
If you have any doubts then comment below i am very happy to solve your doubts thank you please don't give negative reviews it's very important for me please thumbs up sir please sir
