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

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

Base Style Sheet for the Slate & Pencil Website

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

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

Layout styles for Slate and Pencil Tutoring
Author:
Date:

Filename: sp_layout.css
*/
/* Window and Body Styles */

/* Row Styles */

/* Page Header Styles */

/* Horizontal Navigation List Styles */

/* Topics Styles */

/* HR Styles */

/* Customer Comment Styles */

/* Footer Styles */

• Home
• Our Tutors
• Pricing
• Testimonials
• Your Account
• Chat Online

• Math
• Science
• English
• Languages
• History
• Sociology
• Art
• Other

• Our tutors have advanced degrees, supplemented with real-world
  experience to help you meet your education goals.

• Every session is just you and your instructor and
  there is always someone online to help you. 24/7.

• We cover it all: From from Biochemistry to
  Beethoven. We can also help you prep for the ACT, SAT, and AP
  exams.

• We keep our prices low. Sign up for one-time assistance or enroll
  for a full semester at greatly reduced rates.

• “Thanks to Slate & Pencil I passed AP Calculus
  with a 5.”

  — Kevin, 12th Grade, Utah

• “I use Slate & Pencil all of the time to
  supplement my lectures and course notes.”

  — Paul, 12th Grade, Texas

• “I’m making the honor roll for the first time thanks to
  your wonderful service and help!”

  — Lisa, 11th Grade, Florida

• “Geometry is a breeze after working online with your great
  tutors and review materials.”

  — Karen, 9th Grade, Nebraska

• “I’ve seen a great improvement in my use of study time and
  I retain more than ever before.”

  — Gianna, 10th Grade, Vermont

• “After using Slate & Pencil, my SAT and ACT
  scores went through the roof!!!”

  — Todd, 11th Grade, Illinois

Slate & Pencil Tutoring; © 2017 All Rights Reserved

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

Typographical styles for Slate and Pencil Tutoring

Filename: sp_styles.css
*/
/* Window and Body Styles */
html {
background-color: rgb(230, 182, 144);
}
body {
background-color: rgb(250, 238, 218);
font-family: Verdana, Geneva, Arial, sans-serif;
}

/* Page Header Styles */
body > header {
background-color: rgb(61, 138, 216);
}

body > header > nav a {
font-size: 1em;
margin: 0.4em 0;
padding: 5px;
}
body > header > nav a:link, body > header > nav:visited {
color: rgb(250, 238, 218);
}
body > header > nav a:hover, body > header > nav:active {
background-color: rgba(0, 0, 0, 0.2);
}

/* Horizontal Navigation List Styles */
nav.horizontal ul li {
background-color: rgb(18, 31, 102);
font-size: 0.9em;
padding: 10px 0;
text-align: center;
}
nav.horizontal a:link, nav.horizontal a:visited {
color: rgb(250, 238, 218);
}
nav.horizontal a:hover, nav.horizontal a:active {
color: rgb(255, 255, 64);
}

/* Topics Styles */
ul#topics {
margin-top: 20px;
margin-bottom: 20px;
}

ul#topics li p {
color: rgb(95, 114, 232);
font-size: 0.8em;
}

/* Customer Comment Styles */

ul#comments li p {
font-size: 0.9em;
color: rgb(121, 121, 121);
line-height: 1.2em;
}
/* Footer Styles */
footer {
color: rgb(186, 186, 156);
background-color: rgb(44, 91, 169);
font-size: 0.9em;
padding: 10px 0px;
text-align: center;
}