To develop a static Restaurant website to display the food items and services provided by them.
Requirement collection.
Creating the layout using HTML and CSS.
Updating the sample content.
Choose the appropriate style and color scheme.
Validate the layout in various browsers.
Validate the HTML code.
Publish the website in the given URL.
resstaurant website.html
<div style="text-align: center;"><img style="width: 20%" src="c:\Users\Suriya\Downloads\cozy plate restaurant logo with orange theme.png"></div>
<div style="text-align: center; margin-top: 20px;"><a style="padding: 20px;" href="c:\Users\Suriya\Desktop\web application\menu for restaurant website.html">MENU</a>
<a style="padding: 20px;" href="file:///C:/Users/Suriya/Desktop/web application/Administration%20for%20restaurant.html">ADMINISTRATION</a>
<a style="padding: 20px;" href="file:///C:/Users/Suriya/Desktop/web application/CONTACT%20us%20restaurant%20website.html">CONTACT US</a></div>
<p style="font-size:30px; text-align:center; margin-bottom: 50px; line-height: 30px;">"Where Comfort Food Meets Warm Hospitality"</p>
<div style="text-align: center;"><a style="font-size: 20px; background-color: rgb(232, 126, 13); padding: 15px 35px 15px 35px; color: white;" href="file:///C:/Users/Suriya/Desktop/web application/about%20us%20for%20restaurant.html">About Us</a></div>
<hr style=""width=60%>
<h1 style="font-size: 40px; text-align:center;">Authentic Dishes</h1>
<div style="text-align: center;"><img style="width:90% " src="https://png.pngtree.com/thumb_back/fw800/background/20240204/pngtree-top-view-of-chicken-biryani-indian-food-delicious-ramadan-iftar-meal-image_15585911.png"></div>
<div style="text-align: center;"><img style="width:90% " src="https://www.shanazrafiq.com/wp-content/uploads/2017/10/4-chicken-chettinad.jpg"></div>
<div style="text-align: center;"><video style="width:90%" src="c:\Users\Suriya\Downloads\A CINEMATIC INDIAN KITCHEN B ROLL __ WINNER WINNER CHICKEN DINNER.mp4" controls autoplay>
<video style="width: 90%;" controls autoplay>
<source src="c:\Users\Suriya\Downloads\A CINEMATIC INDIAN KITCHEN B ROLL __ WINNER WINNER CHICKEN DINNER.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
menu for restaurant website.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu with 12 Items</title>
<style>
body {
font-family: Arial, sans-serif;
}
.menu {
background-color: #f4f4f4;
width: 400px;
padding: 10px;
border-radius: 8px;
margin: auto; /* Center the menu horizontally */
}
.menu ul {
list-style-type: none;
padding: 0;
}
.menu ul li {
margin: 8px 0;
background-color: #ea6e16;
color: white;
padding: 10px;
text-align: center;
border-radius: 4px;
cursor: pointer;
}
.menu ul li:hover {
background-color: #555;
}
</style>
</head>
<body>
<div style="text-align: center;">
<img style="width: 20%" src="c:/Users/Suriya/Downloads/cozy plate restaurant logo with orange theme.png">
</div>
<div style="text-align: center; margin-top: 20px;">
<a style="padding: 20px;" href="C:\Users\Suriya\Desktop\web application\resstaurant website.html">HOME</a>
<a style="padding: 20px;" href="file:///C:/Users/Suriya/Desktop/web%20application/Administration%20for%20restaurant.html">ADMINISTRATION</a>
<a style="padding: 20px; margin-bottom: 50px;" href="file:///C:/Users/Suriya/Desktop/web%20application/CONTACT%20us%20restaurant%20website.html">CONTACT US</a>
</div>
<hr style="width:60%; margin-bottom: 50px; margin-top: 30px;">
<div class="menu">
<ul>
<li>Chicken dum briyani ₹280</li>
<li>Mutton dum briyani ₹340</li>
<li>Special Tandoori Half/Full ₹280/₹480</li>
<li>Chicken butter masala ₹200</li>
<li>Chicken chettinad ₹240</li>
<li>Chicken fried rice ₹180</li>
<li>Chicken hakka noodles ₹240</li>
<li>Egg hakka noodles ₹180</li>
<li>Plain naan ₹20</li>
<li>Butter naan ₹50</li>
<li>Tandoori naan ₹70</li>
<li>Special Lamb briyani ₹340</li>
</ul>
</div>
</body>
</html>
administration for restaurant.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Website</title>
<style>
body {
font-family: Arial, sans-serif;
}
.menu {
background-color: #f4f4f4;
width: 400px;
padding: 10px;
border-radius: 8px;
margin: auto; /* Center the menu horizontally */
}
.menu ul {
list-style-type: none;
padding: 0;
}
.menu ul li {
margin: 8px 0;
background-color: #ea6e16;
color: white;
padding: 10px;
text-align: center;
border-radius: 4px;
cursor: pointer;
}
.menu ul li:hover {
background-color: #555;
}
</style>
</head>
<body>
<div style="text-align: center;">
<img style="width: 20%" src="c:/Users/Suriya/Downloads/cozy plate restaurant logo with orange theme.png">
</div>
<div style="text-align: center; margin-top: 20px;">
<a style="padding: 20px;" href="C:\Users\Suriya\Desktop\web application\resstaurant website.html">HOME</a>
<a style="padding: 20px;" href="file:///C:/Users/Suriya/Desktop/web%20application/menu%20for%20restaurant%20website.html">MENU</a>
<a style="padding: 20px; margin-bottom: 50px;" href="file:///C:/Users/Suriya/Desktop/web%20application/CONTACT%20us%20restaurant%20website.html">CONTACT US</a>
</div>
<hr style="width:60%; margin-bottom: 50px; margin-top: 30px;">
<h2 style="text-align: center;">Administration Team</h2>
<div style="display: flex; flex-wrap: wrap; justify-content: space-around; padding: 20px;">
<div style="text-align: center; padding: 20px;">
<img src="c:/Users/Suriya/Downloads/andrew tate.jpg" alt="Admin 1" width="200">
<br><strong>Andrew Tate</strong><br>Manager
</div>
<div style="text-align: center; padding: 20px;">
<img src="c:/Users/Suriya/Downloads/chef 2.jpg" alt="Admin 2" width="200">
<br><strong>Gordon Ramsay</strong><br>Chief Chef
</div>
<div style="text-align: center; padding: 20px;">
<img src="c:/Users/Suriya/Downloads/uncle roger.jpg" alt="Admin 3" width="200">
<br><strong>Uncle Roger</strong><br>Chef
</div>
<div style="text-align: center; padding: 20px;">
<img src="c:/Users/Suriya/Downloads/rayan.jpg" alt="Admin 4" width="200">
<br><strong>Rayan</strong><br>Waitress
</div>
<div style="text-align: center; padding: 20px;">
<img src="c:/Users/Suriya/Downloads/yash.jpg" alt="Admin 5" width="200">
<br><strong>Yash</strong><br>Waitress
</div>
<div style="text-align: center; padding: 20px;">
<img src="c:/Users/Suriya/Downloads/madison bear.jpeg" alt="Admin 6" width="200">
<br><strong>Madison Bear</strong><br>Hostess
</div>
</div>
</body>
</html>
CONTACT US for restaurant website.html
<div style="text-align: center;"><img style="width: 20%" src="c:\Users\Suriya\Downloads\cozy plate restaurant logo with orange theme.png"></div>
<div style="text-align: center; margin-top: 20px;"><a style="padding: 20px;"C:\Users\Suriya\Desktop\web application\resstaurant website.html">HOME</a>
<a style="padding: 20px;" href="file:///C:/Users/Suriya/Desktop/web application/menu%20for%20restaurant%20website.html">MENU</a>
<a style="padding: 20px; margin-bottom: 50px;" href="file:///C:/Users/Suriya/Desktop/web application/Administration%20for%20restaurant.html">ADMINISTRATION</a></div>
<hr style="width:60%; margin-bottom: 50px; margin-top: 30px;">
<div style="text-align: center;"
<h2 style="background-color: #ea6e;">Get in Touch</h2>
<p><strong>Address:</strong> no 23,mount road,chennai</p>
<p><strong>Phone:</strong> +91 8072586418</p>
<p><strong>Email:</strong> info@cozyplate.com</p>
about us for restaurant.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us | Cozy Plate</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
text-align: center;
}
h1 {
color: #ea6e16;
}
p {
margin: 20px 0;
}
.about-content {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.intro {
font-size: 1.2em;
margin-bottom: 20px;
}
.emphasis {
font-weight: bold;
color: #ea6e16;
}
.features {
display: flex;
justify-content: space-around;
margin-top: 30px;
}
.feature-box {
width: 30%;
padding: 20px;
background-color: #f4f4f4;
border-radius: 10px;
}
.feature-box img {
max-width: 100%;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<div style="text-align: center;">
<img style="width: 20%" src="c:/Users/Suriya/Downloads/cozy plate restaurant logo with orange theme.png">
</div>
<div style="text-align: center; margin-top: 20px;">
<a style="padding: 20px;" href="C:\Users\Suriya\Desktop\web application\resstaurant website.html">HOME</a>
<a style="padding: 20px;" href="file:///C:/Users/Suriya/Desktop/web%20application/menu%20for%20restaurant%20website.html">MENU</a>
<a style="padding: 20px;" href="file:///C:/Users/Suriya/Desktop/web%20application/Administration%20for%20restaurant.html">ADMINISTRATION</a>
<a style="padding: 20px; margin-bottom: 50px;" href="file:///C:/Users/Suriya/Desktop/web%20application/CONTACT%20us%20restaurant%20website.html">CONTACT US</a>
</div>
<hr style="width:60%; margin-bottom: 50px; margin-top: 30px;">
<h1>ABOUT US</h1>
<div class="about-content">
<p class="intro">Welcome to <span class="emphasis">Cozy Plate</span>, where comfort meets cuisine. Nestled in the heart of the city, we’ve created a space where you can unwind, share moments, and enjoy the simple pleasure of a delicious meal.</p>
<p>At Cozy Plate, we believe that food is more than just nourishment—it’s an experience that brings people together. Our menu is inspired by the warmth of home-cooked meals, offering a blend of hearty classics and creative dishes made from the freshest, locally-sourced ingredients.</p>
<div class="features">
<div class="feature-box">
<img src="C:\Users\Suriya\Downloads\Dhaba-Style-Chicken-Curry-4.jpg" alt="Home Cooked Meals">
<p>Hearty Classics</p>
</div>
<div class="feature-box">
<img src="C:\Users\Suriya\Downloads\Whole-Chicken.jpg" alt="Fresh Ingredients">
<p>Fresh Ingredients</p>
</div>
<div class="feature-box">
<img src="C:\Users\Suriya\Downloads\GoslingBFI081223_(22_of_30)_(53388157347)_(cropped).jpg" alt="Friendly Staff">
<p>Friendly Staff</p>
</div>
</div>
<p>Whether you’re stopping by for a casual lunch, a family dinner, or a quick coffee, we’re here to make you feel right at home. From our friendly staff to our inviting atmosphere, everything at Cozy Plate is designed to offer a dining experience that’s both personal and memorable.</p>
<p>We take pride in our attention to detail, ensuring that every dish is crafted with care and every guest leaves with a smile. At Cozy Plate, it’s more than just a meal—it’s a moment to savor. Join us, and make yourself at home.</p>
</div>
</div>
</body>
</html>
HOME
MENU
ADMISTRATION
CONTACT US
about us
The program for designing software company website using HTML and CSS is completed successfully.