<!DOCTYPE html>
<html>
<head>
<title>Flavors - Website Template</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="css/ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<div id="page">
<div id="sidebar"> <a href="index.html"><img id="logo" src="images/logo.gif" width="171" height="239" alt=""></a>
<h2>FLAVOR OF THE DAY</h2>
<ul>
<li>
<a href="#"><img src="images/strawberry-delight.gif" width="165" height="165" alt=""></a>
<h3><a href="#">Strawberry Delight</a></h3>
</li>
</ul>
<h2>POPULAR FLAVORS</h2>
<ul>
<li>
<a href="flavors.html"><img src="images/tropical-mango.gif" width="165" height="165" alt=""></a>
<h3><a href="flavors.html">Tropical Mango</a></h3>
</li>
<li>
<a href="flavors.html"><img src="images/rich-chocolate.gif" width="165" height="165" alt=""></a>
<h3><a href="flavors.html">Rich Chocolate</a></h3>
</li>
<li>
<a href="flavors.html"><img src="images/sour-rasberry.gif" width="165" height="165" alt=""></a>
<h3><a href="flavors.html">Sour Rasberry</a></h3>
</li>
</ul>
</div>
<div id="content">
<!-- start of header -->
<div id="header">
<ul class="navigation">
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a class="active" href="flavors.html">Flavors</a>
</li>
<li>
<a href="dessert.html">Dessert Recipes</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
</div>
<!-- end of header -->
<!-- start of class content -->
<div class="content">
<!-- start inner page content box background -->
<div class="header">
<div class="footer">
<div class="body">
<h1>Choose Your Flavors</h1>
<div class="section">
<ul class="flavors">
<li>
<img src="images/strawberry-delight.jpg" width="130" height="130" alt="" title="">
<h2>Strawberry Delight</h2>
<input type="text" value="">
<span>Quality</span>
</li>
<li>
<img src="images/ube-adventure.jpg" width="130" height="130" alt="" title="">
<h2>Ube Adventure</h2>
<input type="text" value="">
<span>Quality</span>
</li>
<li>
<img src="images/sweet-cheese.jpg" width="130" height="130" alt="" title="">
<h2>Sweet Cheese</h2>
<input type="text" value="">
<span>Quality</span>
</li>
<li>
<img src="images/bubblegum-bomb.jpg" width="130" height="130" alt="" title="">
<h2>Bubblegum Bomb</h2>
<input type="text" value="">
<span>Quality</span>
</li>
<li>
<img src="images/blueberry-explosion.jpg" width="130" height="130" alt="" title="">
<h2>Blueberry Explosion</h2>
<input type="text" value="">
<span>Quality</span>
</li>
<li>
<img src="images/coconut-pleasure.jpg" width="130" height="130" alt="" title="">
<h2>Coconut Pleasure</h2>
<input type="text" value="">
<span>Quality</span>
</li>
<li>
<img src="images/pistachio-craze.jpg" width="130" height="130" alt="" title="">
<h2>Pistachio Craze</h2>
<input type="text" value="">
<span>Quality</span>
</li>
<li>
<img src="images/citrus-love.jpg" width="130" height="130" alt="" title="">
<h2>Citrus Love</h2>
<input type="text" value="">
<span>Quality</span>
</li>
</ul>
</div>
<div class="section">
<h2>Check Your Orders and Bill</h2>
<!-- start of orders -->
<div id="orders">
<h2> </h2>
<div>
<table>
<tr>
<td><a href="#"> </a></td>
<td>Strawberry Delight</td>
<td>x 1</td>
<td class="last">20.50</td>
</tr>
<tr>
<td><a href="#"> </a></td>
<td>Ube Adventure</td>
<td>x 3</td>
<td class="last">61.50</td>
</tr>
<tr>
<td><a href="#"> </a></td>
<td>Sweet Cheese</td>
<td>x 7</td>
<td class="last">143.50</td>
</tr>
<tr>
<td><a href="#"> </a></td>
<td>Bubblegum Bomb</td>
<td>x 2</td>
<td class="last">41.00</td>
</tr>
</table>
<table class="last">
<tr>
<td> </td>
<td> </td>
<td class="first">Subtotal</td>
<td class="last">266.50</td>
</tr>
<tr>
<td> </td>
<td></td>
<td class="first">Delivery Charge</td>
<td class="last">50.00</td>
</tr>
<tr>
<td> </td>
<td></td>
<td class="first">TOTAL</td>
<td class="last">316.50</td>
</tr>
</table>
</div>
</div>
<!-- end of orders -->
<div class="pricing">
<h2>Pricing</h2>
<span>1 pint for $20.50</span><span>1/2 Gallon = 4 pints for $80.50</span><span>Full Gallon = 8 pints for $180.50</span></div>
</div>
<form action="#">
<!-- start of section -->
<div class="section">
<!-- start of delivery -->
<div class="delivery">
<h2>Delivery Information</h2>
<table>
<tr>
<td><label for="firstname"><span>First Name*</span>
<input type="text" name="firstname" id="firstname" value="">
</label></td>
<td><label for="address1"><span>Street Address 1 *</span>
<input type="text" name="street address 1" id="address1">
</label></td>
</tr>
<tr>
<td><label for="lastname"><span>Last Name *</span>
<input type="text" name="lastname" id="lastname" value="">
</label></td>
<td><label for="address2"><span>Street Address 2 *</span>
<input type="text" name="address2" id="address2" value="">
</label></td>
</tr>
<tr>
<td><label for="contactnumber"><span>Contact Number *</span>
<input type="text" name="contactnumber" id="contactnumber" value="">
</label></td>
<td><label for="city"><span class="city">City *</span>
<select name="city" id="city">
<option></option>
<option></option>
</select>
</label>
<label for="state"><span class="state">State *</span>
<select name="state" id="state">
<option></option>
<option></option>
</select>
</label></td>
</tr>
<tr>
<td><label for="emailaddress"><span>Email Address *</span>
<input type="text" name="emailaddress" id="emailaddress" value="">
</label></td>
<td><label for="zipcode"><span class="zipcode">Zipcode *</span>
<input type="text" name="zipcode" id="zipcode" value="">
</label>
<label for="phone"><span class="phone">Phone *</span>
<input type="text" name="phone" id="phone" value="">
</label></td>
</t