Discover Our Exquisite Restaurant Website
Welcome to our beautifully designed restaurant website, crafted with HTML and CSS to provide a seamless and engaging user experience. Whether you’re a food enthusiast or a casual diner, our website offers everything you need to explore our culinary delights.
Welcome to our beautifully designed restaurant website, crafted with HTML and CSS to provide a seamless and engaging user experience. Whether you’re a food enthusiast or a casual diner, our website offers everything you need to explore our culinary delights.
Features
Responsive Design: Enjoy a flawless browsing experience on any device, from desktops to smartphones.
Interactive Menu: Browse through our diverse menu, featuring mouth-watering dishes and daily specials.
Customer Reviews: Read testimonials from our satisfied customers and see why they love dining with us.
Contact Information: Find our location, opening hours, and contact details with ease.
Interactive Menu: Browse through our diverse menu, featuring mouth-watering dishes and daily specials.
Customer Reviews: Read testimonials from our satisfied customers and see why they love dining with us.
Contact Information: Find our location, opening hours, and contact details with ease.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resturant Website</title>
<link rel="stylesheet" href="resturant.css"/>
<script src="https://kit.fontawesome.com/9161e67940.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="navigation_container">
<div class="logo_container">
<img src="images/logo.png" alt="logo"/>
</div>
<div class="bar_icon"><i class="fa-solid fa-bars"></i></div>
</div>
</nav>
<!--Hero SEction-->
<div class="container">
<div class="hero">
<div class="hero_image">
<img src="images/hero_image.png" alt="hero image" />
</div>
<div class="hero_content">
<div class="tag">50% Off on All Products</div>
<h1>Enjoy Your Delicious Food</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptates, iste corporis tempore necessitatibus inventore ex?
</p>
<button class="explore_btn">Explore Now</button>
</div>
</div>
<section class="features">
<div class="feature">
<img src="icons/discount.png" alt="" />
<div class="feature_content">
<h3>Discount Voucher</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
</div>
<div class="feature">
<img src="icons/fresh.png" alt="" />
<div class="feature_content">
<h3>Fresh Healthy Food</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
</div>
<div class="feature">
<img src="icons/delivery.png" alt="" />
<div class="feature_content">
<h3>Fast Home Delivery</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
</div>
</section>
<div class="divider">
</div>
<div class="menu">
<div class="tag">Our Menu</div>
<h2>Explore Our Menu</h2>
<div class="grid">
<div class="item1">
<img
class="grid-image"
src="images/grid_image1.png"
alt="image 1"
/>
</div>
<div class="item2">
<img
class="grid-image"
src="images/grid_image2.png"
alt="image 2"
/>
</div>
<div class="item3">
<img
class="grid-image"
src="images/grid_image3.png"
alt="image 3"
/>
</div>
<div class="item4">
<img
class="grid-image"
src="images/grid_image4.png"
alt="image 4"
/>
</div>
<div class="item5">
<img
class="grid-image"
src="images/grid_image5.png"
alt="image 5"
/>
</div>
<div class="item6">
<img
class="grid-image"
src="images/grid_image6.png"
alt="image 6"
/>
</div>
<div class="item7">
<img
class="grid-image"
src="images/grid_image7.png"
alt="image 7"
/>
</div>
</div>
</div>
</div>
<footer>
<div class="footer_container container">
<div class="footer_logo">
<img src="images/logo.png" alt="logo" />
</div>
<div class="link_lists">
<h3>Main Links</h3>
<ul>
<li>Order Tracking</li>
<li>New Order</li>
<li>Contact Us</li>
<li>News & Blogs</li>
</ul>
</div>
<div class="link_lists">
<h3>Support</h3>
<ul>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Terms & Conditons</li>
</ul>
</div>
<div class="news_letter">
<h3>Support</h3>
<input type="email" placeholder="Enter your Email..." />
<h3>Follow Us</h3>
<div class="icon_container">
<div class="icon">
<i class="fa fa-facebook"></i>
</div>
<div class="icon">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,
wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,
300;1,400;1,500;1,700;1,900&display=swap')
</style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
line-height: 1.4;
font-weight: 300;
font-family: "Roboto", sans-serif;
}
/* Navigation */
nav{
box-shadow: 5px 5px 5px rgba(1,1,1,0.5);
position:sticky;
top:0;
margin-bottom: 32px;
background-color: pink;
padding: 10px;
z-index: 50; /*to prevent overlapping
So, if a puppet has z-index: 50;, it means that this puppet will appear in front
of all other puppets(elements) with a z-index less than 50. But, it will be behind
any puppet with a z-index more than 50.*/
}
.navigation_container{
display:flex;
justify-content: space-between;
align-items: center;
}
.navigation_container{
max-width: 1200px;
}
.bar_icon{
font-size:35px;
}
/*HERO SECTION*/
button{
padding: 10px 15px;
border-color: blue;
transition: ease-in-out;
}
button:hover{
opacity:0.5cm;
transition:0.2s ease-in-out;
background-color: blue;
}
.hero{
display:flex; /*Taki content jo hai side by side ho jaye */
gap: 100px;
justify-content: center;
align-items: center;
}
.heorcontent{
display: flex;
flex-direction:column;
gap: 20px;
}
.tag {
align-self:flex-start;
background-color: green;
padding: 5px 10px;
color: white;
}
.herocontent h1{
font-size:72px;
line-height:1.2;
font-weight:400;
}
.explore_btn{
background:green;
align-self:flex-start;
}
/*Features Section */
.features{
margin-top: 100px;
display: flex;
gap :20px;
margin-bottom: 50px;
}
.feature{
display:flex;
gap:20px;
padding:20px;
}
.feature img{
width:72px;
}
.divider {
border: 1px solid wheat;
margin: 20px 30px;
}
.feature:hover{
transition: 0.2s ease-in-out;
box-shadow: 10px 10px 10px rgba(1,1,1,0.2);
color:blue;
border-color: lightcoral;
}
/*menu*/
.menu{
display: flex;
flex-direction: column;
gap:50px;
margin:50px 0;
align-items: center;
}
.menu .tag{
align-self:center;
}
.grid-image {
border-radius: 10px;
transition: 0.2s ease-in-out;
width: 100%;
height: 100%;
}
.grid-image:hover {
transform: scale(1.05);
transition: 0.2s ease-in-out;
}
.grid {
display: grid;
gap: 10px;
grid-template-areas:
"I1 I1 I2 I3"
"I1 I1 I2 I7"
"I4 I5 I6 I7";
}
.item1 {
grid-area: I1;
}
.item2 {
grid-area: I2;
}
.item3 {
grid-area: I3;
}
.item4 {
grid-area: I4;
}
.item5 {
grid-area: I5;
}
.item6 {
grid-area: I6;
}
.item7 {
grid-area: I7;
}
.grid{
padding: 10px;
}
.grid_image{
border-radius: 0;
}
/* Footer Section */
footer {
background-color: #fff0db;
}
.link_lists h3 {
margin-bottom: 10px;
color: gray;
}
.link_lists ul {
list-style: none;
}
.link_lists ul li {
font-size: 16px;
margin-bottom: 5px;
}
.news_letter h3 {
margin-bottom: 10px;
color: gray;
}
.news_letter input {
padding: 5px 40px;
margin-bottom: 10px;
}
.footer_container {
padding: 30px;
display: flex;
justify-content: space-between;
}
.icon_container {
display: flex;
gap: 15px;
font-size: 32px;
}
@media (max-width: 786px) {
.hero {
flex-direction: column;
}
.hero_image {
display: flex;
justify-content: center;
}
.hero_image img {
width: 80%;
}
.hero_content {
gap: 10px;
padding: 0 20px;
}
.hero_content h1 {
font-size: 32px;
}
.features {
flex-direction: column;
}
.feature {
flex-direction: column;
}
.grid {
padding: 10px;
}
.grid-image {
border-radius: 0px;
}
.footer_container {
flex-direction: column;
}
}
Comments
Post a Comment