Kitchenware 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>BlueCulinary - Premium Kitchenware</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 Section --> <header id="header"> <nav class="navbar"> <a href="#" class="logo"><i class="fas fa-utensils"></i> BlueCulinary</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="#offer">Offers</a></li> </ul> <div class="nav-buttons"> <button class="btn btn-outline"><i class="fas fa-user"></i></button> <button class="btn btn-primary"><i class="fas fa-shopping-cart"></i> Cart</button> </div> <div class="hamburger"> <i class="fas fa-bars"></i> </div> </nav> </header> <!-- Hero Section --> <section class="hero" id="home"> <div class="hero-content"> <h1>Premium Kitchenware for Modern Chefs</h1> <p>Discover our curated collection of high-quality kitchen tools that make cooking a joy. Elevate your culinary experience with BlueCulinary.</p> <div class="hero-buttons"> <button class="btn btn-primary">Shop Now</button> <button class="btn btn-outline">Explore Collections</button> </div> </div> </section> <!-- Featured Categories Section --> <section class="section" id="categories"> <div class="section-title"> <h2>Shop by Category</h2> <p>Browse our wide range of kitchenware categories to find exactly what you need for your culinary adventures.</p> </div> <div class="categories"> <div class="category-card"> <div class="category-img"> <img src="https://images.unsplash.com/photo-1583778176476-4a8b02a64c01?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cookware"> </div> <div class="category-info"> <h3>Cookware</h3> <p>Pots, pans and everything in between</p> </div> </div> <div class="category-card"> <div class="category-img"> <img src="https://images.unsplash.com/photo-1603105037880-880cd4edfb0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Cutlery"> </div> <div class="category-info"> <h3>Cutlery</h3> <p>Sharp knives for precise cutting</p> </div> </div> <div class="category-card"> <div class="category-img"> <img src="https://plus.unsplash.com/premium_photo-1715071976149-6f26134fc7f0?q=80&w=869&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Bakeware"> </div> <div class="category-info"> <h3>Bakeware</h3> <p>Everything for your baking needs</p> </div> </div> <div class="category-card"> <div class="category-img"> <img src="https://images.unsplash.com/photo-1580929753603-10519c6e480a?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Small Appliances"> </div> <div class="category-info"> <h3>Small Appliances</h3> <p>Make cooking easier with our appliances</p> </div> </div> </div> </section> <!-- Featured Products Section --> <section class="section" id="products"> <div class="section-title"> <h2>Featured Products</h2> <p>Our most popular kitchenware items loved by home chefs and professionals alike.</p> </div> <div class="products"> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1592078615290-033ee584e267?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="Chef's Knife"> <span class="product-badge">Bestseller</span> </div> <div class="product-info"> <h3>Professional Chef's Knife</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> <div class="product-price"> <span class="current-price">$89.99</span> <span class="old-price">$129.99</span> </div> <div class="product-actions"> <button class="btn btn-primary add-to-cart"><i class="fas fa-shopping-cart"></i> Add to Cart</button> <button class="wishlist"><i class="far fa-heart"></i></button> </div> </div> </div> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1583778176476-4a8b02a64c01?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Non-Stick Pan"> <span class="product-badge">New</span> </div> <div class="product-info"> <h3>Ceramic Non-Stick Pan</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> <div class="product-price"> <span class="current-price">$49.99</span> <span class="old-price">$69.99</span> </div> <div class="product-actions"> <button class="btn btn-primary add-to-cart"><i class="fas fa-shopping-cart"></i> Add to Cart</button> <button class="wishlist"><i class="far fa-heart"></i></button> </div> </div> </div> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1468&q=80" alt="Mixing Bowls"> <span class="product-badge">Sale</span> </div> <div class="product-info"> <h3>Stainless Steel Mixing Bowls</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>(245)</span> </div> <div class="product-price"> <span class="current-price">$39.99</span> <span class="old-price">$59.99</span> </div> <div class="product-actions"> <button class="btn btn-primary add-to-cart"><i class="fas fa-shopping-cart"></i> Add to Cart</button> <button class="wishlist"><i class="far fa-heart"></i></button> </div> </div> </div> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1580929753603-10519c6e480a?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Food Processor"> </div> <div class="product-info"> <h3>8-Cup Food Processor</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> <div class="product-price"> <span class="current-price">$129.99</span> </div> <div class="product-actions"> <button class="btn btn-primary add-to-cart"><i class="fas fa-shopping-cart"></i> Add to Cart</button> <button class="wishlist"><i class="far fa-heart"></i></button> </div> </div> </div> </div> </section> <!-- Special Offer Section --> <section class="section" id="offer"> <div class="special-offer"> <h2>Summer Sale - Up to 50% Off</h2> <p>Don't miss our biggest sale of the year! Limited time offer on selected items. Shop now before it's too late.</p> <div class="timer"> <div class="timer-box"> <span id="days">00</span> <small>Days</small> </div> <div class="timer-box"> <span id="hours">00</span> <small>Hours</small> </div> <div class="timer-box"> <span id="minutes">00</span> <small>Minutes</small> </div> <div class="timer-box"> <span id="seconds">00</span> <small>Seconds</small> </div> </div> <button class="btn btn-primary">Shop the Sale</button> </div> </section> <!-- Testimonials Section --> <section class="section testimonials" id="testimonials"> <div class="section-title"> <h2>What Our Customers Say</h2> <p>Hear from our satisfied customers about their experience with BlueCulinary products.</p> </div> <div class="testimonial-container"> <div class="testimonial-card"> <div class="testimonial-content"> "The chef's knife is absolutely amazing! It's sharp, well-balanced, and makes food prep so much easier. Worth every penny!" </div> <div class="testimonial-author"> <div class="author-img"> <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Customer"> </div> <div class="author-info"> <h4>Michael Johnson</h4> <p>Professional Chef</p> <div class="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> </div> <div class="testimonial-card"> <div class="testimonial-content"> "I bought the non-stick pan set and I'm in love! Food slides right off and cleanup is a breeze. Highly recommend!" </div> <div class="testimonial-author"> <div class="author-img"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Customer"> </div> <div class="author-info"> <h4>Sarah Williams</h4> <p>Home Cook</p> <div class="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> </div> <div class="testimonial-card"> <div class="testimonial-content"> "The customer service is outstanding and the products are top quality. My kitchen is now fully equipped with BlueCulinary items." </div> <div class="testimonial-author"> <div class="author-img"> <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="Customer"> </div> <div class="author-info"> <h4>David Chen</h4> <p>Food Blogger</p> <div class="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> </div> </div> </section> <!-- Brands Section --> <section class="section"> <div class="section-title"> <h2>Trusted Brands</h2> <p>We partner with the most reputable brands in the kitchenware industry.</p> </div> <div class="brands"> <div class="brand"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Logo_NIKE.svg/1200px-Logo_NIKE.svg.png" alt="Brand 1"> </div> <div class="brand"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2560px-Adidas_Logo.svg.png" alt="Brand 2"> </div> <div class="brand"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/1667px-Apple_logo_black.svg.png" alt="Brand 3"> </div> <div class="brand"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2048px-Google_%22G%22_Logo.svg.png" alt="Brand 4"> </div> <div class="brand"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Wipro_Primary_Logo_Color_RGB.svg/1200px-Wipro_Primary_Logo_Color_RGB.svg.png" alt="Brand 5"> </div> </div> </section> <!-- Newsletter Section --> <section class="section"> <div class="newsletter"> <h2>Subscribe to Our Newsletter</h2> <p>Get the latest updates, exclusive offers, and cooking tips straight to your inbox.</p> <form class="newsletter-form"> <input type="email" placeholder="Enter your email address"> <button type="submit" class="btn btn-primary">Subscribe</button> </form> </div> </section> <!-- Blog Section --> <section class="section" id="blog"> <div class="section-title"> <h2>From Our Blog</h2> <p>Discover cooking tips, kitchen hacks, and product guides from our experts.</p> </div> <div class="blog-container"> <div class="blog-card"> <div class="blog-img"> <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog Post"> </div> <div class="blog-content"> <div class="blog-date"> <i class="far fa-calendar-alt"></i> June 15, 2023 </div> <h3>10 Essential Kitchen Tools Every Home Cook Needs</h3> <p>Discover the must-have tools that will make your cooking experience easier and more enjoyable...</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </div> <div class="blog-card"> <div class="blog-img"> <img src="https://images.unsplash.com/photo-1518779578993-ec3579fee39f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="Blog Post"> </div> <div class="blog-content"> <div class="blog-date"> <i class="far fa-calendar-alt"></i> May 28, 2023 </div> <h3>How to Choose the Perfect Chef's Knife</h3> <p>Learn what to look for when selecting a chef's knife that fits your hand and cooking style...</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </div> <div class="blog-card"> <div class="blog-img"> <img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=853&q=80" alt="Blog Post"> </div> <div class="blog-content"> <div class="blog-date"> <i class="far fa-calendar-alt"></i> May 10, 2023 </div> <h3>Non-Stick vs. Stainless Steel: Which Pan is Right for You?</h3> <p>We compare the pros and cons of different cookware materials to help you make the best choice...</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </div> </div> </section> <!-- Footer Section --> <footer> <div class="footer-container"> <div class="footer-col"> <h3>BlueCulinary</h3> <p>Premium kitchenware for home chefs and professionals. Quality tools for exceptional cooking experiences.</p> <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"></i></a> </div> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul class="footer-links"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Products</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="footer-col"> <h3>Customer Service</h3> <ul class="footer-links"> <li><a href="#">My Account</a></li> <li><a href="#">Order Tracking</a></li> <li><a href="#">Wishlist</a></li> <li><a href="#">Shipping Policy</a></li> <li><a href="#">Returns & Refunds</a></li> </ul> </div> <div class="footer-col"> <h3>Contact Us</h3> <ul class="footer-links"> <li><i class="fas fa-map-marker-alt"></i> 123 Kitchen St, Culinary City</li> <li><i class="fas fa-phone"></i> (123) 456-7890</li> <li><i class="fas fa-envelope"></i> info@blueculinary.com</li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2023 BlueCulinary. All Rights Reserved. Designed with <i class="fas fa-heart" style="color: #ef4444;"></i> by Kitchenware Lovers</p> </div> </footer> </body> </html>
CSS
:root { --primary-blue: #2563eb; --dark-blue: #1e40af; --light-blue: #93c5fd; --white: #ffffff; --light-gray: #f3f4f6; --dark-gray: #6b7280; --black: #111827; --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(--black); overflow-x: hidden; } /* Header Styles */ header { background-color: var(--white); box-shadow: var(--shadow); position: fixed; width: 100%; z-index: 1000; padding: 1rem 2rem; transition: var(--transition); } .header-scrolled { padding: 0.5rem 2rem; background-color: rgba(255, 255, 255, 0.95); } .navbar { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--primary-blue); text-decoration: none; display: flex; align-items: center; } .logo i { margin-right: 0.5rem; } .nav-links { display: flex; list-style: none; gap: 2rem; } .nav-links a { text-decoration: none; color: var(--black); font-weight: 500; transition: var(--transition); position: relative; } .nav-links a:hover { color: var(--primary-blue); } .nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; background: var(--primary-blue); bottom: -4px; left: 0; transition: var(--transition); } .nav-links a:hover::after { width: 100%; } .nav-buttons { display: flex; gap: 1rem; } .btn { padding: 0.6rem 1.2rem; border-radius: 0.5rem; font-weight: 500; cursor: pointer; transition: var(--transition); border: none; color: #ffffff; font-family: 'Poppins', sans-serif; } .btn-outline { background: transparent; color: #ffffff; border: 1px solid var(--primary-blue); color: var(--primary-blue); } .btn-outline:hover { background: var(--primary-blue); color: var(--white); } .btn-primary { background: var(--primary-blue); color: var(--white); } .btn-primary:hover { background: var(--dark-blue); } .hamburger { display: none; cursor: pointer; font-size: 1.5rem; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(rgba(37, 100, 235, 0.123), rgba(37, 100, 235, 0.468)), url('https://plus.unsplash.com/premium_photo-1715071976149-6f26134fc7f0?q=80&w=869&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-size: cover; background-position: center; display: flex; align-items: center; padding: 0 2rem; color: var(--white); } .hero-content { max-width: 1200px; margin: 0 auto; width: 100%; animation: fadeInUp 1s ease; margin-top: 200PX; } .hero h1 { font-size: 3.5rem; margin-bottom: 1rem; line-height: 1.2; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; opacity: 0.9; } .hero-buttons { display: flex; gap: 1rem; color: #ffffff; } /* Featured Categories */ .section { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; } .section-title { text-align: center; margin-bottom: 3rem; } .section-title h2 { font-size: 2.5rem; color: var(--primary-blue); margin-bottom: 1rem; } .section-title p { color: var(--dark-gray); max-width: 700px; margin: 0 auto; } .categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .category-card { background: var(--white); border-radius: 0.5rem; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); cursor: pointer; animation: fadeIn 0.5s ease; } .category-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .category-img { height: 200px; overflow: hidden; } .category-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .category-card:hover .category-img img { transform: scale(1.1); } .category-info { padding: 1.5rem; text-align: center; } .category-info h3 { margin-bottom: 0.5rem; color: var(--black); } .category-info p { color: var(--dark-gray); font-size: 0.9rem; } /* Featured Products */ .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .product-card { background: var(--white); border-radius: 0.5rem; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); cursor: pointer; animation: fadeIn 0.5s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .product-img { height: 250px; overflow: hidden; position: relative; } .product-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .product-card:hover .product-img img { transform: scale(1.05); } .product-badge { position: absolute; top: 1rem; left: 1rem; background: var(--primary-blue); color: var(--white); padding: 0.3rem 0.8rem; border-radius: 2rem; font-size: 0.8rem; font-weight: 500; } .product-info { padding: 1.5rem; } .product-info h3 { margin-bottom: 0.5rem; color: var(--black); } .product-rating { color: #f59e0b; margin-bottom: 0.5rem; font-size: 0.9rem; } .product-price { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .current-price { font-size: 1.2rem; font-weight: 600; color: var(--primary-blue); } .old-price { font-size: 1rem; color: var(--dark-gray); text-decoration: line-through; } .product-actions { display: flex; justify-content: space-between; } .add-to-cart { width: 100%; display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .wishlist { background: transparent; border: none; font-size: 1.2rem; color: var(--dark-gray); cursor: pointer; transition: var(--transition); } .wishlist:hover { color: #ef4444; } /* Special Offer */ .special-offer { background: linear-gradient(rgba(37, 99, 235, 0.9), rgba(37, 99, 235, 0.9)), url('https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1468&q=80'); background-size: cover; background-position: center; color: var(--white); border-radius: 1rem; padding: 4rem 2rem; text-align: center; animation: pulse 2s infinite; } .special-offer h2 { font-size: 2.5rem; margin-bottom: 1rem; } .special-offer p { font-size: 1.2rem; margin-bottom: 2rem; max-width: 700px; margin-left: auto; margin-right: auto; } .timer { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; } .timer-box { background: rgba(255, 255, 255, 0.2); padding: 1rem; border-radius: 0.5rem; min-width: 80px; } .timer-box span { display: block; font-size: 2rem; font-weight: 600; } .timer-box small { font-size: 0.8rem; opacity: 0.8; } /* Testimonials */ .testimonials { background: var(--light-gray); } .testimonial-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .testimonial-card { background: var(--white); padding: 2rem; border-radius: 0.5rem; box-shadow: var(--shadow); transition: var(--transition); } .testimonial-card:hover { transform: translateY(-10px); } .testimonial-content { margin-bottom: 1.5rem; font-style: italic; color: var(--dark-gray); } .testimonial-author { display: flex; align-items: center; gap: 1rem; } .author-img { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; } .author-img img { width: 100%; height: 100%; object-fit: cover; } .author-info h4 { color: var(--black); margin-bottom: 0.2rem; } .author-info p { color: var(--dark-gray); font-size: 0.9rem; } .rating { color: #f59e0b; margin-top: 0.3rem; } /* Brands */ .brands { display: flex; justify-content: center; flex-wrap: wrap; gap: 3rem; align-items: center; } .brand { filter: grayscale(100%); opacity: 0.6; transition: var(--transition); cursor: pointer; } .brand:hover { filter: grayscale(0%); opacity: 1; } .brand img { height: 40px; object-fit: contain; } /* Newsletter */ .newsletter { background: var(--primary-blue); color: var(--white); text-align: center; padding: 4rem 2rem; border-radius: 1rem; } .newsletter h2 { font-size: 2rem; margin-bottom: 1rem; } .newsletter p { margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .newsletter-form { display: flex; max-width: 500px; margin: 0 auto; } .newsletter-form input { flex: 1; padding: 0.8rem 1rem; border: none; border-radius: 0.5rem 0 0 0.5rem; font-family: 'Poppins', sans-serif; outline: none; } .newsletter-form button { padding: 0 1.5rem; border: none; background: var(--black); color: var(--white); border-radius: 0 0.5rem 0.5rem 0; cursor: pointer; transition: var(--transition); } .newsletter-form button:hover { background: #000; } /* Blog */ .blog-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .blog-card { background: var(--white); border-radius: 0.5rem; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); } .blog-card:hover { transform: translateY(-10px); } .blog-img { height: 200px; overflow: hidden; } .blog-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .blog-card:hover .blog-img img { transform: scale(1.1); } .blog-content { padding: 1.5rem; } .blog-date { color: var(--primary-blue); font-size: 0.9rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .blog-content h3 { margin-bottom: 0.8rem; font-size: 1.2rem; } .blog-content p { color: var(--dark-gray); font-size: 0.9rem; margin-bottom: 1.2rem; } .read-more { color: var(--primary-blue); text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 0.3rem; transition: var(--transition); } .read-more:hover { color: var(--dark-blue); gap: 0.5rem; } /* Footer */ footer { background: var(--black); color: var(--white); padding: 4rem 2rem 2rem; } .footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; } .footer-col h3 { font-size: 1.2rem; margin-bottom: 1.5rem; position: relative; } .footer-col h3::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 50px; height: 2px; background: var(--primary-blue); } .footer-col p { color: #9ca3af; font-size: 0.9rem; margin-bottom: 1rem; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 0.8rem; } .footer-links a { color: #9ca3af; text-decoration: none; transition: var(--transition); font-size: 0.9rem; } .footer-links a:hover { color: var(--white); padding-left: 5px; } .social-links { display: flex; gap: 1rem; margin-top: 1rem; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--white); transition: var(--transition); } .social-links a:hover { background: var(--primary-blue); transform: translateY(-5px); } .footer-bottom { max-width: 1200px; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; color: #9ca3af; font-size: 0.9rem; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } /* Responsive Styles */ @media (max-width: 992px) { .hero h1 { font-size: 3rem; } } @media (max-width: 768px) { .hamburger { display: block; } .nav-links { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background: var(--white); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; transition: var(--transition); z-index: 999; } .nav-links.active { left: 0; } .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1rem; } .hero-buttons { flex-direction: column; } .btn { width: 100%; text-align: center; } .newsletter-form { flex-direction: column; } .newsletter-form input { border-radius: 0.5rem; margin-bottom: 1rem; } .newsletter-form button { border-radius: 0.5rem; padding: 0.8rem; } .timer { flex-wrap: wrap; } } @media (max-width: 576px) { .hero h1 { font-size: 2rem; } .section-title h2 { font-size: 2rem; } .special-offer h2 { font-size: 2rem; } .timer-box { min-width: 60px; } .timer-box span { font-size: 1.5rem; } }
JavaScript
// Mobile Menu Toggle const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); const header = document.getElementById('header'); hamburger.addEventListener('click', () => { navLinks.classList.toggle('active'); hamburger.classList.toggle('active'); }); // Close mobile menu when clicking a link document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('active'); hamburger.classList.remove('active'); }); }); // Header scroll effect window.addEventListener('scroll', () => { if (window.scrollY > 50) { header.classList.add('header-scrolled'); } else { header.classList.remove('header-scrolled'); } }); // Countdown Timer function updateTimer() { const now = new Date(); const endDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000); // 7 days from now const total = endDate - now; const days = Math.floor(total / (1000 * 60 * 60 * 24)); const hours = Math.floor((total / (1000 * 60 * 60)) % 24); const minutes = Math.floor((total / (1000 * 60)) % 60); const seconds = Math.floor((total / 1000) % 60); 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'); } setInterval(updateTimer, 1000); updateTimer(); // 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 const animateOnScroll = () => { const elements = document.querySelectorAll('.category-card, .product-card, .testimonial-card, .blog-card'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.style.animation = 'fadeInUp 0.5s ease forwards'; } }); }; window.addEventListener('scroll', animateOnScroll); window.addEventListener('load', animateOnScroll);
Output Preview
Desktop
Mobile
Fullscreen