Scribd
Upload
6 views

WTAssignmentno2

The document outlines the implementation of a restaurant website, 'Delicious Bites', using HTML and CSS. It includes the structure for multiple pages such as Home, Menu, Reservations, and Contact, showcasing the use of various HTML elements and CSS styles. The code demonstrates the application of internal, inline, and external CSS for styling the web pages.

Uploaded by

bargeanjali650
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

WTAssignmentno2

The document outlines the implementation of a restaurant website, 'Delicious Bites', using HTML and CSS. It includes the structure for multiple pages such as Home, Menu, Reservations, and Contact, showcasing the use of various HTML elements and CSS styles. The code demonstrates the application of internal, inline, and external CSS for styling the web pages.

Uploaded by

bargeanjali650
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

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>

<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>

<footer>

<p>© 2024 Delicious Bites Restaurant. All rights reserved.</p>

</footer>

</body>

</html>

Output:
Home Page:

Menu Page:
Reservations Page:

Contact Page:

You might also like