Amazing Food – Restaurant – Pizza Shop – Fast Food Website Design Using HTML CSS JavaScript 100% Free

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.

Amazing Food – Restaurant – Pizza Shop – Fast Food Website Design Using HTML CSS JavaScript 100% Free

================== 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">
                                    $ &nbsp; 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">
                                    $ &nbsp; 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">
                                    $ &nbsp; 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 &copy; 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,

Stay with FreeWebsiteCode.com

Share the post if necessary.

Follow Us

https://facebook.com/freewebsitecode/

►►𝐃𝐨𝐧’𝐭 𝐅𝐨𝐫𝐠𝐞𝐭 𝐓𝐨 𝐒𝐮𝐛𝐬𝐜𝐫𝐢𝐛𝐞 ►►
https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/videos

LIKE | COMMENT | SHARE | SUBSCRIBE

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.

Thank You, Stay With Us.

Leave a Comment

Item added to cart.
0 items - 0.00$

Join Our Newsletter Today To Get Update

Stay updated with all latest premium themes, pulgins, HTML template & Much More.
Subscribe
SUBSCRIBE NOW
close-link
Open chat
Any Questions?
Hello,
How can we help you?