Footwear 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>StepUp - Premium Footwear Collection</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"> <div class="logo"> <h1>Step<span>Up</span></h1> </div> <nav class="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#collections">Collections</a></li> <li><a href="#featured">Featured</a></li> <li><a href="#categories">Categories</a></li> <li><a href="#sale">Sale</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <div class="header-icons"> <a href="#"><i class="fas fa-search"></i></a> <a href="#"><i class="fas fa-user"></i></a> <a href="#"><i class="fas fa-shopping-cart"></i></a> <div class="mobile-menu-btn"> <i class="fas fa-bars"></i> </div> </div> </div> </header> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="hero-content"> <span class="hero-subtitle">New Collection 2023</span> <h1>Step Into Comfort & Style</h1> <p>Discover our premium footwear collection designed for every occasion and lifestyle.</p> <div class="hero-buttons"> <a href="#collections" class="btn btn-primary">Shop Now</a> <a href="#sale" class="btn btn-secondary">View Sale</a> </div> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Premium Shoes"> </div> </div> </section> <!-- Collections Section --> <section id="collections" class="collections section-padding"> <div class="container"> <div class="section-title"> <h2>Our <span>Collections</span></h2> <p>Explore our latest footwear collections</p> </div> <div class="collections-grid"> <div class="collection-card"> <div class="collection-image"> <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1365&q=80" alt="Running Shoes"> <div class="collection-overlay"> <h3>Running</h3> <a href="#" class="btn btn-primary">View Collection</a> </div> </div> </div> <div class="collection-card"> <div class="collection-image"> <img src="https://images.unsplash.com/photo-1460353581641-37baddab0fa2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Casual Shoes"> <div class="collection-overlay"> <h3>Casual</h3> <a href="#" class="btn btn-primary">View Collection</a> </div> </div> </div> <div class="collection-card"> <div class="collection-image"> <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80" alt="Formal Shoes"> <div class="collection-overlay"> <h3>Formal</h3> <a href="#" class="btn btn-primary">View Collection</a> </div> </div> </div> </div> </div> </section> <!-- Featured Products Section --> <section id="featured" class="featured section-padding"> <div class="container"> <div class="section-title"> <h2>Featured <span>Products</span></h2> <p>Our best selling shoes this season</p> </div> <div class="featured-products"> <div class="product-card"> <div class="product-badge">Bestseller</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1325&q=80" alt="AirMax Pro"> <div class="product-actions"> <button class="action-btn"><i class="far fa-heart"></i></button> <button class="action-btn"><i class="fas fa-eye"></i></button> <button class="action-btn"><i class="fas fa-shopping-cart"></i></button> </div> </div> <div class="product-info"> <h3>AirMax Pro</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>(124)</span> </div> <div class="product-price"> <span class="current-price">$129.99</span> <span class="old-price">$159.99</span> </div> </div> </div> <div class="product-card"> <div class="product-badge">New</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1365&q=80" alt="UltraRun X"> <div class="product-actions"> <button class="action-btn"><i class="far fa-heart"></i></button> <button class="action-btn"><i class="fas fa-eye"></i></button> <button class="action-btn"><i class="fas fa-shopping-cart"></i></button> </div> </div> <div class="product-info"> <h3>UltraRun X</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>(89)</span> </div> <div class="product-price"> <span class="current-price">$149.99</span> </div> </div> </div> <div class="product-card"> <div class="product-badge">-25%</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1412&q=80" alt="Classic Leather"> <div class="product-actions"> <button class="action-btn"><i class="far fa-heart"></i></button> <button class="action-btn"><i class="fas fa-eye"></i></button> <button class="action-btn"><i class="fas fa-shopping-cart"></i></button> </div> </div> <div class="product-info"> <h3>Classic Leather</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>(256)</span> </div> <div class="product-price"> <span class="current-price">$89.99</span> <span class="old-price">$119.99</span> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1364&q=80" alt="Urban Sneaker"> <div class="product-actions"> <button class="action-btn"><i class="far fa-heart"></i></button> <button class="action-btn"><i class="fas fa-eye"></i></button> <button class="action-btn"><i class="fas fa-shopping-cart"></i></button> </div> </div> <div class="product-info"> <h3>Urban Sneaker</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>(187)</span> </div> <div class="product-price"> <span class="current-price">$109.99</span> </div> </div> </div> </div> <div class="view-more"> <a href="#" class="btn btn-primary">View All Products</a> </div> </div> </section> <!-- Categories Section --> <section id="categories" class="categories section-padding"> <div class="container"> <div class="section-title"> <h2>Shop by <span>Category</span></h2> <p>Find the perfect shoes for your needs</p> </div> <div class="categories-grid"> <div class="category-card"> <div class="category-image"> <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Men's Shoes"> <div class="category-overlay"> <h3>Men's Shoes</h3> <a href="#" class="btn btn-secondary">Shop Now</a> </div> </div> </div> <div class="category-card"> <div class="category-image"> <img src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Women's Shoes"> <div class="category-overlay"> <h3>Women's Shoes</h3> <a href="#" class="btn btn-secondary">Shop Now</a> </div> </div> </div> <div class="category-card"> <div class="category-image"> <img src="https://images.unsplash.com/photo-1595341888016-a392ef81b7de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1479&q=80" alt="Kids' Shoes"> <div class="category-overlay"> <h3>Kids' Shoes</h3> <a href="#" class="btn btn-secondary">Shop Now</a> </div> </div> </div> <div class="category-card"> <div class="category-image"> <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1365&q=80" alt="Sports Shoes"> <div class="category-overlay"> <h3>Sports Shoes</h3> <a href="#" class="btn btn-secondary">Shop Now</a> </div> </div> </div> </div> </div> </section> <!-- Sale Section --> <section id="sale" class="sale section-padding"> <div class="container"> <div class="sale-banner"> <div class="sale-content"> <span class="sale-subtitle">Limited Time Offer</span> <h2>Summer Sale</h2> <p>Up to 50% off on selected items</p> <div class="sale-countdown"> <div class="countdown-item"> <span id="days">00</span> <span>Days</span> </div> <div class="countdown-item"> <span id="hours">00</span> <span>Hours</span> </div> <div class="countdown-item"> <span id="minutes">00</span> <span>Minutes</span> </div> <div class="countdown-item"> <span id="seconds">00</span> <span>Seconds</span> </div> </div> <a href="#" class="btn btn-primary">Shop the Sale</a> </div> <div class="sale-image"> <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1325&q=80" alt="Sale Shoes"> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials section-padding"> <div class="container"> <div class="section-title"> <h2>Customer <span>Testimonials</span></h2> <p>What our customers say about our products</p> </div> <div class="testimonials-slider"> <div class="testimonial active"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"I've never worn more comfortable shoes in my life! The quality is outstanding and they look even better in person than online. Will definitely be buying again."</p> <div class="client-info"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah Johnson"> <div> <h4>Sarah Johnson</h4> <span>Verified Buyer</span> <div class="client-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> <div class="testimonial"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"The shipping was incredibly fast and the shoes fit perfectly. I get compliments every time I wear them. StepUp has become my go-to for footwear."</p> <div class="client-info"> <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen"> <div> <h4>Michael Chen</h4> <span>Verified Buyer</span> <div class="client-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> <div class="testimonial"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"I was hesitant to order shoes online, but the sizing guide was accurate and the customer service team was super helpful when I had questions. Highly recommend!"</p> <div class="client-info"> <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Emily Rodriguez"> <div> <h4>Emily Rodriguez</h4> <span>Verified Buyer</span> <div class="client-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> <div class="slider-controls"> <button class="slider-prev"><i class="fas fa-chevron-left"></i></button> <div class="slider-dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> <button class="slider-next"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- Blog Section --> <section id="blog" class="blog section-padding"> <div class="container"> <div class="section-title"> <h2>Latest <span>Blog</span></h2> <p>Shoe care tips, trends and news</p> </div> <div class="blog-grid"> <article class="blog-post"> <div class="blog-image"> <img src="https://images.unsplash.com/photo-1460353581641-37baddab0fa2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Shoe Trends"> <div class="post-date"> <span>15</span> <span>Jun</span> </div> </div> <div class="blog-content"> <h3><a href="#">Top Shoe Trends for Summer 2023</a></h3> <p>Discover the must-have shoe styles that will dominate this summer season, from chunky sneakers to minimalist sandals.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </article> <article class="blog-post"> <div class="blog-image"> <img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1412&q=80" alt="Shoe Care"> <div class="post-date"> <span>02</span> <span>Jul</span> </div> </div> <div class="blog-content"> <h3><a href="#">How to Properly Care for Your Leather Shoes</a></h3> <p>Learn professional tips to maintain your leather shoes and keep them looking new for years to come.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </article> <article class="blog-post"> <div class="blog-image"> <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1325&q=80" alt="Running Shoes"> <div class="post-date"> <span>28</span> <span>Jul</span> </div> </div> <div class="blog-content"> <h3><a href="#">Choosing the Right Running Shoes for Your Foot Type</a></h3> <p>A comprehensive guide to selecting running shoes based on your foot arch, running style, and training needs.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </article> </div> <div class="view-more"> <a href="#" class="btn btn-secondary">View All Articles</a> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact section-padding"> <div class="container"> <div class="section-title"> <h2>Contact <span>Us</span></h2> <p>Have questions? Get in touch with our team</p> </div> <div class="contact-content"> <div class="contact-info"> <div class="info-box"> <div class="info-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="info-text"> <h3>Address</h3> <p>123 Shoe Street, Footwear City, FC 12345</p> </div> </div> <div class="info-box"> <div class="info-icon"> <i class="fas fa-phone-alt"></i> </div> <div class="info-text"> <h3>Phone</h3> <p>+1 (555) 123-4567</p> </div> </div> <div class="info-box"> <div class="info-icon"> <i class="fas fa-envelope"></i> </div> <div class="info-text"> <h3>Email</h3> <p>info@stepup.com</p> </div> </div> <div class="info-box"> <div class="info-icon"> <i class="fas fa-clock"></i> </div> <div class="info-text"> <h3>Working Hours</h3> <p>Monday - Friday: 9:00 AM - 7:00 PM</p> <p>Saturday: 10:00 AM - 5:00 PM</p> </div> </div> </div> <div class="contact-form"> <form id="contactForm"> <div class="form-group"> <input type="text" id="name" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" id="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="text" id="subject" placeholder="Subject"> </div> <div class="form-group"> <textarea id="message" rows="5" placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn btn-primary">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-about"> <h3>StepUp</h3> <p>Premium footwear for every step of your journey. Quality, comfort, and style in every pair.</p> <div class="footer-social"> <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-links"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#collections">Collections</a></li> <li><a href="#featured">Featured</a></li> <li><a href="#sale">Sale</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-categories"> <h3>Categories</h3> <ul> <li><a href="#">Men's Shoes</a></li> <li><a href="#">Women's Shoes</a></li> <li><a href="#">Kids' Shoes</a></li> <li><a href="#">Sports Shoes</a></li> <li><a href="#">Casual Shoes</a></li> </ul> </div> <div class="footer-newsletter"> <h3>Newsletter</h3> <p>Subscribe to get updates on new arrivals and special offers.</p> <form class="newsletter-form"> <input type="email" placeholder="Your Email" required> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <p>© 2023 StepUp Footwear. All Rights Reserved.</p> <div class="footer-bottom-links"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> <a href="#">Shipping Policy</a> </div> </div> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary-color: #ff6b6b; --secondary-color: #333; --accent-color: #f8f9fa; --light-color: #f8f9fa; --dark-color: #212529; --text-color: #555; --white: #fff; --gray: #6c757d; --light-gray: #e9ecef; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--text-color); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; color: var(--secondary-color); line-height: 1.2; } a { text-decoration: none; color: inherit; transition: var(--transition); } ul { list-style: none; } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } .btn { display: inline-block; padding: 12px 30px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition); border: none; cursor: pointer; font-size: 14px; } .btn-primary { background-color: var(--primary-color); color: var(--white); } .btn-primary:hover { background-color: #e05d5d; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3); } .btn-secondary { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } .btn-secondary:hover { background-color: var(--primary-color); color: var(--white); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3); } .section-padding { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 50px; } .section-title h2 { font-size: 36px; margin-bottom: 15px; } .section-title h2 span { color: var(--primary-color); } .section-title p { font-size: 18px; color: var(--gray); } .view-more { text-align: center; margin-top: 50px; } /* Header Styles */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .header.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .header .container { display: flex; justify-content: space-between; align-items: center; padding: 20px 15px; } .logo h1 { font-size: 28px; color: var(--secondary-color); font-weight: 700; } .logo h1 span { color: var(--primary-color); } .navbar ul { display: flex; } .navbar ul li { margin-left: 30px; } .navbar ul li a { font-weight: 600; font-size: 16px; position: relative; } .navbar ul li a::after { content: ''; position: absolute; width: 0; height: 2px; background-color: var(--primary-color); bottom: -5px; left: 0; transition: var(--transition); } .navbar ul li a:hover::after { width: 100%; } .navbar ul li a:hover { color: var(--primary-color); } .header-icons { display: flex; align-items: center; gap: 20px; } .header-icons a { font-size: 18px; color: var(--dark-color); transition: var(--transition); } .header-icons a:hover { color: var(--primary-color); } .mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; color: var(--dark-color); } /* Hero Section */ .hero { padding-top: 100px; background-color: var(--accent-color); } .hero .container { display: flex; align-items: center; min-height: calc(100vh - 100px); gap: 50px; } .hero-content { flex: 1; } .hero-image { flex: 1; } .hero-subtitle { display: inline-block; font-size: 16px; font-weight: 600; color: var(--primary-color); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } .hero h1 { font-size: 60px; margin-bottom: 20px; line-height: 1.2; } .hero p { font-size: 18px; margin-bottom: 30px; max-width: 500px; } .hero-buttons { display: flex; gap: 20px; } .hero-image img { border-radius: 10px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } /* Collections Section */ .collections-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .collection-card { position: relative; border-radius: 8px; overflow: hidden; height: 400px; } .collection-image { position: relative; width: 100%; height: 100%; } .collection-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .collection-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; color: var(--white); opacity: 0; transition: var(--transition); } .collection-card:hover .collection-overlay { opacity: 1; } .collection-card:hover .collection-image img { transform: scale(1.1); } .collection-overlay h3 { font-size: 28px; margin-bottom: 20px; transform: translateY(20px); transition: var(--transition); } .collection-overlay .btn { transform: translateY(20px); transition: var(--transition); } .collection-card:hover .collection-overlay h3, .collection-card:hover .collection-overlay .btn { transform: translateY(0); } /* Featured Products Section */ .featured-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .product-card { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .product-badge { position: absolute; top: 15px; left: 15px; background-color: var(--primary-color); color: var(--white); padding: 5px 15px; border-radius: 4px; font-size: 12px; font-weight: 600; z-index: 1; } .product-image { position: relative; height: 250px; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .product-card:hover .product-image img { transform: scale(1.1); } .product-actions { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 15px; opacity: 0; transition: var(--transition); } .product-card:hover .product-actions { opacity: 1; } .action-btn { width: 40px; height: 40px; background-color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; color: var(--dark-color); transition: var(--transition); } .action-btn:hover { background-color: var(--primary-color); color: var(--white); } .product-info { padding: 20px; } .product-info h3 { font-size: 18px; margin-bottom: 10px; } .product-rating { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; color: #ffc107; } .product-rating span { color: var(--gray); font-size: 12px; margin-left: 5px; } .product-price { display: flex; align-items: center; gap: 10px; } .current-price { font-size: 18px; font-weight: 700; color: var(--primary-color); } .old-price { font-size: 14px; text-decoration: line-through; color: var(--gray); } /* Categories Section */ .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .category-card { position: relative; border-radius: 8px; overflow: hidden; height: 300px; } .category-image { position: relative; width: 100%; height: 100%; } .category-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .category-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--white); transition: var(--transition); } .category-card:hover .category-image img { transform: scale(1.1); } .category-overlay h3 { font-size: 24px; margin-bottom: 20px; transform: translateY(20px); transition: var(--transition); } .category-overlay .btn { transform: translateY(20px); transition: var(--transition); } .category-card:hover .category-overlay h3, .category-card:hover .category-overlay .btn { transform: translateY(0); } /* Sale Section */ .sale { background-color: var(--primary-color); color: var(--white); } .sale-banner { display: flex; align-items: center; gap: 50px; padding: 50px; background-color: rgba(0, 0, 0, 0.1); border-radius: 8px; } .sale-content { flex: 1; } .sale-image { flex: 1; } .sale-image img { border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); animation: float 3s ease-in-out infinite; } .sale-subtitle { display: inline-block; font-size: 16px; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.8); } .sale h2 { font-size: 42px; margin-bottom: 15px; } .sale p { font-size: 18px; margin-bottom: 30px; opacity: 0.9; } .sale-countdown { display: flex; gap: 15px; margin-bottom: 30px; } .countdown-item { background-color: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px; text-align: center; min-width: 80px; } .countdown-item span:first-child { display: block; font-size: 28px; font-weight: 700; margin-bottom: 5px; } .countdown-item span:last-child { font-size: 12px; text-transform: uppercase; opacity: 0.8; } /* Testimonials Section */ .testimonials { background-color: var(--accent-color); } .testimonials-slider { position: relative; max-width: 800px; margin: 0 auto; } .testimonial { display: none; padding: 30px; background-color: var(--white); border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .testimonial.active { display: block; } .testimonial-content { position: relative; padding: 30px; } .quote-icon { position: absolute; top: 0; left: 0; font-size: 60px; color: rgba(255, 107, 107, 0.1); line-height: 1; } .testimonial p { font-size: 18px; font-style: italic; margin-bottom: 30px; position: relative; z-index: 1; } .client-info { display: flex; align-items: center; } .client-info img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; margin-right: 20px; } .client-info h4 { font-size: 18px; margin-bottom: 5px; } .client-info span { color: var(--gray); font-size: 14px; display: block; margin-bottom: 5px; } .client-rating { color: #ffc107; } .slider-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; } .slider-prev, .slider-next { background-color: transparent; border: none; font-size: 20px; color: var(--primary-color); cursor: pointer; transition: var(--transition); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .slider-prev:hover, .slider-next:hover { background-color: rgba(255, 107, 107, 0.1); } .slider-dots { display: flex; gap: 10px; } .dot { width: 12px; height: 12px; border-radius: 50%; background-color: var(--light-gray); cursor: pointer; transition: var(--transition); } .dot.active { background-color: var(--primary-color); } /* Blog Section */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .blog-post { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .blog-post:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .blog-image { position: relative; height: 250px; overflow: hidden; } .blog-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .blog-post:hover .blog-image img { transform: scale(1.1); } .post-date { position: absolute; top: 20px; right: 20px; background-color: var(--primary-color); color: var(--white); padding: 10px 15px; text-align: center; border-radius: 5px; line-height: 1; } .post-date span:first-child { font-size: 24px; font-weight: 700; display: block; } .post-date span:last-child { font-size: 14px; text-transform: uppercase; } .blog-content { padding: 25px; } .blog-content h3 { font-size: 20px; margin-bottom: 15px; } .blog-content h3 a:hover { color: var(--primary-color); } .blog-content p { margin-bottom: 20px; font-size: 15px; } .read-more { color: var(--primary-color); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .read-more i { font-size: 12px; } .read-more:hover { gap: 10px; } /* Contact Section */ .contact-content { display: flex; gap: 50px; } .contact-info { flex: 1; } .contact-form { flex: 1; } .info-box { display: flex; margin-bottom: 30px; } .info-icon { width: 60px; height: 60px; background-color: rgba(255, 107, 107, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 20px; margin-right: 20px; flex-shrink: 0; } .info-text h3 { font-size: 20px; margin-bottom: 10px; } .info-text p { font-size: 15px; } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--light-gray); border-radius: 4px; font-family: inherit; font-size: 16px; transition: var(--transition); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2); } .form-group textarea { resize: vertical; min-height: 120px; } /* Footer */ .footer { background-color: var(--secondary-color); color: var(--white); padding-top: 80px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 60px; } .footer-about h3 { font-size: 24px; margin-bottom: 20px; color: var(--white); } .footer-about p { margin-bottom: 20px; opacity: 0.8; } .footer-social { display: flex; gap: 15px; } .footer-social a { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); transition: var(--transition); } .footer-social a:hover { background-color: var(--primary-color); } .footer-links h3, .footer-categories h3, .footer-newsletter h3 { font-size: 20px; margin-bottom: 25px; color: var(--white); position: relative; padding-bottom: 10px; } .footer-links h3::after, .footer-categories h3::after, .footer-newsletter h3::after { content: ''; position: absolute; width: 50px; height: 2px; background-color: var(--primary-color); bottom: 0; left: 0; } .footer-links ul li, .footer-categories ul li { margin-bottom: 12px; } .footer-links ul li a, .footer-categories ul li a { opacity: 0.8; transition: var(--transition); } .footer-links ul li a:hover, .footer-categories ul li a:hover { opacity: 1; color: var(--primary-color); padding-left: 5px; } .footer-newsletter p { opacity: 0.8; margin-bottom: 20px; } .newsletter-form { display: flex; } .newsletter-form input { flex: 1; padding: 12px 15px; border: none; border-radius: 4px 0 0 4px; font-family: inherit; } .newsletter-form button { background-color: var(--primary-color); color: var(--white); border: none; padding: 0 20px; border-radius: 0 4px 4px 0; cursor: pointer; transition: var(--transition); } .newsletter-form button:hover { background-color: #e05d5d; } .footer-bottom { background-color: rgba(0, 0, 0, 0.2); padding: 20px 0; text-align: center; } .footer-bottom p { opacity: 0.8; font-size: 14px; margin-bottom: 0; } .footer-bottom-links { margin-top: 10px; } .footer-bottom-links a { opacity: 0.8; font-size: 14px; margin: 0 10px; transition: var(--transition); } .footer-bottom-links a:hover { opacity: 1; color: var(--primary-color); } /* Responsive Styles */ @media (max-width: 992px) { .hero .container { flex-direction: column; text-align: center; padding-top: 50px; padding-bottom: 50px; } .hero h1 { font-size: 50px; } .hero p { margin-left: auto; margin-right: auto; } .hero-buttons { justify-content: center; } .sale-banner { flex-direction: column; } .contact-content { flex-direction: column; } } @media (max-width: 768px) { .navbar { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: var(--white); transition: var(--transition); padding: 30px; overflow-y: auto; } .navbar.active { left: 0; } .navbar ul { flex-direction: column; } .navbar ul li { margin: 0 0 20px 0; } .mobile-menu-btn { display: block; } .hero h1 { font-size: 40px; } .hero p { font-size: 16px; } .hero-buttons { flex-direction: column; gap: 15px; } .btn { width: 100%; } .section-title h2 { font-size: 30px; } .collections-grid { grid-template-columns: 1fr; } .featured-products { grid-template-columns: repeat(2, 1fr); } .categories-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .hero { padding-top: 80px; } .hero h1 { font-size: 32px; } .section-padding { padding: 60px 0; } .featured-products { grid-template-columns: 1fr; } .categories-grid { grid-template-columns: 1fr; } .sale h2 { font-size: 32px; } .countdown-item { min-width: 60px; padding: 10px; } .countdown-item span:first-child { font-size: 24px; } .footer-content { grid-template-columns: 1fr; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navbar = document.querySelector('.navbar'); mobileMenuBtn.addEventListener('click', function() { navbar.classList.toggle('active'); this.querySelector('i').classList.toggle('fa-times'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.navbar ul li a').forEach(link => { link.addEventListener('click', function() { navbar.classList.remove('active'); mobileMenuBtn.querySelector('i').classList.remove('fa-times'); }); }); // Header scroll effect window.addEventListener('scroll', function() { const header = document.querySelector('.header'); if (window.scrollY > 100) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // Sale Countdown Timer function updateCountdown() { const now = new Date(); const saleEnd = new Date(); saleEnd.setDate(now.getDate() + 7); // Sale ends in 7 days const diff = saleEnd - 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 updateCountdown(); setInterval(updateCountdown, 1000); // Testimonials Slider const testimonials = document.querySelectorAll('.testimonial'); const dots = document.querySelectorAll('.dot'); const prevBtn = document.querySelector('.slider-prev'); const nextBtn = document.querySelector('.slider-next'); let currentIndex = 0; function showTestimonial(index) { testimonials.forEach(testimonial => testimonial.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); testimonials[index].classList.add('active'); dots[index].classList.add('active'); currentIndex = index; } dots.forEach((dot, index) => { dot.addEventListener('click', () => showTestimonial(index)); }); prevBtn.addEventListener('click', () => { currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length; showTestimonial(currentIndex); }); nextBtn.addEventListener('click', () => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }); // Auto-rotate testimonials let testimonialInterval = setInterval(() => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }, 5000); // Pause auto-rotation on hover const sliderContainer = document.querySelector('.testimonials-slider'); sliderContainer.addEventListener('mouseenter', () => { clearInterval(testimonialInterval); }); sliderContainer.addEventListener('mouseleave', () => { testimonialInterval = setInterval(() => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }, 5000); }); // Form submission const contactForm = document.getElementById('contactForm'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const name = document.getElementById('name').value; const email = document.getElementById('email').value; const subject = document.getElementById('subject').value; const message = document.getElementById('message').value; // Here you would typically send the form data to a server // For this example, we'll just log it and show an alert console.log('Form submitted:', { name, email, subject, message }); alert('Thank you for your message! We will get back to you soon.'); contactForm.reset(); }); } // 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) { const headerHeight = document.querySelector('.header').offsetHeight; const targetPosition = targetElement.offsetTop - headerHeight; window.scrollTo({ top: targetPosition, behavior: 'smooth' }); } }); }); // Initialize the first testimonial showTestimonial(0); });
Output Preview
Desktop
Mobile
Fullscreen