Responsive Restaurant Website Using HTML , CSS & Javascript
Introduction
Hello friends, all of you are welcome to this new blog post. Today we have created a beautiful restaurant website and you will be very happy to know that this website is also responsive so that you can run this website in any device and this You can enjoy the website, friends, we have created this website with the help of HTML CSS and JavaScript.
Friends, in this restaurant website, we have added some sections which are different, like we have added a section of food in this website, in which the images of different foods and the name of that food are included, which you can see in the code given below. can
<div class=”food-menu-item”>
<div class=”food-img”>
<img src=”https://images.unsplash.com/photo-1505253758473-96b7015fcd40?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8aW5kaWFuJTIwZm9vZHxlbnwwfHwwfHx8MA%3 D%3D” alt=”” />
</div>
<div class=”food-description”>
<h2 class=”food-titile”>Food Menu Item 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Non,
quae.
</p>
<p class=”food-price”>Price: ₹ 250</p>
</div>
Friends, in this way we have created some sections in this website, so if you can edit these sections as per your wish and can also add some different sections.
Follow these steps to use Restaurant Website:-
If you want to use the code of the restaurant website for free, then you will have to follow all these rules, only then you will be able to use the code properly, otherwise you may face problems.
- First of all, to use the code, you have to create a new folder in your computer and then open that folder in your code editor.
- If you have opened the folder in the code editor, then now you have to create these three files in that folder: index.html in which you will create the structure of the restaurant website and then style.css in which you will design the restaurant website. We will write the code to do this, then in the last script.js in which which button will do what work, that code will be written.
- Now you do not have to do anything, now according to the heading written above the code given below, you have to upload the code in that file, then your website will be ready.
HTML (index.html)
Restraunt
Types of food
Food Menu
Food Menu Item 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
Price: ₹ 250
Food Menu Item 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
Price: ₹ 250
Food Menu Item 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
Price: ₹ 250
Food Menu Item 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
Price: ₹ 250
Food Menu Item 5
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
Price: ₹ 250
Food Menu Item 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
quae.
Price: ₹ 250
What Our Customers Say
Ross Lee
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit
voluptas cupiditate aspernatur odit doloribus non.
Amelia Watson
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit
voluptas cupiditate aspernatur odit doloribus non.
Ben Roy
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit
voluptas cupiditate aspernatur odit doloribus non.
Contact Us
Submit
CSS (Style.css)
*,
*::after,
*::before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.html {
font-size: 62.5%;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* ///////////..utility classes../////////// */
.container {
max-width: 1200px;
width: 90%;
margin: auto;
}
#showcase{
height: 500px;
}
.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: black;
}
.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: 37px -42px 10px 37px #aaa;
;
position: fixed;
width: 100%;
background: #fff;
color: #000;
height: 70px;
display: flex;
align-items: center;
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://images.unsplash.com/photo-1499028344343-cd173ffc68a9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTV8fHxlbnwwfHx8fHw%3D");
background-position: center;
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;
row-gap: 20px;
}
.main-title {
text-transform: uppercase;
margin-top: 1.5em;
font-size: 4rem;
color: chocolate;
}
.showcase-container p{
color: white;
}
/* ......//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;
display: flex;
flex-direction: column;
row-gap: 20px;
text-align: justify;
}
@keyframes about-text-animation {
100% {
transform: translate(0);
}
}
.about-img img {
display: block;
height: 400px;
margin: auto;
object-fit: cover;
object-position: right;
width: 400px;
border-radius: 50%;
}
/* ..........////Food category///........... */
#food-menu{
background-color: whitesmoke;
padding-top: 30px;
}
#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: black;
font-weight: 700;
}
.food-container {
display: flex;
justify-content: space-between;
}
.food-container img {
display: block;
width: 100%;
margin: auto;
max-height: 300px;
object-fit: cover;
border-radius: 10px;
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;
color: black;
font-weight: 700;
}
.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-color: white;
}
.testimonial-title {
text-align: center;
font-size: 2.8rem;
color: black;
font-weight: 700;
}
.testimonial-container {
display: flex;
justify-content: space-between;
margin-top: 30px;
column-gap: 20px;
}
.testimonial-box .checked {
color: #ff9529;
}
.testimonial-box .testimonial-text {
margin: 1rem 0;
color: #444;
}
.testimonial-box {
text-align: center;
padding: 20px;
background-color: white;
border-radius: 10px;
display: flex;
flex-direction: column;
row-gap: 10px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.customer-photo img {
display: block;
width: 150px;
height: 150px;
object-fit: cover;
object-position: center;
border-radius: 50%;
margin: auto;
}
.customer-photo p {
padding-top: 20px;
}
/* ........ Contact Us........... */
#contact {
padding: 5rem 0;
background: rgb(226, 226, 226);
}
.contact-container {
display: flex;
background: #fff;
border-radius: 10px;
padding: 20px;
}
.contact-img {
width: 50%;
}
.contact-img img {
display: block;
height: 420px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
width: 100%;
object-position: center;
object-fit: cover;
}
.form-container {
padding: 1rem;
width: 50%;
margin: auto;
}
.form-container input {
display: block;
width: 100%;
padding: 1rem 0;
box-shadow: none;
outline: none;
margin-bottom: 1rem;
color: #444;
font-weight: 500;
background: whitesmoke;
padding-left: 20px;
border: 1px solid;
border-radius: 10px;
}
.form-container textarea {
display: block;
width: 100%;
border: none;
display: block;
width: 100%;
padding: 1rem 0;
box-shadow: none;
outline: none;
margin-bottom: 1rem;
color: #444;
font-weight: 500;
background: whitesmoke;
padding-left: 20px;
border: 1px solid;
border-radius: 10px;
color: #444;
outline: none;
resize: none;
}
.form-container h2 {
font-size: 2.7rem;
color: black;
font-weight: 700;
margin-bottom: 1rem;
margin-top: -1.2rem;
}
.form-container a {
font-size: 1.3rem;
}
#footer h2 {
text-align: center;
font-size: 1.8rem;
padding: 0.6rem;
font-weight: 500;
color: black;
background: white;
}
/* ......../ 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;
}
}
Javascript (Script.js)
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$("header").addClass("sticky");
} else {
$("header").removeClass("sticky");
}
});
function newDate() {
return new Date().getFullYear();
}
document.onload = document.getElementById("autodate").innerHTML = +newDate();
});
library management system using python with source code using Python GUI Tkinter (Graphical User Interface) How to Run the code: Introduction: Imagine …
Space Shooter Game Using Python with source code Overview: A space shooter game typically involves controlling a spaceship to navigate through space …
Hotel Management System Using Python with source code Introduction: Welcome to our blog post introducing a helpful tool for hotels: the Tkinter-based …
Student Management System Using Python Introduction: The Student Management System is a comprehensive software solution designed to streamline the process of managing …