product.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">
    <title>All Products-Blue Store</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital@1&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,700&family=Oleo+Script+Swash+Caps:wght@400;700&family=PT+Sans:ital@1&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps:wght@400;700&family=PT+Sans:ital@1&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;0,700;1,300;1,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
</head>
<body class='body-1'>
        <div class="container">
            <!-----------Navigation bar----------->
            <div class="navbar">
                <div class="logo">
                    <a href="index.html"><img src="/Blue store Images/images/logo.png" width="100px"></a>
                </div>
                <nav>
                    <ul id="MenuItems">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="product.html">Products</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><a href="account.html">Account</a></li>
                    </ul>
                </nav>
                <img src="/Blue store Images/images/cart.png" width="30px">
                <img src="/Blue store Images/images/menu.png" class="menu-logo" width="30px">
            </div>
        </div>
    <div class="small-container">
        <h2 class="title">Featured Products!</h2>
        <div class="row">
            <div class="col-4">
                <a href="product_details.html"><img src="/Blue store Images/images/product-1.jpg" ></a>
                <a href="product_details.html"><h4>Pattern shirt</h4></a>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                <p>$10.00</p>
            </div>
            <div class="col-4">
                <a href="product2.html"><img src="/Blue store Images/images/product-2.jpg" ></a>
                <h4>HRX Sports Wear</h4>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                <p>$25.99</p>
            </div>
            <div class="col-4">
                <a href="product3.html"><img src="/Blue store Images/images/product-3.jpg" ></a>
                <h4>Track Pant !!!</h4>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <p>$20.29</p>
            </div>
            <div class="col-4">
                <a href="product4.html"><img src="/Blue store Images/images/product-4.jpg" ></a>
                <h4>Blue Shirt!!</h4>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                <p>$10.00</p>
            </div>
        </div>
        <h2 class="title">Latest Products!</h2>
        <div class="row">
            <div class="col-4">
                <a href="product5.html"><img src="/Blue store Images/images/product-5.jpg" ></a>
                <h4>Jordan By NIKE</h4>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                <p>$10.00</p>
            </div>
            <div class="col-4">
                <a href="product6.html"><img src="/Blue store Images/images/product-6.jpg" ></a>
                <h4>Black Pattern PUMA</h4>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                <p>$25.99</p>
            </div>
            <div class="col-4">
                <a href="product7.html"><img src="/Blue store Images/images/product-7.jpg" ></a>
                <h4>Pair of socks By HRX</h4>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <p>$20.29</p>
            </div>
            <div class="col-4"> 
                <a href="product8.html"><img src="/Blue store Images/images/product-8.jpg" ></a>
                <h4>Classic Black FOSSIL</h4>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                <p>$10.00</p>
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <a href="product9.html"><img src="/Blue store Images/images/product-9.jpg" ></a>
                <h4>Watch by ROADSTER</h4>
                <div class="rating">
                     <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                <p>$10.00</p>
            </div>
            <div class="col-4">
                <a href="product10.html"><img src="/Blue store Images/images/product-10.jpg" ></a>
                <h4>Black Sports shoes</h4>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                <p>$25.99</p>
            </div>
            <div class="col-4">
                <a href="product11.html"><img src="/Blue store Images/images/product-11.jpg" ></a>
                <h4>Comfi shoes</h4>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <p>$20.29</p>
            </div>
            <div class="col-4"> 
                <a href="product12.html"><img src="/Blue store Images/images/product-12.jpg" ></a>
                    <h4>Jogger by NIKE</h4>
                <div class="rating">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                <p>$10.00</p>
            </div>
        </div>
    </div>
<!------------Footer ------------->
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="footer-col-1">
                <h3>Download Our APP</h3>
                <p>Download Out App For ANDROID And IOS</p>
                <div class="app-logo">
                    <img src="/Blue store Images/images/app-store.png" alt="">
                    <img src="/Blue store Images/images/play-store.png" alt="">
                </div>
            </div>
            <div class="footer-col-2">
                <img src="/Blue store Images/images/logo.png " alt="">
                <p>Our Purpose Is To Sustainably Make The Pleasure  And  Benefits OF Sprots Accessible To The Many/p>
            </div>
            <div class="footer-col-3">
                <h3>Useful Links</h3>
                <ul>
                    <li>Coupons</li>
                    <li>Blog Post</li>
                    <li>Return Policy</li>
                    <li>Join US</li>
                </ul>
            </div>
            <div class="footer-col-4">
                <h3>Follow Us</h3>
                <ul>
                    <li>Linkdeln</li>
                    <li>Facebook</li>
                    <li>Instagram</li>
                    <li>Telegram</li>
                    <li>Tweeter</li>
                </ul>
            </div>
        </div>
        <hr>
        <p class="copyright">Copyright 2022 - ITE BATCH-6 35,34,33</p>
    </div>
</div>

</script>
</body>
</html>