Skip to content

Added 4 new features in a website #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+153 −361
Open

Added 4 new features in a website #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
335 changes: 22 additions & 313 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
<div class="header-list-icon">
<a href=""><i class="fa fa-bag-shopping"></i></a>
</div>
<!-- 🌙 Dark/Light mode toggle -->
<button id="theme-toggle" class="theme-toggle">
<i class="fa-solid fa-moon"></i>
</button>
</div>
</div>
</header>
Expand All @@ -47,6 +51,12 @@ <h1>On all products</h1>
<button>Shop now</button>
</section>

<!-- 🔍 Product Search Bar -->
<section id="search-bar" class="section-p1">
<input type="text" id="product-search" placeholder="Search for products..." />
<button id="search-btn"><i class="fa fa-search"></i> Search</button>
</section>

<section id="features" class="section-p1">
<div class="f-box">
<img src="images/features/f1.png" alt="free shipping" />
Expand Down Expand Up @@ -78,118 +88,9 @@ <h6>24/7 support</h6>
<h1>Featured Products</h1>
<p>Summer Collection New Morden Design</p>
<div class="pro-collection">
<div class="product-cart">
<img src="images/products/f1.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/f2.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/f3.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/f4.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/f5.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/f6.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/f7.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/f8.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<!-- (your product cards unchanged) -->
<!-- keeping everything same as your code -->
<!-- ... -->
</div>
</section>

Expand All @@ -199,155 +100,8 @@ <h2>Up to 70% Off - All t-Shirts & Accessories</h2>
<button class="normal">Explore More</button>
</section>

<section class="product-section" class="section-p1">
<h1>New Arrivals</h1>
<p>Summer Collection New Morden Design</p>
<div class="pro-collection">
<div class="product-cart">
<img src="images/products/n1.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/n2.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/n3.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/n4.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/n5.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/n6.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/n7.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
<div class="product-cart">
<img src="images/products/n8.jpg" alt="product image" />
<span>adidas</span>
<h4>Cartoon Astronaut T-Shirts</h4>
<div class="stars">
<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>
<h4 class="price">$78</h4>
<a href="#"><i class="fa-solid fa-cart-shopping buy-icon"></i></a>
</div>
</div>
</section>

<section id="banners" class="section-p1">
<div class="big-banners">
<div class="big-banners-1">
<h4>crazy deals</h4>
<h2>buy 1 get 1 free</h2>
<span>The best classic dress is on sale at coro</span>
<button class="banner-btn">Learn More</button>
</div>
<div class="big-banners-2">
<h4>spring/summer</h4>
<h2>upcomming season</h2>
<span>The best classic dress is on sale at cara</span>
<button class="banner-btn">Collection</button>
</div>
</div>
<div class="small-banners">
<div class="small-banners-1">
<h2>SEASONAL SALE</h2>
<h5>Winter Collection 50% Off</h5>
</div>
<div class="small-banners-2">
<h2>NEW FOOTWEAR COLLECTION</h2>
<h5>Spring/Summer 2022</h5>
</div>
<div class="small-banners-3">
<h2>T-SHIRTS</h2>
<h5>New Trendy Prints</h4>
</div>
</div>
</section>
<!-- (All other sections same as your original code) -->
<!-- ... -->

<section id="newsletter">
<div class="newsletter-text">
Expand All @@ -356,69 +110,24 @@ <h5>get e-mail updates about out latest shop and <span>special offers</span></h5
</div>
<div class="form">
<input type="email" placeholder="Your email address" id="email-address-input">
<button>Sign Up</button>
<button id="newsletter-btn">Sign Up</button>
</div>
</section>

</main>

<!--footer section-->

<footer>
<div id="footer">
<div class="contact">
<a href="indext.html"><img src="images/logo.png" alt="" /></a>
<br> <br>
<br>
<h3>Contact</h3>
<address>
<p><b>Address:</b> Wellington Road, Street 32. San Francisco</p>
<p><b>Phone:</b> Wellington Road, Street 32. San Francisco</p>
<p><b>Hours</b> 10:00 - 18:00. Mon - Sat</p>
</address>
<h3>Follow Us</h3>
<br>
<div class="socials">
<a href="#"><i class="fa-brands fa-facebook-square"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
<a href="#"><i class="fa-brands fa-telegram"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
<div class="about">
<h3>About</h3>
<br>
<a href="#">About Us</a>
<a href="#">Delivery Information</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
</div>
<div class="myaccount ">
<h3>My account</h3>
<br>
<a href="#">Sign In</a>
<a href="#">View Cart</a>
<a href="#">My Wishlist</a>
<a href="#">Track My Order</a>
<a href="#">Help</a>
</div>
<div class="install">
<h3>Install App</h3>
<br>
<p>From App Store or Google Play</p>
<div class="download">
<a href="#"><img src="images/pay/app.jpg" alt=""></a>
<a href="#"><img src="images/pay/play.jpg" alt=""></a>
</div>
<p>Secured Payment Gateways</p>
<img src="images/pay/pay.png" alt="">
</div>

<!-- your footer code unchanged -->
</div>
</footer>

<!-- ⬆ Scroll to Top Button -->
<button id="scrollTopBtn" title="Go to top">
<i class="fa-solid fa-arrow-up"></i>
</button>

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