A beautifully designed restaurant website featuring a user-friendly layout, enticing food imagery, dynamic menus, and smooth navigation. Built to captivate visitors and showcase your restaurant's ambiance, menu, and services with modern web technologies.
Replace with Your Images
Below is the complete source-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Street Spice</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<style>
body{
background-color: #fde8bb;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html{
scroll-behavior: smooth;
}
header{
margin-top: 50px;
text-align: center;
}
header h1{
font-size: 55px;
font-family: cursive;
}
header span{
font-size: 60px;
color: orange;
}
.nav {
display: flex;
justify-content: center;
margin-top: 30px;
}
nav {
background-color: white;
border-radius: 50px;
padding: 10px 50px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
a{
position: relative;
letter-spacing: 1px;
text-decoration: none;
color: black;
padding: 0 20px;
font-size: 20px;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
}
nav a:hover {
background-color: #f0f0f0;
border-radius: 5px;
}
/* hero */
#hero {
margin: 40px auto;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#hero h1{
font-size: 40px;
}
#hero span{
color: orange !important;
}
#hero p{
font-size: 20px;
font-weight: 600;
}
.btn{
border: 1px solid #fde71d;
border-radius: 30px;
background: none;
padding: 10px 20px;
font-weight: 600;
font-size: 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
cursor: pointer;
margin: 10px;
transition: 0.8s;
position: relative;
overflow: hidden;
}
.btn1{
color: orange;
}
.btn2{
color: white;
}
.btn1:hover{
color: white;
}
.btn2:hover{
color: orange;
}
.btn::before{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: orange !important;
z-index: -1;
transition: 0.8s;
}
.btn1::before,.btn2::before{
top: 0;
border-radius: 0 0 50% 50%;
}
.btn2::before{
height: 180%;
}
.btn1:hover::before{
height: 180%;
}
.btn2:hover::before{
height: 0%;
}
#hero img{
width: 40%;
border-radius: 50%;
margin-left: 30px;
opacity: 0;
transform: translateX(-50px);
animation: slideIn 1s ease-out forwards;
}
@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* about */
#about{
margin: 40px auto;
width: 90%;
justify-content: center;
align-items: center;
}
h1 {
text-align: center;
font-size: 40px;
font-family: cursive;
animation: fadeInUp 1s ease-out forwards;
}
span{
color: orange;
}
#about p{
font-size: 20px;
font-weight: 600;
justify-content: center;
text-align: center;
}
#about-1{
margin: 80px ;
width: 90%;
display: flex;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
#about-1 img{
width: 40%;
margin-right: 40px;
}
.comi{
margin-left: 10px;
}
#about-1 h2{
margin-left: 110px;
margin-top: 100px;
font-size: 35px;
font-family: cursive;
}
#about-1 p{
font-size: 20px;
font-weight: 500;
font-family: cursive;
max-width: 80%;
}
/* services*/
#services{
margin: 40px auto;
width: 90%;
justify-content: center;
align-items: center;
}
#ser-1{
margin: 40px;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
}
.p-1{
text-align: center;
font-size: 16px;
font-weight: 600;
font-family: cursive;
}
.img-1{
display: flex;
margin-bottom: 150px;
width: 30%;
margin-right: 30px;
}
.img-2{
display: flex;
margin-top: 150px;
width: 30%;
}
/*chef*/
#chef{
background-color: #f8f6f6;
border-radius: 50%;
margin: 90px auto;
width: 90%;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.chef-1 h1{
margin-top: 110px;;
text-align: left;
margin-left: 550px;
}
.chef-1 p{
text-align: center;
max-width: 70%;
margin-left: 250px;
font-weight: 600;
}
.chef-1 img{
margin-right: 30px;
float: right;
height: 10%;
width: 20%;
}
.product-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
width: 100%;
align-self: center;
justify-self: center;
}
.product-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease;
}
.product-card:hover {
transform: translateY(-10px);
}
.product-card img {
width: 100%;
height: 150px;
object-fit: cover;
}
.product-content {
padding: 15px;
text-align: center;
}
.product-title {
font-size: 1.2rem;
font-weight: bold;
color: #333;
margin: 10px 0;
}
.product-description {
font-size: 0.9rem;
color: #666;
margin-bottom: 15px;
}
.product-price {
font-size: 1.1rem;
color: #27ae60;
margin: 10px 0;
font-weight: bold;
}
.product-rating {
color: #f39c12;
}
.book-table {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 20px;
background-color: #fde8bb;
margin-top: 50px;
margin-bottom: 8%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.booking-text {
width: 45%;
padding: 20px;
}
.booking-text h2 {
font-size: 36px;
font-family: cursive;
color: orange;
margin-bottom: 10px;
text-align: center;
}
.booking-text p {
font-size: 18px;
color: #333;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
line-height: 1.6;
font-weight: 600;
text-align: center;
}
.booking-form {
width: 45%;
padding: 20px;
background-color: #333;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.booking-form h3 {
align-self: center;
justify-self: center;
color: yellow;
font-size: 28px;
margin-bottom: 20px;
}
.booking-form label {
color: #fff;
font-size: 16px;
margin-top: 10px;
display: block;
}
.booking-form input {
width: 96.5%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
background-color: #fff;
}
.booking-form button {
width: 100%;
padding: 12px;
background-color: #fde71d;
border: none;
color: #333;
font-size: 18px;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.booking-form button:hover {
background-color: #ff8c00;
}
footer {
background-color: #333;
color: #fff;
padding: 40px 20px;
text-align: center;
font-family: 'Arial', sans-serif;
}
.footer-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.footer-section {
width: 30%;
padding: 10px;
margin: 10px;
}
.footer-section h3, .footer-section h4 {
color: #fde71d;
font-family: 'Arial', sans-serif;
margin-bottom: 10px;
}
.footer-section p {
font-size: 14px;
margin: 5px 0;
}
.social-icons {
display: flex;
justify-content: center;
gap: 20px;
}
.social-icon {
color: #fff;
font-size: 20px;
text-decoration: none;
padding: 8px;
border-radius: 50%;
background-color: #444;
transition: all 0.3s ease-in-out;
}
.social-icon:hover {
background-color: #fde71d;
transform: scale(1.1);
}
.footer-bottom {
margin-top: 30px;
font-size: 14px;
color: #bbb;
}
.footer-bottom p {
margin: 0;
}
</style>
<body>
<header>
<div>
<h1>Street <Span>Spice</Span></h1>
</div>
<div class="nav">
<nav>
<a href="#hero">Home</a >
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#products">Products</a>
</nav>
</div>
</header>
<section id="hero">
<div>
<h1>Taste the Worlds <span>Best</span> & <span>Quality</span> Foods</h1>
<p>At Street Spice, we believe in bringing you the finest flavors from across the globe. Our chefs carefully select the freshest ingredients to create dishes that are both bold and delightful. Whether you're craving spice, savory comfort, or a taste of the exotic, we have something to satisfy every palate. Experience dining like never before—where every bite tells a story!</p>
<button class="btn btn1" onclick="location.href='#products'">Our Menu</button>
<button class="btn btn2" onclick="location.href='#book-table'">Book a Table</button>
</div>
<img src="1.png">
</section>
<section id="about">
<div>
<h1>About <span>Us</span></h1>
<p>Street Spice is more than just a restaurant; it’s a place where culture, flavor, and passion come together to create an unforgettable dining experience. Located in the heart of Flavor Town, we specialize in crafting diverse, high-quality dishes that showcase the best ingredients from around the world.</p>
<p>At Street Spice, every dish is a celebration of the art of cooking. Join us and experience food that’s made with love and served with care. We can’t wait to share our passion with you!</p>
</div>
<div id="about-1">
<img src="team.png">
<div class="comi">
<h2>Our <span>Commitment</span></h2>
<p>Driven by innovation, guided by values, and focused on you. At the heart of everything we do is a commitment to delivering exceptional quality, building meaningful connections, and empowering communities across the globe.</p>
</div>
</div>
</section>
<section id="services">
<div>
<h1>Our <span>Services</span></h1>
</div>
<div id="ser-1">
<img class="img-1" src="food-1.png">
<p class="p-1">At Street Spice, we offer more than just exceptional food; we provide a complete dining experience. Whether you're looking to enjoy a casual meal with friends, book a private event, or order catering for your special occasion, we’ve got you covered. Our team is committed to ensuring that every guest receives top-notch service, from the moment you walk in until the last bite. We also offer online reservations, takeout, and delivery, so you can enjoy our delicious dishes wherever you are.</p>
<img class="img-2" src="food-2.png">
</div>
</section>
<section id="chef">
<div class="chef-1">
<img src="chef.png" alt="">
<h1>Our <span>Team</span></h1>
<p>At Street Spice, our team is the heart and soul of everything we do. From our talented chefs to our friendly waitstaff, every member plays a vital role in delivering an exceptional dining experience. Our chefs are passionate about their craft, constantly experimenting with new flavors while honoring traditional recipes to create unique dishes that leave a lasting impression. Together, we work hard to create an atmosphere where every guest feels like family.</p>
<p>We believe that a great dining experience is about more than just great food. It’s about the people who bring it to life. Our team’s dedication, creativity, and hospitality are what set Street Spice apart. Whether you’re enjoying a meal with loved ones or hosting an event, you can trust that our team will go above and beyond to make your experience unforgettable.</p>
</div>
</section>
<section id="products">
<div>
<h1>Our <span>Products</span></h1>
</div>
<div class="product-container">
<div class="product-card">
<img src="1.png" alt="Product 1">
<div class="product-content">
<div class="product-title">Salad</div>
<div class="product-description">A high-quality salad that meets your needs.</div>
<div class="product-price">$49.99</div>
<div class="product-rating">⭐⭐⭐⭐☆</div>
</div>
</div>
<div class="product-card">
<img src="food-1.png" alt="Product 2">
<div class="product-content">
<div class="product-title">Chips</div>
<div class="product-description">Designed to bring convenience and style.</div>
<div class="product-price">$89.99</div>
<div class="product-rating">⭐⭐⭐⭐⭐</div>
</div>
</div>
<div class="product-card">
<img src="food-2.png" alt="Product 3">
<div class="product-content">
<div class="product-title">Pizza</div>
<div class="product-description">An essential food for your existance.</div>
<div class="product-price">$29.99</div>
<div class="product-rating">⭐⭐⭐☆☆</div>
</div>
</div>
<div class="product-card">
<img src="1.png" alt="Product 3">
<div class="product-content">
<div class="product-title">Salad</div>
<div class="product-description">An essential food for your life</div>
<div class="product-price">$29.99</div>
<div class="product-rating">⭐⭐⭐☆☆</div>
</div>
</div>
</div>
</section>
<section class="book-table" id="book-table">
<div class="booking-text">
<h2>Book A Table</h2>
<p>Reserve your spot at Street Spice today and enjoy an unforgettable dining experience!</p>
</div>
<div class="booking-form">
<h3>Reservation Form</h3>
<form action="#" method="POST">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Enter your email address" required>
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="Enter your phone number" required>
<label for="date">Reservation Date</label>
<input type="date" id="date" name="date" placeholder="Enter the date you want to reserve" required>
<label for="time">Reservation Time</label>
<input type="time" id="time" name="time" placeholder="Enter the reservation time" required>
<label for="guests">Number of Guests</label>
<input type="number" id="guests" name="guests" min="1" max="10" placeholder="Enter the number of guest" required>
<button type="submit">Reserve Now</button>
</form>
</div>
</section>
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>Street Spice</h3>
<p>Serving the best dishes in town! Visit us today!</p>
</div>
<div class="footer-section">
<h4>Contact</h4>
<p>Email: contact@streetspice.com</p>
<p>Phone: +1 234 567 890</p>
<p>Address: 123 Spice Street, Flavor Town</p>
</div>
<div class="footer-section">
<h4>Follow Us</h4>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Street Spice. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>
Tags:
source_codes