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="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" />
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
    <title>codeShop</title>
</head>

<body>
    <nav>
        <div class="sec-1">
            <a href="index.html"><h3><span>Code</span>Shop</h3></a>
        </div>
        <div class="sec-2">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li><a href="./contact/index.html">Contact</a></li>
                <li>Service</li>
            </ul>
            <div class="hamburger">
                <i class="fa-solid fa-bars open-nav" style="color: #ffffff;"></i>
            </div>
        </div>
        <!-- navigation width pop-up -->
        <div class="nav-mobile">
            <div class="nav-m-block">
                <i class="fa-solid fa-xmark close-nav"></i>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="./contact/index.html">Contact</a></li>
                    <li><a href="">Service</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <nav>
        <div class="sec-3">
            <ul>
                <li>MEN</li>
                <li>WOMEN</li>
                <li>KIDS</li>
                <li>ACCESSORIES</li>
                <li>UNISEX</li>
            </ul>
        </div>
    </nav>

    <div class="hero-sec" id="hero">
        <img src="images/Blue Dynamic Fashion Special Sale Banner(1).png" alt="">
    </div>

    <!-- scroll-down animation -->
    <div class="mouse_scroll">
        <div>
            <span class="m_scroll_arrows unu"></span>
            <span class="m_scroll_arrows doi"></span>
            <span class="m_scroll_arrows trei"></span>
        </div>
    </div>
    <!-- scroll down ani.. end -->
    <h1 class="fontSizeTitle" style="justify-content: center; display: flex;">Tshirts</h1>
    <div class="products-container">

        <div class="products-box">
            <img src="images/react-tshirt.jpg" alt="">
            <h4>React T-shirt</h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/react-tshirt.jpg" alt="">
            <h4>React T-shirt</h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/react-tshirt.jpg" alt="">
            <h4>React T-shirt</h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/react-tshirt.jpg" alt="">
            <h4>React T-shirt</h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/react-tshirt.jpg" alt="">
            <h4>React T-shirt</h4>
            <p>$20</p>
        </div>
    </div>

    <!-- smartwatch-banner -->
    <div class="banner">
        <img src="images/smartwatch-banner.png" alt="">
        <img src="images/mobile-banner.png" alt="">
    </div>

    <!-- Smartwatch (product) -->
    <h1 class="fontSizeTitle" style="justify-content: center; display: flex;">Smartwatch</h1>
    <div class="products-container">
        <div class="products-box">
            <img src="images/smartwatch.png" alt="">
            <h4>Noise Smartwatch</h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/smartwatch.png" alt="">
            <h4>Noise Smartwatch</h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/smartwatch.png" alt="">
            <h4>Noise Smartwatch</h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/smartwatch.png" alt="">
            <h4>Noise Smartwatch</h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/smartwatch.png" alt="">
            <h4>Noise Smartwatch</h4>
            <p>$20</p>
        </div>
    </div>

    <!-- breaks -->
    <br class="br">
    <br clas="br">

    <!-- Mobile Phones  (product) -->
    <h1 class="fontSizeTitle" style="justify-content: center; display: flex;">Mobile Phones</h1>
    <div class="products-container">
        <div class="products-box">
            <img src="images/iphone_.jpg" alt="">
            <h4>Iphone 14 Pro Max </h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/iphone_.jpg" alt="">
            <h4>Iphone 14 Pro Max </h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/iphone_.jpg" alt="">
            <h4>Iphone 14 Pro Max </h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/iphone_.jpg" alt="">
            <h4>Iphone 14 Pro Max </h4>
            <p>$20</p>
        </div>
        <div class="products-box">
            <img src="images/iphone_.jpg" alt="">
            <h4>Iphone 14 Pro Max </h4>
            <p>$20</p>
        </div>
    </div>

    <!-- Suggestion: use images with same height and width then remove the height settings in swiper's css. This will improve consistency in UI and eliminate the stretched image you problem see now. -->
    <!-- Swiper -->
    <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="images/5691822.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/8331128.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/summersale-banner.jpg" alt=""></div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></div>
    </div>
    <!-- swiper end -->

    <section>
        <div class="mail-part-1">
            <input type="email" placeholder="Enter your mail">
            <button>Subscribe</button>
        </div>

        <div class="mail-part-2">
            <img src="./images/envelope.png" alt="">
            <p>&ggg; <span>Subscribe</span> to get updates to your inbox</p>
        </div>
    </section>

    <!-- footer -->
    <footer>
        <div class="f1 sec-1">
            <h3><span>Code</span>Shop</h3>
        </div>
        <div class="f2">
            <div class="f2-center">
                <div class="f2-sub-1">
                    <ul>
                        <li><a href="../index.html">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="../contact/index.html">Contact Us</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Helpline</a></li>
                    </ul>
                </div>
                <div class="f2-sub-2">
                    <ul>
                        <li><a href="">CodeShop Plus</a></li>
                        <li><a href="">Careers</a></li>
                        <li><a href="">Sponsors</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="socials">
            <div class="s-link">
                <a href="mailto:syedimtiyazali141@gmail.com"><i class="fa-brands fa-google"></i></a>
                <a href="https://linkedin.com/in/imtiyaz-sde"><i class="fa-brands fa-linkedin-in"></i></a>
                <a href="https://github.com/SyedImtiyaz-1"><i class="fa-brands fa-github"></i></a>
            </div>
        </div>

        <!-- developer's mention -->
        <p class="copyright">Made with ❤️ by&nbsp;<span>Imtiyaz</span> </p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script src="./js/swipper.js"></script>
    <script src="./js/script.js"></script>

</body>

</html>