2 Page Web Site in HTML Homework Sample

You need to design 2 pages for a website for a company that sells turkeys. You need an introductory page, and a recipe page. There should be a header and footer, and navigation bar. Do not use grid for layout, and use handwritten code only, including the css (you can include reset.css). Use at least 3 HTML5 elements in the web page, and at least 10 css rules for styling. Use ordered and unordered lists in the recipe page. The web site should look professional and marks will be deducted it it doesn’t. For more HTML web design assignments contact us for details.

Solution:

effects.css

h1 {
font-size: 200%;
text-shadow: 2px 2px yellow;
}
h2 {
font-size: 150%;
text-shadow: 2px 2px yellow;
}
footer{
background-image: linear-gradient(#AB5A1B, #FFEECC);
}
#logoImg {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #AB5A1B;
}

style.css

@charset “utf-8″;
@font-face {
font-family: Quicksand;
src:url(Quicksand-Regular.woff) format (‘woff’),
url(Quicksand-Regular.ttf format(‘truetype’);
}

body
{ font: san-serif;
background: #FFEECC;
color: #555;}

p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
header
{ background: #FFF ;
background-size: 8%;
border-bottom: 2px solid #AB5A1B;
height: 177px;}

#logo
{ width: 880px;
position: relative;
height: 140px;
background: transparent;}

ul#menu li
{ float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: transparent;}

ul#menu li a
{
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: transparent;}

ul#menu li.selected
{ background: #AB5A1B;
color: #FFF;}

ul#menu li.selected a:hover
{ background: #FFF;
color: #AB5A1B;}

footer
{ width: 100%;
bottom: 0;

text-align: center;
}
#logoImg {

border: 8px ;
border-radius: 8px;
padding:15px;
width: 550px;
height: 100px

}

index.html

<!DOCTYPE HTML>
<html>

<head>
<title>About</title>
<meta charset=”utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”reset.css” />
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<link rel=”stylesheet” type=”text/css” href=”effects.css” />
</head>

<body>

<header>
<div id=”logo”>

<img id=”logoImg” src=”cornlogo.png” alt=”Cornucopia Online” class=”center” />

</div>
<ul id=”menu”>
<li class=”selected”><a href=”index.html”>Home</a></li>
<li class=”selected”><a href=”#”>Products</a></li>
<li class=”selected”><a href=”recipes.html”>Recipes</a></li>
<li class=”selected”><a href=”#”>Newsletter</a></li>
<li class=”selected”><a href=”#”>My Account</a></li>
<li class=”selected”><a href=”#”>FAQ</a></li>
<li class=”selected”><a href=”#”>Support</a></li>
<li class=”selected”><a href=”#”>Contact Us</a></li>
</ul>

</header>
<article>
<p></p>
<p align=”center”>If you’ve shopped here before, welcome back!
If this is your first visit, a wealth of delicious tastes and aromas await you.
Please explore our Products page for a sampling of our tasty dishes.</p>

<p align=”center”>We’re dedicated to ensuring safe and speedy delivery of our food products.
Please take advantage of our SureFresh delivery system employing air tight,
fully insulated packages that keep contents cool for as long as 72 hours in external
temperatures of over 100° Fahrenheit. We stand by our guarantee that the food products
you receive from us are in the same fresh condition as when they left our facility.</p>

<p align=”center”>Cornucopia is an ideal entertaining resource for your next banquet or family gathering.
While we specialize in turkey, we also provide delicious pastas, cheeses, hams,
and side dishes. Cornucopia Online has everything you need, including entertaining tips
and serving advice.</p>

<p align=”center”>Cornucopia began as a small poultry shop in rural Connecticut.
Once famous only locally for the quality of its poultry, dressings, herbs, and spices,
Cornucopia is fast becoming a leading provider of poultry-based dishes and products
throughout the Web.</p>

</article>
<aside><p>We use FedEx, UPS, or the U.S. Postal Service to ensure the timely delivery of your order.
Orders submitted before 4pm ET can be scheduled to arrive the following business day
(or any business day thereafter) for just $9.99!</p>
</aside>
<footer>
<p><a href=”#”>Mobile friendly site</a></p>
<p>Cornucopia Online 781 Bridge Street Bristol, CT 06010 (800) 555 – 1088 <a href=”#”>[email protected]</a> Copyright © Ruyle.com</p>
</footer>
</body>
</html>

recipes.html

<!DOCTYPE HTML>
<html>

<head>
<title>Recipes</title>
<meta charset=”utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”reset.css” />
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<link rel=”stylesheet” type=”text/css” href=”effects.css” />

</head>

<body>

<header>
<div id=”logo”>

<img id=”logoImg” src=”cornlogo.png” alt=”Cornucopia Online” class=”center” />

</div>
<ul id=”menu”>
<li class=”selected”><a href=”index.html”>Home</a></li>
<li class=”selected”><a href=”#”>Products</a></li>
<li class=”selected”><a href=”recipes.html”>Recipes</a></li>
<li class=”selected”><a href=”#”>Newsletter</a></li>
<li class=”selected”><a href=”#”>My Account</a></li>
<li class=”selected”><a href=”#”>FAQ</a></li>
<li class=”selected”><a href=”#”>Support</a></li>
<li class=”selected”><a href=”#”>Contact Us</a></li>
</ul>

</header>
<p></p>
<h1 align=”center”>Grilled Turkey</h1>
<img src=”turkey.jpg” style=”height: 20%;width: 20%;float: right;” alt=”Grilled Turkey Image”/>
<p>Take your turkey outside this year and let your grill do the cooking. Grilled turkey is deliciously crisp with a tangy smoked flavor. Properly treated, turkey on the grill doesn’t take any longer than turkey cooked in an oven.</p>

<h2>***Ingredients***</h2>
<ulstyle=”list-style-type: circle;”></ul>
<li>1 turkey, 12 to 14 lbs.</li>
<li>8-10 garlic cloves</li>
<li>2 cups lightly packed Italian parsley leaves</li>
<li>1 Tbsp. kosher salt</li>
<li>2 tsp. freshly ground black pepper</li>
<li>2 tsp. chili powder</li>
<li>2 oranges</li>
<li>1 stick unsalted butter</li>
<li>2-4 cups reduced-sodium chicken stock</li>
<li>1 large onion</li>
<li>1 large carrot</li>
<li></li>
</ul>
<h1>***Instructions***</h1>
<ol style=”list-style-type: decimal;”>
<li>Remove neck and giblets from turkey cavity. Rinse turkey under cold water and pat dry with paper towels.</li>
<li>Finely chop garlic and parsley and place in a small bowl. Add salt, pepper, and chili powder. Add grated orange zest.</li>
<li>Mix in softened butter until all ingredients in the bowl are evenly distributed.</li>
<li>Starting from neck-end of turkey, carefully separate skin from the breast meat. Push about half of butter mixture onto breast meat under skin and spread it out evenly.</li>
<li>Cover top and sides of turkey with remaining butter mixture. Season turkey with salt and pepper.</li>
<li>Quarter oranges and place sections in the turkey cavity. Use a trussing clamp to turn wings back, holding neck skin in place. Tie together with a cotton string.</li>
<li>Put 2 cups of chicken stock, onion, and carrot inside a heavy-duty roasting pan. Place turkey, breast side up, on a roasting rack, and set rack inside pan. Cook the turkey over indirect medium heat to an internal temperature of 350°.</li>
<li>Grill turkey for two to three hours, checking every half hour to verify that the roasting pan has not dried out. If pan looks dry, moisten it with the remaining chicken stock.</li>
<li>Turkey is done when the internal temperature in the thighs is 180° and the internal temperature of the breast is 170°.</li>
<li>Transfer to a cutting board and let sit for 20 to 30 minutes before carving.</li>
<li>Use drippings as a base for a turkey gravy.</li>
<li>Serves 10 to 12.</li>
</ol>
<footer>
<p><a href=”#”>Mobile friendly site</a></p>
<p>Cornucopia Online 781 Bridge Street Bristol, CT 06010 (800) 555 – 1088 <a href=”#”>[email protected]</a> Copyright © Ruyle.com</p>
</footer>
</body>
</html>