Created
January 9, 2024 13:55
-
-
Save NANDHINI7390/7ea551d165311653502ef3bcc9f04530 to your computer and use it in GitHub Desktop.
ECommerce website
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"> | |
| <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' /> | |
| <script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script> | |
| <style> | |
| .dropdown { | |
| position: relative ; | |
| display: block ; | |
| } | |
| .dropdown-menu { | |
| display: none; | |
| position: absolute ; | |
| background-color:#633974 ; | |
| min-width: 160px; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| } | |
| .dropdown-menu a { | |
| color: white; | |
| padding: 12px 16px; | |
| text-decoration: none; | |
| display: block; | |
| } | |
| .dropdown-menu a:hover { | |
| background-color:"#633974" ; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .dropdown:hover .dropdown-toggle { | |
| background-color: '#633974' ; | |
| } | |
| </style> | |
| <nav class="navbar navbar-expand-lg navbar-dark"style="background-color : #633974" > | |
| <div class="container-fluid"> | |
| <a class="navbar-brand" href="#">Shopping Realm <i class ="bi bi-cart" ></i></a> | |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
| <div class="dropdown" id="drop" > | |
| <button type="button" class="btn text-light dropdown-toggle" style ="background-color:#633974" data-bs-toggle="dropdown" id="drop1" > | |
| Our Policy | |
| </button> | |
| <ul class="dropdown-menu"id="dropmenu" > | |
| <li><a class="dropdown-item" href="#"id="dropitem">Fast Delivery <i class="bi bi-truck"></i> </a></li> | |
| <li><a class="dropdown-item" href="#"id="dropitem" >Affordable Deals <i class="bi bi-hand-thumbs-up"></i> </a></li> | |
| <li><a class="dropdown-item" href="#"id="dropitem" >Customer Satisfaction </a></li> | |
| </ul> | |
| </div> | |
| <div class="dropdown"> | |
| <button type="button" class="btn text-light dropdown-toggle" data-bs-toggle="dropdown"id="drop2" style="background-color : #633974" > | |
| Our Partners | |
| </button> | |
| <ul class="dropdown-menu"id="dropmenu1"> | |
| <li><a class="dropdown-item" href="#">Max</a></li> | |
| <li><a class="dropdown-item" href="#">Trends</a></li> | |
| <li><a class="dropdown-item" href="#">Easy buy</a></li> | |
| </ul> | |
| </div> | |
| <div class="dropdown"> | |
| <button type="button" class="btn text-light dropdown-toggle" data-bs-toggle="dropdown"id="drop3" style="background-color : #633974" > | |
| Our Brands | |
| </button> | |
| <ul class="dropdown-menu"id="dropmenu2"> | |
| <li><a href="#" class="dropdown-item">Adidas</a></li> | |
| <li><a class="dropdown-item" href="#">Crocs </a></li> | |
| <li><a class="dropdown-item" href="#">Puma</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <br> | |
| <form class="d-flex" role="search"> | |
| <input class="form-control me-2" type="search" placeholder="Enter the product name" aria-label="Search"> | |
| <button class="btn btn-outline-light" type="submit" style="background-color : #633974" >Search</button> | |
| </form> | |
| <br> | |
| <br> | |
| <!-- Your page content goes here --> | |
| <div id="home"> | |
| <h3 style="color:#633974" > Men's Store</h3> | |
| <img class="img-fluid" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUcN9bIDNFxHFOYa7RrbRaU8LtGtQlnZtGsQ&usqp=CAU " height="" width=""alt="mens fashion" /> | |
| <br> | |
| <br> | |
| <h3 style="color:#633974" > Women's Store</h3> | |
| <img class="custom-img ms-2 me-2" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSt0WFUY3gxDQTmyay6_agK74IFaFqaONuTtg&usqp=CAU " height="230" width="340" alt="mens fashion" /> | |
| <br> | |
| <br> | |
| <h3 style="color:#633974" > Kid's Store</h3> | |
| <img class="custom-img ms-2 me-2" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIuIkMoj0wWB-rmGn9s7ax4Gxz-WPpKUgOSMHVZrB5m2ndTThKjS36CiU&s=10 " height="230"width="340"alt="mens fashion" /> | |
| <br> | |
| <br> | |
| <h3 style="color:#633974" > Kitchen Store</h3> | |
| <img class="custom-img ms-2 me-2" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7BjzJKNyhHIxjd5xhDo8tcqY0CsGM1TXG-w&usqp=CAU " height="230" width="340" alt="mens fashion" /> | |
| <br> | |
| <br> | |
| </div> | |
| <section id="category" > | |
| <h4 style ="color:#2471A3" > Men's Jackets</h4> | |
| <div class="container" > | |
| <div class="row bg-light g-2" > | |
| <div class="col" > | |
| <img class="img-fluid" src=" https://encrypted-tbn2.gstatic.com/shopping?q=tbn:ANd9GcRMej9RimQS1eqXh4_6p2nVxFfl0GkKIVPkSLrABlZ_pg_u1A_KKUa8EebDNOJneKywazXLTU9hMmlnalVy2-ZmFfHJA7HZ" height="250"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-star"style="color:gold"></i> <i class="bi bi-heart" onclick="heart(this)" style="color:red;"> </i> | |
| <p style ="color:#2471A3">L'MONTE Men's Cotton Standard Length Winter Jacket</p> | |
| <h3 style="color:#2471A3" > $25</h3> | |
| <button id="l" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)" >Add To Cart</button> | |
| </div> | |
| <div class="col" > | |
| <img class="custom-img" src=" https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcS1beFnImVtIH1GpePeLrdNuoLlkMwmJoydX_xqyQdtNwtZhAUcupS7T55bWhfXvnaXYKG4ZdSHjYF8BQW_IcXFjQc150PO8cSrnFnUEctrGAAiJELQcG9wEQ " height="225"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-heart"onclick=" heart(this)"style=" color:red;"></i> | |
| <br> | |
| <p style ="color:#2471A3"> QUECHUA Men’s Waterproof Winter Hiking Jacket SH100</p> | |
| <h3 style="color:#2471A3" > $35</h3> | |
| <button id="q"type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)" >Add To Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <br> | |
| <h4 style ="color:#2471A3" > Men's Shirts</h4> | |
| <div class="container" > | |
| <div class="row bg-light g-2" > | |
| <div class="col" > | |
| <img class="img-fluid" src="https://m.media-amazon.com/images/I/81TN1ki89AL._AC_UY1100_.jpg" height="80"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-heart"onclick="heart(this)" style="color:red;" ></i> | |
| <p style ="color:#2471A3"> Men Woven Shirt - Men Shirts | U.S. Polo Assn. </p> | |
| <h3 style="color:#2471A3" > $28</h3> | |
| <button id="u" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)" >Add To Cart</button> | |
| </div> | |
| <div class="col" > | |
| <img class="img-fluid" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiYjNSz1FSKImsBEDt_xqyiMQOfiBPDkTX7Q&usqp=CAU" height="80"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-heart"onclick="heart(this)"style=" color:red;"></i> | |
| <p style ="color:#2471A3"> The One Piece Of Menswear To Steal From Every Style Tribe</p> | |
| <h3 style="color:#2471A3" > $45</h3> | |
| <button id="o" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)" >Add To Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <br> | |
| <h4 style ="color:#2471A3" > Men's Shoes</h4> | |
| <div class="container" > | |
| <div class="row bg-light g-2" > | |
| <div class="col" > | |
| <img class="img-fluid" src=" https://belk.scene7.com/is/image/Belk?layer=0&src=3900431_72294_A_220&$DWP_PRODUCT_PLP_MOBILE_t1$ " height="80"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-heart"onclick="heart(this)"style=" color:red;" ></i> | |
| <p style ="color:#2471A3"> Aadab Fashionable Men Casual Shoes </p> | |
| <h3 style="color:#2471A3" > $25</h3> | |
| <button id="a" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)" >Add To Cart</button> | |
| </div> | |
| <div class="col" > | |
| <img class="custom-img" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrbyLGBpRmmicVCNUHmY8KIoKFNEfGa30UOw&usqp=CAU " height="212"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-heart"onclick="heart(this)"style="color:red;" ></i> | |
| <p style ="color:#2471A3"> woodland PVC Tan casual shoes for Men</p> | |
| <h3 style="color:#2471A3" > $35</h3> | |
| <button id="b" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)" >Add To Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <br> | |
| <h4 style ="color:#2471A3" > Women's Dresses </h4> | |
| <div class="container" > | |
| <div class="row bg-light g-2" > | |
| <div class="col" > | |
| <img class="custom-img" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNvU1vwxDxltaVkhKkJkelsb2ES_nJq0sNsu8K2L8C7F0qScRlfflBcJc&s=10 " height="225"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-heart"onclick=" heart(this)"style=" color:red;"></i> | |
| <p style ="color:#2471A3">L'MONTE Men's Cotton Standard Length Winter Jacket</p> | |
| <h3 style="color:#2471A3" > $25</h3> | |
| <button id="c" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick=" change(this) ">Add To Cart</button> | |
| </div> | |
| <div class="col" > | |
| <img class="custom-img" src="https://adn-static1.nykaa.com/nykdesignstudio-images/pub/media/catalog/product/d/9/tr:w-810,/d9cde6cMISAA00007996_1.jpg?rnd=20200526195200" height="225"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-heart"onclick="heart(this)"style=" color :red;"></i> | |
| <br> | |
| <p style ="color:#2471A3"> QUECHUA Men’s Waterproof Winter Hiking Jacket SH100</p> | |
| <h3 style="color:#2471A3" > $35</h3> | |
| <button id="d" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)" >Add To Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <br> | |
| <h4 style ="color:#2471A3" > Women's Tops</h4> | |
| <div class="container" > | |
| <div class="row bg-light g-2" > | |
| <div class="col" > | |
| <img class="custom-img" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTIGiKguWwy98Hj1JjnEwcdTswNzwej0-WNPhPnJqqWM3dlXL5hNXU7Nuj&s=10 " height="225"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-heart"onclick=" heart(this)"style=" color :red;"></i> | |
| <p style ="color:#2471A3">L'MONTE Men's Cotton Standard Length Winter Jacket</p> | |
| <h3 style="color:#2471A3" > $25</h3> | |
| <button id="e" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)">Add To Cart</button> | |
| </div> | |
| <div class="col" > | |
| <img class="img-fluid" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLeImPKKsTcqt_CNuUObLZgDeDT-TLM4R0SQ&usqp=CAU " height="100"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-heart"onclick="heart(this)"style=" color:red;"></i> | |
| <br> | |
| <p style ="color:#2471A3"> QUECHUA Men’s Waterproof Winter Hiking Jacket SH100</p> | |
| <h3 style="color:#2471A3" > $35</h3> | |
| <button id="f" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)">Add To Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <br> | |
| <h4 style ="color:#2471A3" > Kid's Clothing </h4> | |
| <div class="container" > | |
| <div class="row bg-light g-2" > | |
| <div class="col" > | |
| <img class="img-fluid" src=" https://img.freepik.com/free-photo/full-length-portrait-cute-little-girl-hat_171337-13768.jpg?size=626&ext=jpg&ga=GA1.1.1936944794.1703000723&semt=ais " height="50"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-heart"onclick=" heart(this)"style =" color :red;"></i> | |
| <p style ="color:#2471A3">L'MONTE Men's Cotton Standard Length Winter Jacket</p> | |
| <h3 style="color:#2471A3" > $25</h3> | |
| <button id="g" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick ="change(this)" >Add To Cart</button> | |
| </div> | |
| <div class="col" > | |
| <img class="img-fluid" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIyVsspWQ4c9w_Fh_hejElNEjgF-nXw0QYcg&usqp=CAU " height="100"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-heart"onclick=" heart(this) "style =" color:red;"></i> | |
| <br> | |
| <p style ="color:#2471A3"> QUECHUA Men’s Waterproof Winter Hiking Jacket SH100</p> | |
| <h3 style="color:#2471A3" > $35</h3> | |
| <button id="h" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick =" change(this)">Add To Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <br> | |
| <h4 style ="color:#2471A3" > Kitchen Accessories </h4> | |
| <div class="container" > | |
| <div class="row bg-light g-2" > | |
| <div class="col" > | |
| <img class="custom-img" src=" https://encrypted-tbn2.gstatic.com/shopping?q=tbn:ANd9GcTFLByl4CwK55OZc6rsaw8ASjz8ur_2Un8-X12KF5hef1Zq-VtKUAp8KalOOQ3tg1TcRdOaGm9ymA&usqp=CAc " height="200"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-star"style="color:gold" ></i> <i class="bi bi-heart"onclick=" heart(this) "style =" color :red;"></i> | |
| <p style ="color:#2471A3">L'MONTE Men's Cotton Standard Length Winter Jacket</p> | |
| <h3 style="color:#2471A3" > $25</h3> | |
| <button id="i" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)">Add To Cart</button> | |
| </div> | |
| <div class="col" > | |
| <img class="custom-img" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7p39yTy4WpsVKOIc0Ma0kekBdT1pdIhyuVQ&usqp=CAU " height="200"width="150" alt="" /> | |
| <br> | |
| <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold"></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-star-fill"style="color:gold" ></i> <i class="bi bi-heart"onclick=" heart(this) "style=" color :red;"></i> | |
| <br> | |
| <p style ="color:#2471A3"> QUECHUA Men’s Waterproof Winter Hiking Jacket SH100</p> | |
| <h3 style="color:#2471A3" > $35</h3> | |
| <button id="j" type="button" class="btn btn-sm text-light"style=" background-color:#633974 "onclick="change(this)" >Add To Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <br> | |
| </section > | |
| <section id="blog"> | |
| <div class ="container" > | |
| <h3 class="text-center"style="color:#633974" ><u>Sunglasses</u> </h3> | |
| <br> | |
| <div class="text-center" > | |
| <img class="custom-img" src=" https://images.unsplash.com/photo-1511499767150-a48a237f0083?w=1000&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3VuZ2xhc3Nlc3xlbnwwfHwwfHx8MA%3D%3D" height="150" width ="250" alt="" /> | |
| <div> | |
| <br> | |
| <p style="color :#633974" ><i>Get Protection from UV Radiation. Wearing sunglasses is the best and easiest way to protect your eyes from harmful UV rays. <i></p> | |
| <a href="https://www.thesunglassfix.com/blog " style="background-color:#633974;color:white" >read more..... </a> | |
| </div> | |
| <br> | |
| <br> | |
| <div class ="container" > | |
| <h3 class="text-center"style="color:#633974" ><u>Microwave Oven </u> </h3> | |
| <br> | |
| <div class="text-center" > | |
| <img class="custom-img" src=" https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcTrSrMxJmX2cznLE_grj9SahJaTLeH7GgQy6ZDrWUMs4VP5fvc&usqp=CAc " height="150" width ="200" alt="" /> | |
| <div> | |
| <br> | |
| <p style="color :#633974" ><i> Using a microwave oven to cook food saves your time and makes food tastier.<i></p> | |
| <a href="https://gaux.eu/en/blog/commercial-convection-oven-benefits-for-your-business/" style="background-color:#633974;color:white" >read more..... </a> | |
| </div> | |
| <br> | |
| <br> | |
| <div class ="container" > | |
| <h3 class="text-center"style="color:#633974" ><u>Chimney </u> </h3> | |
| <br> | |
| <div class="text-center" > | |
| <img class="custom-img" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBGKGj8F_BkQIlAwXCUwfEHkmbHgUX4-FslSUb9e80xeXh_3KKmMBmXEg&s=10 " height="150" width ="250" alt="" /> | |
| <div> | |
| <br> | |
| <p style="color :#633974" ><i> Installing a kitchen chimney in your home comes with a range of benefits that can make your cooking experience more enjoyable and hassle-free. <i></p> | |
| <a href=" https://www.cartgo.in/blog/top-5-benefits-of-using-cartgo-kitchen-chimney-at-your-home " style="background-color:#633974;color:white" >read more..... </a> | |
| </div> | |
| <br> | |
| <br> | |
| </section > | |
| <section id="contact" > | |
| <div class="card w-98 ms-1 me-1" style="border-color:#633974;border-radius:6px;background-color:#633974;" > | |
| <div class="card-body"> | |
| <h3 class ="card-title text-center" style="color:white; "><b><u>Contact Us</b></u></h3> | |
| <p class="card-text" style="color:white;" > | |
| <span class="fw-bold"> Shoping Realm</span><br> | |
| <u>Address</u>: NO:142, Columbia st<br> | |
| Vancouver, <br> | |
| Canada-V5K 0A3. <br> | |
| <u> Phone</u>:(604) 555-9876<br> | |
| <u> Email</u>:shoppingRealm@gmail.com | |
| </p> | |
| </div> | |
| </div> | |
| <br> | |
| <div id='map' style='width: 400px; height: 300px;'> | |
| <script> | |
| // TO MAKE THE MAP APPEAR YOU MUST | |
| // ADD YOUR ACCESS TOKEN FROM | |
| // https://account.mapbox.com | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiY2hyaWRkeXAiLCJhIjoiRy1GV1FoNCJ9.yUPu7qwD_Eqf_gKNzDrrCQ '; | |
| const map = new mapboxgl.Map({ | |
| container: 'map', // container ID | |
| style: 'mapbox://styles/mapbox/streets-v12', // style URL | |
| center: [-123.1216, 49.2827], // starting position [lng, lat] | |
| zoom: 10, // starting zoom | |
| }); | |
| </script> | |
| </div> | |
| <br> | |
| <div class="card w-98 ms-1 me-1" style="border-color:#633974;border-radius:6px;background-color:#633974;" > | |
| <div class="card-body"> | |
| <h4 class ="card-title text-center" style="color:white;"><i><u>Subscribe for our Newsletter</i><i class="fas fa-newspaper"></i></u> </h4> | |
| <br> | |
| <form class="d-flex" role="search"> | |
| <input class="form-control me-2" type="search" placeholder="Enter your email address " aria-label="Search"> | |
| <button class="btn btn-outline-light" type="submit" style="background-color : #633974" >Subscribe </button> | |
| </form> | |
| <br> | |
| <p class="text-center text-light">Be the first one to catch up our launches instantly.</p> | |
| </div> | |
| </div> | |
| <br> | |
| </section> | |
| <br> | |
| <br> | |
| <div class="fixed-bottom" style="background-color:#633974" > | |
| <footer class="navbar navbar-dark" > | |
| <div class="container-fluid"> | |
| <!-- Navbar content --> | |
| <ul class="navbar-nav d-flex flex-row text-light"> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#home"id="homeshow">Home</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link"href="#category"id="cat" > categories </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#blog"id="blo">blog</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#contact"id="con" >contact </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </footer> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function dropdownn() { | |
| let dropdown=document.getElementsByClassName("dropdown") | |
| let drop1 =document.getElementById("drop1") | |
| let dropmenu=document.getElementById ("dropmenu") | |
| let dropmenu1=document.getElementById ("dropmenu1") | |
| let dropmenu2=document.getElementById ("dropmenu2") | |
| drop1.addEventListener ('click',function(){ | |
| dropmenu. style. display ="block" ; | |
| let open =dropmenu.classList.contains("show") | |
| if(open) { | |
| dropmenu.style.display ="none" ; | |
| } | |
| }) | |
| let drop2 =document.getElementById ("drop2") | |
| drop2.addEventListener ('click',function(){ | |
| dropmenu1. style. display ="block" ; | |
| let open1 =dropmenu1.classList.contains("show") | |
| if(open1) { | |
| dropmenu1.style.display ="none" ; | |
| } | |
| }) | |
| let drop3 =document.getElementById ("drop3") | |
| drop3.addEventListener ('click',function(){ | |
| dropmenu2.style.display ="block" ; | |
| let open2 =dropmenu2.classList.contains("show") | |
| if(open2) { | |
| dropmenu2.style.display ="none" ; | |
| } | |
| }) | |
| document.addEventListener('click', function(event) { | |
| if (event.target !== drop1 && event.target !== dropmenu) { | |
| // Clicked outside the dropdown button and its content, so close the dropdown | |
| dropmenu.style.display = 'none'; | |
| } | |
| }); | |
| document.addEventListener('click', function(event) { | |
| if (event.target !== drop2 && event.target !== dropmenu1) { | |
| // Clicked outside the dropdown button and its content, so close the dropdown | |
| dropmenu1.style.display = 'none'; | |
| } | |
| }); | |
| document.addEventListener('click', function(event) { | |
| if (event.target !== drop3 && event.target !== dropmenu2) { | |
| // Clicked outside the dropdown button and its content, so close the dropdown | |
| dropmenu2.style.display = 'none'; | |
| } | |
| }); | |
| } | |
| dropdownn() | |
| let category=document.getElementById ("category") | |
| let cat=document.getElementById ("cat") | |
| let home=document.getElementById ("home") | |
| let homeshw=document.getElementById ("homeshow") | |
| let blo=document.getElementById ("blo") | |
| let blog=document.getElementById ("blog") | |
| let con=document.getElementById ("con") | |
| let contact=document.getElementById ("contact") | |
| category.style.display="none"; | |
| blog.style.display="none" ; | |
| contact.style.display="none" ; | |
| blo.onclick=()=>{ | |
| blog.style.display="block" | |
| category.style.display = 'none'; | |
| home.style.display="none" | |
| contact.style.display="none" ; | |
| } | |
| cat.onclick=()=>{ | |
| category.style.display = 'block'; | |
| home.style.display="none" | |
| blog.style.display="none" | |
| contact.style.display="none" ; | |
| } | |
| homeshw.onclick=()=>{ | |
| home.style.display ="block" ; | |
| category.style.display ="none" ; | |
| blog.style.display="none"; | |
| contact.style.display="none" ; | |
| } | |
| con.onclick=()=>{ | |
| contact.style.display ="block" ; | |
| category.style.display ="none" ; | |
| home.style.display ="none" ; | |
| blog.style.display="none" | |
| } | |
| function change(button) { | |
| button.innerHTML="✔Added to cart" ; | |
| } | |
| function heart(i) { | |
| //i.classList.remove("bi-heart") ; | |
| //i.classList.add("bi-heart-fill"); | |
| if(i.classList.contains("bi-heart")){ | |
| i.classList.remove("bi-heart") | |
| i.classList.add("bi-heart-fill") | |
| } | |
| else{ | |
| i.classList.remove("bi-heart-fill") | |
| i.classList.add("bi-heart") | |
| } | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .down-caret{ | |
| transform: rotate(0deg); | |
| transition: transform 1s linear; | |
| } | |
| .down-caret.open{ | |
| transform: rotate(180deg); | |
| transition: transform 1s linear; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment