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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mode</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../media.css">
    <link rel="stylesheet" href="../css/animate.css">


    


    <script src="https://kit.fontawesome.com/626b69355f.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="../fontawesome-free-6.6.0-web/css/all.css">
</head>


<body>
    <header id="header">
        <nav>

            <span class>
                <a href="index.html"> Mode</a>
            </span>
            <ul id="navbar">
                <li><a class="active" href="index.html">home</a></li>
                <li><a class="" href="shop.html">shop</a></li>
                <li><a class="" href="blog.html">blog</a></li>
                <li><a class="" href="about.html">about</a></li>
                <li><a class="" href="contact.html"> contact</a></li>
                <a href="cart.html" class="">
                    <i class="fa-solid fa-cart-shopping"></i></a>
                <a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>

            </ul>
            <div id="mobile">
                <a href="cart.html">
                    <i class="fa-solid fa-cart-shopping"></i></a>
                <i id="bar" class="fa-solid fa-bars"></i>

            </div>

        </nav>



    </header>


    <main>
        <div class="text-box">
            <h4>trade in offer</h4>
            <h2> super value deals</h2>
            <h1> on all products </h1>
            <p>save more on coupons and up to 70% off!</p>
            <button>shop now </button>
        </div>

        <div class="img-box">
            <img src="../img/customwebpics/8346718-uhd-2160-4096-25fps-unscreen.png" alt="">
        </div>
        

    </main>
    <section id="feature">
        <div class="fe-box-flex">
            <div class="fe-box">
                <img src="../img/features/free s.jpeg" alt="">
                <p>free shipping</p>
            </div>
            <div class="fe-box">
                <img src="../img/features/online order.jpg" alt="">
                <p>online order </p>
            </div>
            <div class="fe-box">
                <img src="../img/features/save money.jpg" alt="">
                <p>save money</p>
            </div>
            <div class="fe-box">
                <img src="../img/features/promotions.jpg" alt="">
                <p> promotions</p>
            </div>
            <div class="fe-box">
                <img src="../img/features/happy sells.jpg" alt="">
                <p>happy sells</p>
            </div>
            <div class="fe-box">
                <img src="../img/features/customer ser.jpg" alt="">
                <p>24/7 support</p>
            </div>
        </div>
    </section>


    <section class="product">
        <p class="p-header">summer collection new marden design</p>
        </div>
        <div class="p-con-flex">
            <div class="p-con" onclick="enlarge(); ">
                <div class="p-con-img">
                    <img src="../img/products/f1.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button onclick="enlarge();"> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/f2.jpg" alt="we">


                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>



            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/f3.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/f4.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/f5.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/f6.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/f7.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/f8.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>

        </div>
    </section>







    <section id="banner">
        <h4>repair services</h4>
        <h1>up to <span>70% off</span>- all t-shirts & accessories</h1>
        <button>
            explore more
        </button>
    </section>















    <section class="product">
        <div class="p-header">
            <h1>new arrivals</h1>
            <p>summer collection new marden design</p>
        </div>
        <div class="p-con-flex">

            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/n1.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/n2.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>



            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/n3.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/n4.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/n5.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/n6.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/products/n7.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button title="click" type="button"> <i class="fa-solid fa-cart-shopping"></i></button>

                    </div>

                </div>


            </div>
            <div class="p-con" onclick="enlarge()">
                <div class="p-con-img">
                    <img src="../img/products/n8.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button onclick="enlarge()" type="button"> <i class="fa-solid fa-cart-shopping"></i></button>

                    </div>

                </div>


            </div>

        </div>
    </section>




    <section id="banners-s">
        <div class="banner-box">
            <h4>crazy deals</h4>
            <h2>buy 1 get 1 free</h2>
            <span> the best classic dress is on sales at cara </span>
            <button>
                learn more
            </button>
        </div>
        <div class=" banner-box2">
            <h4>spring/ summer</h4>
            <h2>upcoming season</h2>
            <span> the best classic dress is on sales at cara </span>
            <button>
                learn more
            </button>
        </div>

    </section>

    <section id="banners-stwo">
        <div class="banner-box">

            <h2>seasonal scale</h2>
            <h3>winter colection -50% off</h3>
        </div>
        <div class="banner-box">

            <h2>new footwear collection</h2>
            <h3>spring/ summer 2024</h3>
        </div>
        <div class="banner-box">
            <h2>t-shirts</h2>
            <h3>new trendy prints</h3>
        </div>

    </section>

    <section id="newsletter">
        <div class="text">
            <h3>signup for newsletter</h3>
            <p>get email update about our latest shop and <span>special offers</span> .</p>
        </div>
        <div class="inputs">
            <label for="email"></label>
            <input type="email" required placeholder="your email address" id="email">
            <label for="sign-up"></label>
            <input type="submit" value="sign up" id="sign-up">
        </div>
    </section>

    <footer>
        <div class="f-col-flex">
            <div class="f-col">

                <h4> contact</h4>
                <p><strong>address</strong>: no 34 kenny street alagba estate</p>
                <p><strong>phone</strong>:<PRESIDIO_ANONYMIZED_PHONE_NUMBER></p>
                <p><strong>hours</strong>:20 hours</p>
                <strong>follow us</strong>
                <div class="contact-icon">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i>
                </div>
            </div>


            <div class="f-col">
                <h4>about</h4>
                <ul>
                    <li><a href="">about us</a></li>
                    <li><a href=""> delivery info</a></li>
                    <li><a href=""> privacy policy</a></li>
                    <li><a href=""> terms and condition</a></li>
                    <li><a href=""> contact us </a></li>
                </ul>

            </div>

            <div class="f-col">

                <h4> my account</h4>
                <ul>
                    <li><a href="">sign in</a></li>
                    <li><a href=""> view cart</a></li>
                    <li><a href=""> my wishlit</a></li>
                    <li><a href=""> track my order</a></li>
                    <li><a href=""> help </a></li>
                </ul>

            </div>


            <div class="f-col">

                <h4> install app</h4>
                <p> from <a href="">app store</a> or <a href="">google play</a> </p>
                <div class="download-store">
                    <a href="#"><img src="app store.png" alt=""></a>
                    <a href="#"><img src="play store.png" alt=""></a>
                </div>
                <p>secured payments gateway</p>
                <div class="payments-box">
                    <img class="payments" src="mastarcard.jpg" alt="">

                    <img class="payments" src="visa.jpg" alt="">

                    <img class="payments" src="paypal.jpg" alt="">

                    <img class="payments" src="amazon.jpg" alt="">

                </div>

            </div>

        </div>

    </footer>












    <script src="../script/script.js"></script>
</body>

</html>      build an about me for this page