Boutique 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>Luxe Boutique | Premium Fashion</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">LUXE</a> <nav class="navbar"> <a href="#home">Home</a> <a href="#collections">Collections</a> <a href="#about">About</a> <a href="#products">Products</a> <a href="#testimonials">Testimonials</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-bag" 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="hero" id="home"> <div class="content"> <h3 class="hero-title">Elegance Redefined</h3> <p class="hero-subtitle">Discover our exclusive collection for the modern sophisticate</p> <a href="#collections" class="btn">Explore Now</a> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Boutique Fashion"> </div> </section> <!-- Brand Scroller --> <section class="brand-scroller"> <div class="scroller-inner"> <div class="scroller-content"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=GUCCI" alt="Gucci"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=PRADA" alt="Prada"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=DIOR" alt="Dior"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=CHANEL" alt="Chanel"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=LV" alt="Louis Vuitton"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=HERMES" alt="Hermes"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=BALENCIAGA" alt="Balenciaga"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=VERSACE" alt="Versace"> </div> <div class="scroller-content" aria-hidden="true"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=GUCCI" alt="Gucci"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=PRADA" alt="Prada"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=DIOR" alt="Dior"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=CHANEL" alt="Chanel"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=LV" alt="Louis Vuitton"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=HERMES" alt="Hermes"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=BALENCIAGA" alt="Balenciaga"> <img src="https://via.placeholder.com/150x80/fff/ccc?text=VERSACE" alt="Versace"> </div> </div> </section> <!-- Collections Section --> <section class="collections" id="collections"> <h1 class="heading">Our <span>Collections</span></h1> <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=687&q=80" alt="Summer Collection"> <div class="content"> <h3>Summer Collection</h3> <p>Light, breezy styles for warm days</p> <a href="#" class="btn">Shop Now</a> </div> </div> <div class="box"> <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="Winter Collection"> <div class="content"> <h3>Winter Collection</h3> <p>Cozy and warm for the cold season</p> <a href="#" class="btn">Shop Now</a> </div> </div> <div class="box"> <img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Formal Collection"> <div class="content"> <h3>Formal Collection</h3> <p>Elegance for special occasions</p> <a href="#" class="btn">Shop Now</a> </div> </div> </div> </section> <!-- About Section --> <section class="about" id="about"> <h1 class="heading"><span>About</span> Us</h1> <div class="row"> <div class="image"> <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About Us"> </div> <div class="content"> <h3>Why Choose Us?</h3> <p>At Luxe Boutique, we curate only the finest fashion pieces from around the world. Our passion for quality and style ensures you always look your best.</p> <p>Founded in 2010, we've grown from a small local boutique to an internationally recognized brand, all while maintaining our commitment to personalized service.</p> <a href="#" class="btn">Learn More</a> </div> </div> </section> <!-- Products Section --> <section class="products" id="products"> <h1 class="heading">Our <span>Products</span></h1> <div class="product-slider"> <div class="wrapper"> <div class="product-card"> <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Silk Dress"> <h3>Silk Evening Dress</h3> <div class="price">$249.99</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> <a href="#" class="btn">Add to Cart</a> </div> <div class="product-card"> <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="Leather Jacket"> <h3>Premium Leather Jacket</h3> <div class="price">$399.99</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> <a href="#" class="btn">Add to Cart</a> </div> <div class="product-card"> <img src="https://images.unsplash.com/photo-1595341595379-cf0f0f13f971?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Designer Handbag"> <h3>Designer Handbag</h3> <div class="price">$599.99</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> <a href="#" class="btn">Add to Cart</a> </div> <div class="product-card"> <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Cashmere Sweater"> <h3>Cashmere Sweater</h3> <div class="price">$179.99</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> <a href="#" class="btn">Add to Cart</a> </div> <div class="product-card"> <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Silk Dress"> <h3>Silk Evening Dress</h3> <div class="price">$249.99</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> <a href="#" class="btn">Add to Cart</a> </div> </div> <div class="slider-nav"> <button class="prev"><i class="fas fa-chevron-left"></i></button> <button class="next"><i class="fas fa-chevron-right"></i></button> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <h1 class="heading">Customer <span>Testimonials</span></h1> <div class="testimonial-container"> <div class="testimonial-box"> <div class="client-info"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Client"> <div> <h3>Sarah Johnson</h3> <span>Fashion Blogger</span> </div> </div> <p>"Luxe Boutique has become my go-to for all special occasions. The quality is unmatched and their personal styling service is exceptional."</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"> <div> <h3>Michael Chen</h3> <span>Business Executive</span> </div> </div> <p>"The attention to detail in their formal collection is impressive. I always receive compliments when wearing pieces from Luxe Boutique."</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"> <div> <h3>Emily Rodriguez</h3> <span>Stylist</span> </div> </div> <p>"As a professional stylist, I appreciate the unique pieces Luxe offers. Their buyers have an incredible eye for emerging trends."</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> </section> <!-- Blog Section --> <section class="blog" id="blog"> <h1 class="heading">Our <span>Blog</span></h1> <div class="blog-container"> <div class="blog-box"> <div class="blog-img"> <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 Post"> <span>Fashion Tips</span> </div> <div class="blog-content"> <h3>How to Accessorize Your Summer Outfits</h3> <p>Discover the perfect accessories to complement your summer wardrobe and elevate your style...</p> <a href="#" class="btn">Read More</a> </div> </div> <div class="blog-box"> <div class="blog-img"> <img src="https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog Post"> <span>Shopping Guide</span> </div> <div class="blog-content"> <h3>Investing in Timeless Pieces: A Buyer's Guide</h3> <p>Learn how to build a wardrobe that stands the test of time with our expert recommendations...</p> <a href="#" class="btn">Read More</a> </div> </div> <div class="blog-box"> <div class="blog-img"> <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 Post"> <span>Trend Report</span> </div> <div class="blog-content"> <h3>Fall/Winter 2023 Trends You Need to Know</h3> <p>Get ahead of the fashion curve with our breakdown of the key trends for the upcoming season...</p> <a href="#" class="btn">Read More</a> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="newsletter"> <div class="content"> <h3>Subscribe for Exclusive Offers</h3> <p>Be the first to know about new arrivals, special events, and private sales.</p> <form action=""> <input type="email" placeholder="Enter your email" class="box"> <input type="submit" value="Subscribe" class="btn"> </form> </div> </section> <!-- Footer Section --> <section class="footer" id="contact"> <div class="box-container"> <div class="box"> <h3>LUXE Boutique <i class="fas fa-shopping-bag"></i></h3> <p>Elevating your wardrobe with carefully curated fashion since 2010.</p> <div class="share"> <a href="#" class="fab fa-facebook-f"></a> <a href="#" class="fab fa-twitter"></a> <a href="#" class="fab fa-instagram"></a> <a href="#" class="fab fa-pinterest"></a> </div> </div> <div class="box"> <h3>Contact Info</h3> <a href="#" class="links"><i class="fas fa-phone"></i> +1 (555) 123-4567</a> <a href="#" class="links"><i class="fas fa-envelope"></i> info@luxeboutique.com</a> <a href="#" class="links"><i class="fas fa-map-marker-alt"></i> 123 Fashion Ave, New York, NY</a> </div> <div class="box"> <h3>Quick Links</h3> <a href="#home" class="links"><i class="fas fa-arrow-right"></i> Home</a> <a href="#collections" class="links"><i class="fas fa-arrow-right"></i> Collections</a> <a href="#products" class="links"><i class="fas fa-arrow-right"></i> Products</a> <a href="#blog" class="links"><i class="fas fa-arrow-right"></i> Blog</a> </div> <div class="box"> <h3>Store Hours</h3> <p>Monday - Friday: 10am - 8pm</p> <p>Saturday: 10am - 9pm</p> <p>Sunday: 11am - 6pm</p> </div> </div> <div class="credit">Created by <span>Luxe Boutique</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: #eebf68; --secondary: #232b38; --ternary: #6c6c6c; --danger: #fe4545; --pure: #fefefe; --light: #f0f0f0; --heaven: #ffffff; --footer: #2d333f; --shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; text-decoration: none; list-style-type: none; outline: none; border: none; transition: all 0.2s linear; } html { font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: hidden; } body { background-color: var(--heaven); color: var(--secondary); } section { padding: 5rem 9%; } .btn { display: inline-block; margin-top: 1rem; padding: 1rem 3rem; background: var(--primary); color: var(--secondary); font-size: 1.7rem; font-weight: 500; cursor: pointer; border-radius: 5rem; text-transform: capitalize; } .btn:hover { background: var(--secondary); color: var(--pure); transform: translateY(-0.3rem); box-shadow: var(--shadow); } .heading { text-align: center; margin-bottom: 4rem; font-size: 4rem; text-transform: capitalize; color: var(--secondary); } .heading span { color: var(--primary); text-transform: capitalize; } /* Header Section */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--heaven); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; padding: 2rem 9%; } .header .logo { font-size: 2.5rem; font-weight: bolder; color: var(--secondary); text-transform: uppercase; } .header .logo span { color: var(--primary); } .header .navbar a { font-size: 1.7rem; margin: 0 1rem; color: var(--secondary); text-transform: capitalize; } .header .navbar a:hover { color: var(--primary); } .header .icons div { font-size: 2.5rem; margin-left: 1.7rem; color: var(--secondary); cursor: pointer; } .header .icons div:hover { color: var(--primary); } .header .search-form { position: absolute; top: 115%; right: -105%; width: 50rem; background: var(--heaven); border-radius: 0.5rem; display: flex; align-items: center; box-shadow: var(--shadow); } .header .search-form.active { right: 2rem; } .header .search-form input { width: 100%; padding: 1.2rem; font-size: 1.6rem; color: var(--secondary); text-transform: none; } .header .search-form label { font-size: 2.5rem; margin-right: 1.7rem; color: var(--secondary); cursor: pointer; } .header .search-form label:hover { color: var(--primary); } #menu-btn { display: none; } /* Hero Section */ .hero { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; padding-top: 9rem; background: linear-gradient(to right, #f9f9f9, #fff); } .hero .content { flex: 1 1 40rem; animation: fadeIn 1.5s ease-in-out; } .hero .image { flex: 1 1 40rem; animation: slideIn 1.5s ease-in-out; } .hero .image img { width: 100%; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2); } .hero .content .hero-title { font-size: 5rem; color: var(--secondary); text-transform: capitalize; line-height: 1.2; } .hero .content .hero-subtitle { font-size: 1.7rem; color: var(--ternary); padding: 1rem 0; line-height: 2; } /* Brand Scroller */ .brand-scroller { background: var(--light); padding: 2rem 0; overflow: hidden; white-space: nowrap; position: relative; } .brand-scroller:before, .brand-scroller:after { position: absolute; top: 0; width: 250px; height: 100%; content: ""; z-index: 2; } .brand-scroller:before { left: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--light)); } .brand-scroller:after { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--light)); } .brand-scroller:hover .scroller-content { animation-play-state: paused; } .scroller-inner { display: flex; width: fit-content; } .scroller-content { display: flex; gap: 4rem; padding: 0 2rem; animation: scroll 20s linear infinite; } .scroller-content img { height: 8rem; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease; } .scroller-content img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.1); } /* Collections Section */ .collections .box-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2rem; } .collections .box-container .box { position: relative; height: 40rem; overflow: hidden; border-radius: 1rem; box-shadow: var(--shadow); } .collections .box-container .box:hover img { transform: scale(1.1); } .collections .box-container .box img { height: 100%; width: 100%; object-fit: cover; } .collections .box-container .box .content { position: absolute; top: 50%; left: 5%; transform: translateY(-50%) rotate(45deg); transform-origin: left; width: 50rem; padding: 2rem; background: rgba(255, 255, 255, 0.8); clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%, 0% 50%); } .collections .box-container .box .content h3 { font-size: 2.5rem; color: var(--secondary); text-transform: capitalize; } .collections .box-container .box .content p { font-size: 1.5rem; color: var(--ternary); padding: 1rem 0; line-height: 1.5; } /* About Section */ .about .row { display: flex; flex-wrap: wrap; gap: 4rem; align-items: center; } .about .row .image { flex: 1 1 40rem; } .about .row .image img { width: 100%; border-radius: 1rem; box-shadow: var(--shadow); } .about .row .content { flex: 1 1 40rem; } .about .row .content h3 { font-size: 3.5rem; color: var(--secondary); text-transform: capitalize; margin-bottom: 1rem; } .about .row .content p { font-size: 1.6rem; color: var(--ternary); line-height: 2; padding: 1rem 0; } /* Products Section */ .products .product-slider { position: relative; padding: 3rem 0; } .products .product-slider .wrapper { display: flex; gap: 2rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; /* Firefox */ } .products .product-slider .wrapper::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .products .product-slider .product-card { flex: 0 0 30rem; background: var(--heaven); border-radius: 1rem; box-shadow: var(--shadow); padding: 2rem; text-align: center; position: relative; overflow: hidden; } .products .product-slider .product-card:hover { transform: translateY(-1rem); } .products .product-slider .product-card img { height: 25rem; width: 100%; object-fit: cover; margin-bottom: 1rem; border-radius: 0.5rem; } .products .product-slider .product-card h3 { font-size: 2rem; color: var(--secondary); padding: 0.5rem 0; } .products .product-slider .product-card .price { font-size: 2rem; color: var(--primary); font-weight: bolder; padding: 0.5rem 0; } .products .product-slider .product-card .price span { font-size: 1.5rem; color: var(--ternary); text-decoration: line-through; font-weight: lighter; } .products .product-slider .product-card .stars { padding: 1rem 0; } .products .product-slider .product-card .stars i { font-size: 1.5rem; color: var(--primary); } .products .product-slider .slider-nav { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; } .products .product-slider .slider-nav button { width: 4rem; height: 4rem; border-radius: 50%; background: var(--primary); color: var(--secondary); font-size: 1.5rem; cursor: pointer; border: none; display: flex; align-items: center; justify-content: center; } .products .product-slider .slider-nav button:hover { background: var(--secondary); color: var(--pure); } /* Testimonials Section */ .testimonials .testimonial-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2rem; } .testimonials .testimonial-box { background: var(--heaven); border-radius: 1rem; box-shadow: var(--shadow); padding: 3rem 2rem; text-align: center; position: relative; } .testimonials .testimonial-box:hover { transform: translateY(-1rem); } .testimonials .testimonial-box .client-info { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; } .testimonials .testimonial-box .client-info img { height: 7rem; width: 7rem; border-radius: 50%; object-fit: cover; border: 0.5rem solid var(--primary); } .testimonials .testimonial-box .client-info h3 { font-size: 1.7rem; color: var(--secondary); text-transform: capitalize; } .testimonials .testimonial-box .client-info span { font-size: 1.3rem; color: var(--ternary); } .testimonials .testimonial-box p { font-size: 1.5rem; color: var(--ternary); line-height: 2; padding: 1rem 0; } .testimonials .testimonial-box .stars i { font-size: 1.5rem; color: var(--primary); } /* Blog Section */ .blog .blog-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 2rem; } .blog .blog-box { background: var(--heaven); border-radius: 1rem; box-shadow: var(--shadow); overflow: hidden; } .blog .blog-box:hover { transform: translateY(-1rem); } .blog .blog-box .blog-img { height: 25rem; width: 100%; overflow: hidden; } .blog .blog-box .blog-img img { height: 100%; width: 100%; object-fit: cover; transition: 0.3s; } .blog .blog-box:hover .blog-img img { transform: scale(1.1); } .blog .blog-box .blog-img span { position: absolute; top: 1rem; right: 1rem; background: var(--primary); color: var(--secondary); font-size: 1.5rem; padding: 0.5rem 1.5rem; border-radius: 5rem; text-transform: capitalize; } .blog .blog-box .blog-content { padding: 2rem; } .blog .blog-box .blog-content h3 { font-size: 2rem; color: var(--secondary); text-transform: capitalize; margin-bottom: 1rem; } .blog .blog-box .blog-content p { font-size: 1.4rem; color: var(--ternary); line-height: 2; padding: 1rem 0; } /* Newsletter Section */ .newsletter { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://images.unsplash.com/photo-1445205170230-053b83016050?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80) no-repeat; background-size: cover; background-position: center; background-attachment: fixed; text-align: center; padding: 8rem 2rem; border-radius: 1rem; } .newsletter .content h3 { font-size: 4rem; color: var(--heaven); text-transform: capitalize; margin-bottom: 2rem; } .newsletter .content p { font-size: 1.7rem; color: var(--light); max-width: 70rem; margin: 0 auto 3rem; line-height: 2; } .newsletter .content form { display: flex; max-width: 70rem; margin: 0 auto; border-radius: 5rem; overflow: hidden; background: var(--heaven); box-shadow: var(--shadow); } .newsletter .content form .box { width: 100%; padding: 1.5rem; font-size: 1.7rem; color: var(--secondary); text-transform: none; } .newsletter .content form .btn { border-radius: 0; margin-top: 0; } /* Footer Section */ .footer { background: var(--footer); } .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(--heaven); padding: 1rem 0; text-transform: capitalize; } .footer .box-container .box h3 i { color: var(--primary); } .footer .box-container .box .links { display: block; font-size: 1.5rem; color: var(--light); padding: 1rem 0; text-transform: capitalize; } .footer .box-container .box .links i { color: var(--primary); padding-right: 0.5rem; } .footer .box-container .box .links:hover { color: var(--primary); padding-left: 0.5rem; } .footer .box-container .box p { font-size: 1.5rem; color: var(--light); padding: 1rem 0; line-height: 2; } .footer .box-container .box .share a { height: 4.5rem; width: 4.5rem; line-height: 4.5rem; border-radius: 50%; font-size: 1.7rem; background: var(--secondary); color: var(--heaven); margin-right: 0.3rem; text-align: center; display: inline-block; } .footer .box-container .box .share a:hover { background: var(--primary); color: var(--secondary); transform: rotate(360deg); } .footer .credit { text-align: center; margin-top: 3rem; padding-top: 3rem; font-size: 2rem; color: var(--heaven); border-top: 0.1rem solid rgba(255, 255, 255, 0.2); } .footer .credit span { color: var(--primary); } /* Animations */ @keyframes fadeIn { 0% { opacity: 0; transform: translateY(-5rem); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideIn { 0% { opacity: 0; transform: translateX(10rem); } 100% { opacity: 1; transform: translateX(0); } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Media Queries */ @media (max-width: 991px) { html { font-size: 55%; } section { padding: 3rem 2rem; } .header { padding: 2rem; } } @media (max-width: 768px) { #menu-btn { display: inline-block; } .header .navbar { position: absolute; top: 99%; left: 0; right: 0; background: var(--heaven); border-top: 0.1rem solid rgba(0, 0, 0, 0.1); 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; } .hero .content .hero-title { font-size: 4rem; } .newsletter .content h3 { font-size: 3rem; } } @media (max-width: 450px) { html { font-size: 50%; } .heading { font-size: 3rem; } .hero .content .hero-title { font-size: 3.5rem; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Header Scroll Effect let header = document.querySelector('.header'); window.onscroll = () => { if (window.scrollY > 100) { header.classList.add('active'); } else { header.classList.remove('active'); } }; // Menu Toggle let menuBtn = document.querySelector('#menu-btn'); let navbar = document.querySelector('.navbar'); menuBtn.onclick = () => { menuBtn.classList.toggle('fa-times'); navbar.classList.toggle('active'); }; // Search Toggle let searchBtn = document.querySelector('#search-btn'); let searchForm = document.querySelector('.search-form'); searchBtn.onclick = () => { searchForm.classList.toggle('active'); }; // Close Search Form When Scrolling window.onscroll = () => { menuBtn.classList.remove('fa-times'); navbar.classList.remove('active'); searchForm.classList.remove('active'); }; // Product Slider Navigation const productSlider = document.querySelector('.product-slider .wrapper'); const prevBtn = document.querySelector('.product-slider .prev'); const nextBtn = document.querySelector('.product-slider .next'); if (productSlider && prevBtn && nextBtn) { nextBtn.addEventListener('click', () => { productSlider.scrollBy({ left: 300, behavior: 'smooth' }); }); prevBtn.addEventListener('click', () => { productSlider.scrollBy({ left: -300, behavior: 'smooth' }); }); } // Animate Elements on Scroll const animateOnScroll = () => { const elements = document.querySelectorAll('.collections .box, .about .row, .testimonial-box, .blog-box'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); }; // Set initial state for animated elements const animatedElements = document.querySelectorAll('.collections .box, .about .row, .testimonial-box, .blog-box'); animatedElements.forEach(element => { element.style.opacity = '0'; element.style.transform = 'translateY(50px)'; element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; }); // Run animation check on load and scroll window.addEventListener('load', animateOnScroll); window.addEventListener('scroll', animateOnScroll); // Newsletter Form Submission const newsletterForm = document.querySelector('.newsletter form'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const emailInput = this.querySelector('input[type="email"]'); if (emailInput.value.trim() !== '') { alert('Thank you for subscribing to our newsletter!'); emailInput.value = ''; } else { alert('Please enter a valid email address.'); } }); } // Add to Cart Animation const addToCartButtons = document.querySelectorAll('.product-card .btn'); addToCartButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const productCard = this.closest('.product-card'); productCard.style.transform = 'scale(0.95)'; setTimeout(() => { productCard.style.transform = 'scale(1)'; // Create flying cart item effect const flyingItem = document.createElement('div'); flyingItem.classList.add('flying-item'); flyingItem.innerHTML = '<i class="fas fa-shopping-bag"></i>'; const productImg = productCard.querySelector('img'); const imgRect = productImg.getBoundingClientRect(); const cartBtn = document.querySelector('#cart-btn'); const cartRect = cartBtn.getBoundingClientRect(); flyingItem.style.position = 'fixed'; flyingItem.style.left = `${imgRect.left + imgRect.width / 2}px`; flyingItem.style.top = `${imgRect.top}px`; flyingItem.style.fontSize = '2rem'; flyingItem.style.color = 'var(--primary)'; flyingItem.style.zIndex = '1000'; flyingItem.style.transition = 'all 0.5s cubic-bezier(0.65, 0, 0.35, 1)'; document.body.appendChild(flyingItem); setTimeout(() => { flyingItem.style.left = `${cartRect.left + cartRect.width / 2}px`; flyingItem.style.top = `${cartRect.top}px`; flyingItem.style.opacity = '0'; flyingItem.style.transform = 'scale(0.5)'; }, 10); setTimeout(() => { document.body.removeChild(flyingItem); // Animate cart button cartBtn.style.transform = 'scale(1.2)'; setTimeout(() => { cartBtn.style.transform = 'scale(1)'; }, 300); }, 600); }, 200); }); }); // Smooth Scrolling for Navigation Links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Image Hover Zoom Effect const zoomImages = document.querySelectorAll('.collections .box img, .blog-box .blog-img img'); zoomImages.forEach(img => { img.style.transition = 'transform 0.5s ease'; }); // Parallax Effect for Hero Section window.addEventListener('scroll', function() { const hero = document.querySelector('.hero'); if (hero) { const scrollPosition = window.pageYOffset; hero.style.backgroundPositionY = scrollPosition * 0.5 + 'px'; } }); });
Output Preview
Desktop
Mobile
Fullscreen