Introduction
Hello friends, welcome to our new beautiful project today. We have created a responsive restaurant website just for you. This project is simple, easy to understand, and works well on all devices.
What Does "Responsive" Mean?
A responsive website changes its layout to look good on any screen size. Whether you use a phone, tablet, or computer, the site will be easy to use and look great.
Benefits of an Online Restaurant Website
- More Customers: More people can find your restaurant online.
- Easy Ordering: Customers can order food directly from your website.
- Better Payments: Integrate simple and safe payment options.
- Increased Profit: A good website can help your business grow.
Steps to Build the Website
1. Create the HTML Structure
HTML is the basic building block of your website. You will create sections for:
- Navigation Bar: Links to different parts of the website.
- Home Section: A welcome message and image.
- Menu Section: A list of food items.
- Reviews Section: Customer reviews with star icons.
- Contact Form: A form for customers to send a message.
- Footer: Information like copyright details.
Restaurant Website HTML Code
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Restraunt</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="navbar">
<div class="navbar-container container">
<input type="checkbox" name="" id="">
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<ul class="menu-items">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#food">Category</a></li>
<li><a href="#food-menu">Menu</a></li>
<li><a href="#testimonials">Testimonial</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<h1 class="logo">RS</h1>
</div>
</nav>
<section class="showcase-area" id="showcase">
<div class="showcase-container">
<h1 class="main-title" id="home">Eat Right Food</h1>
<p>Eat Healty, it is good for our health.</p>
<a href="#food-menu" class="btn btn-primary">Menu</a>
</div>
</section>
<section id="about">
<div class="about-wrapper container">
<div class="about-text">
<p class="small">About Us</p>
<h2>We've beem making healthy food last for 10 years</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse ab
eos omnis, nobis dignissimos perferendis et officia architecto,
fugiat possimus eaque qui ullam excepturi suscipit aliquid optio,
maiores praesentium soluta alias asperiores saepe commodi
consequatur? Perferendis est placeat facere aspernatur!
</p>
</div>
<div class="about-img">
<img src="https://i.postimg.cc/mgpwzmx9/about-photo.jpg" alt="food" />
</div>
</div>
</section>
<section id="food">
<h2>Types of food</h2>
<div class="food-container container">
<div class="food-type fruite">
<div class="img-container">
<img src="https://i.postimg.cc/yxThVPXk/food1.jpg" alt="error" />
<div class="img-content">
<h3>fruite</h3>
<a
href="https://en.wikipedia.org/wiki/Fruit"
class="btn btn-primary"
target="blank"
>learn more</a
>
</div>
</div>
</div>
<div class="food-type vegetable">
<div class="img-container">
<img src="https://i.postimg.cc/Nffm6Rkk/food2.jpg" alt="error" />
<div class="img-content">
<h3>vegetable</h3>
<a
href="https://en.wikipedia.org/wiki/Vegetable"
class="btn btn-primary"
target="blank"
>learn more</a
>
</div>
</div>
</div>
<div class="food-type grin">
<div class="img-container">
<img src="https://i.postimg.cc/76ZwsPsd/food3.jpg" alt="error" />
<div class="img-content">
<h3>grin</h3>
<a
href="https://en.wikipedia.org/wiki/Grain"
class="btn btn-primary"
target="blank"
>learn more</a
>
</div>
</div>
</div>
</div>
</section>
<section id="food-menu">
<h2 class="food-menu-heading">Food Menu</h2>
<div class="food-menu-container container">
<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/wTLMsvSQ/food-menu1.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
</p>
<p class="food-price">Price: ₹ 250</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img
src="https://i.postimg.cc/sgzXPzzd/food-menu2.jpg"
alt="error"
/>
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
</p>
<p class="food-price">Price: ₹ 250</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/8zbCtYkF/food-menu3.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
</p>
<p class="food-price">Price: ₹ 250</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/Yq98p5Z7/food-menu4.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
</p>
<p class="food-price">Price: ₹ 250</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/KYnDqxkP/food-menu5.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
</p>
<p class="food-price">Price: ₹ 250</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/Jnxc8xQt/food-menu6.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
</p>
<p class="food-price">Price: ₹ 250</p>
</div>
</div>
</div>
</section>
<section id="testimonials">
<h2 class="testimonial-title">What Our Customers Say</h2>
<div class="testimonial-container container">
<div class="testimonial-box">
<div class="customer-detail">
<div class="customer-photo">
<img src="https://i.postimg.cc/5Nrw360Y/male-photo1.jpg" alt="" />
<p class="customer-name">Ross Lee</p>
</div>
</div>
<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit
voluptas cupiditate aspernatur odit doloribus non.
</p>
</div>
<div class="testimonial-box">
<div class="customer-detail">
<div class="customer-photo">
<img
src="https://i.postimg.cc/sxd2xCD2/female-photo1.jpg"
alt=""
/>
<p class="customer-name">Amelia Watson</p>
</div>
</div>
<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit
voluptas cupiditate aspernatur odit doloribus non.
</p>
</div>
<div class="testimonial-box">
<div class="customer-detail">
<div class="customer-photo">
<img src="https://i.postimg.cc/fy90qvkV/male-photo3.jpg" alt="" />
<p class="customer-name">Ben Roy</p>
</div>
</div>
<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit
voluptas cupiditate aspernatur odit doloribus non.
</p>
</div>
</div>
</section>
<section id="contact">
<div class="contact-container container">
<div class="contact-img">
<img src="https://i.postimg.cc/1XvYM67V/restraunt2.jpg" alt="" />
</div>
<div class="form-container">
<h2>Contact Us</h2>
<input type="text" placeholder="Your Name" />
<input type="email" placeholder="E-Mail" />
<textarea
cols="30"
rows="6"
placeholder="Type Your Message"
></textarea>
<a href="#" class="btn btn-primary">Submit</a>
</div>
</div>
</section>
<footer id="footer">
<h2>Restraunt © all rights reserved</h2>
</footer>
</body>
<!--
.................../ JS Code for smooth scrolling /...................... -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// Add smooth scrolling to all links
$("a").on("click", function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$("html, body").animate(
{
scrollTop: $(hash).offset().top,
},
800,
function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
}
);
} // End if
});
});
</script>
</html>
This HTML code creates a responsive restaurant website that works well on different devices. It starts by setting the language to English and includes meta tags to define the character set, compatibility with older browsers, and viewport settings for mobile responsiveness. The head section also links to external CSS files and the Font Awesome library for icons, ensuring the page looks modern and appealing. In the body, a navigation bar is defined with a hidden checkbox and hamburger icon for small screens, making the menu items accessible on both desktops and mobiles. The navigation bar contains links to various sections like Home, About, Category, Menu, Testimonial, and Contact, along with a logo displayed as "RS". Following the navbar, the showcase section features a prominent title, a short message, and a button that directs users to the food menu. The About section provides information about the restaurant’s background with text and an image, while the Food section displays different food categories (fruit, vegetable, grain) each with an image and a "learn more" link to Wikipedia pages. The Food Menu section lists several food items with pictures, descriptions, and prices, and the Testimonial section shows customer reviews with star ratings and photos. Finally, a Contact section offers a form for users to enter their name, email, and message, and the footer concludes the page with a copyright notice. Additionally, the code includes jQuery and a custom JavaScript file (app.js) at the end to add interactive features like smooth scrolling.
Restaurant Website CSS Code
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
*,
*::after,
*::before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.html {
font-size: 62.5%;
}
body {
font-family: "Poppins", sans-serif;
}
/* ///////////..utility classes../////////// */
.container {
max-width: 1200px;
width: 90%;
margin: auto;
}
.btn {
display: inline-block;
padding: 0.5em 1.5em;
text-decoration: none;
border-radius: 50px;
cursor: pointer;
outline: none;
margin-top: 1em;
text-transform: uppercase;
font-weight: small;
}
.btn-primary {
color: #fff;
background: #16a083;
}
.btn-primary:hover {
background: #117964;
transition: background 0.3s ease-in-out;
}
/* ............/navbar/............ *
/* desktop mode............/// */
.navbar input[type="checkbox"],
.navbar .hamburger-lines {
display: none;
}
.navbar {
box-shadow: 0px 5px 10px 0px #aaa;
position: fixed;
width: 100%;
background: #fff;
color: #000;
opacity: 0.85;
height: 50px;
z-index: 12;
}
.navbar-container {
display: flex;
justify-content: space-between;
height: 64px;
align-items: center;
}
.menu-items {
order: 2;
display: flex;
}
.menu-items li {
list-style: none;
margin-left: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.menu-items a {
text-decoration: none;
color: #444;
font-weight: 500;
transition: color 0.3s ease-in-out;
}
.menu-items a:hover {
color: #117964;
transition: color 0.3s ease-in-out;
}
.logo {
order: 1;
font-size: 2.3rem;
margin-bottom: 0.5rem;
}
/* ............//// Showcase styling ////......... */
.showcase-area {
height: 50vh;
background: linear-gradient(
rgba(240, 240, 240, 0.144),
rgba(255, 255, 255, 0.336)
),
url("https://i.postimg.cc/wT3TQS3V/header-image2.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.showcase-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
font-size: 1.6rem;
}
.main-title {
text-transform: uppercase;
margin-top: 1.5em;
}
/* ......//about us//...... */
#about {
padding: 50px 0;
background: #f5f5f7;
}
.about-wrapper {
display: flex;
flex-wrap: wrap;
}
#about h2 {
font-size: 2.3rem;
}
#about p {
font-size: 1.2rem;
color: #555;
}
#about .small {
font-size: 1.2rem;
color: #666;
font-weight: 600;
}
.about-img {
flex: 1 1 400px;
padding: 30px;
transform: translateX(150%);
animation: about-img-animation 1s ease-in-out forwards;
}
@keyframes about-img-animation {
100% {
transform: translate(0);
}
}
.about-text {
flex: 1 1 400px;
padding: 30px;
margin: auto;
transform: translate(-150%);
animation: about-text-animation 1s ease-in-out forwards;
}
@keyframes about-text-animation {
100% {
transform: translate(0);
}
}
.about-img img {
display: block;
height: 400px;
max-width: 100%;
margin: auto;
object-fit: cover;
object-position: right;
}
/* ..........////Food category///........... */
#food {
padding: 5rem 0 10rem 0;
}
#food h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 400;
margin-bottom: 40px;
text-transform: uppercase;
color: #555;
}
.food-container {
display: flex;
justify-content: space-between;
}
.food-container img {
display: block;
width: 100%;
margin: auto;
max-height: 300px;
object-fit: cover;
object-position: center;
}
.img-container {
margin: 0 1rem;
position: relative;
}
.img-content {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 2;
text-align: center;
transition: all 0.3s ease-in-out 0.1s;
}
.img-content h3 {
color: #fff;
font-size: 2.2rem;
}
.img-content a {
font-size: 1.2rem;
}
.img-container::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.871);
opacity: 0;
z-index: 1;
transform: scaleY(0);
transform-origin: 100% 100%;
transition: all 0.3s ease-in-out;
}
.img-container:hover::after {
opacity: 1;
transform: scaleY(1);
}
.img-container:hover .img-content {
opacity: 1;
top: 40%;
}
/* .........../Food Menu/............ */
.food-menu-heading {
text-align: center;
font-size: 3.4rem;
font-weight: 400;
color: #666;
}
.food-menu-container {
display: flex;
flex-wrap: wrap;
padding: 50px 0px 30px 0px;
}
.food-menu-container img {
display: block;
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.food-menu-item {
display: flex;
flex: 1 1 600px;
justify-content: space-evenly;
margin-bottom: 3rem;
}
.food-description {
margin: auto 1.5rem;
}
.font-title {
font-size: 1.8rem;
font-weight: 400;
color: #444;
}
.food-description p {
font-size: 1.4rem;
color: #555;
font-weight: 500;
}
.food-description .food-price {
color: #117964;
font-weight: 700;
}
/* ........./ Testimonial /.......... */
#testimonials {
padding: 5rem 0;
background: rgba(243, 243, 243);
}
.testimonial-title {
text-align: center;
font-size: 2.8rem;
font-weight: 400;
color: #555;
}
.testimonial-container {
display: flex;
justify-content: space-between;
font-size: 1.4rem;
padding: 1rem;
}
.testimonial-box .checked {
color: #ff9529;
}
.testimonial-box .testimonial-text {
margin: 1rem 0;
color: #444;
}
.testimonial-box {
text-align: center;
padding: 1rem;
}
.customer-photo img {
display: block;
width: 150px;
height: 150px;
object-fit: cover;
object-position: center;
border-radius: 50%;
margin: auto;
}
/* ........ Contact Us........... */
#contact {
padding: 5rem 0;
background: rgb(226, 226, 226);
}
.contact-container {
display: flex;
background: #fff;
}
.contact-img {
width: 50%;
}
.contact-img img {
display: block;
height: 400px;
width: 100%;
object-position: center;
object-fit: cover;
}
.form-container {
padding: 1rem;
width: 50%;
margin: auto;
}
.form-container input {
display: block;
width: 100%;
border: none;
border-bottom: 2px solid #ddd;
padding: 1rem 0;
box-shadow: none;
outline: none;
margin-bottom: 1rem;
color: #444;
font-weight: 500;
}
.form-container textarea {
display: block;
width: 100%;
border: none;
border-bottom: 2px solid #ddd;
color: #444;
outline: none;
padding: 1rem 0;
resize: none;
}
.form-container h2 {
font-size: 2.7rem;
font-weight: 500;
color: #444;
margin-bottom: 1rem;
margin-top: -1.2rem;
}
.form-container a {
font-size: 1.3rem;
}
#footer h2 {
text-align: center;
font-size: 1.8rem;
padding: 2.6rem;
font-weight: 500;
color: #fff;
background: rgb(65, 65, 65);
}
/* ......../ media query /.......... */
@media (max-width: 768px) {
.navbar {
opacity: 0.95;
}
.navbar-container input[type="checkbox"],
.navbar-container .hamburger-lines {
display: block;
}
.navbar-container {
display: block;
position: relative;
height: 64px;
}
.navbar-container input[type="checkbox"] {
position: absolute;
display: block;
height: 32px;
width: 30px;
top: 20px;
left: 20px;
z-index: 5;
opacity: 0;
}
.navbar-container .hamburger-lines {
display: block;
height: 23px;
width: 35px;
position: absolute;
top: 17px;
left: 20px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.navbar-container .hamburger-lines .line {
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: #333;
}
.navbar-container .hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.4s ease-in-out;
}
.navbar-container .hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}
.navbar-container .hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.4s ease-in-out;
}
.navbar .menu-items {
padding-top: 100px;
background: #fff;
height: 100vh;
max-width: 300px;
transform: translate(-150%);
display: flex;
flex-direction: column;
margin-left: -40px;
padding-left: 50px;
transition: transform 0.5s ease-in-out;
box-shadow: 5px 0px 10px 0px #aaa;
}
.navbar .menu-items li {
margin-bottom: 1.5rem;
font-size: 1.3rem;
font-weight: 500;
}
.logo {
position: absolute;
top: 5px;
right: 15px;
font-size: 2rem;
}
.navbar-container input[type="checkbox"]:checked ~ .menu-items {
transform: translateX(0);
}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
transform: rotate(35deg);
}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
transform: scaleY(0);
}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
transform: rotate(-35deg);
}
/* ......./ food /......... */
.food-container {
flex-direction: column;
align-items: stretch;
}
.food-type:not(:last-child) {
margin-bottom: 3rem;
}
.food-type {
box-shadow: 5px 5px 10px 0 #aaa;
}
.img-container {
margin: 0;
}
}
@media (max-width: 500px) {
html {
font-size: 65%;
}
.navbar .menu-items li{
font-size: 1.6rem;
}
.testimonial-container {
flex-direction: column;
text-align: center;
}
.food-menu-container img {
margin: auto;
}
.food-menu-item {
flex-direction: column;
text-align: center;
}
.form-container {
width: 90%;
}
.contact-container {
display: flex;
flex-direction: column;
}
.contact-img {
width: 90%;
margin: 3rem auto;
}
.logo {
position: absolute;
top: 06px;
right: 15px;
font-size: 3rem;
}
.navbar .menu-items li {
margin-bottom: 2.5rem;
font-size: 1.8rem;
font-weight: 500;
}
}
@media (min-width: 769px) and (max-width: 1200px) {
.img-container h3 {
font-size: 1.5rem;
}
.img-container .btn {
font-size: 0.7rem;
}
}
@media (orientation: landscape) and (max-height: 500px) {
.showcase-area {
height: 50vmax;
}
}
This CSS code begins by importing the "Poppins" font from Google Fonts and resetting the default padding and margins for all elements to create a clean slate. It then sets a base font size and applies the "Poppins" font to the whole page, ensuring consistent text styling. Utility classes like .container are defined to limit the width of content and center it, while .btn and .btn-primary styles create attractive, rounded buttons with specific colors that change on hover. The navbar is styled to be fixed at the top with a slight shadow, and its inner container uses flexbox for even spacing of items; it also hides certain elements on larger screens to prepare for mobile responsiveness. The showcase area uses a background image with a gradient overlay, centered content, and uppercase titles to create a striking hero section. In the About section, both text and images are arranged side by side using flexbox, with animations that slide the content into view for a smooth effect. The food section and food menu sections are styled to display images and text in a neat, grid-like layout with proper spacing and consistent sizing, while hover effects reveal extra content on images. The testimonials section and contact section have their own styling to ensure that customer reviews and the contact form are clearly visible and well-organized. Finally, media queries adjust the layout and font sizes for various screen widths and orientations, making sure that the website looks good on both desktops and mobile devices
Output Of HTML CSS Code Restaurant Website
Conclusion
Creating a restaurant website that works well on all devices using HTML and CSS is a great project. It shows your skills in designing and structuring a website. This article will help you build a site that looks good, improves the customer experience, and helps the business grow.
📚 Related Articles:-
No comments:
Post a Comment