FashionFusion Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FashionFusion | Premium Clothing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Header/Navigation --> <header class="header"> <div class="container"> <a href="#" class="logo">Fashion<span>Fusion</span></a> <nav class="navbar"> <a href="#home">Home</a> <a href="#new-arrivals">New Arrivals</a> <a href="#collections">Collections</a> <a href="#trending">Trending</a> <a href="#testimonials">Reviews</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> </nav> <div class="icons"> <div class="fas fa-search" id="search-btn"></div> <div class="fas fa-shopping-cart" id="cart-btn"></div> <div class="fas fa-bars" id="menu-btn"></div> </div> <div class="search-form"> <input type="search" id="search-box" placeholder="search here..."> <label for="search-box" class="fas fa-search"></label> </div> </div> </header> <!-- Hero Section --> <section class="home" id="home"> <div class="content"> <h3 class="slide-left">New Collection 2024</h3> <h1 class="slide-left">Summer <span>Sale</span> Up to 50% Off</h1> <p class="slide-left">Discover our premium collection of stylish and comfortable clothing for every occasion.</p> <a href="#" class="btn slide-left">Shop Now</a> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fashion Model" class="slide-right"> </div> </section> <!-- Brand Scroller --> <section class="brand-scroller"> <h2 class="heading">Our <span>Partners</span></h2> <div class="scroller"> <div class="scroller-inner"> <img src="https://logos-world.net/wp-content/uploads/2020/04/Zara-Logo.png" alt="Zara"> <img src="https://logos-world.net/wp-content/uploads/2020/04/HM-Logo.png" alt="H&M"> <img src="https://logos-world.net/wp-content/uploads/2020/04/Levis-Logo.png" alt="Levi's"> <img src="https://logos-world.net/wp-content/uploads/2020/04/Gucci-Logo.png" alt="Gucci"> <img src="https://logos-world.net/wp-content/uploads/2020/04/Nike-Logo.png" alt="Nike"> <img src="https://logos-world.net/wp-content/uploads/2020/04/Adidas-Logo.png" alt="Adidas"> <img src="https://logos-world.net/wp-content/uploads/2020/04/Puma-Logo.png" alt="Puma"> <img src="https://logos-world.net/wp-content/uploads/2020/04/Under-Armour-Logo.png" alt="Under Armour"> </div> </div> </section> <!-- New Arrivals Section --> <section class="new-arrivals" id="new-arrivals"> <h2 class="heading">New <span>Arrivals</span></h2> <div class="box-container"> <div class="box"> <div class="image"> <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1525&q=80" alt="Denim Jacket"> <div class="icons"> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-share"></a> </div> </div> <div class="content"> <h3>Denim Jacket</h3> <div class="price">$49.99 <span>$69.99</span></div> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> </div> <div class="box"> <div class="image"> <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="White Shirt"> <div class="icons"> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-share"></a> </div> </div> <div class="content"> <h3>White Casual Shirt</h3> <div class="price">$29.99 <span>$39.99</span></div> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> <div class="box"> <div class="image"> <img src="https://images.unsplash.com/photo-1543076447-215ad9ba6923?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Summer Dress"> <div class="icons"> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-share"></a> </div> </div> <div class="content"> <h3>Summer Floral Dress</h3> <div class="price">$59.99 <span>$79.99</span></div> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> </div> </div> </div> </section> <!-- Collections Section --> <section class="collections" id="collections"> <h2 class="heading">Our <span>Collections</span></h2> <div class="box-container"> <div class="box"> <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Men's Collection"> <div class="content"> <h3>Men's Collection</h3> <p>Stylish outfits for every occasion</p> <a href="#" class="btn">Explore</a> </div> </div> <div class="box"> <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Women's Collection"> <div class="content"> <h3>Women's Collection</h3> <p>Elegant and fashionable designs</p> <a href="#" class="btn">Explore</a> </div> </div> <div class="box"> <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Kids Collection"> <div class="content"> <h3>Kids Collection</h3> <p>Comfortable and cute outfits</p> <a href="#" class="btn">Explore</a> </div> </div> </div> </section> <!-- Trending Products Slider --> <section class="trending" id="trending"> <h2 class="heading">Trending <span>Now</span></h2> <div class="slider-container"> <div class="slider-wrapper"> <div class="slider"> <div class="slide"> <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1636&q=80" alt="Trending 1"> <div class="slide-content"> <h3>Casual T-Shirt</h3> <p>$24.99</p> </div> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1520367445093-50dc08a59d9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Trending 2"> <div class="slide-content"> <h3>Formal Shirt</h3> <p>$34.99</p> </div> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1539533018447-63fcce2678e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Trending 3"> <div class="slide-content"> <h3>Summer Dress</h3> <p>$49.99</p> </div> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1542272604-787c3835535d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1526&q=80" alt="Trending 4"> <div class="slide-content"> <h3>Denim Jeans</h3> <p>$39.99</p> </div> </div> <div class="slide"> <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1636&q=80" alt="Trending 5"> <div class="slide-content"> <h3>Sports Jacket</h3> <p>$54.99</p> </div> </div> </div> </div> <button class="prev"><i class="fas fa-chevron-left"></i></button> <button class="next"><i class="fas fa-chevron-right"></i></button> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <h2 class="heading">Customer <span>Reviews</span></h2> <div class="testimonial-container"> <div class="testimonial-box"> <div class="client-info"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Client 1"> <div> <h4>Sarah Johnson</h4> <span>Fashion Blogger</span> </div> </div> <p>"I absolutely love the quality of clothes from FashionFusion. The materials are premium and the designs are always on trend. My go-to shop for all my fashion needs!"</p> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <div class="testimonial-box"> <div class="client-info"> <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client 2"> <div> <h4>Michael Brown</h4> <span>Regular Customer</span> </div> </div> <p>"The customer service is exceptional and the clothes fit perfectly. I've been shopping here for years and have never been disappointed with any purchase."</p> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> <div class="testimonial-box"> <div class="client-info"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client 3"> <div> <h4>Emily Davis</h4> <span>First-time Buyer</span> </div> </div> <p>"I was hesitant to order online but the sizing guide was accurate and the clothes arrived faster than expected. Will definitely shop here again!"</p> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> </div> </div> </section> <!-- Blog Section --> <section class="blog" id="blog"> <h2 class="heading">Latest <span>Blog</span></h2> <div class="box-container"> <div class="box"> <div class="image"> <img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog 1"> <div class="icons"> <a href="#"><i class="fas fa-calendar"></i> 15th July, 2023</a> <a href="#"><i class="fas fa-user"></i> by admin</a> </div> </div> <div class="content"> <h3>Summer Fashion Trends 2024</h3> <p>Discover the hottest summer fashion trends for this year and how to incorporate them into your wardrobe.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <div class="image"> <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog 2"> <div class="icons"> <a href="#"><i class="fas fa-calendar"></i> 5th July, 2023</a> <a href="#"><i class="fas fa-user"></i> by admin</a> </div> </div> <div class="content"> <h3>How to Style Denim on Denim</h3> <p>Learn the dos and don'ts of wearing denim on denim for a stylish and contemporary look.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <div class="image"> <img src="https://images.unsplash.com/photo-1554412933-514a83d2f3c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Blog 3"> <div class="icons"> <a href="#"><i class="fas fa-calendar"></i> 1st July, 2023</a> <a href="#"><i class="fas fa-user"></i> by admin</a> </div> </div> <div class="content"> <h3>Essential Wardrobe Staples</h3> <p>Every wardrobe needs these timeless pieces that never go out of style. Find out what they are.</p> <a href="#" class="btn">read more</a> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="newsletter"> <div class="content"> <h3>Subscribe for Latest Updates</h3> <p>Get exclusive offers, new arrivals, and fashion tips straight to your inbox.</p> <form action=""> <input type="email" placeholder="enter your email" class="box"> <input type="submit" value="subscribe" class="btn"> </form> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <h2 class="heading">Contact <span>Us</span></h2> <div class="row"> <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215573291116!2d-73.98784492423975!3d40.75798597138948!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2sTimes%20Square!5e0!3m2!1sen!2sus!4v1689343852293!5m2!1sen!2sus" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <form action=""> <h3>get in touch</h3> <div class="inputBox"> <span class="fas fa-user"></span> <input type="text" placeholder="name"> </div> <div class="inputBox"> <span class="fas fa-envelope"></span> <input type="email" placeholder="email"> </div> <div class="inputBox"> <span class="fas fa-phone"></span> <input type="number" placeholder="number"> </div> <div class="inputBox"> <span class="fas fa-comment"></span> <textarea placeholder="message" cols="30" rows="10"></textarea> </div> <input type="submit" value="contact now" class="btn"> </form> </div> </section> <!-- Footer Section --> <section class="footer"> <div class="box-container"> <div class="box"> <h3>quick links</h3> <a href="#home"><i class="fas fa-arrow-right"></i> home</a> <a href="#new-arrivals"><i class="fas fa-arrow-right"></i> new arrivals</a> <a href="#collections"><i class="fas fa-arrow-right"></i> collections</a> <a href="#trending"><i class="fas fa-arrow-right"></i> trending</a> <a href="#testimonials"><i class="fas fa-arrow-right"></i> reviews</a> <a href="#blog"><i class="fas fa-arrow-right"></i> blogs</a> <a href="#contact"><i class="fas fa-arrow-right"></i> contact</a> </div> <div class="box"> <h3>extra links</h3> <a href="#"><i class="fas fa-arrow-right"></i> my order</a> <a href="#"><i class="fas fa-arrow-right"></i> my account</a> <a href="#"><i class="fas fa-arrow-right"></i> my favorite</a> <a href="#"><i class="fas fa-arrow-right"></i> terms of use</a> <a href="#"><i class="fas fa-arrow-right"></i> privacy policy</a> </div> <div class="box"> <h3>contact info</h3> <a href="#"><i class="fas fa-phone"></i> +123-456-7890</a> <a href="#"><i class="fas fa-phone"></i> +111-222-3333</a> <a href="#"><i class="fas fa-envelope"></i> info@fashionfusion.com</a> <a href="#"><i class="fas fa-envelope"></i> support@fashionfusion.com</a> <a href="#"><i class="fas fa-map-marker-alt"></i> New York, USA - 10001</a> </div> <div class="box"> <h3>follow us</h3> <a href="#"><i class="fab fa-facebook-f"></i> facebook</a> <a href="#"><i class="fab fa-twitter"></i> twitter</a> <a href="#"><i class="fab fa-instagram"></i> instagram</a> <a href="#"><i class="fab fa-linkedin"></i> linkedin</a> <a href="#"><i class="fab fa-pinterest"></i> pinterest</a> </div> </div> <div class="credit">created by <span>FashionFusion</span> | all rights reserved</div> </section> <script src="script.js"></script> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); :root { --primary: #e78a00; --secondary: #1a1a1a; --light: #f5f5f5; --dark: #333; --white: #fff; --black: #000; --gray: #777; --light-gray: #eee; --box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; text-decoration: none; text-transform: capitalize; transition: var(--transition); } html { font-size: 62.5%; overflow-x: hidden; scroll-padding-top: 9rem; scroll-behavior: smooth; } html::-webkit-scrollbar { width: 0.8rem; } html::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 5rem; } body { background: var(--light); color: var(--dark); } section { padding: 5rem 9%; } .btn { display: inline-block; margin-top: 1rem; padding: 1rem 3rem; background: var(--primary); color: var(--white); cursor: pointer; border-radius: 0.5rem; font-size: 1.7rem; font-weight: 500; text-align: center; } .btn:hover { background: var(--secondary); transform: translateY(-0.3rem); box-shadow: var(--box-shadow); } .heading { text-align: center; margin-bottom: 4rem; font-size: 4rem; color: var(--secondary); } .heading span { color: var(--primary); } /* Header Styles */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--white); box-shadow: var(--box-shadow); display: flex; align-items: center; justify-content: space-between; padding: 2rem 9%; } .header .logo { font-size: 2.5rem; font-weight: 700; color: var(--secondary); } .header .logo span { color: var(--primary); } .header .navbar a { font-size: 1.7rem; margin: 0 1rem; color: var(--secondary); position: relative; } .header .navbar a::after { content: ''; position: absolute; width: 0; height: 2px; background: var(--primary); bottom: -5px; left: 0; transition: var(--transition); } .header .navbar a:hover::after { width: 100%; } .header .icons div { height: 4.5rem; width: 4.5rem; line-height: 4.5rem; border-radius: 0.5rem; background: var(--light-gray); color: var(--secondary); font-size: 2rem; margin-left: 0.3rem; cursor: pointer; text-align: center; } .header .icons div:hover { background: var(--primary); color: var(--white); } .header .search-form { position: absolute; top: 110%; right: -110%; width: 50rem; height: 5rem; background: var(--white); border-radius: 0.5rem; overflow: hidden; display: flex; align-items: center; box-shadow: var(--box-shadow); } .header .search-form.active { right: 2rem; } .header .search-form input { height: 100%; width: 100%; background: none; text-transform: none; font-size: 1.6rem; color: var(--secondary); padding: 0 1.5rem; } .header .search-form label { font-size: 2.2rem; padding-right: 1.5rem; color: var(--secondary); cursor: pointer; } .header .search-form label:hover { color: var(--primary); } #menu-btn { display: none; } /* Hero Section */ .home { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; padding-top: 10rem; background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat; background-size: cover; background-position: center; } .home .content { flex: 1 1 42rem; } .home .image { flex: 1 1 42rem; } .home .image img { width: 100%; border-radius: 1rem; box-shadow: var(--box-shadow); animation: float 3s linear infinite; } @keyframes float { 0%, 100% { transform: translateY(0rem); } 50% { transform: translateY(-3rem); } } .home .content h3 { font-size: 4.5rem; color: var(--secondary); line-height: 1.5; } .home .content h1 { font-size: 6rem; color: var(--secondary); line-height: 1.2; text-transform: uppercase; } .home .content h1 span { color: var(--primary); text-transform: uppercase; } .home .content p { font-size: 1.7rem; color: var(--gray); line-height: 2; padding: 1rem 0; } /* Brand Scroller */ .brand-scroller { background: var(--white); padding: 3rem 0; } .scroller { max-width: 1200px; margin: 0 auto; overflow: hidden; position: relative; } .scroller-inner { display: flex; gap: 1rem; animation: scroll 20s linear infinite; } .scroller-inner img { height: 80px; width: auto; filter: grayscale(100%); opacity: 0.7; transition: var(--transition); } .scroller-inner img:hover { filter: grayscale(0); opacity: 1; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 4)); } } /* New Arrivals */ .new-arrivals .box-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2rem; } .new-arrivals .box-container .box { background: var(--white); border-radius: 0.5rem; box-shadow: var(--box-shadow); padding: 2rem; text-align: center; position: relative; overflow: hidden; transition: var(--transition); } .new-arrivals .box-container .box:hover { transform: translateY(-1rem); } .new-arrivals .box-container .box .image { height: 25rem; width: 100%; overflow: hidden; border-radius: 0.5rem; position: relative; } .new-arrivals .box-container .box .image img { height: 100%; width: 100%; object-fit: cover; transition: var(--transition); } .new-arrivals .box-container .box:hover .image img { transform: scale(1.1); } .new-arrivals .box-container .box .icons { position: absolute; top: 1rem; right: -6rem; display: flex; flex-direction: column; gap: 1rem; transition: var(--transition); } .new-arrivals .box-container .box:hover .icons { right: 1rem; } .new-arrivals .box-container .box .icons a { height: 4rem; width: 4rem; line-height: 4rem; font-size: 1.5rem; border-radius: 50%; background: var(--light-gray); color: var(--secondary); } .new-arrivals .box-container .box .icons a:hover { background: var(--primary); color: var(--white); } .new-arrivals .box-container .box .content h3 { font-size: 2rem; color: var(--secondary); margin: 1rem 0; } .new-arrivals .box-container .box .content .price { font-size: 2rem; color: var(--primary); font-weight: 600; } .new-arrivals .box-container .box .content .price span { font-size: 1.5rem; color: var(--gray); text-decoration: line-through; font-weight: 400; } .new-arrivals .box-container .box .content .stars { margin: 1rem 0; } .new-arrivals .box-container .box .content .stars i { font-size: 1.5rem; color: gold; } /* Collections */ .collections .box-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2rem; } .collections .box-container .box { height: 40rem; position: relative; overflow: hidden; border-radius: 0.5rem; box-shadow: var(--box-shadow); } .collections .box-container .box img { height: 100%; width: 100%; object-fit: cover; } .collections .box-container .box .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; padding: 2rem; background: rgba(0, 0, 0, 0.7); color: var(--white); opacity: 0; transition: var(--transition); } .collections .box-container .box:hover .content { opacity: 1; } .collections .box-container .box .content h3 { font-size: 2.5rem; margin-bottom: 1rem; } .collections .box-container .box .content p { font-size: 1.5rem; margin-bottom: 1.5rem; } /* Trending Slider */ .trending { background: var(--light-gray); } .slider-container { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 5rem; } .slider-wrapper { overflow: hidden; position: relative; } .slider { display: flex; transition: transform 0.5s ease; } .slide { min-width: 100%; padding: 0 1rem; } .slide img { width: 100%; height: 400px; object-fit: cover; border-radius: 0.5rem; box-shadow: var(--box-shadow); } .slide-content { background: var(--white); padding: 2rem; text-align: center; border-radius: 0 0 0.5rem 0.5rem; box-shadow: var(--box-shadow); } .slide-content h3 { font-size: 2rem; color: var(--secondary); } .slide-content p { font-size: 2rem; color: var(--primary); font-weight: 600; margin-top: 1rem; } .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); width: 4rem; height: 4rem; background: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; cursor: pointer; z-index: 10; border: none; transition: var(--transition); } .prev:hover, .next:hover { background: var(--secondary); } .prev { left: 0; } .next { right: 0; } /* Testimonials */ .testimonials .testimonial-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2rem; } .testimonials .testimonial-box { background: var(--white); padding: 3rem; border-radius: 0.5rem; box-shadow: var(--box-shadow); position: relative; } .testimonials .testimonial-box::before { content: '\201C'; position: absolute; top: 2rem; right: 3rem; font-size: 8rem; color: var(--light-gray); font-family: sans-serif; line-height: 1; z-index: 0; } .testimonials .testimonial-box .client-info { display: flex; align-items: center; margin-bottom: 2rem; position: relative; z-index: 1; } .testimonials .testimonial-box .client-info img { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; margin-right: 1.5rem; border: 0.5rem solid var(--light-gray); } .testimonials .testimonial-box .client-info h4 { font-size: 1.8rem; color: var(--secondary); } .testimonials .testimonial-box .client-info span { font-size: 1.4rem; color: var(--gray); } .testimonials .testimonial-box p { font-size: 1.5rem; color: var(--gray); line-height: 2; margin-bottom: 2rem; position: relative; z-index: 1; } .testimonials .testimonial-box .stars { position: relative; z-index: 1; } .testimonials .testimonial-box .stars i { font-size: 1.5rem; color: gold; } /* Blog Section */ .blog .box-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2rem; } .blog .box-container .box { background: var(--white); border-radius: 0.5rem; box-shadow: var(--box-shadow); overflow: hidden; } .blog .box-container .box .image { height: 25rem; width: 100%; overflow: hidden; } .blog .box-container .box .image img { height: 100%; width: 100%; object-fit: cover; transition: var(--transition); } .blog .box-container .box:hover .image img { transform: scale(1.1); } .blog .box-container .box .content { padding: 2rem; } .blog .box-container .box .content .icons { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 0.1rem solid var(--light-gray); } .blog .box-container .box .content .icons a { font-size: 1.4rem; color: var(--gray); } .blog .box-container .box .content .icons a i { color: var(--primary); padding-right: 0.5rem; } .blog .box-container .box .content h3 { font-size: 2rem; color: var(--secondary); line-height: 1.5; margin-bottom: 1rem; } .blog .box-container .box .content p { font-size: 1.4rem; color: var(--gray); line-height: 2; margin-bottom: 1.5rem; } /* Newsletter */ .newsletter { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat; background-size: cover; background-position: center; background-attachment: fixed; text-align: center; padding: 8rem 2rem; } .newsletter .content h3 { font-size: 4rem; color: var(--white); margin-bottom: 2rem; text-transform: uppercase; } .newsletter .content p { font-size: 2rem; color: var(--light-gray); margin-bottom: 3rem; } .newsletter .content form { max-width: 70rem; margin: 0 auto; display: flex; background: var(--white); border-radius: 0.5rem; overflow: hidden; } .newsletter .content form .box { width: 100%; padding: 0 1.5rem; font-size: 1.7rem; text-transform: none; } .newsletter .content form .btn { border-radius: 0; } /* Contact Section */ .contact .row { display: flex; flex-wrap: wrap; gap: 2rem; } .contact .row .map { flex: 1 1 42rem; height: 50rem; border-radius: 0.5rem; box-shadow: var(--box-shadow); } .contact .row form { flex: 1 1 42rem; padding: 3rem; background: var(--white); border-radius: 0.5rem; box-shadow: var(--box-shadow); } .contact .row form h3 { font-size: 3rem; color: var(--secondary); margin-bottom: 2rem; } .contact .row form .inputBox { margin-bottom: 2rem; } .contact .row form .inputBox input, .contact .row form .inputBox textarea { width: 100%; padding: 1.5rem; font-size: 1.6rem; color: var(--secondary); background: var(--light-gray); border-radius: 0.5rem; } .contact .row form .inputBox textarea { height: 15rem; resize: none; } .contact .row form .inputBox span { font-size: 2rem; color: var(--primary); margin-right: 1rem; } /* Footer Section */ .footer { background: var(--secondary); padding-top: 7rem; } .footer .box-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 2rem; } .footer .box-container .box h3 { font-size: 2.2rem; color: var(--white); padding: 1rem 0; } .footer .box-container .box a { display: block; font-size: 1.5rem; color: var(--light-gray); padding: 1rem 0; } .footer .box-container .box a i { padding-right: 0.5rem; color: var(--primary); } .footer .box-container .box a:hover { color: var(--primary); padding-left: 0.5rem; } .footer .credit { text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 0.1rem solid var(--gray); font-size: 2rem; color: var(--white); } .footer .credit span { color: var(--primary); } /* Media Queries */ @media (max-width: 991px) { html { font-size: 55%; } .header { padding: 2rem; } section { padding: 3rem 2rem; } } @media (max-width: 768px) { #menu-btn { display: inline-block; } .header .navbar { position: absolute; top: 99%; left: 0; right: 0; background: var(--white); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } .header .navbar.active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .header .navbar a { display: block; margin: 2rem; font-size: 2rem; } .home { flex-direction: column-reverse; text-align: center; } .home .content h3 { font-size: 3.5rem; } .home .content h1 { font-size: 4.5rem; } .newsletter .content form { flex-direction: column; } .newsletter .content form .box { width: 100%; margin-bottom: 1rem; } .newsletter .content form .btn { width: 100%; } } @media (max-width: 450px) { html { font-size: 50%; } .heading { font-size: 3rem; } .home .content h3 { font-size: 2.5rem; } .home .content h1 { font-size: 3.5rem; } } /* Animation Classes */ .slide-left { animation: slideLeft 1s ease forwards; opacity: 0; } .slide-right { animation: slideRight 1s ease forwards; opacity: 0; } @keyframes slideLeft { 0% { transform: translateX(-100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slideRight { 0% { transform: translateX(100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Header Scroll Effect window.addEventListener('scroll', function() { const header = document.querySelector('.header'); header.classList.toggle('sticky', window.scrollY > 0); }); // Menu Toggle let menuBtn = document.querySelector('#menu-btn'); let navbar = document.querySelector('.navbar'); menuBtn.onclick = () => { menuBtn.classList.toggle('fa-times'); navbar.classList.toggle('active'); }; window.onscroll = () => { menuBtn.classList.remove('fa-times'); navbar.classList.remove('active'); }; // Search Form Toggle let searchBtn = document.querySelector('#search-btn'); let searchForm = document.querySelector('.search-form'); searchBtn.onclick = () => { searchForm.classList.toggle('active'); }; // Slider Functionality const slider = document.querySelector('.slider'); const slides = document.querySelectorAll('.slide'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let slideIndex = 0; const slideWidth = slides[0].clientWidth; function goToSlide(index) { if (index < 0) { index = slides.length - 1; } else if (index >= slides.length) { index = 0; } slider.style.transform = `translateX(-${index * slideWidth}px)`; slideIndex = index; } prevBtn.addEventListener('click', () => { goToSlide(slideIndex - 1); }); nextBtn.addEventListener('click', () => { goToSlide(slideIndex + 1); }); // Auto slide setInterval(() => { goToSlide(slideIndex + 1); }, 5000); // Scroll Reveal Animation const scrollReveal = ScrollReveal({ origin: 'top', distance: '80px', duration: 2000, reset: true }); scrollReveal.reveal('.home .content, .heading', { delay: 200 }); scrollReveal.reveal('.home .image, .new-arrivals .box, .collections .box, .testimonial-box, .blog .box', { delay: 400, interval: 200 }); scrollReveal.reveal('.brand-scroller, .trending, .newsletter, .contact .row', { delay: 600 }); // Smooth Scrolling for Navigation Links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Animation on Scroll function animateOnScroll() { const elements = document.querySelectorAll('.slide-left, .slide-right'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.style.animationPlayState = 'running'; } }); } window.addEventListener('scroll', animateOnScroll); animateOnScroll(); // Run once on page load // Brand Scroller Animation const scrollerInner = document.querySelector('.scroller-inner'); const scrollerContent = Array.from(scrollerInner.children); scrollerContent.forEach(item => { const duplicatedItem = item.cloneNode(true); duplicatedItem.setAttribute('aria-hidden', true); scrollerInner.appendChild(duplicatedItem); }); // Cart Functionality const cartBtn = document.querySelector('#cart-btn'); let cartCount = 0; cartBtn.addEventListener('click', () => { // In a real implementation, this would show a cart modal alert('Cart functionality would be implemented here!'); }); // Add to Cart Buttons document.querySelectorAll('.fa-shopping-cart').forEach(btn => { btn.addEventListener('click', function(e) { e.preventDefault(); cartCount++; // Update cart count display (would be visible in a real implementation) console.log(`Item added to cart. Total items: ${cartCount}`); // Show a quick notification const notification = document.createElement('div'); notification.textContent = 'Item added to cart!'; notification.style.position = 'fixed'; notification.style.bottom = '20px'; notification.style.right = '20px'; notification.style.backgroundColor = 'var(--primary)'; notification.style.color = 'white'; notification.style.padding = '10px 20px'; notification.style.borderRadius = '5px'; notification.style.zIndex = '1000'; notification.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)'; document.body.appendChild(notification); setTimeout(() => { notification.style.opacity = '0'; notification.style.transition = 'opacity 0.5s ease'; setTimeout(() => { document.body.removeChild(notification); }, 500); }, 2000); }); }); // Newsletter Form Submission const newsletterForm = document.querySelector('.newsletter form'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const email = this.querySelector('input[type="email"]').value; // In a real implementation, this would send the email to your backend console.log(`Subscribed with email: ${email}`); alert('Thank you for subscribing to our newsletter!'); this.reset(); }); } // Contact Form Submission const contactForm = document.querySelector('.contact form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // In a real implementation, this would send the form data to your backend console.log('Form submitted!'); alert('Thank you for your message. We will get back to you soon!'); this.reset(); }); } });
Output Preview
Desktop
Mobile
Fullscreen