Scribd
Upload
8 views6 pages

Restaurant_Website_Bhrigu_0068

The document is an HTML code for a restaurant website featuring a navigation bar, sections for home, menu, and about us, as well as a signup form. It includes styles for layout and design, with interactive elements like menu items that display food details upon clicking. The website also has a fixed footer and utilizes JavaScript for dynamic content display.

Uploaded by

bhrighugupta
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
8 views6 pages

Restaurant_Website_Bhrigu_0068

The document is an HTML code for a restaurant website featuring a navigation bar, sections for home, menu, and about us, as well as a signup form. It includes styles for layout and design, with interactive elements like menu items that display food details upon clicking. The website also has a fixed footer and utilizes JavaScript for dynamic content display.

Uploaded by

bhrighugupta
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/ 6

Restaurant Website

CODE:
<!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>
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: url(https://www.scribd.com/"bgrestaurant.jpg") no-repeat center center/cover;
color: white;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
background: rgba(0, 0, 0, 0.8);
padding: 15px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
nav a {
color: white;
text-decoration: none;
font-size: 18px;
padding: 10px 20px;
transition: 0.3s;
}
nav a:hover {
background: #ff9900;
border-radius: 5px;
}
section {
padding: 100px 20px;
text-align: center;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.home-container {
display: flex;
justify-content: space-around;
align-items: center;
max-width: 1200px;
margin: auto;
background: rgba(0, 0, 0, 0.7);
padding: 30px;
border-radius: 10px;
}
.home-info {
width: 50%;
padding: 20px;
}
.home-signup {
width: 50%;
padding: 20px;
background: rgba(0, 0, 0, 0.9);
border-radius: 10px;
}
input, textarea, button {
width: 100%;
padding: 10px;
margin-top: 10px;
border: none;
border-radius: 5px;
}
input, textarea {
background: white;
color: black;
}
button {
background: #ff9900;
color: white;
cursor: pointer;
}
button:hover {
background: #e68a00;
}
.menu-items {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.menu-item {
background: rgba(255, 255, 255, 0.9);
color: black;
padding: 15px;
border-radius: 10px;
font-size: 18px;
transition: transform 0.3s;
cursor: pointer;
}
.menu-item:hover {
transform: scale(1.1);
background: #ff9900;
color: white;
}
.food-details {
display: none;
background: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}
.food-details img {
width: 100%;
max-width: 400px;
border-radius: 10px;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 15px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#menu">Menu</a>
<a href="#about">About Us</a>
</nav>

<section id="home">
<div class="home-container">
<div class="home-info">
<h2>Welcome to Our Restaurant</h2>
<p>We serve the best food in town with the finest
ingredients.</p>
</div>
<div class="home-signup">
<h2>Signup</h2>
<form>
<input type="text" name="name" placeholder="Name"
required>
<input type="email" name="email" placeholder="Email"
required>
<input type="date" name="dob" required>
<input type="tel" name="contact" placeholder="Contact"
required>
<div>
<label>Preference:</label>
<input type="radio" name="preference" value="veg"> Veg
<input type="radio" name="preference" value="non-veg">
Non-Veg
</div>
<input type="password" name="password"
placeholder="Password" required>
<button type="submit">Signup</button>
</form>
</div>
</div>
</section>

<section id="menu" class="reveal">


<h2>Menu</h2>
<div class="menu-items">
<div class="menu-item"
onclick="showFoodDetails('pizza')">Pizza</div>
<div class="menu-item"
onclick="showFoodDetails('burger')">Burger</div>
<div class="menu-item"
onclick="showFoodDetails('pasta')">Pasta</div>
<div class="menu-item"
onclick="showFoodDetails('salad')">Salad</div>
<div class="menu-item"
onclick="showFoodDetails('dessert')">Desserts</div>
</div>
<div class="food-details" id="food-details"></div>
</section>

<section id="about">
<p>This is a good Restaurant</p>
</section>
<footer>
&copy; 2025 Our Restaurant. All rights reserved.
</footer>

<script>
function showFoodDetails(food) {
const details = {
pizza: {img: 'pizza.jpeg', desc: 'Delicious cheesy pizza.',
price: 'Rs 1200'},
burger: {img: 'burger.jpeg', desc: 'Juicy grilled burger.',
price: 'Rs 800'},
pasta: {img: 'paasta.jpeg', desc: 'Authentic Italian pasta.',
price: 'Rs 1000'},
salad: {img: 'salad.jpeg', desc: 'Fresh green salad.', price:
'Rs 600'},
dessert: {img: 'dessert.jpeg', desc: 'Sweet and delicious
desserts.', price: 'Rs 700'}
};

const foodDetails = document.getElementById('food-details');


const item = details[food];
foodDetails.innerHTML = `<h3>${food.charAt(0).toUpperCase() +
food.slice(1)}</h3>
<img src="${item.img}" alt="${food}">
<p>${item.desc}</p>
<p>Price: ${item.price}</p>`;
foodDetails.style.display = 'block';
}
</script>
</body>
</html>
OUTPUT:

You might also like