<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://use.typekit.net/pgn4rci.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
  
  <!-- Organic SEO / Metatags Information -->
  
  <meta charset="utf-8" >
  <meta name="restaurant" content="chinese cuisine">
  <meta name="keywords" content="Sushi, Shrimp, Habachi, Cuisine">
  <meta name="restaurant" content="Town">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
<title>Reservations</title>
    <style>
   h4 {
    font-size: 35px;
}
    h2 {
    font-size: 25px;
}
    h3 {
        font-size: 35px;
        }
       ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: grey;
}

.active {
    background-color: firebrick;
}
            img {
    display: block;
    margin: 0 auto;
}
            .center {
    text-align: center;
    border: 6px solid firebrick;
}
        
         p.one {
    border-style: solid;
    border-color: grey;
    text-align: center;
}
            p.one {
    border-style: double;
    border-width: 6px;
}
    
        
    </style>
    <link href="http://www.geocities.ws/showdivine/GRA310/reservations.html.css" rel="stylesheet" type="text/css">
</head>
<body>
     <div class="center">
     <!-- logo sits here  -->
    <img src="images/Logo.jpg" alt="Logo"
             style="width:300px;height:100px;"/>
    
   <!-- Navigation menu -->
        
    <h1 style="color:firebrick;">Reservations</h1>
       <ul>
  <li><a href="index.html">Home</a></li>
  <li><a class="active" href="#">Reservations</a></li>
  <li><a href="menu.html">Menu</a></li>
  <li><a href="about.html">About Us</a></li>
</ul>
         <h3 style="color:grey;"> Reserve your experience today
</h3>
     
        <h2 style="color:firebrick;">Call or email us today <br /> Make your reservations for personal dining and events.</h2>
    <img src="images/TownReservations.png" alt="ReservationsImage" style="width:600px;height:400px;">
        
        <p class="one">
        
        <!-- This is where we the reservation form coding sits -->
        
<h1 style="color:firebrick;">RESERVATION FORM</h1>
<p>Name <input type="text" size="20" maxlength="99" />
<p>Time <input type="text" size="12" maxlength="99" />
<p>Date <input type="text" size="42" maxlength="99" />
<p>Email <input type="text" size="30" maxlength="99" />
<p>Telephone <input type="text" size="10" maxlength="99" />

<br />
<br />
<input type="submit" value="click here to submit" />
<input 

type="reset" value="clear this form" />
     <p class="one"> </p>
     
    <h4 style="color:firebrick;">    (978)777-888
   </h4> <a href="mailto:town@gmail.com?subject=Make Reservations"><h3 style="color:firebrick;"> Town@gmail.com</h3></a>
   

    </div>

</body>
</html>