Amazing Food Website Design- Restaurant – Pizza Shop – Fast Food Website Design Using HTML CSS JavaScript 100% Free – FreeWebsiteCode
Create a complete responsive Food Website Design- Restaurant – Pizza Shop – Fast Food website design template using HTML CSS and JavaScript from scratch
Learn how to create a responsive website using HTML, CSS & JavaScript. In this video, you will learn how to create a responsive one-page or landing page website we will use some animation plugins which I have mentioned below
The main feature of this website is:
Custom animated cursor with hover effects using vanilla JavaScript
Fully Responsive vertical sidebar header / Navbar with toggle menu bar effect.
Fully Responsive home section using flex-box.
Fully Responsive about section using flex-box.
Fully Responsive services section using flex-box.
Fully Responsive experience vertical timeline section using flex-box.
Fully Responsive portfolio image gallery with hover effects section using flex-box.
Fully Responsive contact section using flex-box.
================== SOURCE CODES ===================
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
Website Download Link: https://freewebsitecode.com/
Thanks for watching!
Thanks for watching!
Make sure to Like + Subscribe For More!
►►𝐃𝐨𝐧’𝐭 𝐅𝐨𝐫𝐠𝐞𝐭 𝐓𝐨 𝐒𝐮𝐛𝐬𝐜𝐫𝐢𝐛𝐞 ►►
https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/videos
=====================================================================================================================================
100% Free Source Code Download Guaranteed. Stay With Free Website Code.
All kinds of free website codes are available here. Anyone can download the Source Code free of cost.
Thank You,
Free Website Code
Visit: https://freewebsitecode.com/
You can use this as a Food Selling / Buying Website Design
You can use this as an Online Restaurant Website Design
You can use this as a Fast Food Company Portfolio Website Design
You can use this as a Personal Food Management System Website Design
You can use this as a Web Design Project Website Design
You can use this as a Source Code for Food Website Design
You can use this as a Food Business Website Design
You can use this as a Restaurant Business Website Design
You can use this as a Single Page Website Design
======================================================
How to make a website using HTML CSS and JavaScript
Complete website in HTML CSS and JavaScript with source code.
Create a complete responsive Food – Restaurant – Pizza Shop – Fast Food website design template using HTML CSS and JavaScript from scratch
Create A Responsive Halloween E-Commerce Website Design Using HTML – CSS – JavaScript | 100% Free Download
https://www.youtube.com/watch?v=frz85Y8H4UE&t=2s
Complete Responsive Food / Restaurant Website Design Using HTML / CSS / JAVASCRIPT – 100% Free Download
https://www.youtube.com/watch?v=m9vfjSwb4zc
Create A Responsive Car Selling Website Design Using HTML – CSS – JavaScript | 100% Free Download
https://www.youtube.com/watch?v=FQ0osQ1ZVRc
Create A Responsive Grocery Store Website Design Using HTML – CSS – JavaScript-100% Free Download
https://www.youtube.com/watch?v=NifI30KHMY8
Create A Responsive Online Book Store Website Design Using HTML – CSS – JavaScript | 100% Free Download
https://www.youtube.com/watch?v=EeQYAJnknZg
E-Commerce Fashion / Cloth Store Website Design Using HTML – SASS – JavaScript 100% Free Download
https://www.youtube.com/watch?v=aDnL51Ambgw
Animated Glassmorphism Styled / Glass Effect Website Design Using HTML – CSS – JavaScript-100% Free Download
https://www.youtube.com/watch?v=840c9kfZvaQ&t=9s
Complete Responsive IT Company / Business Website Design Tutorial HTML – CSS – JAVASCRIPT -100% Free Download
https://www.youtube.com/watch?v=dYXqHMJcNiY&t=3s
Hospital – Medical – Clinic – Diagnostic Center Website Design Using HTML – CSS – JavaScript -Free Download
https://www.youtube.com/watch?v=LjgTq6_VF4g&t=2s
Coffee Shop – Tea Stall – Fast Food Website Design Using HTML- CSS -JavaScript- 100% Free Download
https://www.youtube.com/watch?v=Qyx-G7xQ5fE&t=1s
Personal Portfolio / Blog Website Design Project Using HTML – CSS – JavaScript -100% Free Download
https://www.youtube.com/watch?v=BDGW4HxGACA
=================== Follow me ====================
https://facebook.com/freewebsitecode/
Thanks for watching!
Make sure to Like + Subscribe For More!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foodiee.Order</title>
<link rel="icon" type="image/png" href="" sizes="16x16">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<nav class="nav d-flex">
<a href="#" class="logo">
<img src="assets/images/logo.svg" alt="Foodiee.order">
</a>
<!-- Toggle bar -->
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<div class="navigation-bar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">about</a></li>
<li><a href="#services">services</a></li>
<li><a href="#getapp">get app</a></li>
<li><a href="#booknow" class="btn book-btn ">Book now</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main>
<!-- Home -->
<section class="home" id="home">
<div class="container">
<div class="home-wrapper d-grid">
<div class="col-left">
<h3>Restaurant</h3>
<h1>Enjoy our <br> majestic meals</h1>
<p>Vestibulum sed augue ac lorem rutrum congue. Donec cursus mollis sapien, non vulputate odio
congue id. Sed mattis, tortor nec facilisis laoreet, mauris magna finibus nisl, eu pulvinar
erat libero in turpis. </p>
<div class="search-food d-flex">
<input type="text" placeholder="Search food...">
<a href="#" class="btn"> Search</a>
</div>
<div class="social-icons d-flex">
<a href="#"> <img src="assets/images/facebook.svg" alt="facebook"></a>
<a href="#"> <img src="assets/images/twitter.svg" alt="twitter"></a>
<a href="#"> <img src="assets/images/instagram.svg" alt="Instagram"></a>
</div>
</div>
<div class="col-right">
<img data-tilt src="assets/images/hero-img.png" alt="Home image" class="img-fluid">
</div>
</div>
</div>
</section>
<!-- menu -->
<section class="menu ptb-80" id="menu">
<div class="container">
<div class="section-title">
<h3>Menu</h3>
<h2>Popular Dishes </h2>
<p>Sed tincidunt sapien in augue aliquet ultricies. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque blandit tortor nunc, in consectetur justo pharetra vel. </p>
</div>
<div class="menu-items d-grid">
<!-- item -->
<div class="item">
<img src="assets/images/pizza.png" alt="pizza" class="img-fluid">
<div class="item-content">
<h4>pizza</h4>
<p>Eat luctus est vestibulum vel. Integer pulvinar <br> nibh quis diam ullamcorper,</p>
<div class="action d-flex">
<span class="price">
$ 10.22
</span>
<a href="#" class="cart-btn">Add To Cart</a>
</div>
</div>
</div>
<!-- item -->
<div class="item">
<img src="assets/images/burger.png" alt="burger" class="img-fluid">
<div class="item-content">
<h4>burger</h4>
<p>Eat luctus est vestibulum vel. Integer pulvinar <br> nibh quis diam ullamcorper,</p>
<div class="action d-flex">
<span class="price">
$ 9.99
</span>
<a href="#" class="cart-btn">Add To Cart</a>
</div>
</div>
</div>
<!-- item -->
<div class="item">
<img src="assets/images/salad.png" alt="salad" class="img-fluid">
<div class="item-content">
<h4>salad</h4>
<p>Eat luctus est vestibulum vel. Integer pulvinar <br> nibh quis diam ullamcorper,</p>
<div class="action d-flex">
<span class="price">
$ 10.22
</span>
<a href="#" class="cart-btn">Add To Cart</a>
</div>
</div>
</div>
</div>
<div class="view-more">
<a href="#" class="btn">View more</a>
</div>
</div>
</section>
<!-- about -->
<section class="about ptb-80" id="about">
<div class="container">
<div class="content-col-wrapper d-grid">
<div class="content-col">
<h3>About us</h3>
<h2>Best food <br> in your city</h2>
<p>Nam et felis et lorem suscipit luctus et eu nisl. Praesent vestibulum, augue sed volutpat
egestas, tortor enim efficitur mauris, id sodales velit augue sed ligula. Vestibulum eu
ullamcorper orci.
</p>
<p> Hello world this is something is going in this world which is not good for Etiam mattis ante
metus, quis vulputate est malesuada non. Proin blandit urna nulla, ac tincidunt sapien
pharetra
nec. Nulla a faucibus odio. Duis tincidunt arcu vel pretium ultrices</p>
<a href="#" class="btn">read more</a>
</div>
<div class="content-col-image">
<img data-tilt src="assets/images/about.png" alt="about" class="img-fluid">
</div>
</div>
</div>
</section>
<!-- Our services -->
<section class="services ptb-80" id="services">
<div class="container">
<div class="content-col-wrapper d-grid">
<div class="content-col-image">
<img data-tilt src="assets/images/services.png" alt="services" class="img-fluid">
</div>
<div class="content-col">
<h3>Our services</h3>
<h2>Book yourd <br>
next order now</h2>
<p>Nam et felis et lorem suscipit luctus et eu nisl. Praesent vestibulum, augue sed volutpat
egestas, tortor enim efficitur mauris, id sodales velit augue sed ligula. Vestibulum eu
ullamcorper orci.
</p>
<p> Hello world this is something is going in this world which is not good for Etiam mattis ante
metus, quis vulputate est malesuada non. Proin blandit urna nulla, ac tincidunt sapien
pharetra
nec. Nulla a faucibus odio. Duis tincidunt arcu vel pretium ultrices</p>
<a href="#" class="btn">read more</a>
</div>
</div>
</div>
</section>
<!-- Get application -->
<section class="getapp ptb-80" id="getapp">
<div class="container">
<div class="getapp-wrapper d-grid">
<div class="img-col">
<img data-tilt src="assets/images/cta.png" alt="get app" class="img-fluid">
</div>
<div class="getapp-content">
<h3>10% Cashback</h3>
<h2>Now you can order <br>
from mobile </h2>
<p>Nam et felis et lorem suscipit luctus et eu nisl. Praesent vestibulum, <br> augue sed
volutpat
egestas, tortor enim efficitur mauris, id sodales <br> velit augue sed ligula. Vestibulum eu
ullamcorper orci. </p>
<a href="#"><img src="assets/images/google-play.svg" alt="play store" class="img-fluid"></a>
<a href="#"><img src="assets/images/apple-store.svg" alt="apple store" class="img-fluid"></a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-wrapper d-flex">
<div class="footer-about">
<a href="#" class="footer-logo">
<img src="assets/images/logo.svg" alt="Logo">
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales ultrices est sit amet
malesuada. Donec malesuada elementum sem, vel interdum urna fringilla quis. Donec fermentum
nulla ac venenatis tincidunt. Aenean nec cursus urna,
</p>
</div>
<div class="footer-col">
<h5>Useful links</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">services</a></li>
<li><a href="#">Get Application</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Legal</h5>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">terms & Conditions</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Contact Us</h5>
<ul>
<li><a href="#">+92 123211</a></li>
<li><a href="[email protected]">[email protected]</a></li>
<li><a href="[email protected]">[email protected]</a></li>
<li><a href="#">Cashback</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Social media </h5>
<ul>
<li><a href="https://facebook.com/freewebsitecode/">facebook</a></li>
<li><a href="https://freewebsitecode.com/">twitter</a></li>
<li><a href="https://freewebsitecode.com/">instagram</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>Copyright © 2021 <a href="https://freewebsitecode.com/">Free Website Code</a> All rights reserved</p>
<br><br>
</div>
</div>
</footer>
<!-- Scroll up -->
<a href="javascript:void(0)" class="scrollup">
<img src="assets/images/rocket.svg" alt="arrow up">
</a>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/gumshoe/dist/gumshoe.polyfills.min.js"></script>
<script src="https://unpkg.com/[email protected]/dest/tilt.jquery.min.js"></script>
<script src="assets/js/main.js"></script>
<script>
$('.js-tilt').tilt({
scale: 1.1
})
</script>
</html> Thanks for watching!
Make sure to Like + Subscribe For More!
All Links in Below:
Join Our Freewebsitecode Facebook Group to get an instant update for projects, templates, design resources, and solutions.
Join Our YouTube Channel & Subscribe with Bell Icon for New Video:
Join Our Official Facebook Page For the Latest updates All Code Projects are Free:
Visit our service page to get premium services.
Free Website Code – HTML CSS, PHP, JavaScript Programming Projects For Free
Follow Us
Thank You,
Follow Us
https://facebook.com/freewebsitecode/
►►𝐃𝐨𝐧’𝐭 𝐅𝐨𝐫𝐠𝐞𝐭 𝐓𝐨 𝐒𝐮𝐛𝐬𝐜𝐫𝐢𝐛𝐞 ►►
https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/videos
ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ
FreeWebsiteCode.com tries to provide HTML, CSS, SCSS, JavaScript, React, Android Studio, Java, PHP, Laravel, Python, Django, C#(C Sharp), and ASP.net-related projects 100% free. We try to make learning easier. Free Website Code always tries to give free projects to those who are new learners. Free projects and source code will help to learn easily. They can save time and learn more.
