Scribd
Upload
3 views

practicle2 code

Uploaded by

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

practicle2 code

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Delight</title>
<link rel="stylesheet" href="styles.css"> <!-- External CSS -->
<style>
/* Internal CSS */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}

header {
background-color: #ff5722;
color: white;
padding: 15px 10px;
text-align: center;
}

nav ul {
list-style-type: none;
padding: 0;
text-align: center;
background-color: #333;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
margin-top: 20px;
}
</style>
</head>

<body>
<!-- Header Section -->
<header>
<h1>Welcome to Restaurant Delight</h1>
</header>

<!-- Navigation Menu -->


<nav>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<!-- About Us Section -->


<section id="about" style="padding: 20px;">
<h2>About Us</h2>
<p>Restaurant Delight is a cozy place offering a variety of delightful
dishes made with the freshest ingredients.</p>
</section>

<!-- Menu Section -->


<section id="menu" style="padding: 20px;">
<h2>Our Menu</h2>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>Dish</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Grilled Chicken</td>
<td>Juicy grilled chicken served with sides.</td>
<td>$15</td>
</tr>
<tr>
<td>Veggie Pizza</td>
<td>A delightful pizza topped with fresh vegetables.</td>
<td>$12</td>
</tr>
</table>
</section>

<!-- Gallery Section -->


<section id="gallery" style="padding: 20px;">
<h2>Gallery</h2>
<img src="image1.jpg" alt="Dish 1" style="width: 30%; margin: 10px;">
<img src="image2.jpg" alt="Dish 2" style="width: 30%; margin: 10px;">
</section>

<!-- Contact Section -->


<section id="contact" style="padding: 20px;">
<h2>Contact Us</h2>
<form action="/submit" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"
required></textarea><br><br>

<input type="submit" value="Send Message">


</form>
</section>

<!-- Footer Section -->


<footer>
<p>&copy; 2024 Restaurant Delight. All rights reserved.</p>
</footer>
</body>

</html>

===============================================================================
external css

/* External CSS for Restaurant Delight */

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

header {
background-color: #ff5722;
color: white;
padding: 20px;
text-align: center;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: white;
padding: 10px 15px;
}

nav ul li a:hover {
background-color: #575757;
border-radius: 5px;
}

section {
padding: 20px;
margin: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1, h2 {
color: #ff5722;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}

table, th, td {
border: 1px solid #ddd;
}

th, td {
padding: 10px;
text-align: left;
}

th {
background-color: #ff5722;
color: white;
}

img {
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

form {
display: flex;
flex-direction: column;
gap: 10px;
}

input, textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

input[type="submit"] {
background-color: #ff5722;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
background-color: #e64a19;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}

You might also like