Jewelry Shop 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>Luxuria - Premium Jewelry Shop</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">Luxuria</a> <nav class="navbar"> <a href="#home">Home</a> <a href="#collections">Collections</a> <a href="#products">Products</a> <a href="#about">About</a> <a href="#testimonials">Testimonials</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> </nav> <div class="icons"> <div id="menu-btn" class="fas fa-bars"></div> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-user"></a> </div> </div> </header> <!-- Hero Section --> <section class="home" id="home"> <div class="container"> <div class="content"> <h3 class="slide-left">Elegance <span>Redefined</span></h3> <p class="slide-left">Discover our exquisite collection of handcrafted jewelry pieces that tell your unique story.</p> <a href="#collections" class="btn slide-left">Explore Collections</a> <a href="#products" class="btn btn-outline slide-left">Shop Now</a> </div> <div class="image slide-right"> <img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Luxury Jewelry"> <div class="sparkle sparkle-1"></div> <div class="sparkle sparkle-2"></div> <div class="sparkle sparkle-3"></div> </div> </div> </section> <!-- Scrolling Brands Section --> <section class="brands"> <div class="container"> <h2 class="heading">Trusted By <span>Prestigious Brands</span></h2> <div class="brands-container"> <div class="brands-scroll"> <img src="https://logo.clearbit.com/tiffany.com" alt="Tiffany & Co."> <img src="https://logo.clearbit.com/cartier.com" alt="Cartier"> <img src="https://logo.clearbit.com/bulgari.com" alt="Bulgari"> <img src="https://logo.clearbit.com/van-cleef-arpels.com" alt="Van Cleef & Arpels"> <img src="https://logo.clearbit.com/harrywinston.com" alt="Harry Winston"> <img src="https://logo.clearbit.com/graff.com" alt="Graff"> <img src="https://logo.clearbit.com/chopard.com" alt="Chopard"> </div> <div class="brands-scroll"> <img src="https://logo.clearbit.com/tiffany.com" alt="Tiffany & Co."> <img src="https://logo.clearbit.com/cartier.com" alt="Cartier"> <img src="https://logo.clearbit.com/bulgari.com" alt="Bulgari"> <img src="https://logo.clearbit.com/van-cleef-arpels.com" alt="Van Cleef & Arpels"> <img src="https://logo.clearbit.com/harrywinston.com" alt="Harry Winston"> <img src="https://logo.clearbit.com/graff.com" alt="Graff"> <img src="https://logo.clearbit.com/chopard.com" alt="Chopard"> </div> </div> </div> </section> <!-- Collections Section --> <section class="collections" id="collections"> <div class="container"> <h2 class="heading">Our <span>Collections</span></h2> <div class="collection-cards"> <div class="collection-card"> <div class="collection-image"> <img src="https://images.unsplash.com/photo-1602173574767-37ac01994b2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="Engagement Rings"> <div class="collection-overlay"> <h3>Engagement</h3> <a href="#" class="btn">View Collection</a> </div> </div> </div> <div class="collection-card"> <div class="collection-image"> <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Wedding Bands"> <div class="collection-overlay"> <h3>Wedding Bands</h3> <a href="#" class="btn">View Collection</a> </div> </div> </div> <div class="collection-card"> <div class="collection-image"> <img src="https://images.unsplash.com/photo-1603974372033-9b2150c802b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Necklaces"> <div class="collection-overlay"> <h3>Necklaces</h3> <a href="#" class="btn">View Collection</a> </div> </div> </div> <div class="collection-card"> <div class="collection-image"> <img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Earrings"> <div class="collection-overlay"> <h3>Earrings</h3> <a href="#" class="btn">View Collection</a> </div> </div> </div> </div> </div> </section> <!-- Products Section --> <section class="products" id="products"> <div class="container"> <h2 class="heading">Featured <span>Products</span></h2> <div class="product-cards"> <div class="product-card"> <div class="product-badge">New</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1603974372033-9b2150c802b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Diamond Necklace"> <div class="product-actions"> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-eye"></a> </div> </div> <div class="product-content"> <h3>Eternal Diamond Necklace</h3> <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 class="price">$1,299 <span>$1,599</span></div> </div> </div> <div class="product-card"> <div class="product-badge">-15%</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1602173574767-37ac01994b2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="Diamond Ring"> <div class="product-actions"> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-eye"></a> </div> </div> <div class="product-content"> <h3>Platinum Diamond Ring</h3> <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 class="price">$2,499 <span>$2,999</span></div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Gold Bracelet"> <div class="product-actions"> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-eye"></a> </div> </div> <div class="product-content"> <h3>18K Gold Bracelet</h3> <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 class="price">$899</div> </div> </div> <div class="product-card"> <div class="product-badge">Popular</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Pearl Earrings"> <div class="product-actions"> <a href="#" class="fas fa-heart"></a> <a href="#" class="fas fa-shopping-cart"></a> <a href="#" class="fas fa-eye"></a> </div> </div> <div class="product-content"> <h3>Pearl Drop Earrings</h3> <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 class="price">$599</div> </div> </div> </div> <div class="view-all"> <a href="#" class="btn">View All Products</a> </div> </div> </section> <!-- About Section --> <section class="about" id="about"> <div class="container"> <div class="image slide-left"> <img src="https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Jewelry Crafting"> </div> <div class="content slide-right"> <h3>Our <span>Story</span></h3> <p>Founded in 1995, Luxuria Jewelry has been crafting exquisite pieces with passion and precision. Each creation is a testament to our commitment to quality and timeless elegance.</p> <p>Our master jewelers combine traditional techniques with modern innovation to create pieces that tell your unique story. We source only the finest materials, ensuring every piece meets our exacting standards.</p> <div class="about-stats"> <div class="stat"> <h4>25+</h4> <p>Years Experience</p> </div> <div class="stat"> <h4>10K+</h4> <p>Happy Customers</p> </div> <div class="stat"> <h4>100%</h4> <p>Satisfaction Guarantee</p> </div> </div> <a href="#" class="btn">Learn More</a> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <div class="container"> <h2 class="heading">Customer <span>Testimonials</span></h2> <div class="testimonial-slider"> <div class="slider-container"> <div class="testimonial-slide active"> <div class="user"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Emily R."> <div class="user-info"> <h3>Emily R.</h3> <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> <p>"The engagement ring from Luxuria is absolutely stunning! The craftsmanship is impeccable and the diamond sparkles like nothing I've ever seen. My fiancΓ©e was speechless when she saw it."</p> </div> <div class="testimonial-slide"> <div class="user"> <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Michael T."> <div class="user-info"> <h3>Michael T.</h3> <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> <p>"I purchased a custom necklace for my wife's anniversary and the attention to detail was remarkable. The team at Luxuria made the entire process seamless and the result was beyond my expectations."</p> </div> <div class="testimonial-slide"> <div class="user"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah K."> <div class="user-info"> <h3>Sarah K.</h3> <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> <p>"The pearl earrings I bought are exquisite. They're comfortable to wear all day and I receive compliments every time I wear them. Luxuria's quality and service are unmatched."</p> </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> </div> </section> <!-- Blog Section --> <section class="blog" id="blog"> <div class="container"> <h2 class="heading">Latest <span>Blog Posts</span></h2> <div class="blog-cards"> <div class="blog-card"> <div class="blog-image"> <img src="https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Diamond Guide"> <div class="blog-date"> <span>15</span> <span>Jun</span> </div> </div> <div class="blog-content"> <h3>How to Choose the Perfect Diamond</h3> <p>A comprehensive guide to understanding the 4Cs of diamond quality and selecting the perfect stone for your jewelry.</p> <a href="#" class="btn">Read More</a> </div> </div> <div class="blog-card"> <div class="blog-image"> <img src="https://images.unsplash.com/photo-1602173574767-37ac01994b2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="Ring Trends"> <div class="blog-date"> <span>02</span> <span>Jul</span> </div> </div> <div class="blog-content"> <h3>2023 Engagement Ring Trends</h3> <p>Discover the hottest engagement ring trends this year, from vintage-inspired designs to modern minimalist styles.</p> <a href="#" class="btn">Read More</a> </div> </div> <div class="blog-card"> <div class="blog-image"> <img src="https://images.unsplash.com/photo-1603974372033-9b2150c802b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Jewelry Care"> <div class="blog-date"> <span>22</span> <span>Jul</span> </div> </div> <div class="blog-content"> <h3>Essential Jewelry Care Tips</h3> <p>Learn how to properly care for your precious jewelry to maintain its beauty and longevity for years to come.</p> <a href="#" class="btn">Read More</a> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="container"> <h2 class="heading">Contact <span>Us</span></h2> <div class="contact-container"> <div class="contact-info slide-left"> <h3>Get In Touch</h3> <div class="info-box"> <div class="icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="detail"> <h4>Address</h4> <p>123 Diamond Lane, Jewelry District, NY 10001</p> </div> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-phone-alt"></i> </div> <div class="detail"> <h4>Phone</h4> <p>+1 (800) 555-LUXURY</p> </div> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-envelope"></i> </div> <div class="detail"> <h4>Email</h4> <p>info@luxuria.com</p> </div> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-clock"></i> </div> <div class="detail"> <h4>Business Hours</h4> <p>Monday - Friday: 10am - 7pm</p> <p>Saturday: 11am - 5pm</p> </div> </div> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-pinterest-p"></i></a> </div> </div> <div class="contact-form slide-right"> <h3>Send Us a Message</h3> <form> <div class="input-box"> <input type="text" placeholder="Your Name" required> </div> <div class="input-box"> <input type="email" placeholder="Your Email" required> </div> <div class="input-box"> <input type="text" placeholder="Subject" required> </div> <div class="input-box"> <textarea placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="newsletter"> <div class="container"> <div class="newsletter-content"> <h3>Subscribe to Our Newsletter</h3> <p>Get exclusive offers, new collection alerts, and jewelry care tips delivered to your inbox.</p> <form> <input type="email" placeholder="Enter your email"> <button type="submit" class="btn">Subscribe</button> </form> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-box"> <h3>Quick Links</h3> <a href="#home"><i class="fas fa-chevron-right"></i> Home</a> <a href="#collections"><i class="fas fa-chevron-right"></i> Collections</a> <a href="#products"><i class="fas fa-chevron-right"></i> Products</a> <a href="#about"><i class="fas fa-chevron-right"></i> About</a> <a href="#testimonials"><i class="fas fa-chevron-right"></i> Testimonials</a> </div> <div class="footer-box"> <h3>Customer Service</h3> <a href="#"><i class="fas fa-chevron-right"></i> My Account</a> <a href="#"><i class="fas fa-chevron-right"></i> Order Tracking</a> <a href="#"><i class="fas fa-chevron-right"></i> Wishlist</a> <a href="#"><i class="fas fa-chevron-right"></i> Shipping Policy</a> <a href="#"><i class="fas fa-chevron-right"></i> Returns & Exchanges</a> </div> <div class="footer-box"> <h3>Contact Info</h3> <a href="#"><i class="fas fa-phone"></i> +1 (800) 555-LUXURY</a> <a href="#"><i class="fas fa-envelope"></i> info@luxuria.com</a> <a href="#"><i class="fas fa-map-marker-alt"></i> 123 Diamond Lane, NY 10001</a> </div> <div class="footer-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-pinterest-p"></i> Pinterest</a> <a href="#"><i class="fab fa-youtube"></i> YouTube</a> </div> </div> <div class="copyright"> <p>© 2023 Luxuria Jewelry. All Rights Reserved.</p> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); /* Variables */ :root { --primary: #d4af37; --secondary: #000; --dark: #1e1e1e; --light: #f5f5f5; --gray: #777; --light-gray: #eaeaea; --white: #ffffff; --black: #000000; } /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; text-decoration: none; list-style: none; outline: none; border: none; transition: all 0.2s linear; } html { font-size: 62.5%; scroll-behavior: smooth; overflow-x: hidden; } body { background: var(--white); color: var(--dark); overflow-x: hidden; } section { padding: 8rem 9%; } .btn { display: inline-block; margin-top: 1rem; padding: 1rem 3rem; background: var(--primary); color: var(--white); font-size: 1.7rem; font-weight: 500; border-radius: 0.5rem; cursor: pointer; text-transform: capitalize; } .btn:hover { background: var(--secondary); transform: translateY(-0.3rem); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); } .btn-outline { background: transparent; border: 0.2rem solid var(--primary); color: var(--primary); margin-left: 1rem; } .btn-outline:hover { background: var(--primary); color: var(--white); } .heading { text-align: center; font-size: 4.5rem; margin-bottom: 5rem; position: relative; font-family: 'Playfair Display', serif; } .heading span { color: var(--primary); } .heading::after { content: ''; position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%); width: 10rem; height: 0.3rem; background: var(--primary); border-radius: 0.5rem; } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* Header Styles */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--white); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); padding: 2rem 9%; display: flex; align-items: center; justify-content: space-between; } .header .logo { font-size: 2.5rem; font-weight: 700; color: var(--dark); font-family: 'Playfair Display', serif; } .header .navbar a { font-size: 1.7rem; margin-left: 2rem; color: var(--dark); position: relative; } .header .navbar a::before { content: ''; position: absolute; bottom: -0.5rem; left: 0; width: 0; height: 0.2rem; background: var(--primary); transition: width 0.3s ease; } .header .navbar a:hover::before { width: 100%; } .header .icons { display: flex; align-items: center; gap: 1.5rem; } .header .icons a { font-size: 2rem; color: var(--dark); cursor: pointer; transition: all 0.3s ease; } .header .icons a:hover { color: var(--primary); transform: translateY(-0.3rem); } .header .icons #menu-btn { display: none; } /* Hero Section */ .home { display: flex; align-items: center; min-height: 100vh; padding-top: 12rem; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80') no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .home .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .home .content { flex: 1 1 45rem; padding-right: 2rem; } .home .content h3 { font-size: 5.5rem; color: var(--white); text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.3); line-height: 1.2; margin-bottom: 2rem; font-family: 'Playfair Display', serif; } .home .content h3 span { color: var(--primary); } .home .content p { font-size: 1.7rem; color: var(--light); padding: 1rem 0; line-height: 1.5; margin-bottom: 2rem; } .home .image { flex: 1 1 45rem; position: relative; } .home .image img { width: 100%; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3); animation: float 3s linear infinite; } .sparkle { position: absolute; background: rgba(255, 255, 255, 0.8); border-radius: 50%; pointer-events: none; animation: sparkle 2s infinite alternate; } .sparkle-1 { width: 1rem; height: 1rem; top: 20%; left: 10%; animation-delay: 0.5s; } .sparkle-2 { width: 0.8rem; height: 0.8rem; top: 60%; left: 15%; animation-delay: 1s; } .sparkle-3 { width: 1.2rem; height: 1.2rem; top: 40%; left: 5%; animation-delay: 1.5s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2rem); } } @keyframes sparkle { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } } /* Brands Section */ .brands { background: var(--light-gray); padding: 5rem 0; } .brands-container { width: 100%; overflow: hidden; position: relative; } .brands-scroll { display: flex; animation: scroll 30s linear infinite; width: calc(250px * 14); } .brands-scroll img { height: 80px; margin: 0 40px; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease; } .brands-scroll img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.1); } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 7)); } } /* Collections Section */ .collection-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 2rem; } .collection-card { position: relative; height: 35rem; border-radius: 1rem; overflow: hidden; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); } .collection-image { width: 100%; height: 100%; } .collection-image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; } .collection-card:hover .collection-image img { transform: scale(1.1); } .collection-overlay { position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.5s ease; } .collection-card:hover .collection-overlay { bottom: 0; } .collection-overlay h3 { font-size: 2.5rem; color: var(--white); margin-bottom: 1.5rem; font-family: 'Playfair Display', serif; } /* Products Section */ .product-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 3rem; } .product-card { background: var(--white); border-radius: 1rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; position: relative; } .product-card:hover { transform: translateY(-1rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); } .product-badge { position: absolute; top: 1rem; right: 1rem; background: var(--primary); color: var(--white); padding: 0.5rem 1.5rem; border-radius: 0.5rem; font-size: 1.4rem; font-weight: 600; z-index: 2; } .product-image { position: relative; height: 25rem; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; } .product-card:hover .product-image img { transform: scale(1.1); } .product-actions { position: absolute; bottom: -5rem; left: 0; width: 100%; display: flex; justify-content: center; gap: 1rem; padding: 1rem; background: rgba(0, 0, 0, 0.7); transition: all 0.3s ease; } .product-card:hover .product-actions { bottom: 0; } .product-actions a { height: 4rem; width: 4rem; line-height: 4rem; font-size: 1.8rem; color: var(--white); background: rgba(255, 255, 255, 0.2); border-radius: 50%; text-align: center; transition: all 0.3s ease; } .product-actions a:hover { background: var(--primary); transform: rotate(360deg); } .product-content { padding: 2rem; } .product-content h3 { font-size: 2rem; color: var(--dark); margin-bottom: 0.5rem; } .stars { margin-bottom: 1rem; } .stars i { font-size: 1.4rem; color: var(--primary); } .price { font-size: 2rem; color: var(--primary); font-weight: 700; } .price span { font-size: 1.4rem; color: var(--gray); text-decoration: line-through; margin-left: 0.5rem; } .view-all { text-align: center; margin-top: 4rem; } /* About Section */ .about .container { display: flex; align-items: center; flex-wrap: wrap; gap: 4rem; } .about .image { flex: 1 1 45rem; } .about .image img { width: 100%; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3); } .about .content { flex: 1 1 45rem; } .about .content h3 { font-size: 3.5rem; color: var(--dark); margin-bottom: 2rem; font-family: 'Playfair Display', serif; } .about .content p { font-size: 1.6rem; color: var(--gray); line-height: 1.8; padding: 1rem 0; } .about .about-stats { display: flex; flex-wrap: wrap; gap: 2rem; margin: 2rem 0; } .about .stat { flex: 1 1 15rem; text-align: center; padding: 2rem; background: var(--light-gray); border-radius: 0.5rem; transition: all 0.3s ease; } .about .stat:hover { background: var(--primary); color: var(--white); transform: translateY(-0.5rem); } .about .stat h4 { font-size: 3rem; color: var(--primary); margin-bottom: 0.5rem; } .about .stat:hover h4 { color: var(--white); } .about .stat p { font-size: 1.5rem; } .about .stat:hover p { color: var(--white); } /* Testimonials Section */ .testimonials { background: var(--light-gray); } .testimonial-slider { position: relative; padding: 2rem; } .slider-container { display: flex; overflow: hidden; position: relative; height: 40rem; } .testimonial-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; background: var(--white); border-radius: 1rem; padding: 3rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); } .testimonial-slide.active { opacity: 1; } .user { display: flex; align-items: center; margin-bottom: 2rem; } .user img { height: 7rem; width: 7rem; border-radius: 50%; object-fit: cover; margin-right: 1.5rem; } .user .user-info h3 { font-size: 2rem; color: var(--dark); margin-bottom: 0.5rem; } .user .user-info .stars i { font-size: 1.5rem; color: var(--primary); } .testimonial-slide p { font-size: 1.6rem; color: var(--gray); line-height: 1.8; padding: 1rem 0; font-style: italic; } .slider-nav { display: flex; justify-content: center; margin-top: 2rem; gap: 1rem; } .slider-nav button { height: 5rem; width: 5rem; line-height: 5rem; font-size: 2rem; color: var(--white); background: var(--primary); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; } .slider-nav button:hover { background: var(--secondary); transform: scale(1.1); } /* Blog Section */ .blog-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 3rem; } .blog-card { background: var(--white); border-radius: 1rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; } .blog-card:hover { transform: translateY(-1rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); } .blog-image { position: relative; height: 25rem; overflow: hidden; } .blog-image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; } .blog-card:hover .blog-image img { transform: scale(1.1); } .blog-date { position: absolute; top: 2rem; right: 2rem; background: var(--primary); color: var(--white); padding: 1rem; text-align: center; border-radius: 0.5rem; z-index: 2; } .blog-date span { display: block; font-size: 1.8rem; font-weight: 700; } .blog-content { padding: 2rem; } .blog-content h3 { font-size: 2rem; color: var(--dark); margin-bottom: 1rem; } .blog-content p { font-size: 1.5rem; color: var(--gray); line-height: 1.6; margin-bottom: 1.5rem; } /* Contact Section */ .contact .contact-container { display: flex; flex-wrap: wrap; gap: 3rem; } .contact .contact-info { flex: 1 1 40rem; padding: 3rem; background: var(--light-gray); border-radius: 1rem; } .contact .contact-info h3 { font-size: 2.5rem; color: var(--dark); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 0.2rem solid var(--primary); font-family: 'Playfair Display', serif; } .info-box { display: flex; align-items: flex-start; margin-bottom: 2rem; } .info-box .icon { height: 5rem; width: 5rem; line-height: 5rem; font-size: 2rem; color: var(--white); background: var(--primary); border-radius: 50%; text-align: center; margin-right: 1.5rem; flex-shrink: 0; } .info-box .detail h4 { font-size: 1.8rem; color: var(--dark); margin-bottom: 0.5rem; } .info-box .detail p { font-size: 1.5rem; color: var(--gray); } .social-links { display: flex; gap: 1.5rem; margin-top: 3rem; } .social-links a { height: 4.5rem; width: 4.5rem; line-height: 4.5rem; font-size: 1.8rem; color: var(--white); background: var(--primary); border-radius: 50%; text-align: center; transition: all 0.3s ease; } .social-links a:hover { background: var(--secondary); transform: translateY(-0.5rem); } .contact .contact-form { flex: 1 1 40rem; padding: 3rem; background: var(--light-gray); border-radius: 1rem; } .contact .contact-form h3 { font-size: 2.5rem; color: var(--dark); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 0.2rem solid var(--primary); font-family: 'Playfair Display', serif; } .contact .contact-form .input-box { margin-bottom: 1.5rem; } .contact .contact-form .input-box input, .contact .contact-form .input-box textarea { width: 100%; padding: 1.5rem; font-size: 1.6rem; color: var(--dark); background: var(--white); border-radius: 0.5rem; resize: none; } .contact .contact-form .input-box textarea { height: 15rem; } /* Newsletter Section */ .newsletter { background: var(--primary); padding: 5rem 0; } .newsletter-content { max-width: 60rem; margin: 0 auto; text-align: center; } .newsletter-content h3 { font-size: 3rem; color: var(--white); margin-bottom: 1.5rem; font-family: 'Playfair Display', serif; } .newsletter-content p { font-size: 1.6rem; color: var(--light); margin-bottom: 2rem; } .newsletter-content form { display: flex; max-width: 50rem; margin: 0 auto; } .newsletter-content form input { width: 100%; padding: 1.5rem; font-size: 1.6rem; color: var(--dark); border-radius: 0.5rem 0 0 0.5rem; } .newsletter-content form button { padding: 0 3rem; background: var(--dark); color: var(--white); font-size: 1.6rem; border-radius: 0 0.5rem 0.5rem 0; cursor: pointer; } .newsletter-content form button:hover { background: var(--secondary); } /* Footer */ .footer { background: var(--dark); padding-top: 7rem; } .footer .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 3rem; } .footer .footer-box h3 { font-size: 2.2rem; color: var(--white); margin-bottom: 2rem; position: relative; font-family: 'Playfair Display', serif; } .footer .footer-box h3::after { content: ''; position: absolute; bottom: -1rem; left: 0; width: 5rem; height: 0.2rem; background: var(--primary); } .footer .footer-box a { display: block; font-size: 1.5rem; color: var(--light-gray); padding: 1rem 0; transition: all 0.3s ease; } .footer .footer-box a:hover { color: var(--primary); transform: translateX(1rem); } .footer .footer-box a i { margin-right: 0.5rem; color: var(--primary); } .footer .footer-box p { font-size: 1.5rem; color: var(--light-gray); margin-bottom: 2rem; } .footer .copyright { text-align: center; padding: 2rem 0; margin-top: 3rem; border-top: 0.1rem solid rgba(255, 255, 255, 0.2); } .footer .copyright p { font-size: 1.6rem; color: var(--light-gray); } .footer .copyright p a { color: var(--primary); } /* Animation Classes */ .slide-left { transform: translateX(-10rem); opacity: 0; transition: all 1s ease; } .slide-right { transform: translateX(10rem); opacity: 0; transition: all 1s ease; } .slide-up { transform: translateY(10rem); opacity: 0; transition: all 1s ease; } .active-animation { transform: translateX(0) translateY(0); opacity: 1; } /* Media Queries */ @media (max-width: 991px) { html { font-size: 55%; } section { padding: 8rem 2rem; } .header { padding: 2rem; } } @media (max-width: 768px) { .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; } .header .icons #menu-btn { display: inline-block; } .home .content h3 { font-size: 4.5rem; } .about .container { flex-direction: column; } .about .image, .about .content { flex: 1 1 100%; } .contact .contact-container { flex-direction: column; } .contact .contact-info, .contact .contact-form { flex: 1 1 100%; } .newsletter-content form { flex-direction: column; } .newsletter-content form input { border-radius: 0.5rem; margin-bottom: 1rem; } .newsletter-content form button { border-radius: 0.5rem; width: 100%; } } @media (max-width: 450px) { html { font-size: 50%; } .heading { font-size: 3.5rem; } .collection-cards, .product-cards, .blog-cards { grid-template-columns: 1fr; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Header Scroll Effect window.addEventListener('scroll', function() { const header = document.querySelector('.header'); if (window.scrollY > 100) { header.style.background = 'rgba(255, 255, 255, 0.95)'; header.style.boxShadow = '0 0.5rem 1rem rgba(0, 0, 0, 0.1)'; header.style.padding = '1.5rem 9%'; } else { header.style.background = 'var(--white)'; header.style.boxShadow = '0 0.5rem 1rem rgba(0, 0, 0, 0.1)'; header.style.padding = '2rem 9%'; } }); // Mobile Menu Toggle const menuBtn = document.querySelector('#menu-btn'); const navbar = document.querySelector('.navbar'); menuBtn.addEventListener('click', function() { navbar.classList.toggle('active'); menuBtn.classList.toggle('fa-times'); }); // Close Menu on Scroll window.addEventListener('scroll', function() { navbar.classList.remove('active'); menuBtn.classList.remove('fa-times'); }); // Scroll Animation function animateOnScroll() { const elements = document.querySelectorAll('.slide-left, .slide-right, .slide-up'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.classList.add('active-animation'); } }); } window.addEventListener('scroll', animateOnScroll); animateOnScroll(); // Run once on page load // Testimonial Slider const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let currentTestimonialSlide = 0; function showTestimonialSlide(n) { testimonialSlides.forEach(slide => { slide.classList.remove('active'); }); currentTestimonialSlide = (n + testimonialSlides.length) % testimonialSlides.length; testimonialSlides[currentTestimonialSlide].classList.add('active'); } prevBtn.addEventListener('click', function() { showTestimonialSlide(currentTestimonialSlide - 1); }); nextBtn.addEventListener('click', function() { showTestimonialSlide(currentTestimonialSlide + 1); }); // Auto Slide let testimonialSlideInterval = setInterval(function() { showTestimonialSlide(currentTestimonialSlide + 1); }, 5000); // Pause on hover const testimonialSliderContainer = document.querySelector('.slider-container'); testimonialSliderContainer.addEventListener('mouseenter', function() { clearInterval(testimonialSlideInterval); }); testimonialSliderContainer.addEventListener('mouseleave', function() { testimonialSlideInterval = setInterval(function() { showTestimonialSlide(currentTestimonialSlide + 1); }, 5000); }); // Smooth Scrolling for Anchor 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' }); } }); }); // Form Submission Handling (prevent default) document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); // Here you would typically add AJAX form submission alert('Form submitted! In a real application, this would send the data to your server.'); this.reset(); }); }); // Product Card Animation const productCards = document.querySelectorAll('.product-card'); productCards.forEach(card => { card.addEventListener('mouseenter', function() { const actions = this.querySelector('.product-actions'); actions.style.bottom = '0'; }); card.addEventListener('mouseleave', function() { const actions = this.querySelector('.product-actions'); actions.style.bottom = '-5rem'; }); }); // Collection Card Animation const collectionCards = document.querySelectorAll('.collection-card'); collectionCards.forEach(card => { card.addEventListener('mouseenter', function() { const overlay = this.querySelector('.collection-overlay'); overlay.style.bottom = '0'; }); card.addEventListener('mouseleave', function() { const overlay = this.querySelector('.collection-overlay'); overlay.style.bottom = '-100%'; }); }); // Create additional sparkles dynamically function createSparkles() { const heroSection = document.querySelector('.home .image'); for (let i = 0; i < 5; i++) { const sparkle = document.createElement('div'); sparkle.className = 'sparkle'; // Random positioning const left = Math.random() * 80 + 10; // 10-90% const top = Math.random() * 80 + 10; // 10-90% const size = Math.random() * 0.5 + 0.5; // 0.5-1rem sparkle.style.left = `${left}%`; sparkle.style.top = `${top}%`; sparkle.style.width = `${size}rem`; sparkle.style.height = `${size}rem`; sparkle.style.animationDelay = `${Math.random() * 2}s`; heroSection.appendChild(sparkle); } } createSparkles(); });
Output Preview
Desktop
Mobile
Fullscreen