index.html

<!DOCTYPE html>
<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">
        <link rel="stylesheet" href="./CSS/reset.css">
        <link rel="stylesheet" href="./CSS/globalStyles.css">
        <link rel="stylesheet" href="./CSS/components.css">
        <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
        <link rel="stylesheet" href="./CSS/home.css">
        <title>clevercoderjoy's Cuisine | HOME</title>
    </head>

    <body>
        <!-- nav section starts -->
        <div class="nav">
            <div class="container">
                <div class="nav__wrapper">
                    <a class="logo" href="/index.html">
                        <img src="./images/logo.svg" alt="logo">
                    </a>
                    <div class="nav__icon">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round">
                            <line x1="3" y1="12" x2="21" y2="12" />
                            <line x1="3" y1="6" x2="21" y2="6" />
                            <line x1="3" y1="18" x2="21" y2="18" />
                        </svg>
                    </div>
                    <div class="nav__bgOverlay"></div>
                    <ul class="nav__list">
                        <div class="nav__close">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18" />
                                <line x1="6" y1="6" x2="18" y2="18" />
                            </svg>
                        </div>
                        <div class="nav__list__wrapper">
                            <li><a class="nav__link" href="./index.html">Home</a></li>
                            <li><a class="nav__link" href="./pages/menu.html">Menu</a></li>
                            <li><a class="nav__link" href="./pages/about.html">About</a></li>
                            <li><a class="nav__link" href="./pages/contact.html">Contact</a></li>
                            <li><a class="btn primary-btn" href="./pages/bookings.html">Book Table</a></li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <!-- nav section ends -->

        <!-- hero section starts -->

        <div id="hero">
            <div class="container">
                <div class="hero__wrapper">
                    <div class="hero__left" data-aos="fade-right">
                        <div class="hero__left__wrapper">
                            <h1 class="hero__heading">
                                The flavour of tradition
                            </h1>
                            <p class="hero__info">
                                We are a multi-cuisine restaurant offering a wide variety of food experience in both
                                casual and fine dining environment.
                            </p>
                            <div class="button__wrapper">
                                <a href="./pages/menu.html" class="btn primary-btn">Explore Menu</a>
                                <a href="./pages/bookings.html" class="btn">Book table</a>
                            </div>
                        </div>
                    </div>
                    <div class="hero__right" data-aos="fade-left">
                        <div class="hero__imgWrapper">
                            <img src="./images/heroImg.png" alt="food img">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- hero section ends -->

        <!-- store info section starts -->

        <section id="storeInfo" data-aos="fade-up">
            <div class="container">
                <div class="storeInfo__wrapper">
                    <div class="storeInfo__item">
                        <div class="storeInfo__icon">
                            <img src="./images/wall-clock-icon.svg" alt="icon">
                        </div>
                        <h3 class="storeInfo__title">
                            10AM - 10PM
                        </h3>
                        <p class="storeInfo__text">
                            Opening Hour
                        </p>
                    </div>
                    <div class="storeInfo__item">
                        <div class="storeInfo__icon">
                            <img src="./images/address-icon.svg" alt="icon">
                        </div>
                        <h3 class="storeInfo__title">
                            Your Heart, Lucknow, India
                        </h3>
                        <p class="storeInfo__text">
                            Address
                        </p>
                    </div>
                    <div class="storeInfo__item">
                        <div class="storeInfo__icon">
                            <img src="./images/phone-icon.svg" alt="icon">
                        </div>
                        <h3 class="storeInfo__title">
                            +919455869211
                        </h3>
                        <p class="storeInfo__text">
                            Call Us
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- store info section ends -->

        <!-- specials section starts -->

        <section id="ourSpecials" data-aos="fade-up">
            <div class="container">
                <div class="ourSpecials__wrapper">
                    <div class="ourSpecials__left">
                        <div class="ourSpecials__item">
                            <div class="ourSpecials__item__img">
                                <img src="./images/food-3.png" alt="food img">
                            </div>
                            <h2 class="ourSpecials__item__title">
                                Sweet Potato Fries Bowl
                            </h2>
                            <h3 class="ourSpecials__item__price">₹200</h3>
                            <div class="ourSpecials__item__stars">
                                <img src="./images/3star.png" alt="3star food">
                            </div>
                            <p class="ourSpecials__item__text">
                                These Sweet Potato Fries bowl are a glorious, messy plate of goodness. Crispy sweet
                                potato fries loaded
                                with lots of fresh summer vegetables and a lime ranch. By adding a seasoning blend with
                                chipotle powder,
                                garlic, and onion, these spicy sweet potato fries are full of flavor.
                            </p>
                        </div>
                        <div class="ourSpecials__item">
                            <div class="ourSpecials__item__img">
                                <img src="./images/food-1.png" alt="food img">
                            </div>
                            <h2 class="ourSpecials__item__title">
                                Vegan salad bowl
                            </h2>
                            <h3 class="ourSpecials__item__price">₹150</h3>
                            <div class="ourSpecials__item__stars">
                                <img src="./images/3star.png" alt="3star food">
                            </div>
                            <p class="ourSpecials__item__text">
                                Vegan salad bowl are immensely satisfying with any combination of whole grains, pulses,
                                noodles, raw or cooked fruits, and veggies all topped off with a delicious sauce or
                                dressing – each bite is an explosion of flavors and textures.
                            </p>
                        </div>
                    </div>
                    <div class="ourSpecials__right">
                        <h2 class="ourSpecials__title">Our Specials</h2>
                        <p class="ourSpecials__text">
                            All of our food is prepared daily at our restaurants to ensure the highest quality, freshest
                            meals are delivered to our customers.
                        </p>
                        <a href="./pages/bookings.html" class="btn primary-btn">Book Table</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- specials section ends -->

        <!-- top dishes section starts -->

        <section id="dishGrid" data-aos="fade-up">
            <div class="container">
                <h2 class="dishGrid__title">
                    Top Dishes
                </h2>
                <div class="dishGrid__wrapper">
                    <div class="dishGrid__item">
                        <div class="dishGrid__item__img">
                            <img src="./images/food-4.png" alt="food img">
                        </div>
                        <div class="dishGrid__item__info">
                            <h3 class="dishGrid__item__title">
                                Vegan Salad Bowl
                            </h3>
                            <h3 class="dishGrid__item__price">₹300</h3>
                            <div class="dishGrid__item__stars">
                                <img src="/images/3star.png" alt="4 stars">
                            </div>
                        </div>
                    </div>
                    <div class="dishGrid__item">
                        <div class="dishGrid__item__img">
                            <img src="./images/food-4.png" alt="food img">
                        </div>
                        <div class="dishGrid__item__info">
                            <h3 class="dishGrid__item__title">
                                Vegan Salad Bowl
                            </h3>
                            <h3 class="dishGrid__item__price">₹300</h3>
                            <div class="dishGrid__item__stars">
                                <img src="/images/3star.png" alt="4 stars">
                            </div>
                        </div>
                    </div>
                    <div class="dishGrid__item">
                        <div class="dishGrid__item__img">
                            <img src="./images/food-4.png" alt="food img">
                        </div>
                        <div class="dishGrid__item__info">
                            <h3 class="dishGrid__item__title">
                                Vegan Salad Bowl
                            </h3>
                            <h3 class="dishGrid__item__price">₹300</h3>
                            <div class="dishGrid__item__stars">
                                <img src="/images/3star.png" alt="4 stars">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- top dishes section ends -->

        <!-- discount section starts -->

        <section id="discount" data-aos="fade-up">
            <div class="container">
                <div class="discount__wrapper">
                    <div class="discount__images">
                        <div class="discount__img1">
                            <img src="./images/food-5.png" alt="food img">
                        </div>
                        <div class="discount__img2">
                            <img src="./images/food-4.png" alt="food img">
                        </div>
                        <div class="discount__img3">
                            <img src="./images/food-3.png" alt="food img">
                        </div>
                    </div>
                    <div class="discount__info">
                        <h3 class="discount__text">20% OFF</h3>
                        <h3 class="discount__title">Dish for Discount</h3>
                        <h3 class="discount__price">
                            <span class="discount__oldPrice">₹500</span>
                            <span class="discount__newPrice">₹300</span>
                        </h3>
                        <div class="discount__stars">
                            <img src="./images/3star.png" alt="4 star">
                        </div>
                        <a href="./pages/bookings.html" class="btn primary-btn">Book Table</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- discount section ends -->

        <!-- events section starts -->

        <section id="eventsMedia" data-aos="fade-up">
            <div class="container">
                <div class="eventsMedia__wrapper">
                    <div class="eventsMedia__1">
                        <img src="./images/eventsMedia1.png" alt="events">
                        <a class="eventsMedia__1__playButton" href="#">
                            <img src="./images/playIcon.svg" alt="play">
                        </a>
                    </div>
                    <div class="eventsMedia__2">
                        <img src="./images/eventsMedia2.png" alt="events">
                    </div>
                </div>
            </div>
        </section>

        <!-- events section ends -->

        <!-- eventsInfo section starts -->

        <section id="eventsInfo" data-aos="fade-up">
            <div class="container">
                <div class="eventsInfo__wrapper">
                    <div class="eventsInfo__left">
                        <div class="eventsInfo__item">
                            <div class="eventsInfo__item__tmg">
                                <img src="./images/event-corporate.png" alt="events">
                            </div>
                            <div class="eventsInfo__item__info">
                                <h2 class="eventsInfo__item__title">Corporate Events</h2>
                                <p class="eventsInfo__item__text"> clevercoderjoy's Cuisine is the perfect venue for
                                    your corporate events. We specialize in private parties.</p>
                            </div>
                        </div>
                        <div class="eventsInfo__item">
                            <div class="eventsInfo__item__img">
                                <img src="./images/event-weedings.png" alt="events">
                            </div>
                            <div class="eventsInfo__item__info">
                                <h2 class="eventsInfo__item__title">Wedding</h2>
                                <p class="eventsInfo__item__text"> clevercoderjoy's Cuisine offers an intimately unique
                                    wedding experience set in a spectacular setting that is
                                    sophisticated and comfortable.</p>
                            </div>
                        </div>
                    </div>
                    <div class="eventsInfo__right">
                        <h2 class="eventsInfo__title">
                            Book For Events
                        </h2>
                        <p class="eventsInfo__text">
                            Book your private event or corporate function at clevercoderjoy's cuisine to experience a
                            truly unique experience.
                        </p>
                        <a href="./pages/contact.html" class="btn primary-btn">Contact Now</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- eventsInfo section ends -->

        <!-- why us section starts -->

        <section id="whyUs">
            <div class="container">
                <div class="whyUs__wrapper">
                    <div class="whyUs__left" data-aos="fade-right">
                        <h2 class="whyUs__title">
                            Why Choose Our Food?
                        </h2>
                        <p class="whyUs__text">
                            Quality of Service, Food, Ambiance, and Value of Money are the primary elements for choosing
                            a restaurant.
                            clevercoderjoy's Cuisine is one of the most exquisite fine-dinning restaurant in Chittagong
                            cities
                            with a captivating
                            view of GEC Hills, perfect ambiance, and scrumptious food.
                        </p>
                    </div>
                    <div class="whyUs__right" data-aos="fade-left">
                        <div class="whyUs__items__wrapper">
                            <div class="whyUs__item">
                                <div class="whyUs__item__icon">
                                    <img src="./images/whyUs-icon1.svg" alt="quality food">
                                </div>
                                <p class="whyUs__item__text">
                                    Quality Food
                                </p>
                            </div>
                            <div class="whyUs__item">
                                <div class="whyUs__item__icon">
                                    <img src="./images/whyUs-icon2.svg" alt="quality food">
                                </div>
                                <p class="whyUs__item__text">
                                    Classical Taste
                                </p>
                            </div>
                            <div class="whyUs__item">
                                <div class="whyUs__item__icon">
                                    <img src="./images/whyUs-icon3.svg" alt="quality food">
                                </div>
                                <p class="whyUs__item__text">
                                    Skilled Chef
                                </p>
                            </div>
                            <div class="whyUs__item">
                                <div class="whyUs__item__icon">
                                    <img src="./images/whyUs-icon4.svg" alt="quality food">
                                </div>
                                <p class="whyUs__item__text">
                                    Best Service
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- why us section ends -->

        <!-- testimonial section starts -->

        <section id="testimonial" data-aos="fade-up">
            <div class="container">
                <div class="testimonial__wrapper">
                    <h2 class="testimonial__title">What Our Customers Say About Us?</h2>
                    <div class="testimonial__items__wrapper">
                        <div class="testimonial__item">
                            <div class="testimonial__item__img">
                                <img src="./images/testimonial_img1.png" alt="cx">
                            </div>
                            <div class="testimonial__item__info">
                                <h3 class="testimonial__item__name">
                                    Clever Joy
                                </h3>
                                <div class="testimonial__item__stars">
                                    <img src="./images/3star.png" alt="4stars">
                                </div>
                                <p class="testimonial__item__text">
                                    “Visited clevercoderjoy’s Cuisine with friends last Sunday. Really lovely meal and
                                    very warm welcome – we would
                                    recommend this lovely restaurant and will try to go back again”
                                </p>
                            </div>
                        </div>
                        <div class="testimonial__item">
                            <div class="testimonial__item__img">
                                <img src="./images/testimonial_img1.png" alt="cx">
                            </div>
                            <div class="testimonial__item__info">
                                <h3 class="testimonial__item__name">
                                    Clever Joy
                                </h3>
                                <div class="testimonial__item__stars">
                                    <img src="./images/3star.png" alt="4stars">
                                </div>
                                <p class="testimonial__item__text">
                                    “Visited clevercoderjoy’s Cuisine with friends last Sunday. Really lovely meal and
                                    very warm welcome – we would
                                    recommend this lovely restaurant and will try to go back again”
                                </p>
                            </div>
                        </div>
                        <div class="testimonial__item">
                            <div class="testimonial__item__img">
                                <img src="./images/testimonial_img1.png" alt="cx">
                            </div>
                            <div class="testimonial__item__info">
                                <h3 class="testimonial__item__name">
                                    Clever Joy
                                </h3>
                                <div class="testimonial__item__stars">
                                    <img src="./images/3star.png" alt="4stars">
                                </div>
                                <p class="testimonial__item__text">
                                    “Visited clevercoderjoy’s Cuisine with friends last Sunday. Really lovely meal and
                                    very warm welcome – we would
                                    recommend this lovely restaurant and will try to go back again”
                                </p>
                            </div>
                        </div>
                        <div class="testimonial__item">
                            <div class="testimonial__item__img">
                                <img src="./images/testimonial_img1.png" alt="cx">
                            </div>
                            <div class="testimonial__item__info">
                                <h3 class="testimonial__item__name">
                                    Clever Joy
                                </h3>
                                <div class="testimonial__item__stars">
                                    <img src="./images/3star.png" alt="4stars">
                                </div>
                                <p class="testimonial__item__text">
                                    “Visited clevercoderjoy’s Cuisine with friends last Sunday. Really lovely meal and
                                    very warm welcome – we would
                                    recommend this lovely restaurant and will try to go back again”
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- testimonial section ends -->

        <!-- newsletter section starts -->

        <section id="newsletter" data-aos="fade-up">
            <div class="container">
                <div class="newsletter__wrapper">
                    <div class="newsletter__info" data-aos="fade-right">
                        <h3 class="newsletter__title">Join Our Newsletter</h3>
                        <p class="newsletter__text">
                            Get notified with the latest news and recent offers from the “clevercoderjoy’s Cuisine”
                        </p>
                    </div>
                    <div class="newsletter__form" data-aos="fade-left">
                        <form action="">
                            <label for="email">
                                <input type="email" placeholder="Your Email Here...">
                            </label>
                            <button type="submit" class="">Join</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- newsletter section ends -->

        <!-- footer section starts -->

        <footer>
            <div class="container">
                <div class="footer__wrapper">
                    <div class="footer__col1">
                        <div class="footer__logo">
                            <img src="./images/logo.svg" alt="logo">
                        </div>
                        <p class="footer__desc">
                            Fresh and delicious traditional Indian food to delight the whole family.
                        </p>
                        <div class="footer__socials">
                            <h4 class="footer__socials__title">Follow Us</h4>
                            <ol>
                                <li>
                                    <a href="https://clevercoderjoy-portfolio-one.netlify.app/" target="_blank">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1.3"
                                            stroke-linecap="round"
                                            stroke-linejoin="round">
                                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                                            <circle cx="12" cy="7" r="4" />
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://github.com/clevercoderjoy" target="_blank">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1.3"
                                            stroke-linecap="round"
                                            stroke-linejoin="round">
                                            <path
                                                d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://clevercoderjoy.hashnode.dev/" target="_blank">
                                        <svg
                                            width="24"
                                            height="24"
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1.3"
                                            stroke-linecap="round"
                                            stroke-linejoin="round">
                                            <path d="M12 19l7-7 3 3-7 7-3-3z" />
                                            <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
                                            <path d="M2 2l7.586 7.586" />
                                            <circle cx="11" cy="11" r="2" />
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://clevercoderjoy.bio.link/" target="_blank">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1.3"
                                            stroke-linecap="round"
                                            stroke-linejoin="round">
                                            <circle cx="12" cy="12" r="10" />
                                            <line x1="2" y1="12" x2="22" y2="12" />
                                            <path
                                                d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
                                        </svg>
                                    </a>
                                </li>
                            </ol>
                        </div>
                    </div>
                    <div class="footer__col2">
                        <h3 class="footer__text__title">
                            Links
                        </h3>
                        <ol class="footer__text">
                            <li>
                                <a href="./index.html">Home</a>
                            </li>
                            <li>
                                <a href="./pages/menu.html">Menu</a>
                            </li>
                            <li>
                                <a href="./pages/bookings.html">Book Table</a>
                            </li>
                            <li>
                                <a href="./pages/about.html">About</a>
                            </li>
                            <li>
                                <a href="./pages/contact.html">Contact</a>
                            </li>
                            <li>
                                <a href="#">Privacy Policy</a>
                            </li>
                        </ol>
                    </div>

                    <div class="footer__col3">
                        <h3 class="footer__text__title">
                            Support
                        </h3>
                        <ol class="footer__text">
                            <li>
                                <a href="./pages/contact.html">Contact</a>
                            </li>
                            <li>
                                <a href="#">Support Center</a>
                            </li>
                            <li>
                                <a href="#">Feedback</a>
                            </li>
                        </ol>
                    </div>
                    <div class="footer__col4">
                        <h3 class="footer__text__title">
                            Contact
                        </h3>
                        <ol class="footer__text">
                            <li>
                                <a href="tel:+919455869211">Call Us</a>
                            </li>
                            <li>
                                <a href="mailTo:clevercoderjoy@gmail.com">clevercoderjoy</a>
                            </li>
                            <li>
                                <a href="#">Lucknow, India</a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </footer>

        <!-- footer section ends -->

        <!-- copyright section starts -->

        <div id="copyright">
            <div class="container">
                <p class="copyright__text">
                    &copy; clevercoderjoy 2022 | All rights reserved
                </p>
            </div>
        </div>

        <!-- copyright section ends -->


        <!-- aos script starts -->
        <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
        <!-- aos script ends -->

        <!-- custom script starts-->
        <script src="/javaScript/main.js"></script>
        <!-- custom script ends -->
    </body>

</html>