Designing for the Mobile Web CSS3 HTML5

I have included the data files to for the mobile web using a CSS style sheet. The instructions are included in the pictures. The final product should exactly match the model on Figure 5-59. 

NOTE: PLEASE DO NOT REMOVE THE TOP COMMENTS SECTION THAT INCLUDES THE NAME AND DATE! THANK YOU

• Home
• Comic Books
• Characters
• Artists
• Writers

Capt. Marvel and the Ghost of the Deep

Fawcett Comics

One of the most successful comic book publisher in the 1940’s, Fawcett Publications
began in 1919 with the magazine, Captain Billy’s Whiz Bang. Its total
circulation from all of its publications eventually reached over 10 million issues
a month.

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 Shazam!. Other successful characters include
Ibis the Invincible, Hopalong Cassidy, and Mister Scarlet. Fawcett was also known
for its series of horror comics including Beware! Terror Tales,
Worlds of Fear, and Strange Suspense Stories. The
company branched out into humor comic magazines with Otis and Babs
and Hoppy the Marvel Bunny among its most popular titles.

Facing declining sales, Fawcett Comics ceased publication of its superhero
titles in 1953. Several of its titles were eventually sold to Charlton
Comics.

Golden Pulps: A Comic Book Resource for Collectors and Fans

@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1

Filename: gp_designs.css
This file design style used by all screen sizes for
the Golden Pulps sample comic book pages
*/

/* =============================================
Base styles used by All Screens
=============================================
*/

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 “) 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;
}

/* Navigation Pages Styles */
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;
}
/* Comic Image Panel Styles */
img.panel {
float: left;
display: block;
}

/* Body Footer Styles */
body > footer {
color: white;
background-color: rgb(51, 51, 51);
text-align: center;
line-height: 2em;
width: 100%;
}

@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1

Author:
Date:

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 */

/* ============================================
Mobile Devices: 0 – 480 pixels
============================================
*/

/* ===================================================
Tablet and Desktop Devices: Greater than 480 pixels
===================================================
*/

• Home
• Comic Books
• Characters
• Artists
• Writers

Capt. Marvel and the Ghost of the Deep

Captain Marvel

In response to the popularity of Superman and Batman, Fawcett Comics introduced
Captain Thunder in the 1939 issue of

Flash Comics #1

. The issue
was an ashcan copy, 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.)

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”.

Golden Pulps: A Comic Book Resource for Collectors and Fans

• Home
• Comic Books
• Characters
• Artists
• Writers

Capt. Marvel and the Ghost of the Deep

Marvel’s Adversaries

Captain Marvel’s arch enemy was the mad scientist

Doctor Sivana

,
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.

Marvel’s other adversaries included

Captain Nazi

and a nuclear-powered
robot named

Mister Atom

. Matching Captain Marvel’s adopted power from
ancient heroes was

Ibac

, an evil magician who gained his power from
the ancient villians Ivan the Terrible, Cesare Borgia,
Attila the Hun, and Caligula.

One of the more popular serials in the Fawcett Comics run of Captain Marvel adventures
was the

Monster Society of Evil

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

Mister Mind

, a character who was
eventually revealed to be a highly intelligent worm from another planet.

Golden Pulps: A Comic Book Resource for Collectors and Fans

• Home
• Comic Books
• Characters
• Artists
• Writers

Capt. Marvel and the Ghost of the Deep

Marvel and the Nazis

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

Captain Nazi

.

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

Bulletman

. 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.

The

Monster Society of Evil

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.

Golden Pulps: A Comic Book Resource for Collectors and Fans

@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1

Author:
Date:

Filename: gp_print.css
This file contains the printer styles used with the sample
comic book pages from Golden Pulps.
*/

/* Hidden Objects */

/* Comic Book Sheet Styles */

@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;
}