Modern Gift 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>Bluebell Gifts - Modern Gift Shop</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <!-- Header --> <header id="header"> <div class="container"> <nav class="navbar"> <a href="#" class="logo">Bluebell<span>Gifts</span></a> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#categories">Categories</a></li> <li><a href="#products">Products</a></li> <li><a href="#gift-ideas">Gift Ideas</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="cart-icon"> <i class="fas fa-shopping-cart"></i> <span class="cart-count">3</span> </div> <div class="mobile-menu-btn"> <i class="fas fa-bars"></i> </div> </nav> </div> </header> <!-- Hero Section --> <section class="hero" id="home"> <div class="container"> <div class="hero-content"> <div class="hero-text"> <h1 class="hero-title">Find the Perfect Gift for Every Occasion</h1> <p class="hero-subtitle">Discover unique and thoughtful gifts that will make your loved ones smile. Handpicked items for every personality and budget.</p> <div class="hero-buttons"> <a href="#products" class="btn">Shop Now</a> <a href="#gift-ideas" class="btn btn-outline">Gift Ideas</a> </div> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Gift boxes" loading="lazy"> <p style="text-align: right; font-size: 0.8rem; margin-top: 5px;">Photo by <a href="https://unsplash.com/@sharonmccutcheon" target="_blank" style="color: inherit;">Sharon McCutcheon</a> on Unsplash</p> </div> </div> </div> </section> <!-- Featured Categories --> <section class="section categories" id="categories"> <div class="container"> <h2 class="section-title">Shop by Category</h2> <p class="section-subtitle">Browse our carefully curated gift categories to find the perfect present</p> <div class="categories-container"> <div class="category-card"> <img src="https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1133&q=80" alt="Birthday gifts" class="category-img" loading="lazy"> <div class="category-info"> <h3 class="category-title">Birthday Gifts</h3> <p class="category-count">45+ items</p> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@brookelark" target="_blank" style="color: inherit;">Brooke Lark</a> on Unsplash</p> </div> <div class="category-card"> <img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Anniversary gifts" class="category-img" loading="lazy"> <div class="category-info"> <h3 class="category-title">Anniversary</h3> <p class="category-count">32+ items</p> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@kellysikkema" target="_blank" style="color: inherit;">Kelly Sikkema</a> on Unsplash</p> </div> <div class="category-card"> <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Romantic gifts" class="category-img" loading="lazy"> <div class="category-info"> <h3 class="category-title">Romantic</h3> <p class="category-count">28+ items</p> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@brookelark" target="_blank" style="color: inherit;">Brooke Lark</a> on Unsplash</p> </div> <div class="category-card"> <img src="https://images.unsplash.com/photo-1572177812156-58036aae439c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Corporate gifts" class="category-img" loading="lazy"> <div class="category-info"> <h3 class="category-title">Corporate</h3> <p class="category-count">36+ items</p> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@proft" target="_blank" style="color: inherit;">Taras Makarenko</a> on Unsplash</p> </div> </div> </div> </section> <!-- Popular Gifts --> <section class="section" id="products"> <div class="container"> <h2 class="section-title">Popular Gifts</h2> <p class="section-subtitle">Our customers' favorite gift choices this season</p> <div class="products-container"> <div class="product-card"> <img src="https://images.unsplash.com/photo-1593998066526-65fcab3021a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Personalized jewelry" class="product-img" loading="lazy"> <div class="product-info"> <h3 class="product-title">Personalized Name Necklace</h3> <div class="product-rating"> <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> <span>(128)</span> </div> <p class="product-price">$49.99</p> <div class="product-actions"> <button class="add-to-cart btn">Add to Cart</button> <button class="wishlist-btn"><i class="far fa-heart"></i></button> </div> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@brina_blum" target="_blank" style="color: inherit;">Brina Blum</a> on Unsplash</p> </div> <div class="product-card"> <img src="https://images.unsplash.com/photo-1592078615290-033ee584e267?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1308&q=80" alt="Wireless headphones" class="product-img" loading="lazy"> <div class="product-info"> <h3 class="product-title">Premium Wireless Headphones</h3> <div class="product-rating"> <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> <span>(96)</span> </div> <p class="product-price">$89.99</p> <div class="product-actions"> <button class="add-to-cart btn">Add to Cart</button> <button class="wishlist-btn"><i class="far fa-heart"></i></button> </div> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@soundtrap" target="_blank" style="color: inherit;">Soundtrap</a> on Unsplash</p> </div> <div class="product-card"> <img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Custom photo frame" class="product-img" loading="lazy"> <div class="product-info"> <h3 class="product-title">Custom Photo Collage Frame</h3> <div class="product-rating"> <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> <span>(215)</span> </div> <p class="product-price">$34.99</p> <div class="product-actions"> <button class="add-to-cart btn">Add to Cart</button> <button class="wishlist-btn"><i class="far fa-heart"></i></button> </div> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@brookelark" target="_blank" style="color: inherit;">Brooke Lark</a> on Unsplash</p> </div> <div class="product-card"> <img src="https://images.unsplash.com/photo-1596704017256-8eef5a1a4d0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Gourmet gift basket" class="product-img" loading="lazy"> <div class="product-info"> <h3 class="product-title">Gourmet Gift Basket</h3> <div class="product-rating"> <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> <span>(178)</span> </div> <p class="product-price">$59.99</p> <div class="product-actions"> <button class="add-to-cart btn">Add to Cart</button> <button class="wishlist-btn"><i class="far fa-heart"></i></button> </div> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@shootdelicious" target="_blank" style="color: inherit;">Eiliv Aceron</a> on Unsplash</p> </div> </div> </div> </section> <!-- Special Offer --> <section class="section special-offer"> <div class="container"> <div class="offer-content"> <div class="offer-image"> <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Special offer" loading="lazy"> <p style="text-align: right; font-size: 0.8rem; margin-top: 5px; color: rgba(255,255,255,0.7);">Photo by <a href="https://unsplash.com/@sharonmccutcheon" target="_blank" style="color: inherit;">Sharon McCutcheon</a> on Unsplash</p> </div> <div class="offer-text"> <h2 class="offer-title">Summer Sale - 30% Off</h2> <p class="offer-description">Don't miss our biggest sale of the season! Get 30% off on all gift items for a limited time only. Perfect time to stock up on gifts for upcoming occasions.</p> <div class="offer-timer"> <div class="timer-box"> <div class="timer-value" id="days">03</div> <div class="timer-label">Days</div> </div> <div class="timer-box"> <div class="timer-value" id="hours">12</div> <div class="timer-label">Hours</div> </div> <div class="timer-box"> <div class="timer-value" id="minutes">45</div> <div class="timer-label">Minutes</div> </div> <div class="timer-box"> <div class="timer-value" id="seconds">30</div> <div class="timer-label">Seconds</div> </div> </div> <a href="#products" class="btn">Shop Now</a> </div> </div> </div> </section> <!-- Testimonials --> <section class="section testimonials"> <div class="container"> <h2 class="section-title">What Our Customers Say</h2> <p class="section-subtitle">Don't just take our word for it - hear from our happy customers</p> <div class="testimonials-container"> <div class="testimonial-card"> <div class="testimonial-text"> <p>I was struggling to find a unique gift for my wife's birthday, but Bluebell Gifts had the perfect personalized necklace. She absolutely loved it and wears it every day!</p> </div> <div class="testimonial-author"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Michael Johnson" class="author-img" loading="lazy"> <div class="author-info"> <h4>Michael Johnson</h4> <p>Verified Buyer</p> <div class="testimonial-rating"> <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 style="text-align: right; font-size: 0.7rem; margin-top: 5px;">Photo by <a href="https://unsplash.com/@michaeldam" target="_blank" style="color: inherit;">Michael Dam</a> on Unsplash</p> </div> <div class="testimonial-card"> <div class="testimonial-text"> <p>The corporate gift baskets were a huge hit with our clients. The packaging was elegant and the contents were high quality. Will definitely order again for our next event.</p> </div> <div class="testimonial-author"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Sarah Williams" class="author-img" loading="lazy"> <div class="author-info"> <h4>Sarah Williams</h4> <p>Marketing Director</p> <div class="testimonial-rating"> <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 style="text-align: right; font-size: 0.7rem; margin-top: 5px;">Photo by <a href="https://unsplash.com/@brookecagle" target="_blank" style="color: inherit;">Brooke Cagle</a> on Unsplash</p> </div> <div class="testimonial-card"> <div class="testimonial-text"> <p>I ordered the custom photo frame as an anniversary gift and it arrived right on time. The quality exceeded my expectations and my partner was moved to tears. Thank you!</p> </div> <div class="testimonial-author"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Jessica Chen" class="author-img" loading="lazy"> <div class="author-info"> <h4>Jessica Chen</h4> <p>Verified Buyer</p> <div class="testimonial-rating"> <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 style="text-align: right; font-size: 0.7rem; margin-top: 5px;">Photo by <a href="https://unsplash.com/@hian_oliveira" target="_blank" style="color: inherit;">Hian Oliveira</a> on Unsplash</p> </div> </div> </div> </section> <!-- Gift Ideas --> <section class="section" id="gift-ideas"> <div class="container"> <h2 class="section-title">Gift Ideas by Recipient</h2> <p class="section-subtitle">Not sure what to get? We've got suggestions for everyone in your life</p> <div class="gift-ideas-container"> <div class="gift-idea-card"> <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1180&q=80" alt="Gifts for him" class="gift-idea-img" loading="lazy"> <div class="gift-idea-info"> <h3 class="gift-idea-title">For Him</h3> <p class="gift-idea-price">Starting at $29.99</p> <a href="#" class="btn">View Collection</a> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@jontyson" target="_blank" style="color: inherit;">Jon Tyson</a> on Unsplash</p> </div> <div class="gift-idea-card"> <img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Gifts for her" class="gift-idea-img" loading="lazy"> <div class="gift-idea-info"> <h3 class="gift-idea-title">For Her</h3> <p class="gift-idea-price">Starting at $24.99</p> <a href="#" class="btn">View Collection</a> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@brookecagle" target="_blank" style="color: inherit;">Brooke Cagle</a> on Unsplash</p> </div> <div class="gift-idea-card"> <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Gifts for kids" class="gift-idea-img" loading="lazy"> <div class="gift-idea-info"> <h3 class="gift-idea-title">For Kids</h3> <p class="gift-idea-price">Starting at $19.99</p> <a href="#" class="btn">View Collection</a> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@jeshoots" target="_blank" style="color: inherit;">Jeshooots</a> on Unsplash</p> </div> <div class="gift-idea-card"> <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Gifts for coworkers" class="gift-idea-img" loading="lazy"> <div class="gift-idea-info"> <h3 class="gift-idea-title">For Coworkers</h3> <p class="gift-idea-price">Starting at $14.99</p> <a href="#" class="btn">View Collection</a> </div> <p style="text-align: center; font-size: 0.8rem; padding: 0 20px 10px;">Photo by <a href="https://unsplash.com/@christinhumephoto" target="_blank" style="color: inherit;">Christin Hume</a> on Unsplash</p> </div> </div> </div> </section> <!-- Newsletter --> <section class="section newsletter"> <div class="container"> <div class="newsletter-container"> <h2 class="section-title">Join Our Newsletter</h2> <p class="section-subtitle">Subscribe to get exclusive offers, gift ideas, and early access to sales</p> <form class="newsletter-form"> <input type="email" placeholder="Your email address" class="newsletter-input" required> <button type="submit" class="newsletter-btn btn">Subscribe</button> </form> </div> </div> </section> <!-- About Us --> <section class="section" id="about"> <div class="container"> <h2 class="section-title">Our Story</h2> <p class="section-subtitle">Why we do what we do</p> <div class="about-content"> <div class="about-text"> <p>Founded in 2015, Bluebell Gifts started as a small boutique with a simple mission: to help people find meaningful gifts that create lasting memories. What began as a passion project has grown into a beloved destination for thoughtful gift-givers.</p> <p>We carefully curate our collection, working with artisans and ethical suppliers to bring you unique, high-quality gifts for every occasion and budget. Our team of gift experts is always here to help you find the perfect present.</p> <div class="about-features"> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-gift"></i> </div> <h4 class="feature-title">Thoughtful Selection</h4> <p>Every item is chosen for its quality and meaning</p> </div> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-truck"></i> </div> <h4 class="feature-title">Fast Shipping</h4> <p>Free shipping on orders over $50</p> </div> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-heart"></i> </div> <h4 class="feature-title">Gift Wrapping</h4> <p>Beautiful wrapping included at no extra cost</p> </div> </div> </div> <div class="about-image"> <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Our store" loading="lazy"> <p style="text-align: right; font-size: 0.8rem; margin-top: 5px;">Photo by <a href="https://unsplash.com/@lazycreekimages" target="_blank" style="color: inherit;">Lazy Creek</a> on Unsplash</p> </div> </div> </div> </section> <!-- Footer --> <footer id="contact"> <div class="container"> <div class="footer-container"> <div class="footer-about"> <a href="#" class="footer-logo">Bluebell<span>Gifts</span></a> <p>Making gift-giving easy and meaningful since 2015. We help you find the perfect present for every occasion.</p> <div class="social-links"> <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a> <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> <a href="#" class="social-link"><i class="fab fa-pinterest-p"></i></a> </div> </div> <div class="footer-links"> <h3>Shop</h3> <ul> <li><a href="#categories">All Categories</a></li> <li><a href="#products">New Arrivals</a></li> <li><a href="#gift-ideas">Gift Ideas</a></li> <li><a href="#">Best Sellers</a></li> <li><a href="#">Sale Items</a></li> </ul> </div> <div class="footer-links"> <h3>Customer Service</h3> <ul> <li><a href="#">Contact Us</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Shipping & Returns</a></li> <li><a href="#">Track Order</a></li> <li><a href="#">Gift Cards</a></li> </ul> </div> <div class="footer-contact"> <h3>Contact</h3> <p><i class="fas fa-map-marker-alt"></i> 123 Gift Street, Suite 100, San Francisco, CA 94110</p> <p><i class="fas fa-phone"></i> (555) 123-4567</p> <p><i class="fas fa-envelope"></i> hello@bluebellgifts.com</p> <p><i class="fas fa-clock"></i> Mon-Fri: 9AM-6PM, Sat: 10AM-4PM</p> </div> </div> <div class="footer-bottom"> <p>© 2023 Bluebell Gifts. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p> </div> </div> </footer> </body> </html>
CSS
:root { --primary-color: #2563eb; --primary-light: #3b82f6; --primary-dark: #1d4ed8; --secondary-color: #f8fafc; --text-color: #1e293b; --light-text: #64748b; --white: #ffffff; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; color: var(--text-color); line-height: 1.6; overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; height: auto; display: block; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .btn { display: inline-block; padding: 12px 24px; background-color: var(--primary-color); color: var(--white); border-radius: 50px; font-weight: 500; transition: var(--transition); border: none; cursor: pointer; font-size: 16px; } .btn:hover { background-color: var(--primary-dark); transform: translateY(-3px); box-shadow: var(--shadow); } .btn-outline { background-color: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); } .btn-outline:hover { background-color: var(--primary-color); color: var(--white); } .section { padding: 80px 0; } .section-title { font-size: 2.5rem; margin-bottom: 20px; color: var(--primary-dark); text-align: center; position: relative; } .section-title::after { content: ''; display: block; width: 80px; height: 4px; background-color: var(--primary-color); margin: 15px auto 30px; border-radius: 2px; } .section-subtitle { text-align: center; color: var(--light-text); max-width: 700px; margin: 0 auto 50px; font-size: 1.1rem; } /* Header */ header { background-color: var(--white); box-shadow: var(--shadow); position: fixed; width: 100%; top: 0; z-index: 1000; transition: var(--transition); } .header-scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--primary-color); } .logo span { color: var(--text-color); } .nav-links { display: flex; gap: 30px; } .nav-links a { font-weight: 500; transition: var(--transition); position: relative; } .nav-links a:hover { color: var(--primary-color); } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .nav-links a:hover::after { width: 100%; } .mobile-menu-btn { display: none; font-size: 1.5rem; cursor: pointer; } .cart-icon { position: relative; margin-left: 20px; } .cart-count { position: absolute; top: -10px; right: -10px; background-color: var(--primary-color); color: var(--white); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; } /* Hero Section */ .hero { background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%); padding: 180px 0 100px; position: relative; overflow: hidden; } .hero-content { display: flex; align-items: center; gap: 50px; } .hero-text { flex: 1; animation: fadeInLeft 1s ease; } .hero-title { font-size: 3.5rem; margin-bottom: 20px; color: var(--primary-dark); line-height: 1.2; } .hero-subtitle { font-size: 1.2rem; color: var(--light-text); margin-bottom: 30px; } .hero-buttons { display: flex; gap: 20px; } .hero-image { flex: 1; animation: fadeInRight 1s ease; } .hero-image img { border-radius: 20px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Featured Categories */ .categories { background-color: var(--secondary-color); } .categories-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .category-card { background-color: var(--white); border-radius: 15px; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); text-align: center; animation: fadeInUp 0.5s ease; } .category-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .category-img { height: 200px; width: 100%; object-fit: cover; } .category-info { padding: 20px; } .category-title { font-size: 1.3rem; margin-bottom: 10px; color: var(--primary-dark); } .category-count { color: var(--light-text); font-size: 0.9rem; } /* Popular Gifts */ .products-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .product-card { background-color: var(--white); border-radius: 15px; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); animation: fadeInUp 0.5s ease; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .product-img { height: 250px; width: 100%; object-fit: cover; } .product-info { padding: 20px; } .product-title { font-size: 1.2rem; margin-bottom: 10px; } .product-price { font-weight: 700; color: var(--primary-color); font-size: 1.3rem; margin-bottom: 15px; } .product-rating { color: #f59e0b; margin-bottom: 15px; } .product-actions { display: flex; justify-content: space-between; } .add-to-cart { padding: 8px 15px; font-size: 14px; } .wishlist-btn { background: none; border: none; color: var(--light-text); font-size: 1.2rem; cursor: pointer; transition: var(--transition); } .wishlist-btn:hover { color: #ef4444; } /* Special Offer */ .special-offer { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); color: var(--white); position: relative; overflow: hidden; } .special-offer::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; } .special-offer::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 300px; height: 300px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; } .offer-content { display: flex; align-items: center; gap: 50px; position: relative; z-index: 1; } .offer-image { flex: 1; animation: pulse 2s infinite; } .offer-image img { border-radius: 20px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .offer-text { flex: 1; } .offer-title { font-size: 2.5rem; margin-bottom: 20px; } .offer-description { margin-bottom: 30px; opacity: 0.9; } .offer-timer { display: flex; gap: 15px; margin-bottom: 30px; } .timer-box { background-color: rgba(255, 255, 255, 0.2); padding: 15px; border-radius: 10px; text-align: center; min-width: 80px; } .timer-value { font-size: 2rem; font-weight: 700; } .timer-label { font-size: 0.8rem; opacity: 0.8; } /* Testimonials */ .testimonials { background-color: var(--secondary-color); } .testimonials-container { display: flex; gap: 30px; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory; } .testimonial-card { min-width: 350px; background-color: var(--white); border-radius: 15px; padding: 30px; box-shadow: var(--shadow); scroll-snap-align: start; animation: fadeInUp 0.5s ease; } .testimonial-text { font-style: italic; margin-bottom: 20px; position: relative; } .testimonial-text::before { content: '"'; font-size: 4rem; position: absolute; top: -20px; left: -15px; color: var(--primary-light); opacity: 0.2; font-family: serif; } .testimonial-author { display: flex; align-items: center; gap: 15px; } .author-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .author-info h4 { font-weight: 600; margin-bottom: 5px; } .author-info p { color: var(--light-text); font-size: 0.9rem; } .testimonial-rating { color: #f59e0b; margin-top: 5px; } /* Gift Ideas */ .gift-ideas-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .gift-idea-card { background-color: var(--white); border-radius: 15px; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); animation: fadeInUp 0.5s ease; } .gift-idea-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .gift-idea-img { height: 200px; width: 100%; object-fit: cover; } .gift-idea-info { padding: 20px; } .gift-idea-title { font-size: 1.2rem; margin-bottom: 10px; } .gift-idea-price { font-weight: 700; color: var(--primary-color); margin-bottom: 15px; } /* Newsletter */ .newsletter { background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%); } .newsletter-container { max-width: 600px; margin: 0 auto; text-align: center; } .newsletter-form { display: flex; gap: 10px; margin-top: 30px; } .newsletter-input { flex: 1; padding: 15px 20px; border: 2px solid #e2e8f0; border-radius: 50px; font-family: 'Poppins', sans-serif; font-size: 16px; outline: none; transition: var(--transition); } .newsletter-input:focus { border-color: var(--primary-color); } .newsletter-btn { padding: 15px 30px; } /* About Us */ .about-content { display: flex; align-items: center; gap: 50px; } .about-text { flex: 1; } .about-image { flex: 1; } .about-image img { border-radius: 20px; box-shadow: var(--shadow); } .about-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 40px; } .feature-item { text-align: center; padding: 20px; border-radius: 10px; background-color: var(--secondary-color); transition: var(--transition); } .feature-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .feature-icon { font-size: 2rem; color: var(--primary-color); margin-bottom: 15px; } .feature-title { font-weight: 600; margin-bottom: 10px; } /* Footer */ footer { background-color: var(--primary-dark); color: var(--white); padding: 80px 0 30px; } .footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 50px; } .footer-logo { font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; display: block; } .footer-logo span { color: var(--white); } .footer-about p { opacity: 0.8; margin-bottom: 20px; } .social-links { display: flex; gap: 15px; } .social-link { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .social-link:hover { background-color: var(--primary-light); transform: translateY(-3px); } .footer-links h3 { font-size: 1.2rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-links h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: var(--primary-light); } .footer-links ul li { margin-bottom: 10px; } .footer-links ul li a { opacity: 0.8; transition: var(--transition); } .footer-links ul li a:hover { opacity: 1; color: var(--white); padding-left: 5px; } .footer-contact p { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; opacity: 0.8; } .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); opacity: 0.7; font-size: 0.9rem; } /* Animations */ @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Responsive Styles */ @media (max-width: 992px) { .hero-title { font-size: 2.8rem; } .offer-title { font-size: 2rem; } .about-content { flex-direction: column; } .offer-content { flex-direction: column; } .offer-text { text-align: center; } .offer-timer { justify-content: center; } } @media (max-width: 768px) { .nav-links { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: var(--white); flex-direction: column; align-items: center; justify-content: center; gap: 30px; transition: var(--transition); z-index: 999; } .nav-links.active { left: 0; } .mobile-menu-btn { display: block; } .hero-content { flex-direction: column; text-align: center; } .hero-buttons { justify-content: center; } .section-title { font-size: 2rem; } .newsletter-form { flex-direction: column; } } @media (max-width: 576px) { .hero-title { font-size: 2.2rem; } .hero-subtitle { font-size: 1rem; } .btn { padding: 10px 20px; } .timer-box { min-width: 60px; padding: 10px; } .timer-value { font-size: 1.5rem; } .testimonial-card { min-width: 280px; } }
JavaScript
// Mobile Menu Toggle const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navLinks = document.querySelector('.nav-links'); mobileMenuBtn.addEventListener('click', () => { navLinks.classList.toggle('active'); mobileMenuBtn.innerHTML = navLinks.classList.contains('active') ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>'; }); // Close mobile menu when clicking on a link document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('active'); mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>'; }); }); // Header scroll effect window.addEventListener('scroll', () => { const header = document.getElementById('header'); if (window.scrollY > 50) { header.classList.add('header-scrolled'); } else { header.classList.remove('header-scrolled'); } }); // Countdown timer function updateCountdown() { const now = new Date(); const endDate = new Date(now.getTime() + 3 * 24 * 60 * 60 * 1000); // 3 days from now const diff = endDate - now; const days = Math.floor(diff / (1000 * 60 * 60 * 24)); const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((diff % (1000 * 60)) / 1000); document.getElementById('days').textContent = days.toString().padStart(2, '0'); document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); } // Update countdown every second setInterval(updateCountdown, 1000); updateCountdown(); // Initial call // 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' }); } }); }); // Animation on scroll function animateOnScroll() { const elements = document.querySelectorAll('.category-card, .product-card, .testimonial-card, .gift-idea-card'); 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 document.querySelectorAll('.category-card, .product-card, .testimonial-card, .gift-idea-card').forEach(element => { element.style.opacity = '0'; element.style.transform = 'translateY(30px)'; element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; }); window.addEventListener('scroll', animateOnScroll); window.addEventListener('load', animateOnScroll);
Output Preview
Desktop
Mobile
Fullscreen