Today you’re lucky to get a fresh resource – Food and Restaurant Template Using HTML, CSS, and JavaScript is completely free for you.

Food and Restaurant Template Using HTML, CSS, and JavaScript (Free Source Code)

Byjvcodes

Every business, especially the food and restaurant one, needs to create a professional website to be noticed by the customers and present the services.

Today you’re lucky to get a fresh resource – Food and Restaurant Template Using HTML, CSS, and JavaScript is completely free for you.

This template is formed with one of the best programming practices in terms of functionality in addition to appearance quality.

GitHub Source:

Features

In order to guarantee your website is professional to the eyes and quick to serve its purposes, this template holds every feature you need. Below are six key features:

  • Responsive Design: The page layout is also responsive to the size of the graphical interface and can be run on a desktop, a tablet, and a mobile device.
  • Functional Header: Contains a place for phone number and links to social networks for convenience and contact information.
  • Eye-Catching Menu Section: Used to list the different foods that are offered in the restaurant together with the price tag attached to each.
  • Working Contact Form: It gives customers a platform to forward their inquiries or to make reservations online.
  • Google Map Integration: It features a map for the identification of the restaurants from the part of the country where you operate from.
  • Clean and Simple Layout: There is also simplicity of the layout and navigation to ensure the client gets the most comfortable experience.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Food Website

This template is very easy to use when designing a website. First, the following source codes should be downloaded from below location. Then take the HTML, CSS, and JavaScript and just paste them in the respective files in your project. Then just connect the files, and your Food and Restaurant Template will be ready for work!

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Food and Restaurant Templates | JV Codes</title>
		<link rel="icon" type="image/png" href="images/favicon.png">
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

		<!-- Links -->
		<link rel="stylesheet" href="fonts/icons-linear.css">
		<link rel="stylesheet" href="fonts/icons-fontawesome/css/all.min.css">
		<link rel="stylesheet" href="style.css">
		<link rel="stylesheet" href="style-responsive.css">
		<script src="js/jquery.js"></script>
		<script src="js/scripts.js"></script>
		<script src="contactform/contactform.js"></script>
		<script src="js/menuscript.js"></script>
	</head>

	<body id="home">
		<!-- HEADER -->
		<header>
			<div class="container psr">
				<div class="header_default">
					<div class="site-branding">
						<a href="index.html" class="logo">
							<img src="images/food-scoop-logo-white.png" alt="" class="logo-1">
							<img src="images/food-scoop-logo.png" alt="" class="logo-2">
						</a>
					</div>
					<div class="header-right">
						<div class="site-navwrap">
							<div class="navicons">
		                		<a href="javascript:void;" class="navshow">
		                			<span class="lnr lnr-menu"></span>
		                		</a>
		                		<a href="javascript:void;" class="navhide">
		                			<span class="lnr lnr-cross"></span>
		                		</a>
		            		</div>
		            		<div class="sitenav" id="sitenav">
		            			<div class="navwrap">
									<div class="navouter">
										<nav class="headermenu leftmenu" id="headnav" role="navigation">
											<ul>
												<li class="active"><a href="#home">Home</a></li>
												<li><a href="#about">About</a></li>
												<li><a href="#foodmenu">Menu</a></li>
												<li class="contact"><a href="#contact">Get in Touch</a></li>
											</ul>
										</nav>
									</div>
								</div>
				            </div>
						</div>

						<div class="contact-info">
							<a href="tel:#">
								<i class="fa-solid fa-phone-volume"></i>
								03056275237
							</a>	
							<a href="#"><i class="fa-brands fa-instagram"></i></a>
							<a href="#"><i class="fa-brands fa-youtube"></i></a>
						</div>
					</div>
						
				</div>
			</div>
		</header>
<!-- BANNER -->
		<section class="banner">
			<div class="container">
				<div class="bannercontent">
					<div class="text full">
						<h3>Good Food, Great Mood</h3>
						<h2>
							Breakfast, Lunch, and Dinner Just for You!
						</h2>
						<p>
							Enjoy <u>25% Off</u> This Weekend Only!
						</p>
					</div>
				</div>
			</div>
		</section>
<!-- ABOUT -->
		<section class="contentblock about" id="about">
			<div class="container">
				<div class="contentinline">
					<div class="text">
						<h3>About</h3>
						<h4>Your Favorite Dining Destination. </h4>
						<p>
							Welcome to one of the finest food destinations in your city, where every meal is a celebration of flavors. Our mission is to serve delicious, freshly prepared dishes that bring joy to your dining experience. Whether it’s breakfast, lunch, or dinner, we’ve got you covered.
						</p>
						<ul>
							<li>Crafted with care and passion for great taste.</li>
							<li>Warm, inviting ambiance for every occasion.</li>
							<li>Committed to exceptional quality and service.</li>
						</ul>		
					</div>
					<div class="imagearea">
						<img src="images/pic1.jpg" alt="" />
					</div>
				</div>
			</div>
		</section>
<!-- MENU -->
		<section class="foodmenu" id="foodmenu">
			<div class="container">
				<h3>Our Menu</h3>
				<h4>Delicious Dishes to Satisfy Every Craving</h4>
            <p>
                Explore a variety of mouth-watering meals, from irresistible starters to savory main courses and decadent desserts. Every dish is crafted with the finest ingredients and a pinch of love.
            </p>
				<div class="menuitems_wrap">
					<div class="item">
						<img src="images/fooditem1.jpg" alt="">
						<h6>Breakfast</h6>
						<h5>Egg Pancake</h5>
						<p>Price: $4.99</p>
					</div>
					<div class="item">
						<img src="images/fooditem2.jpg" alt="">
						<h6>Breakfast</h6>
						<h5>Scrambled Eggs</h5>
						<p>Price: $7.99</p>
					</div>
					<div class="item">
						<img src="images/fooditem3.jpg" alt="">
						<h6>Brunch</h6>
						<h5>Brown Bread With Coffee</h5>
						<p>Price: $3.99</p>
					</div>
					<div class="item">
						<img src="images/fooditem4.jpg" alt="">
						<h6>Lunch</h6>
						<h5>Rice, Fried Chicken, and Salad</h5>
						<p>Price: $6.99</p>
					</div>
					<div class="item">
						<img src="images/fooditem5.jpg" alt="">
						<h6>Lunch</h6>
						<h5>Saucy Pasta</h5>
						<p>Price: $5.99</p>
					</div>
					<div class="item">
						<img src="images/fooditem6.jpg" alt="">
						<h6>Dinner</h6>
						<h5>Dim Sum with Wine</h5>
						<p>Price: $7.99</p>
					</div>
				</div>
			</div>
		</section>
<!-- CONTACT -->
		<section class="contactsection" id="contact">
			<div class="container">
				<h3>Get in Touch</h3>
				<h4><strong>Have Questions? We're Here to Help!</strong></h4>
				<p>
					Whether you want to ask about our menu, make a reservation, or share your feedback, we’d love to hear from you. Reach out today and let us take care of the rest!
				</p>
				<div class="contactform">
					<form id="contactform" action="contactform/contactform.php" method="post">
						<input type="text" name="name" placeholder="Name*" required>
						<input type="email" name="email" placeholder="Email*" required>
						<textarea name="message" placeholder="Write..." required></textarea>
						<p>Booking an Appointment: Please Mention Date & Time Above. </p>
						<br clear="all" />
						<input type="submit" id="contactform_btn" value="Submit Message">
					</form>
				</div>
			</div>
		</section>
<!-- MAP AREA -->
		<section class="maparea" id="map">
			<div class="mapheading">
				<div class="container">
					Find Us on Map
				</div>
			</div>
			<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d50097403.94376151!2d-13.098340066429083!3d39.97039526357856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1665784479581!5m2!1sen!2sin" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
		</section>
<!-- FOOTER -->
		<footer>
			<div class="container">
				<div class="copyright">
					Copyright &copy; <span id="copyrightyear"></span> JV Codes
				</div>
			</div>
		</footer>
		<script src="js/bliss.js"></script>
		<script>
			var dateobj = new Date(); var getyear = dateobj.getFullYear(); var getyeardiv = document.getElementById('copyrightyear'); getyeardiv.innerHTML = getyear;
		</script>
	</body>
</html>

CSS

Here is the complete code for style.css file to style the food website:

/**
 * 	Template Name: Foody	
 * 	Template By: JV Codes
 * 	URL: https://jvcodes.com/
 * 	
 * */
		*{
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			margin: 0; padding: 0; border: 0; outline: 0;
			font-size: 100%;
		}
		ol, ul{list-style: none;}
		blockquote, q{quotes: none;}
		table{border-collapse: collapse; border-spacing: 0;}
		:focus{outline: 0;}
		ins{text-decoration: none;}
		del{text-decoration: line-through;}
		body{line-height: normal;}
		/* -- BREAK -- */ 

		body{
			background: #fff;
		}
		body.disablescroll{
			overflow-y: hidden;
		}
		.container{
			width: 1200px;
			margin: 0 auto;
		}
		.container.psr{
			position: relative;
		}

		/* -- HEADER CSS CODE -- */
		header{
			position: fixed;
			width: 100%;
			height: 105px;
			left: 0; top: 0;
			z-index: 3;
			transition: all 0.5s ease-in-out;
			border-bottom: 1px solid rgba(0,0,0,0);
		}
		header.fixed{
			background: #fff;
			border-bottom: 1px solid #eee;
			height: 80px;
		}
		header .container{
			position: relative;
			height: 100%;
		}

		.header_default{
			float:left;
			width:100%; height: 100%;
			position: relative;
			margin:0 0 0 0;
			padding:0 0 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.site-branding{
		}
		.site-branding a.logo{
			float: left;
			text-decoration: none;
		}
		.site-branding a.logo img{
			float: left;
			max-width: 220px;
			height: auto;
			margin: 0 0 0 0;
			transition: max-width 0.4s ease-in-out;
		}
		.site-branding a.logo img.logo-2{
			visibility: hidden;
		}
		header.fixed .site-branding a.logo img{
			max-width: 180px;
		}
		header.fixed .site-branding a.logo img.logo-2{
			visibility: visible;
		}
		header.fixed .site-branding a.logo img.logo-1{
			display: none;
		}
		.site-branding a.logo h3{
			text-align:left;
			color: #000;
			font-size:27px;
			font-family:'Arial';
			letter-spacing: -1px;
		}
		.site-branding a.logo h3 span{
			font-family: 'Arial', serif;
			font-weight: normal;
			margin-left: 10px;
		}
		
		.site-navwrap{
			float: left;
		}

		.navicons{
			display: none;
		}
		.navicons a.navshow{
			position: relative;
			float: left;
			width: 32px;
			height: 32px; 
			text-decoration: none;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 27px; 
			color: #000;
			transition: top 0.5s ease;
		}
		.navicons a.navshow span{
			
		}
		
		.navicons a.navhide{
			position: fixed;
			right: 20px; top: 10px;
			z-index: 3;
			text-decoration: none;
			display: none;
		}
		.navicons a.navhide span{
			float: left;
			width: 48px;
			height: 48px; 
			color:#fff;
			font-size: 36px; 
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.sitenav{}
		.navwrap{}
		.navouter{
			display: flex;
		}

		nav.headermenu{}
		nav.headermenu ul{
		}
		nav.headermenu ul li{
			float: left;
			text-align:left;
			color:#000;
			font-size:15px;
			font-weight: 400;
			margin-right: 30px;
			font-family: 'Poppins';
			text-transform: uppercase;
			position: relative;
		}
		nav.headermenu ul li:last-child{
			margin-right: 0;
		}
		nav.headermenu ul li a{
			color: #fff;
			text-decoration: none;
			padding: 8px 15px;
		}
		header.fixed nav.headermenu ul li a{
			color: #000;
		}
		nav.headermenu ul li.active a{
			background: #e7007f;
			color: #fff !important;
		}

		.contact-info{
			float: right;
			margin-left: 30px;
			padding-left: 30px;
			border-left: 1px solid #ddd;
		}
		.contact-info a{
			float: left;
			font-size: 17px;
			color: #fff;
			text-decoration: none;
			margin-right: 8px;
			transition:0.6s;
			-webkit-transition:0.6s;
			font-family: 'Poppins';
		}
		.contact-info a:first-of-type{
			margin-right: 12px;
		}
		.contact-info a:last-of-type{
			margin-right: 0;
		}
		.contact-info a i{
			color: #e7007f;
			margin-right: 5px;
		}
		header.fixed .contact-info a{
			color: #000;
		}

		/* -- BANNER -- */
		.banner{
			float:left;
			width:100%;
			margin:0 0 0 0;
			padding:300px 0 220px 0;
			background:url(images/bg2.jpg) no-repeat center center;
			background-size: cover;
			position: relative;
			z-index: 1;
		}
		.banner:before{
			position:absolute;
			width:100%; height:100%;
			background:rgba(0,0,0,0.3);
			left:0; top:0;
			margin:0 0 0 0; padding:0 0 0 0;
			z-index:-1;
			content:'';
		}
		.bannercontent{
			float:left;
			width:100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.bannercontent .text{
			
		}
		.bannercontent .text h3{
			color:#fff;
			font-size:40px;
			font-family:'Poppins';
			font-weight: normal;
			margin-bottom: 20px;
		}
		.bannercontent .text h2{
			color:#fff;
			font-size:90px;
			line-height: 100%;
			font-family:'Poppins';
			font-weight: bold;
			margin-bottom: 30px;
		}
		.bannercontent .text p{
			color:#fff;
			font-size:21px;
			line-height: 170%;
			font-family:'Poppins';
		}
		.bannercontent .text p u{
			font-weight: bold;
			color: #ffc818;
		}

		/* -- ABOUT CSS STARTS -- */
		.about{
			float:left;
			width:100%;
			margin:0 0 0 0;
			padding:100px 0;
		}
		.about .contentinline{
			display: flex;
			justify-content: space-between;
			flex-direction: row-reverse;
		}
		.about .imagearea{
			width: 50%;
			margin: 0 0 0 0;
			overflow:hidden;
		}
		.about .imagearea img{
			float: left;
			width: 100%; height: auto;
			aspect-ratio: 2/1.75;
			object-fit: cover;
			object-position: center;
		}
		.about .text{
			width: 45%;
			margin: 0 0 0 0;
		}
		.about .text h3{
			text-align:left;
			color:#000;
			font-size:90px;
			font-family:'Poppins';
			margin-bottom: 10px;
		}
		.about .text h4{
			text-align:left;
			color:#e7007f;
			font-size:30px;
			font-family:'Poppins';
			font-weight: normal;
			font-style: normal;
			margin-bottom: 30px;
			position: relative;
		}
		.about .text p{
			text-align:left;
			color:#000;
			font-size:18px;
			line-height: 170%;
			font-family:'Poppins';
			margin-bottom: 30px;
		}
		.about .text ul{
			list-style: disc;
			padding-left: 18px;
		}
		.about .text ul li{
			text-align:left;
			color:#000;
			font-size:18px;
			font-family:'Poppins';
			margin-bottom: 5px;
		}

		/* -- FOOD MENU STARTS -- */
		.foodmenu{
			float:left;
			width:100%;
			margin:0 0 0 0;
			padding:100px 0 50px 0;
			position: relative;
		}
		.foodmenu:before{
			position:absolute;
			width:200px;
			height:1px;
			background:#ccc;
			left:0; right:0; top:0;
			content:'';
			margin:0 auto 0 auto;
		}
		.foodmenu h3{
			text-align:center;
			color:#000;
			font-size:90px;
			font-family:'Poppins';
			margin-bottom: 10px;
		}
		.foodmenu h4{
			text-align:center;
			color:#e7007f;
			font-size:21px;
			font-family:'Poppins';
			font-weight: normal;
			font-style: normal;
			margin-bottom: 30px;
			position: relative;
		}
		.menuitems_wrap{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 65px;
		}
		.menuitems_wrap .item{
			flex-basis: 30%;
			margin-bottom: 60px;
		}
		.menuitems_wrap .item img{
			float: left;
			width: 100%; height: auto;
			aspect-ratio: 1.2/1;
			object-fit: cover;
			margin-bottom: 10px;
		}
		.menuitems_wrap .item h6{
			text-align:center;
			color:#e7007f;
			font-size:12px;
			font-family:'Poppins';
			margin-bottom: 15px;
			text-transform: uppercase;
			font-weight: 300;
		}
		.menuitems_wrap .item h5{
			text-align:center;
			color:#000;
			font-size:21px;
			font-family:'Poppins';
			font-weight: 500;
			margin-bottom: 12px;
		}
		.menuitems_wrap .item p{
			text-align:center;
			color:#666;
			font-size:15px;
			font-family:'Poppins';
			font-style: italic;
		}

		/* -- CONTACT STARTS -- */
		.contactsection{
			float:left;
			width:100%;
			margin:0 0 0 0;
			padding:100px 0 100px 0;
			position: relative;
			background: #e7007f;
		}
		.contactsection h3{
			text-align:left;
			color:#fff;
			font-size:90px;
			font-family:'Poppins';
			margin-bottom: 10px;
		}
		.contactsection h4{
			text-align:left;
			color:#fff;
			font-size:21px;
			font-family:'Poppins';
			font-weight: normal;
			font-style: normal;
			margin-bottom: 60px;
			position: relative;
		}
		.contactsection p{
			text-align:left;
			color:#fff;
			font-size:13px;
			font-family:'Poppins';
			text-transform: uppercase;
		}
		.contactform{
			display: table;
			width: 100%;
			margin: 0 auto 60px auto;
		}
		.contactform form{
			float:left;
			width:100%;
		}
		.contactform form input[type="text"],
		.contactform form input[type="email"],
		.contactform form textarea{
			float:left;
			width:48%;
			height:70px ;
			background: #fff;
			border: none;
			text-align:left;
			color:#111;
			font-size:19px;
			font-family:'Poppins';
			padding-left: 25px;
		}
		.contactform form textarea{
			width: 100%;
			height: 150px;
			padding: 25px;
			margin-top: 20px;
			margin-bottom: 10px;
		}
		.contactform form input[type="email"]{
			float: right;
		}
		.contactform form input[type="submit"]{
			float: left;
			width: auto;
			height: 80px;
			padding: 0 40px;
			text-align:center;
			color:#fff;
			font-size:16px;
			font-family:'Poppins';
			margin: 30px 0 0 0;
			cursor: pointer;
			background: #46001d;
			border: none;
			text-transform: uppercase;
		}

		/* -- MAP AREA STARTS -- */
		.maparea{
			float:left;
			width:100%;
			margin:0 0 0 0;
			padding:0 0 0 0;
			position: relative;
		}
		.maparea .mapheading{
			float:left;
			width:100%;
			margin:0 0 0 0;
			padding:40px 0;
			background: #fa38a3;
			text-align:left;
			color:#fff;
			font-size:36px;
			font-family:'Poppins';
		}
		.maparea iframe{
			float:left;
			width:100%; height: 600px;
			position: relative;
		}

		/* -- FOOTER STARTS -- */
		footer{
			float:left;
			width:100%;
			margin:0 0 0 0;
			padding:70px 0;
		}
		.copyright{
			float: left;
			text-align:left;
			color:#000;
			font-size:15px;
			font-family:'Poppins';
		}
		.copyright a{
			color: #e7007f;
			text-decoration: none;
			border-bottom: 1px solid #000;
		}
		.credits{
			float: right;
			text-align:left;
			color:#000;
			font-size:15px;
			font-family:'Poppins';
		}
		.credits a{
			color: #000;
			text-decoration: none;
			border-bottom: 1px solid #000;
		}

JavaScript

Here is the complete code for script.js file to function the food and restaurant website:

jQuery(document).ready(function(e){e(".navshow").click(function(){e(".sitenav").fadeIn(),e(this).hide(),e(this).next(".navhide").fadeIn(),e("body").addClass("disablescroll")}),e(".navhide").click(function(){e(".sitenav").fadeOut(),e(this).hide(),e(this).prev(".navshow").show(),e("body").removeClass("disablescroll")}),1200>e(window).width()&&e(".headermenu a").click(function(){e(".sitenav").fadeOut(),e(".navhide").hide(),e(".navshow").show(),e("body").removeClass("disablescroll")}),e(window).scroll(function(){e(this).scrollTop()>=100?e("header").addClass("fixed"):e("header").removeClass("fixed")})});

Download Source Code

If you would like to get the full source code of the Food and Restaurant Template Using HTML, CSS, and JavaScript, use the button below to download. It is free to use and one can use it with no restriction of copyrights thus can be used for personal as well as professional use.

Download Source Code

Conclusion

This Food and Restaurant Template is an effective solution which enables to design a professional website. Make it work to sell your business and improve the portfolio.

We kindly request our users to use the JV Source Codes available on the website and link back to our site. Don’t forget to like this video and subscribe for more valuable tips for more; if you have any problem with this video, please use the comment section. I’ll be happy to help!

Download JV Source Codes

Similar Posts

Responsive Sidebar Menu with Social Media Buttons
| | |

Responsive Sidebar Menu with Social Media Buttons Using HTML and CSS

Having an active sidebar menu using social media icon will help in enhancing the navigation of the sections in a website while having buttons to social media accounts. Here in this article, I will help you how you can create a responsive sidebar menu with proper icons and nice animation. For your convenience, you will…

Sliding 3D Image Gallery
| | |

Sliding 3D Image Gallery in HTML, CSS and JavaScript

Using HTML and CSS and JavaScript creates an attractive and innovative method to show images on your website. It offers a vibrant and trending approach that enables users to connect with the content creatively. GitHub Source: Sliding 3D Image Gallery This gallery will enable you to display many images in a sleek 3D slides that…

Responsive Periodic Table of Elements Using HTML and CSS (Free Source Code)
| |

Responsive Periodic Table of Elements Using HTML and CSS (Free Source Code)

A Responsive Periodic Table of Elements Using HTML and CSS allows the elegant and engaging display of the periodic table on your site. No matter if you are creating an educational site, a scientific website or if you just found an interesting idea for a project, this free source code can offer you a clean…

The Picture Puzzle Game Using HTML, CSS and JavaScript is very interesting and a good way to teach players to use their brain in order to solve problems.
| | |

Picture Puzzle Game Using HTML, CSS, and JavaScript (Free Source Code)

The Picture Puzzle Game Using HTML, CSS and JavaScript is very interesting and a good way to teach players to use their brain in order to solve problems. It is easier to practice and is a fun way to expand your understanding of coding. As for the game you wanna see its source code –…

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript
| | |

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript

A responsive side navigation bar not only helps to improve the navigation of your website but also address the issue of neatly placing links that enhance the experience of users. By using tooltips, it is possible to make the users aware of functions of each link, including when the design is compact. In this tutorial,…

Leave a Reply

Your email address will not be published. Required fields are marked *