index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crumbly Delights</title>
    <!-- css -->
    <link rel="stylesheet" href="./style.css">
    <!-- font awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- boxicon script -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <div id="container">
        <!-- up arrow button -->
        <div class="up-arrow">
            <a href="#container"><i class="fa-solid fa-angle-up"></i></a>
        </div>
        <!-- navbar -->
         <header>
            <a href="#"><img id="logo" src="./images/logo.png" alt="Crumbly Delights"></a>
            <input type="checkbox" id="check">
            <label for="check" class="icons">
                <!-- menu icon -->
                <i id="menu" class='bx bx-menu '></i>
                <!-- close icon -->
                <i id="close" class='bx bx-x'></i>
            </label>
            <nav>
                <ul>
                    <li class="nav-links"><a class="links" href="#home">Home</a></li>
                    <li class="nav-links"><a class="links" href="#Catalogue">Catalogue</a></li>
                    <li class="nav-links"><a class="links" href="#About">About</a></li></a></li>
                    <li class="nav-links"><a class="links" href="#contact-us">Contact Us</a></li>
                </ul>
                <div class="cart-container">
                    <a class="cart" href="">Order Now</a>
                    <a class="cart" href=""><i class="fa-solid fa-cart-shopping cart-icon"></i><span >Cart</span></a>
                </div>
            </nav>
         </header>
        <!-- home section -->
        <section id="home">
            <div id="home-div" class="home-div">
                <h1>Crumbly Delights</h1>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident voluptatum, dolores suscipit pariatur blanditiis commodi facere odio ut exercitationem ex qui culpa eum distinctio recusandae quos voluptatibus. Quod, ut possimus.</p>
                <a class="order" href="">Order Now</a>
            </div>
            <div id="home-div2" class="home-div">
                <img class="back-img
                " src="./images/home-main-back.png" alt="">
                <img class="front-img" src="./images/home-main-front.png" alt="">
            </div>
        </section>
        <!-- categories section -->
        <section id="Catalogue">
            <div class="catalogue-section Catalogue-heading">
                <h1>Catalogue</h1>
                <h4>Crumbly Delights</h4>
            </div>
            <div  class="catalogue-section Catalogue">
                <div class="images">
                    <div class="image-item">
                        <a href="#cake-section">Cakes</a>
                    </div>
                    <div class="image-item">
                        <a href="#cookie-section">Cookies</a>
                    </div>
                    <div class="image-item">
                        <a href="#cupcake-section">Cupcakes</a>
                    </div>
                    <div class="image-item">
                        <a href="#brownie-section">Brownies</a>
                    </div>
                    <div class="image-item">
                        <a href="#others">More</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- Cakes section -->
         <section id="cake-section" class="product-section">
            <div class="cake-heading">
                <h1>Cakes <span>from Crumbly Delights</span></h1>
                <a href="#">
                    <span>Explore More</span>
                    <i class="fa-solid fa-arrow-up-right-from-square"></i>
                </a>
            </div>
            <div class="cake-slider">
                <div class="slides-div" id="slide-1">
                    <img src="images/cakes/Chocolate Berry Cake.jpeg" alt="" class="img" id="img1">
                    <div class="img-details"><a href="">Chocolate Berry Cake</a></div>
                </div>
                <div class="slides-div" id="slide-2">
                    <img src="images/cakes/Carrot Cake.jpeg" alt="" class="img" id="img2">
                    <div class="img-details"><a href="">Carrot Cake</a></div>
                </div>
                <div class="slides-div" id="slide-3">
                    <img src="images/cakes/Chocolate Raspberry Mousse Cake.jpeg" alt="" class="img" id="img3">
                    <div class="img-details"><a href="">Chocolate Raspberry Mousse Cake</a></div>
                </div>
                <div class="slides-div" id="slide-4">
                    <img src="images/cakes/Mango Cake.jpeg" alt="" class="img" id="img4">
                    <div class="img-details"><a href="">Mango Cake</a></div>
                </div>
                <div class="slides-div" id="slide-5">
                    <img src="images/cakes/Simple Chocolate Fudge Cake.jpeg" alt="" class="img" id="img5">
                    <div class="img-details"><a href="">Simple Chocolate Fudge Cake</a></div>
                </div>
                <div class="slides-div" id="slide-6">
                    <img src="images/cakes/Strawberry Mousse Cake.jpeg" alt="" class="img" id="img6">
                    <div class="img-details"><a href="">Strawberry Mousse Cake</a></div>
                </div>  
            </div>
         </section>
        
         <!-- Cupcakes section -->
         <section id="cupcake-section" class="product-section">
            <div class="cake-heading">
                <h1>Cupcakes <span>from Crumbly Delights</span></h1>
                <a href="#">
                    <span>Explore More</span>
                    <i class="fa-solid fa-arrow-up-right-from-square"></i>
                </a>
            </div>
            <div class="cake-slider">
                <div class="slides-div" id="slide-2-1">
                    <img src="images/cupcakes/Apple Pie Cupcakes.jpeg" alt="no img" class="img" id="img2-1">
                    <div class="img-details"><a href="">Apple Pie Cupcakes</a></div>
                </div>
                <div class="slides-div" id="slide-2-2">
                    <img src="images/cupcakes/Coconut Cream Cupcakes.jpeg" alt="" class="img" id="img2-2">
                    <div class="img-details"><a href="">Coconut Cream Cupcakes</a></div>
                </div>
                <div class="slides-div" id="slide-2-3">
                    <img src="images/cupcakes/Cookie Butter Cupcakes.jpeg" alt="" class="img" id="img2-3">
                    <div class="img-details"><a href="">Cookie Butter Cupcakes</a></div>
                </div>
                <div class="slides-div" id="slide-2-4">
                    <img src="images/cupcakes/Green Dream Pistachio Cupcakes.jpeg" alt="no img" class="img" id="img2-4">
                    <div class="img-details"><a href="">Green Dream Pistachio Cupcakes</a></div>
                </div>
                <div class="slides-div" id="slide-2-5">
                    <img src="images/cupcakes/Ice Cream Cupcakes.jpeg" alt="" class="img" id="img2-5">
                    <div class="img-details"><a href="">Ice Cream Cupcakes</a></div>
                </div>
                <div class="slides-div" id="slide-2-6">
                    <img src="images/cupcakes/Jam Donut Cupcakes.jpeg" alt="" class="img" id="img2-6">
                    <div class="img-details"><a href="">Jam Donut Cupcakes</a></div>
                </div>
            </div>
         </section>

        <!-- Cookies section -->
        <section id="cookie-section" class="product-section">
            <div class="cake-heading">
                <h1>Cookies <span>from Crumbly Delights</span></h1>
                <a href="#">
                    <span>Explore More</span>
                    <i class="fa-solid fa-arrow-up-right-from-square"></i>
                </a>
            </div>
            <div class="cake-slider">
                <div class="slides-div" id="slide-3-1">
                    <img src="images/cookies/Brown Butter White Chocolate Matcha Cookies.jpeg" alt="" class="img" id="img3-1">
                    <div class="img-details">
                        <a href="">Brown Butter White Chocolate Matcha Cookies</a>
                    </div>
                </div>
                <div class="slides-div" id="slide-3-2">
                    <img src="images/cookies/Chocolate Cherry Cookies.jpeg" alt="" class="img" id="img3-2">
                    <div class="img-details"><a href="">Chocolate Cherry Cookies</a></div>
                </div>
                <div class="slides-div" id="slide-3-3">
                    <img src="images/cookies/Cookie Set.jpeg" alt="" class="img" id="img3-3">
                    <div class="img-details"><a href="">Cookie Set</a></div>
                </div>
                <div class="slides-div" id="slide-3-4">
                    <img src="images/cookies/Double Chocolate Chip Cookies.jpeg" alt="" class="img" id="img3-4">
                    <div class="img-details"><a href="">Double Chocolate Chip Cookies</a></div>
                </div>
                <div class="slides-div" id="slide-3-5">
                    <img src="images/cookies/Peanut Butter Chocolate Swirl Cookies.jpeg" alt="" class="img" id="img3-5">
                    <div class="img-details"><a href="">Peanut Butter Chocolate Swirl Cookies</a></div>
                </div>
                <div class="slides-div" id="slide-3-6">
                    <img src="images/cookies/Red Velvet Cookies.jpeg" alt="" class="img" id="img3-6">
                    <div class="img-details"><a href="">Red Velvet Cookies</a></div>
                </div>
            </div>
         </section>

        <!-- Brownies section -->
        <section id="brownie-section" class="product-section">
            <div class="cake-heading">
                <h1>Brownies <span>from Crumbly Delights</span></h1>
                <a href="#">
                    <span>Explore More</span>
                    <i class="fa-solid fa-arrow-up-right-from-square"></i>
                </a>
            </div>
            <div class="cake-slider">
                <div class="slides-div" id="slide-4-1">
                    <img src="images/brownies/Fudgy Triple Chocolate Brownies.jpeg" alt="" class="img" id="img4-1">
                    <div class="img-details"><a href="">Fudgy Triple Chocolate Brownies</a></div>
                </div>
                <div class="slides-div" id="slide-4-2">
                    <img src="images/brownies/Matcha Brownies.jpeg" alt="" class="img" id="img4-2">
                    <div class="img-details"><a href="">Matcha Brownies</a></div>
                </div>
                <div class="slides-div" id="slide-4-3">
                    <img src="images/brownies/Nutty Brownies.jpeg" alt="" class="img" id="img4-3">
                    <div class="img-details"><a href="">Nutty Brownies</a></div>
                </div>
                <div class="slides-div" id="slide-4-4">
                    <img src="images/brownies/Red Velvet Cheesecake Brownies.jpeg" alt="" class="img" id="img4-4">
                    <div class="img-details"><a href="">Red Velvet Cheesecake Brownies</a></div>
                </div>
                <div class="slides-div" id="slide-4-5">
                    <img src="images/brownies/Triple Chocolate Espresso Brownies.jpeg" alt="" class="img" id="img4-5">
                    <div class="img-details"><a href="">Triple Chocolate Espresso Brownies</a></div>
                </div>
            </div>
         </section>

        <!-- others section -->
         <section id="others" class="product-section">
            <div class="cake-heading">
                <h1>More <span>from Crumbly Delights</span></h1>
                <a href="#">
                    <span>Explore More</span>
                    <i class="fa-solid fa-arrow-up-right-from-square"></i>
                </a>
            </div>
            <div class="cake-slider">
                <div class="slides-div" id="slide-5-1">
                    <img src="images/others/donuts.jpeg" alt="" class="img" id="img5-1">
                    <div class="img-details"><a href="">Donuts</a></div>
                </div>
                <div class="slides-div" id="slide-5-2">
                    <img src="images/others/Dry Fruits Laddu.jpeg" alt="" class="img" id="img5-2">
                    <div class="img-details"><a href="">Laddu</a></div>
                </div>
                <div class="slides-div" id="slide-5-3">
                    <img src="images/others/Egg Tarts.jpeg" alt="" class="img" id="img5-3">
                    <div class="img-details"><a href="">Egg Tarts</a></div>
                </div>
                <div class="slides-div" id="slide-5-4">
                    <img src="images/others/Mᴀᴄᴀʀʀᴏɴs.jpeg" alt="" class="img" id="img5-4">
                    <div class="img-details"><a href="">Macarrons</a></div>
                </div>
                <div class="slides-div" id="slide-5-5">
                    <img src="images/others/New York Style Bagels.jpeg" alt="" class="img" id="img5-5">
                    <div class="img-details"><a href="">New York Style Bagels</a></div>
                </div>
                <div class="slides-div" id="slide-5-6">
                    <img src="images/others/Strawberry Pie.jpeg" alt="" class="img" id="img5-6">
                    <div class="img-details"><a href="">Strawberry Pie</a></div>
                </div>
            </div>
         </section>

        <!-- about us section -->
        <!-- contact us section -->
        <!-- footer -->
        <footer>
            <div class="footer-div main-footer-div">
                <img id="logo" src="./images/logo.png" alt="Crumbly Delights">
                <h4>Crumbly Delights</h4>
                <div class="icon-collections">
                    <!-- X -->
                    <div class="icon">
                        <a target="_blank" href="h">
                            <i class="fa-brands fa-x-twitter brands"></i>
                        </a>
                    </div>
                    <!-- Facebook -->
                    <div class="icon">
                        <a target="_blank" href="">
                            <i class="fa-brands fa-facebook-f brands"></i>
                        </a>
                    </div>
                    <!-- Instagram -->
                    <div class="icon">
                        <a target="_blank" href="">
                            <i class="fa-brands fa-instagram brands"></i>
                        </a>
                    </div>
                    <!-- Mail -->
                    <div class="icon">
                        <a target="_blank" href="">
                            <i class="fa-regular fa-envelope brands"></i>
                        </a>
                    </div>
                </div>
                <a id="contact-us" class="cart contact-us" href="">Get in touch with us</a>
            </div>
            <div class="footer-div">
                <li class=" main">Quick Links</li>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About Us</a></li>
                <li><a href="#Catalogue">Catalogue</a></li>
                <li><a href="#popular">Best Selling</a></li>
            </div>
            <div class="footer-div">
                <li class=" main">For Customer</li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Term and Conditons</a></li>
                <li><a href="#">Payment and Security</a></li>
                <li><a href="#">Refund Policy</a></li>
            </div>
            <div class="footer-div">
                <li class=" main">Contact</li>
                <li>Crumbly Delights Pvt. Ltd</li>
                <li>klsdjfie 487</li>
                <li>dklfhid 9384</li>
                <li><i class="fa-solid fa-phone phone"></i>+91 3847994857</li>
            </div>
        </footer>
    </div>
</body>
</html>