Assignment No: 2
Aim: Implement a web page index.htm for any client website (e.g. a restaurant website
project) using following:
a. HTML syntax: heading tags, basic tags & attributes, frames, tables, images, lists, links for
text & images, forms etc.
b. Use of Internal CSS, Inline CSS, External CSS
Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delicious Bites - Home</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Delicious Bites Restaurant</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="reservation.html">Reservations</a>
<a href="contact.html">Contact</a>
</nav>
<div class="container" id="home">
<h2>Welcome to Delicious Bites!</h2>
<p>Experience the finest dining with our exquisite menu and warm ambiance.</p>
<div class="home-content">
<img src="restaurant-image.jpg" alt="Restaurant Interior" class="restaurant-image">
<div class="specialties">
<h3>Our Specialties</h3>
<ul>
<li>Signature Steak</li>
<li>Fresh Seafood Platter</li>
<li>Vegetarian Delight</li>
</ul>
</div>
</div>
</div>
<footer>
<p>© 2024 Delicious Bites Restaurant. All rights reserved.</p>
</footer>
</body>
</html>
styles.css
/* styles.css */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
header {
background-color: #d32f2f;
color: white;
text-align: center;
padding: 1em 0;
nav {
background-color: #f06229;
text-align: center;
padding: 0.5em 0;
nav a {
color: white;
text-decoration: none;
padding: 0.5em 1em;
nav a:hover {
background-color: #e64a19;
.container {
width: 80%;
margin: 20px auto;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
th {
background-color: #f2f2f2;
footer {
text-align: center;
padding: 1em 0;
background-color: #333;
color: white;
.home-content {
display: flex; /* Use flexbox for layout */
align-items: flex-start; /* Align items to the top */
.restaurant-image {
max-width: 50%; /* Adjust image width as needed */
height: auto;
margin-right: 20px; /* Add some space between image and list */
float: left;
.specialties {
flex-grow: 1; /* Allow specialties to take remaining space */
}
.specialties h3 {
color: #d32f2f;
margin-bottom: 10px;
.specialties ul {
list-style: none;
padding: 0;
.specialties li {
background-color: #f9f9f9;
padding: 10px 15px;
margin-bottom: 5px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
.specialties li:hover {
background-color: #f0f0f0;
menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delicious Bites - Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Delicious Bites Restaurant</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="reservation.html">Reservations</a>
<a href="contact.html">Contact</a>
</nav>
<div class="container" id="menu">
<h2>Our Menu</h2>
<table>
<thead>
<tr>
<th>Dish</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Appetizer 1</td>
<td>Delicious appetizer</td>
<td>$9.99</td>
</tr>
<tr>
<td>Main Course 1</td>
<td>Our specialty main course</td>
<td>$19.99</td>
</tr>
<tr>
<td>Dessert 1</td>
<td>Sweet and delightful dessert</td>
<td>$7.99</td>
</tr>
<tr>
<td>Appetizer 2</td>
<td>Another Tasty appetizer</td>
<td>$11.99</td>
</tr>
<tr>
<td>Main Course 2</td>
<td>Another specialty main course</td>
<td>$24.99</td>
</tr>
<tr>
<td>Dessert 2</td>
<td>Another Sweet and delightful dessert</td>
<td>$8.99</td>
</tr>
</tbody>
</table>
</div>
<footer>
<p>© 2024 Delicious Bites Restaurant. All rights reserved.</p>
</footer>
</body>
</html>
reservation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delicious Bites - Reservations</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Delicious Bites Restaurant</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="reservation.html">Reservations</a>
<a href="contact.html">Contact</a>
</nav>
<div class="container" id="reservations">
<h2>Make a Reservation</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="date">Date:</label>
<input type="date" id="date" name="date" required><br><br>
<label for="time">Time:</label>
<input type="time" id="time" name="time" required><br><br>
<label for="guests">Number of Guests:</label>
<input type="number" id="guests" name="guests" min="1" required><br><br>
<label for="specialRequests">Special Requests:</label><br>
<textarea id="specialRequests" name="specialRequests" rows="4"
cols="50"></textarea><br><br>
<input type="submit" value="Reserve Now" class="reserve-button">
</form>
</div>
<footer>
<p>© 2024 Delicious Bites Restaurant. All rights reserved.</p>
</footer>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delicious Bites - Contact</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Delicious Bites Restaurant</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="reservation.html">Reservations</a>
<a href="contact.html">Contact</a>
</nav>
<div class="container" id="contact">
<h2>Contact Us</h2>
<p>Visit us at: 123 Main Street, City, State</p>
<p>Call us: (123) 456-7890</p>
<footer>
<p>© 2024 Delicious Bites Restaurant. All rights reserved.</p>
</footer>
</body>
</html>
Output:
Home Page:
Menu Page:
Reservations Page:
Contact Page:
