Thank you so much for looking at this. I really appreciate it.
html contents
<!DOCTYPE HTML>
<HTML>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 2
Red Ball Pizza
Author: Joshua Cagle
Date: 10/18/2012
Filename: redball.htm
Supporting files: modernizr-1.5.js, notice.png, rblogo.png,
redbar.png, slice.png, toppings.png
Pizza slice and toppings images from public domain site at:
-->
<meta charset="UTF-8" />
<title>Red Ball Pizza</title>
<script src="modernizr-1.5.js"></script>
<link href="pizza.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<header><img src="rblogo.png" alt="Red Ball Pizza" /></header>
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Catering</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<nav class="vertical">
<ul>
<li><a href="#">Pizza</a></li>
<li><a href="#">Salad</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Sandwiches</a></li>
<li><a href="#">Appetizers</a></li>
<li><a href="#">Pocket Pizzas</a></li>
<li><a href="#">Fish & Shrimp</a></li>
<li><a href="#">Chicken & Wings</a></li>
<li><a href="#">Beverages</a></li>
<li><a href="#">Dessert</a></li>
<li><a href="#">Catering</a></li>
<li><a href="#">Download Menu</a></li>
<li><a href="#">Catering Menu</a></li>
</ul>
</nav>
<section id="main">
<img src="toppings.png" alt="" />
<p>At Red Ball Pizza, we want to satisfy every appetite. That's
why our menu contains a variety of different items. With
so many choices, everyone's favorites are available!
</p>
<p>
Red Ball Pizza is NOT a franchise, a chain, or a corporation.
It is 100% locally owned and operated. Red Ball Pizza is
devoted to providing the highest quality and the best service
possible. Our only goal is to provide you with a great
pizza … EVERY TIME!
</p>
<div class="coupon">
<h1>Classic Combo</h1>
<p>16" 1-Topping Pizza
& a 2-Liter of Your Choice
For Only $14.99
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>Pizza & Stix</h1>
<p>16" Specialty Pizza
Reg. Cheese Stix & a 2-Liter
For Only $21.99
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>1/2 Price</h1>
<p>Buy any 16" Specialty Pizza
at Reg. Price & Get a 2nd
Pizza For Half Price
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>Pizza & Wings</h1>
<p>14" 2-Topping Pizza
& 12 Wings
For Only $15.99
</p>
<p>Expires 3/31</p>
</div>
<div class="coupon">
<h1>$3.00 Off</h1>
<p>Get $3.00 Off
any 16" Pizza at
Menu Price
</p>
<p>Expires 3/31</p>
</div>
<div class="coupon">
<h1>Sub Dinner</h1>
<p>1 Toasted Sub & Chips
& 1 20oz Soda
For Only $6.99
</p>
<p>Expires 3/31</p>
</div>
</section>
<aside>
<h1>Pizza Pizzazz</h1>
<ul>
<li>93% of Americans eat pizza at least once a month.</li>
<li>Mozzarella was originally made from the milk of Indian
water buffalo in the 7th century.</li>
<li>75 acres of cheese is eaten every day.</li>
<li>23 pounds of cheese is eaten every year by the average
person.</li>
<li>The tomato was brought back to Italy by Spaniards returning
from Mexico in the 16th century.</li>
<li>The busiest night for take-out pizza orders is Halloween.</li>
<li>The first pizzeria opened in 1830 in Naples, Italy and is still operating today. We've been open since 1982 and
we're happy to serve you today and tomorrow!</li>
</ul>
</aside>
<footer>
<address>
Red Ball Pizza •
811 Beach Drive •
Ormond Beach, FL 32175 •
(386) 555 - 7499
</address>
</footer>
</div>
</body>
</HTML>
EXTERNAL CSS SHEET contents
/*
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 2
Pizza Style Sheet
Author: Joshua Cagle
Date: 10/18/2012
Filename: pizza.css
Supporting Files:
*/
/* Display HTML5 structural elements as blocks */
article, aside, figure, figcaption, footer, hgroup, header,
section, nav {
display: block;
}
/* Displays default styles for every element so that every element
is diplayed in the same manner. */
* {
padding: 0px;
margin: 0px;
}
/* Styles for Page Body */
body {
background-color: red;
font-family: Verdana, Geneva, san-serif;
}
/* Container styles */
#container {
background: rgb(255, 255, 255) url(redbar.png) top left repeat-y;
margin: 0px auto 0px auto;
border-left: 1px solid black;
border-right: 1px solid black;
width: 1000px;
}
/* Styles for Header */
header {
background-color: white;
height: 100px;
}
/* Removes decorations, such as underling, from navigation lists*/
nav a {
text-decoration: none;
}
/* Horizontal Navigation List Styles */
nav.horizontal {
background-color: white;
width: 100%;
height: 70px;
}
nav.horizontal ul li {
display: block;
float: left;
background-color: rgb(255, 255, 255);
font-size: 16px;
line-height: 50px;
width: 180px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
}
nav.horizontal ul li a {
display: block;
background-color: red;
color: white;
/* Progressive enhancements to support browser extensions. */
-webkit-border-radius: 30px/25px;
-moz-border-radius: 30px/25px;
border-radius: 30px/25px;
}
nav.horizontal ul li a:hover {
background-color: rgb(255,101,101);
color:black;
}
/* Vertical Navigation List Styles */
nav.vertical {
float: left;
width: 200px;
}
nav.vertical ul li {
list-style-type: none;
text-indent: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
nav.vertical ul li a {
color: white;
}
nav.vertical ul li a:hover {
color:black;
}
/* Section Styles */
#main {
float: left;
background-color: rgb(255, 211, 211);
width: 600px;
}
#main p {
font-size: 20px;
margin: 15px;
}
#main img {
float: right;
margin: 15px;
width: 350px;
-moz-border-radius-bottomleft: 350px;
-webkit-border-bottom-left-radius: 350px;
border-bottom-left-radius: 350px;
}
/* Coupon styles */
.coupon {
background: url(slice.png) 50% 50% no-repeat,
url(notice.png) bottom right no-repeat white;
float: left;
border: 5px dashed black;
width: 170px;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
}
.coupon h1 {
color: white;
background-color: rgb(192, 0, 0);
font-size: 16px;
letter-spacing: 2px;
text-align: center;
height: 25px;
font-variant: small-caps;
}
.coupon p {
font-size: 14px;
text-align: center;
margin: 5px;
}
/* Aside Styles */
aside {
float: left;
width: 200px;
}
aside h1 {
color: rgb(192, 0, 0);
font-size: 20px;
letter-spacing: 2px;
font-weight: normal;
text-align: center;
}
aside ul li {
background-color: rgb(255, 135, 135);
border-radius: 5px;
list-style-type: none;
margin: 10px;
padding: 5px;
}
footer {
margin:200px;
}
footer address {
border-top: 1px solid red;
color: red;
font-size: 10px;
font-style: normal;
text-align: center;
margin-top: 25px;
padding-bottom: 20px;
}
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
