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" />

        <!--~~~~~~~~~~~~~~~ Favicon ~~~~~~~~~~~~~~~-->
        <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon" />

        <!--~~~~~~~~~~~~~~~ Font Awesome ~~~~~~~~~~~~~~~-->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
            integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />

        <!--~~~~~~~~~~~~~~~ Remix Icon ~~~~~~~~~~~~~~~-->
        <link
            href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css"
            rel="stylesheet"
        />

        <!--  Swiper's CSS -->
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
        />
        <!--~~~~~~~~~~~~~~~ CSS ~~~~~~~~~~~~~~~-->
        <link href="output.css" rel="stylesheet" />

        <title>Responsive Burger Website</title>
    </head>
    <body>
        <!--~~~~~~~~~~~~~~~ Header ~~~~~~~~~~~~~~~-->
        <header
            id="header"
            class="bg-primaryColor dark:bg-darkColor fixed top-0 left-0 w-full z-50"
        >
            <nav class="container relative h-14 flex justify-between items-center">
                <div>
                    <a href="#" class="text-2xl uppercase font-oswald">
                        Bur<span class="text-secondaryColor">ger</span>
                    </a>
                </div>
                <div
                    class="hidden absolute top-0 left-0 w-full py-14 bg-primaryColor dark:bg-darkColor border-b border-secondaryColor md:block md:static md:py-0 md:border-none md:w-auto md:ml-auto"
                    id="nav-menu"
                >
                    <ul class="flex flex-col text-center gap-5 md:flex-row">
                        <li>
                            <a
                                href="#home"
                                class="nav__link text-secondaryColor hover:text-secondaryColor"
                                >Home</a
                            >
                        </li>
                        <li>
                            <a href="#about" class="nav__link hover:text-secondaryColor"
                                >About Us</a
                            >
                        </li>
                        <li>
                            <a href="#menu" class="nav__link hover:text-secondaryColor">Menu</a>
                        </li>
                        <li>
                            <a href="#review" class="nav__link hover:text-secondaryColor">Review</a>
                        </li>
                        <li>
                            <a href="#contact" class="nav__link hover:text-secondaryColor"
                                >Contact</a
                            >
                        </li>
                    </ul>
                    <div
                        class="absolute top-[0.7rem] right-4 text-2xl cursor-pointer md:hidden"
                        id="close-btn"
                    >
                        <i class="ri-close-line"></i>
                    </div>
                </div>
                <div class="flex item-center gap-5">
                    <i class="ri-moon-line cursor-pointer ml-4 text-xl" id="theme-toggle"></i>
                    <div class="md:hidden" id="humburger">
                        <i class="ri-menu-2-line cursor-pointer text-xl"></i>
                    </div>
                </div>
            </nav>
        </header>

        <main>
            <!--~~~~~~~~~~~~~~~ Home ~~~~~~~~~~~~~~~-->
            <section id="home">
                <div class="container flex flex-col items-center gap-10 md:flex-row">
                    <div class="mx-auto md:basis-1/2 lg:basis-2/5 animate-movingY">
                        <img
                            src="./img/home-image.png"
                            alt="home-image"
                            class="home__image w-60 md:w-full"
                        />
                    </div>
                    <div class="home__content text-center md:basis-1/2 md:text-start lg:basis-3/5">
                        <h1 class="home__tilte">HAPPY TUMMY TASTY BURGERS.</h1>
                        <div class="separator mx-auto md:mx-0"></div>
                        <div>
                            <p class="paragraph">
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores
                                enim deleniti est. Saepe ea laudantium excepturi nihil, quasi
                                perspiciatis! Saepe ex ab, ut beatae praesentium veritatis? Earum
                                provident quaerat laboriosam.
                            </p>
                            <div
                                class="text-base flex items-center justify-center gap-4 py-10 md:justify-start md:gap-20"
                            >
                                <div class="text-center">
                                    <i
                                        class="fa-solid fa-utensils text-secondaryColor text-4xl"
                                    ></i>
                                    <br />
                                    Delicious
                                </div>
                                <div class="text-center">
                                    <i class="fa-solid fa-droplet text-secondaryColor text-4xl"></i>
                                    <br />
                                    Fresh
                                </div>
                                <div class="text-center">
                                    <i class="fa-brands fa-envira text-secondaryColor text-4xl"></i>
                                    <br />
                                    Organic
                                </div>
                            </div>
                            <a href="#" class="btn btn-primary">Learn More</a>
                        </div>
                    </div>
                </div>
            </section>

            <!--~~~~~~~~~~~~~~~ Category ~~~~~~~~~~~~~~~-->
            <section id="category">
                <div class="container flex flex-col gap-5 md:flex-row">
                    <!-- card 1 -->
                    <div
                        class="category__card bg-secondaryColor flex py-3 rounded-lg overflow-hidden md:flex-1"
                    >
                        <div class="basis-1/3 relative">
                            <img
                                src="./img/burger-1.png"
                                alt="category-image"
                                class="absolute w-28 -bottom-4 -left-4"
                            />
                        </div>
                        <div>
                            <div class="mb-2">
                                <h4 class="card__title">Food</h4>
                                <p class="text-xs">Lorem ipsum dolor sit.</p>
                            </div>
                            <a href="#" class="text-blackColor cursor-pointer">Buy online</a>
                        </div>
                    </div>
                    <!-- card 2 -->
                    <div
                        class="category__card bg-redColor flex py-3 rounded-lg overflow-hidden md:flex-1"
                    >
                        <div class="basis-1/3 relative">
                            <img
                                src="./img/snack-1.png"
                                alt="category-image"
                                class="absolute w-28 -bottom-4 -left-4"
                            />
                        </div>
                        <div>
                            <div class="mb-2">
                                <h4 class="card__title">Food</h4>
                                <p class="text-xs">Lorem ipsum dolor sit.</p>
                            </div>
                            <a href="#" class="text-secondaryColor cursor-pointer">Buy online</a>
                        </div>
                    </div>
                    <!-- card 3 -->
                    <div
                        class="category__card bg-greenColor flex py-3 rounded-lg overflow-hidden md:flex-1"
                    >
                        <div class="basis-1/3 relative">
                            <img
                                src="./img/beverage-2.png"
                                alt="category-image"
                                class="absolute w-28 -bottom-4 -left-4"
                            />
                        </div>
                        <div>
                            <div class="mb-2">
                                <h4 class="card__title">Food</h4>
                                <p class="text-xs">Lorem ipsum dolor sit.</p>
                            </div>
                            <a href="#" class="text-secondaryColor cursor-pointer">Buy online</a>
                        </div>
                    </div>
                </div>
            </section>

            <!--~~~~~~~~~~~~~~~ Promo ~~~~~~~~~~~~~~~-->
            <section id="promo">
                <div class="container flex flex-col gap-5 lg:flex-row lg:gap-10">
                    <!-- card 1 -->
                    <div
                        class="promo__card-1 bg-primaryColorLight dark:bg-darkColorLight flex flex-col p-5 rounded-lg md:flex-row md:items-center lg:flex-row-reverse lg:flex-1"
                    >
                        <div>
                            <img
                                src="./img/promo-1.png"
                                alt="promo-image"
                                class="w-40 mx-auto hover:animate-movingY md:mx-5"
                            />
                        </div>
                        <div class="space-y-2 pt-5 md:pt-0">
                            <p class="text-xs text-secondaryColor">Payday promo</p>
                            <h3 class="card__title">GET A 10% DISCOUNT ON PAYDAY WEEK</h3>
                            <p class="paragraph">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            </p>
                            <a href="#" class="text-xs text-secondaryColor">Buy online</a>
                        </div>
                    </div>
                    <!-- card 2 -->
                    <div
                        class="promo__card-2 bg-primaryColorLight dark:bg-darkColorLight flex flex-col p-5 rounded-lg md:flex-row md:items-center lg:flex-row-reverse lg:flex-1"
                    >
                        <div>
                            <img
                                src="./img/promo-2.png"
                                alt="promo-image"
                                class="w-40 mx-auto hover:animate-movingY md:mx-5"
                            />
                        </div>
                        <div class="space-y-2 pt-5">
                            <p class="text-xs text-secondaryColor">Payday promo</p>
                            <h3 class="card__title">GET A 10% DISCOUNT ON PAYDAY WEEK</h3>
                            <p class="paragraph">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            </p>
                            <a href="#" class="text-xs text-secondaryColor">Buy online</a>
                        </div>
                    </div>
                </div>
            </section>

            <!--~~~~~~~~~~~~~~~ About ~~~~~~~~~~~~~~~-->
            <section id="about">
                <div class="container flex flex-col gap-10 md:flex-row">
                    <div class="flex-1">
                        <img
                            src="./img/about.jpg"
                            alt="about-image"
                            class="about__image rounded-lg"
                        />
                    </div>
                    <div class="about__content flex-1">
                        <h2 class="section__title">
                            FIND FOOD AND DRINKS, ALL-IN-ONE PLACE FOR YOUR BEST TASTE.
                        </h2>
                        <div class="separator"></div>
                        <p class="paragraph">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                            ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
                            dis parturient montes.
                        </p>
                        <ul class="grid grid-cols-2 py-5 space-y-1">
                            <li class="text-xs text-paragraphColor">
                                <i class="fa-solid fa-check text-secondaryColor"></i> Best Price
                            </li>
                            <li class="text-xs text-paragraphColor">
                                <i class="fa-solid fa-check text-secondaryColor"></i> Fresh
                                Ingredient
                            </li>
                            <li class="text-xs text-paragraphColor">
                                <i class="fa-solid fa-check text-secondaryColor"></i> Best Service
                            </li>
                            <li class="text-xs text-paragraphColor">
                                <i class="fa-solid fa-check text-secondaryColor"></i> Health
                                Protocol
                            </li>
                        </ul>
                        <a href="#" class="btn btn-primary">About Us</a>
                    </div>
                </div>
            </section>

            <!--~~~~~~~~~~~~~~~ Menu ~~~~~~~~~~~~~~~-->
            <section id="menu">
                <div class="container">
                    <div class="max-w-md mx-auto text-center">
                        <h2 class="section__title">OUR BEST MENU</h2>
                        <div class="separator mx-auto"></div>
                        <p class="paragraph">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                            ligula eget dolor. Aenean massa.
                        </p>
                        <div class="tabs_wrap">
                            <ul class="flex flex-wrap justify-center gap-3 py-10">
                                <li
                                    data-tabs="all"
                                    class="btn bg-primaryColorLight dark:bg-darkColorLight active"
                                >
                                    All
                                </li>
                                <li
                                    data-tabs="food"
                                    class="btn bg-primaryColorLight dark:bg-darkColorLight"
                                >
                                    Food
                                </li>
                                <li
                                    data-tabs="snack"
                                    class="btn bg-primaryColorLight dark:bg-darkColorLight"
                                >
                                    Snack
                                </li>
                                <li
                                    data-tabs="beverage"
                                    class="btn bg-primaryColorLight dark:bg-darkColorLight"
                                >
                                    Beverage
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="menu__items">
                        <ul class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4 lg:gap-12">
                            <!-- food  -->
                            <li class="all food">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/burger-1.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">REGULAR BEEF BURGER</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all food">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/burger-2.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">REGULAR BEEF BURGER</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all food">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/burger-3.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">REGULAR BEEF BURGER</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all food">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/burger-4.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">REGULAR BEEF BURGER</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all food">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/burger-5.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">REGULAR BEEF BURGER</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>

                            <!-- snack -->
                            <li class="all snack">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/snack-1.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">FRENCH FRIES</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all snack">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/snack-2.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">FRENCH FRIES</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all snack">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/snack-3.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">FRENCH FRIES</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all snack">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/snack-4.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">FRENCH FRIES</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all snack">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/snack-5.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">FRENCH FRIES</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all snack">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/snack-6.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">FRENCH FRIES</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>

                            <!-- beverage  -->
                            <li class="all beverage">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/beverage-1.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">SWEET SMOOTHIE</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all beverage">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/beverage-2.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">SWEET SMOOTHIE</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all beverage">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/beverage-3.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">SWEET SMOOTHIE</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all beverage">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/beverage-4.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">SWEET SMOOTHIE</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                            <li class="all beverage">
                                <div
                                    class="h-56 grid place-items-center bg-primaryColorLight dark:bg-darkColorLight rounded-3xl hover:bg-secondaryColor ease-linear duration-200"
                                >
                                    <img
                                        src="./img/beverage-5.png"
                                        alt="food image"
                                        class="w-40 hover:scale-100 ease-linear duration-200 md:w-48 lg:w-24"
                                    />
                                </div>
                                <div class="pt-5">
                                    <div class="mb-2">
                                        <h4 class="card__title">SWEET SMOOTHIE</h4>
                                        <p class="paragraph">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        </p>
                                    </div>
                                    <p class="text-secondaryColor">$42.00</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <!--~~~~~~~~~~~~~~~ Review ~~~~~~~~~~~~~~~-->
            <section id="review" class="bg-primaryColorLight dark:bg-darkColorLight py-20">
                <div class="customer__review container">
                    <div class="max-w-md mx-auto text-center">
                        <h2 class="section__title">CUSTOMER REVIEW</h2>
                        <div class="separator mx-auto"></div>
                        <p class="paragraph">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                            ligula eget dolor. Aenean massa.
                        </p>
                    </div>
                    <div class="swiper p-10">
                        <ul class="swiper-wrapper">
                            <li class="swiper-slide">
                                <div
                                    class="flex flex-col gap-5 bg-primaryColor dark:bg-darkColor rounded-lg p-6"
                                >
                                    <p>
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                        Quidem a repudiandae sunt possimus laborum vitae maxime
                                        reiciendis.
                                    </p>
                                    <div class="flex items-center">
                                        <img
                                            src="./img/review-1.jpg"
                                            alt="review image"
                                            class="w-12 h-12 rounded-full"
                                        />
                                        <div class="ml-2">
                                            <p class="font-oswald uppercase">John doe</p>
                                            <p class="paragraph">Designer</p>
                                        </div>
                                        <i
                                            class="fa-solid fa-quote-right text-4xl text-secondaryColor ml-auto"
                                        ></i>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide">
                                <div
                                    class="flex flex-col gap-5 bg-primaryColor dark:bg-darkColor rounded-lg p-6"
                                >
                                    <p>
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                        Quidem a repudiandae sunt possimus laborum vitae maxime
                                        reiciendis.
                                    </p>
                                    <div class="flex items-center">
                                        <img
                                            src="./img/review-2.jpg"
                                            alt="review image"
                                            class="w-12 h-12 rounded-full"
                                        />
                                        <div class="ml-2">
                                            <p class="font-oswald uppercase">John doe</p>
                                            <p class="paragraph">Designer</p>
                                        </div>
                                        <i
                                            class="fa-solid fa-quote-right text-4xl text-secondaryColor ml-auto"
                                        ></i>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide">
                                <div
                                    class="flex flex-col gap-5 bg-primaryColor dark:bg-darkColor rounded-lg p-6"
                                >
                                    <p>
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                        Quidem a repudiandae sunt possimus laborum vitae maxime
                                        reiciendis.
                                    </p>
                                    <div class="flex items-center">
                                        <img
                                            src="./img/review-3.jpg"
                                            alt="review image"
                                            class="w-12 h-12 rounded-full"
                                        />
                                        <div class="ml-2">
                                            <p class="font-oswald uppercase">John doe</p>
                                            <p class="paragraph">Designer</p>
                                        </div>
                                        <i
                                            class="fa-solid fa-quote-right text-4xl text-secondaryColor ml-auto"
                                        ></i>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide">
                                <div
                                    class="flex flex-col gap-5 bg-primaryColor dark:bg-darkColor rounded-lg p-6"
                                >
                                    <p>
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                        Quidem a repudiandae sunt possimus laborum vitae maxime
                                        reiciendis.
                                    </p>
                                    <div class="flex items-center">
                                        <img
                                            src="./img/review-4.jpg"
                                            alt="review image"
                                            class="w-12 h-12 rounded-full"
                                        />
                                        <div class="ml-2">
                                            <p class="font-oswald uppercase">John doe</p>
                                            <p class="paragraph">Designer</p>
                                        </div>
                                        <i
                                            class="fa-solid fa-quote-right text-4xl text-secondaryColor ml-auto"
                                        ></i>
                                    </div>
                                </div>
                            </li>
                            <li class="swiper-slide">
                                <div
                                    class="flex flex-col gap-5 bg-primaryColor dark:bg-darkColor rounded-lg p-6"
                                >
                                    <p>
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                        Quidem a repudiandae sunt possimus laborum vitae maxime
                                        reiciendis.
                                    </p>
                                    <div class="flex items-center">
                                        <img
                                            src="./img/review-5.jpg"
                                            alt="review image"
                                            class="w-12 h-12 rounded-full"
                                        />
                                        <div class="ml-2">
                                            <p class="font-oswald uppercase">John doe</p>
                                            <p class="paragraph">Designer</p>
                                        </div>
                                        <i
                                            class="fa-solid fa-quote-right text-4xl text-secondaryColor ml-auto"
                                        ></i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </section>

            <!--~~~~~~~~~~~~~~~ Contact ~~~~~~~~~~~~~~~-->
            <section id="contact" class="bg-secondaryColor py-16">
                <div class="container flex flex-col gap-5 md:items-center md:flex-row">
                    <div class="space-y-4 md:flex-1">
                        <h2 class="section__title text-blackColor">GET EXCLUSIVE UPDATE</h2>
                        <p class="text-sm">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        </p>
                    </div>
                    <div class="flex flex-col gap-3 md:flex-row md:flex-1">
                        <input
                            type="email"
                            placeholder="Enter your email"
                            class="p-2 text-blackColor rounded-lg outline-none md:w-full"
                        /><a
                            href="#"
                            class="flex items-center justify-center gap-2 btn bg-blackColor hover:opacity-75"
                            ><i class="fa-solid fa-paper-plane"></i> Subscribe</a
                        >
                    </div>
                </div>
            </section>
        </main>
        <!--~~~~~~~~~~~~~~~ Footer ~~~~~~~~~~~~~~~-->
        <footer>
            <section class="footer">
                <div class="container">
                    <ul
                        class="grid grid-col-1 items-strat gap-5 pb-5 md:grid-cols-2 lg:grid-cols-4"
                    >
                        <li>
                            <div class="space-y-3">
                                <a href="#" class="text-4xl font-oswald uppercase">
                                    Bur<span class="text-secondaryColor">ger</span>
                                </a>
                                <p class="text-xs">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit
                                    tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="flex flex-col gap-3">
                                <h3 class="text-lg uppercase font-oswald">SUPPORT</h3>
                                <a href="#" class="text-xs hover:text-secondaryColor">FAQ's</a>
                                <a href="#" class="text-xs hover:text-secondaryColor"
                                    >Privacy Policy</a
                                >
                                <a href="#" class="text-xs hover:text-secondaryColor"
                                    >Term & Condition</a
                                >
                                <a href="#" class="text-xs hover:text-secondaryColor">Contact</a>
                            </div>
                        </li>
                        <li class="space-y-8">
                            <div class="space-y-2">
                                <h3 class="text-lg uppercase font-oswald">phone</h3>
                                <p class="flex items-center gap-2 text-xs">
                                    <i class="fa-solid fa-phone text-lg text-secondaryColor"></i> +1
                                    000 000 0000
                                </p>
                            </div>
                            <div class="space-y-2">
                                <h3 class="text-lg uppercase font-oswald">email</h3>
                                <p class="flex items-center gap-2 text-xs">
                                    <i class="fa-solid fa-envelope text-lg text-secondaryColor"></i>
                                    burger.info@email.com
                                </p>
                            </div>
                        </li>
                        <li class="space-y-8">
                            <div class="space-y-2">
                                <h3 class="text-lg uppercase font-oswald">address</h3>
                                <p class="flex items-center gap-2 text-xs">
                                    <i
                                        class="fa-solid fa-location-dot text-lg text-secondaryColor"
                                    ></i>
                                    Address goes here
                                </p>
                            </div>
                            <div class="space-y-2">
                                <h3 class="text-lg uppercase font-oswald">follow us</h3>
                                <div class="space-x-3">
                                    <i
                                        class="fa-brands fa-facebook-f text-lg text-secondaryColor cursor-pointer hover:-translate-y-1 ease-linear duration-200"
                                    ></i>
                                    <i
                                        class="fa-brands fa-twitter text-lg text-secondaryColor cursor-pointer hover:-translate-y-1 ease-linear duration-200"
                                    ></i>
                                    <i
                                        class="fa-brands fa-square-instagram text-lg text-secondaryColor cursor-pointer hover:-translate-y-1 ease-linear duration-200"
                                    ></i>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div
                        class="flex flex-col items-center border-t border-primaryColorLight dark:border-darkColorLight py-5 md:justify-between"
                    >
                        <p class="paragraph">BURGER TEMPLATE KIT BY FATMA</p>
                        <p class="paragraph">COPYRIGHT © 2024. ALL RIGHTS RESERVED</p>
                    </div>
                </div>
            </section>
        </footer>

        <!--~~~~~~~~~~~~~~~ Scroll Up ~~~~~~~~~~~~~~~-->

        <a
            href="#"
            class="fixed right-4 -bottom-1/2 bg-secondaryColor shadow-sm inline-block px-4 py-2 rounded-full text-lg text-blackColor z-50 hover:-translate-y-1 ease-in duration-200"
            id="scroll-up"
            ><i class="fa-solid fa-arrow-up"></i
        ></a>

        <!--~~~~~~~~~~~~~~~ Swiper JS ~~~~~~~~~~~~~~~-->
        <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

        <script>
            const swiper = new Swiper(".swiper", {
                speed: 400,
                spaceBetween: 30,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
                // If we need pagination
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                grabCursor: true,
                breakpoints: {
                    640: {
                        slidesPerView: 1,
                    },
                    768: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 3,
                    },
                },
            });
        </script>

        <!--~~~~~~~~~~~~~~~ Scroll Reveal ~~~~~~~~~~~~~~~-->
        <script src="https://unpkg.com/scrollreveal"></script>
        <!--~~~~~~~~~~~~~~~ Main.js ~~~~~~~~~~~~~~~-->
        <script src="main.js"></script>
    </body>
</html>