Designing a Page Layout CSS3 HTML5

I have included the data files to set a webpage layout using a CSS style sheet. The instructions are included in the pictures. The final product should match the model on Figure 3-65

@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 3
Review Assignment

Reset Style Sheet for the Pandaisia Chocolates Website

Filename: pc_reset2.css
*/
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, 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;
}
nav ul {
list-style: none;
list-style-image: none;
}
nav a {
text-decoration: none;
}
body {
line-height: 1;
}

/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 3
Review Assignment

Style Sheet for the Pandaisia Chocolates Monthly Specials
Author:
Date:

Filename: pc_specials.css
*/
/* Page Body Styles */

/* Image Styles */

/* Horizontal Navigation Styles */

/* Row Styles */

/* Column Styles */

/* Specials Styles */

/* Award Styles */

/* Footer Styles */

Home
The Store
My Account
Specials
Reviews
Contact Us

March Specials

Spring is coming and we’ve got some mouth-watering specials to help you celebrate
the change in seasons in style! Featured throughout March is our always-popular
Chocolate Covered Strawberries / Rose Fruit Syrup Combo, now at the special low
price of $29.95. For that special someone, consider our

Red Rose Select

box of
Spring chocolates. Remember that for every order of $25 or more,
you receive a free truffle of your choice. For orders of $100 or more we throw
in a four-piece gift box of our signature chocolates and truffles.

Red Rose Select

A classic collection of 18 signature chocolates served with a romantic
red rose for the special person in your life. One of our most popular
box sets.

$24.95

Order Now

Your Choice

Build your own collection of signature truffles
and chocolates. Now you can choose old favorites from our 24-year history
of award-winning chocolates and sweets.

$32.55

Order Now

Praline Signatures

Delicious chocolate with delicious pralines presented in a beautiful
and elegant box. Enjoy this fantastic collection inspired by the best
Parisian chocolate shops.

$39.23

Order Now

Awards

Best of Show

Confectioners Association

Five Stars

Confectioner Quarterly

Best Chocolate

Food World

Best Chocolate

Choco-Fest

Best Dessert

Choco-Fest

/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 3
Review Assignment

Style Sheet for the Pandaisia Chocolates Monthly Specials
Author: Ramisha Abbas
Date: January 8th, 2018

Filename: pc_specials.css
*/
/* Page Body Styles */
body {
margin-left: auto;
margin-right: auto;
width: 95%;
min-width: 640px;
max-width: 960px;
}

/* Image Styles */
body > header > img {
display: block;
width: 100%;
}
/* Horizontal Navigation Styles */
nav.horizontal li{
display:block;
float:left;
width:16.66%;

nav.horizontalNavigation a {
display: block;
/* Row Styles */
div.newRow {
clear:both;
width: 100%
}

div.newRow::after {
clear:both;
content: “”;
}

/* Column Styles */
div[class^=”col-“] {
float:left;
padding: 2%;
box-sizing: border-box;
}
div.col-1-3.specials {width: 33.33%;}

/* Specials Styles */
div {
outline: 1px dotted rgb(71,52,29);
min-height: 400px;
}

/* Award Styles */
awardList {
overflow: auto;
position: relative;
height: 650 px;
}

div.awards {
position: absolute;
width: 30%;
}
awards#award1 {
block;
top:80px;
left:5%;
}

awards#award2 {
block;
top:280px;
left:60%;
}
awards#award3 {
block;
top:400px;
left:20%;
}

awards#award4 {
block;
top:630px;
left:45%;
}

awards#award5 {
block;
top:750px;
left:5%;
}
/* Footer Styles */
footer::after {
clear: both;
content: “”;
display: table;
}

Home
The Store
My Account
Specials
Reviews
Contact Us

March Specials

Red Rose Select

A classic collection of 18 signature chocolates served with a romantic
red rose for the special person in your life. One of our most popular
box sets.

$24.95

Order Now

Your Choice

Build your own collection of signature truffles
and chocolates. Now you can choose old favorites from our 24-year history
of award-winning chocolates and sweets.

$32.55

Order Now

Praline Signatures

Delicious chocolate with delicious pralines presented in a beautiful
and elegant box. Enjoy this fantastic collection inspired by the best
Parisian chocolate shops.

$39.23

Order Now

Awards

Best of Show

Confectioners Association

Five Stars

Confectioner Quarterly

Best Chocolate

Food World

Best Chocolate

Choco-Fest

Best Dessert

Choco-Fest

@charset “utf-8”;
@font-face {
font-family: Champagne;
src: url(cac_champagne.woff) format(‘woff’),
url(cac_champagne.ttf) format(‘ttf’);
}
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 3
Review Assignment

Typographical Style Sheet for the Pandaisia Chocolates Monthly Specials

Filename: pc_styles4.css
*/
html {
background-color: rgb(186, 136, 81);
}
/* Page Body Styles */
body {
background-color: rgb(138, 97, 51);
font-family: Verdana, Geneva, Arial, sans-serif;
}

/* Horizontal Navigation List Styles */

nav.horizontal a {
background-color: rgb(113, 86, 39);
font-family: Champagne, cursive;
font-size: 1.4em;
line-height: 1.8em;
text-align: center;
}
nav.horizontal a:link,
nav.horizontal a:visited {
color: rgb(239, 220, 156);
}
nav.horizontal a:hover,
nav.horizontal a:active {
background-color: rgb(71, 52, 29);
}
/* Article Styles */
article > h1 {
font-family: ‘Times New Roman’, Times, serif;
font-size: 2.2em;
font-weight: normal;
margin: 0.5em 0;
}
article p {
line-height: 1.2;
margin-bottom: 2em;
}

/* Specials Styles */
div.specials {
background-color: rgba(255, 255, 255, 0.15);
}

div.specials h1 {
font-family: Champagne, cursive;
font-size: 1.8em;
font-weight: normal;
margin: 0.3em 0;
text-align: center;
}
div.specials p {
font-size: 0.8em;
margin-bottom: 1em;
line-height: 1.2;
}
div.specials a {
color: rgb(186, 186, 156);
}

/* Award Styles */
div#awardList {
background-color: rgb(172, 116, 30);
margin-top: 20px;
}
div#awardList h1 {
font-family: Champagne, cursive;
font-size: 2.5em;
font-weight: normal;
text-align: center;
}

div.awards p {
font-size: 0.8em;
text-align: center;
margin: 0.3em 0;
}
div.awards img {
display: block;
width: 100%;
}

/* Footer Styles */
footer {
color: rgb(186, 186, 156);
background-color: rgb(71, 52, 29);
font-size: 0.9em;
padding: 10px 0px;
text-align: center;
}

Turn in your highest-quality paper
Get a qualified writer to help you with

“ Designing a Page Layout CSS3 HTML5 ”

Get high-quality paper

Guarantee! All work is written by expert writers!

Still stressed from student homework?

Get quality assistance from academic writers!

Order now