index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arsalan_Impex</title>
    <!-- <link rel="stylesheet" href="mediaquery.css"> -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>

<body>
    <header>
        <div class="marquee">
            <h4 class="marquee-item">FREE DELIVERY ON ORDERS OVER £50</h4>
            <h4 class="marquee-item">BANK HOLIDAY SALE NOW ON - GET UP TO 30% OFF!</h4>
            <h4 class="marquee-item">COMPLIMENTARY PERSONALISATION</h4>
        </div>
    </header>
    <nav class="navbar">
        <input type="checkbox" id="menu-toggle" class="menu-toggle">
        <label for="menu-toggle" class="hamburger">
            <i class="fa fa-bars"></i>
        </label>
        <ul class="navbar-links">
            <li><a href="#">SALES</a></li>
            <li><a href="#">PHONE COVERS</a></li>
            <li><a href="#">LEATHER GOODS</a></li>
            <li><a href="#">SETS</a></li>
        </ul>
        <div class="navbar-logo"><img src="logosmall.png" alt=""></div>
        <div class="navbar-icons">
            <ul>
                <li id="INR"><img src="icons8-india-48.png" alt="flag"> INR &#8377 <i class="fa fa-chevron-down"></i>
                </li>
                <li class="iconsonly">
                    <ul>
                        <li><a href="signin.html"><i class="fa fa-regular fa-user"></i></a></li>
                        <li><i class="fa fa-light fa-magnifying-glass"></i></li>
                        <li><i class="fa fa-bag-shopping"></i></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <main>
        <div class="sections">
            <!-- section-1 -->
            <div class="section1">
                <img src="sec1banner.webp" alt="">
                <div class="tx1">
                    <h4>LIMITED TIME ONLY!</h4>
                    <h1>✨BANK HOLIDAY SALE - UP TO 30% OFF</h1>
                    <button class="btn1">SHOP SALE</button>
                </div>

            </div>
            <!-- section-2 -->
            <div class="section2">
                <!-- TEXT heading -->
                <div class="tx2">
                    <p>SHOP THE ALL NEW</p>
                    <h2>IPHONE 15 CASES</h2>
                </div>
                <!-- products container -->
                <div class="productscontainer">
                    <div class="product">
                        <div class="productimg">
                            <img src="sec2/iPhone_15_Pro_Black_1500x1500_776e6b12-0d97-414b-94a0-2319c6707762.webp"
                                alt="">
                        </div>
                        <div class="productinfo">
                            <p>Foil embossed IPHONE 15 pro case</p>
                            <h5>Rs. 2,700</h5>
                        </div>
                    </div>
                    <div class="product">
                        <div class="productimg">
                            <img src="sec2/15-pro-red-foil.webp" alt="">
                        </div>
                        <div class="productinfo">
                            <p>Foil embossed IPHONE 15 pro max case</p>
                            <h5>Rs. 2,700</h5>
                        </div>
                    </div>
                    <div class="product">
                        <div class="productimg">
                            <img src="sec2/15-green-foil.jpg" alt="">
                        </div>
                        <div class="productinfo">
                            <p>Foil embossed IPHONE 15 case</p>
                            <h5>Rs. 2,700</h5>
                        </div>
                    </div>
                    <div class="product">
                        <div class="productimg">
                            <img src="sec2/15-pro-nude-foil.jpg" alt="">
                        </div>
                        <div class="productinfo">
                            <p>Foil embossed IPHONE 15 pro max case</p>
                            <h5>Rs. 2,700</h5>
                        </div>
                    </div>
                </div>
                <button class="btn1">VIEW ALL</button>
            </div>
            <!-- SECTION-3 -->
            <div class="section3">
                <h2>OUR TOP PICKS</h2>
                <div class="productscontainer">
                    <div class="product">
                        <div class="productimg">
                            <img src="section3/iPhone_15_Pink_1500x1500_b4542407-a7d7-4f68-8b91-5833949d9c5f.webp"
                                alt="">
                        </div>
                        <div class="productinfo">
                            <p>Foil embossed IPHONE 14 case</p>
                            <h5>Rs. 2,300</h5>
                        </div>
                    </div>
                    <div class="product">
                        <div class="productimg">
                            <img src="section3/iPhone-13-Pro-Navy_12ad23d5-b9a7-4693-8463-319b4e39b5e8.webp" alt="">
                        </div>
                        <div class="productinfo">
                            <p>Foil embossed IPHONE 13 pro case</p>
                            <h5>Rs. 2,400</h5>
                        </div>
                    </div>
                    <div class="product">
                        <div class="productimg">
                            <img src="section3/iPhone-13-Pro-Khaki_594bd256-4c83-4929-98ce-96450b532509.webp" alt="">
                        </div>
                        <div class="productinfo">
                            <p>Foil embossed IPHONE 14 pro max case</p>
                            <h5>Rs. 2,400</h5>
                        </div>
                    </div>
                    <div class="product">
                        <div class="productimg">
                            <img src="section3/iPhone-13-Burgundy.jpg" alt="">
                        </div>
                        <div class="productinfo">
                            <p>Foil embossed IPHONE 13 case</p>
                            <h5>Rs. 2,300</h5>
                        </div>
                    </div>
                </div>
                <button class="btn1">VIEW ALL</button>
            </div>


            <!-- SECTION-4 -->
            <div class="section4">
                <h2>SHOP BY CATEGORY</h2>
                <div class="categorycontainer">
                    <div class="card1">
                        <img src="section4/1cases_22.webp" alt="">
                        <div class="tx4">
                            <p class="h2">PHONE CASES</p>
                            <button class="btn2">SHOP NOW</button>
                        </div>
                    </div>
                    <div class="card1">
                        <img src="section4/2sets.webp" alt="">
                        <div class="tx4">
                            <p class="h2">SETS</p>
                            <button class="btn2">SHOP NOW</button>
                        </div>
                    </div>
                    <div class="card1">
                        <img src="section4/3card_holders_2e0b6dd1-92fe-4485-9bc7-b01bf4e8bfc7.webp" alt="">
                        <div class="tx4">
                            <p class="h2">CARD HOLDERS</p>
                            <button class="btn2">SHOP NOW</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- <SECTION-5> -->
<div class="both">
            <div class="section5">
                <div class="tx5">
                    <p class="h3">PERSONALISATION</p>
                    <p>We offer a wide variety of leather goods that can be <br> personalised with your initials, name,
                        or even a custom <br>message. Whether you're looking for a personalised <br>phone case, card
                        holder or bag, we have something for <br>everyone.</p>
                </div>
                <div class="pic5">
                    <img src="sec5img.webp" alt="">
                </div>
            </div>

            <!-- SECTION-6 -->
            <div class="section5b">
                <div class="pic5">
                    <img src="sec6img.webp" alt="">
                </div>
                <div class="tx5">
                    <p class="h3">OUR STORY</p>
                    <p>We believe that leather is a timeless material that can be <br>enjoyed for years to come. That's
                        why we take the time <br>to create products that are built to last.</p>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
            <!-- SECTION-7 -->
            <div class="section7">
                <div class="parallax">
                    <div class="pcontainer">
                        <div class="parallaxtext">
                            <p class="h6">OUR LEATHER</p>
                            <p>We only work with the best leather tanneries in Italy, chosen in collaboration with our
                                factory.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SECTION-8 -->
            <div class="section8">
                <div class="tx8">
                    <p class="h6">GET INSPIRED AND FOLLOW US ON INSTAGRAM</p>
                    <p class="h2">@LUXELEATHERCOMPANY</p>
                </div>
                <div class="container8a">
                    <div class="imagecard1">
                        <img src="section8/s8-1.jpg" alt="">
                        <div class="overlay">
                            <a href="#" class="icon" title="INSTAGRAM">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                    <div class="imagecard1">
                        <img src="section8/s8-2.jpg" alt="">
                        <div class="overlay">
                            <a href="#" class="icon" title="INSTAGRAM">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                    <div class="imagecard1">
                        <img src="section8/s8-3.jpg" alt="">
                        <div class="overlay">
                            <a href="#" class="icon" title="INSTAGRAM">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                    <div class="imagecard1">
                        <img src="section8/s8-4.jpg" alt="">
                        <div class="overlay">
                            <a href="#" class="icon" title="INSTAGRAM">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                    <div class="imagecard1">
                        <img src="section8/s8-5.jpg" alt="">
                        <div class="overlay">
                            <a href="#" class="icon" title="INSTAGRAM">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                    <!-- </div>
                <div class="container8b"> -->
                    <div class="imagecard1">
                        <img src="section8 L2/l2-1.jpg" alt="">
                        <div class="overlay">
                            <a href="#" class="icon" title="INSTAGRAM">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                    <div class="imagecard1">
                        <img src="section8 L2/l2-2.jpg" alt="">
                        <div class="overlay">
                            <a href="#" class="icon" title="INSTAGRAM">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                    <div class="imagecard1">
                        <img src="section8 L2/l2-3.jpg" alt="">
                        <div class="overlay">
                            <a href="#" class="icon" title="INSTAGRAM">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                    <div class="imagecard1">
                        <img src="section8 L2/l2-4.jpg" alt="">
                        <div class="overlay">
                            <a href="#" class="icon" title="INSTAGRAM">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                    <div class="imagecard1">
                        <img src="section8 L2/l2-5.jpg" alt="">
                        <div class="overlay">
                            <a href="#" class="icon" title="INSTAGRAM">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="container8c">
                    <div class="iconwithtext">
                        <i class="fa fa-earth-americas"></i>
                        <div class="itext">WORLDWIDE SHIPPING</div>
                    </div>
                    <div class="iconwithtext">
                        <i class="fa fa-briefcase"></i>
                        <div class="itext">FREE PERSONALISATION</div>
                    </div>
                    <div class="iconwithtext">
                        <i class="fa fa-gift"></i>
                        <div class="itext">GIFT WRAPPING</div>
                    </div>
                    <div class="iconwithtext">
                        <i class="fa fa-light fa-lock"></i>
                        <div class="itext">SECURE CHECKOUT</div>
                    </div>

                </div>
                <hr>
            </div>
            <!-- FOOTER SECTION -->
            <footer>
                <div class="footercontainer1">
                    <div class="footerbox1">
                        <p class="h5">SHOP</p>
                        <ul>
                            <li>Phone Covers</li>
                            <li>Card Holders</li>
                            <li>Sets</li>
                            <li>Small Leather Goods</li>
                        </ul>
                    </div>
                    <div class="footerbox1">
                        <p class="h5">INFORMATION</p>
                        <ul>
                            <li>My Account</li>
                            <li>FAQ</li>
                            <li>Shipping Information</li>
                            <li>Returns</li>
                            <li>Become an affiliate</li>
                            <li>Klarna</li>
                            <li>Warranty</li>
                        </ul>
                    </div>
                    <div class="footerbox1">
                        <p class="h5">ABOUT</p>
                        <ul>
                            <li>Our Story</li>
                            <li>Contact Us</li>
                            <li>Blog</li>
                            <li>Privacy Policy</li>
                            <li>Terms of Service</li>
                        </ul>
                    </div>
                    <div class="footerbox4">
                        <p class="h5">NEWSLETTER</p>
                        <p>Sign up to our newsletter to receive exclusive offers.</p>
                        <input type="email" id="email" placeholder="E-mail" name="email">
                        <button class="btn1">SUBSCRIBE</button>
                    </div>
                </div>
                <div class="footercontainer2">
                    <ul class="socialmedia">
                        <li class="fb"><i class="fa-brands fa-facebook-f"></i></li>
                        <li class="ig"><i class="fa-brands fa-instagram"></i></li>
                        <li class="tiktok"><i class="fa-brands fa-tiktok"></i></li>
                    </ul>
                </div>
                <div class="footercontainer3">
                    <div class="leftdiv">
                        <button class="currencybtn"><img src="indiaflag.jpg" alt=""> INDIA (INR) &#8377 <i
                                class="fa fa-chevron-down"></i></button>
                    </div>
                    <div class="middiv">
                        <p>© 2024 - LUXE LEATHER / POWERED BY SHOPIFY</p>
                    </div>
                    <div class="rightdiv">
                        <img src="paymenticons/amex.png" alt="">
                        <img src="paymenticons/shopping (2).png" alt="">
                        <img src="paymenticons/google-pay.png" alt="">
                        <img src="paymenticons/card (1).png" alt="">
                        <img src="paymenticons/card (2).png" alt="">
                        <img src="paymenticons/paypal.png" alt="">
                        <img src="paymenticons/money.png" alt="">
                        <img src="paymenticons/card.png" alt="">
                    </div>

                </div>
            </footer>


        </div>
    </main>

</body>

</html>