Scribd
Upload
12 views5 pages

Untitled Document

Uploaded by

sushreeth7
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
12 views5 pages

Untitled Document

Uploaded by

sushreeth7
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/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sankalp South Indian Restaurant</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* Global Styles */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #f8f8f8; /* Light Grey Background */
overflow-x: hidden;
}
header {
position: relative;
height: 100vh;
background: url('img.jpg') no-repeat center center/cover;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
}
header h1 {
font-size: 4rem;
margin: 0;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
header p {
font-size: 1.5rem;
margin-top: 10px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
nav {
position: absolute;
top: 20px;
right: 20px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: #ffd700; /* Gold Accent */
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
nav ul li a:hover {
color: #f28d35; /* Warm Orange */
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
padding: 20px;
}
.section {
padding: 60px 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
position: relative;
}
.section img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.section h2 {
margin-top: 0;
font-size: 2.5rem;
color: #002147; /* Deep Navy Blue */
position: relative;
padding-bottom: 10px;
border-bottom: 2px solid #ffd700; /* Gold Accent */
display: inline-block;
background-color: #f28d35; /* Warm Orange */
color: #fff;
padding: 10px;
border-radius: 4px;
}
.section p {
line-height: 1.6;
color: #555;
}
.menu-item {
margin-bottom: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.menu-item h3 {
font-size: 1.8rem;
color: #002147; /* Deep Navy Blue */
}
.menu-item p {
margin: 0;
color: #777;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 10px;
transition: transform 0.3s;
}
.gallery img:hover {
transform: scale(1.05);
}
.reservation form {
display: flex;
flex-direction: column;
}
.reservation form label {
margin-bottom: 5px;
font-weight: bold;
color: #002147; /* Deep Navy Blue */
}
.reservation form input, .reservation form textarea {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.reservation form button {
background-color: #002147; /* Deep Navy Blue */
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.reservation form button:hover {
background-color: #ffd700; /* Gold Accent */
}

footer {
background-color: #002147; /* Deep Navy Blue */
color: #fff;
text-align: center;
padding: 20px;
width: 100%;
}
footer a {
color: #ffd700; /* Gold Accent */
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
header h1 {
font-size: 2.5rem;
}
header p {
font-size: 1.2rem;
}
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px 0;
}
}
</style>
</head>

<body>
<h1>Sankalp</h1>
<p>Authentic South Indian Cuisine</p>
<section id="reservation" class="section reservation">
<h2>Make a Reservation</h2>
<p>To ensure a wonderful dining experience, please make a reservation in advance. Fill
out the form below, and our team will get back to you with confirmation.</p>
<form action="reservation-handler.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>

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

<label for="date">Date:</label>
<input type="date" id="date" name="date" required>

<label for="time">Time:</label>
<input type="time" id="time" name="time" required>

<label for="guests">Number of Guests:</label>


<input type="number" id="guests" name="guests" required>

<label for="special-requests">Special Requests:</label>


<textarea id="special-requests" name="special-requests" rows="4"></textarea>

<button type="submit">Reserve Now</button>


</form>
</section>
</body>
</html>

You might also like