Mobile Accessories Template Page
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>GadgetGear - Premium Mobile Accessories</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;800;900&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> <div class="container"> <div class="header-inner"> <a href="#" class="logo">Gadget<span>Gear</span></a> <nav> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#features">Features</a></li> <li><a href="#products">Products</a></li> <li><a href="#about">About</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="hamburger"> <i class="fas fa-bars"></i> </div> </nav> </div> </div> </header> <!-- Hero Section --> <section class="hero" id="home"> <div class="container"> <div class="hero-content"> <h1>Premium <span>Mobile Accessories</span> For Your Device</h1> <p>Discover our high-quality collection of mobile accessories designed to enhance your smartphone experience with style and functionality.</p> <a href="#products" class="btn">Shop Now</a> </div> </div> </section> <!-- Features Section --> <section class="section features" id="features"> <div class="container"> <h2 class="section-title">Why Choose Us</h2> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-shield-alt"></i> </div> <h3>Premium Quality</h3> <p>All our products are made from high-quality materials to ensure durability and long-lasting performance.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-truck"></i> </div> <h3>Free Shipping</h3> <p>Enjoy free shipping on all orders over $50. Fast delivery to your doorstep within 2-3 business days.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-undo"></i> </div> <h3>30-Day Returns</h3> <p>Not satisfied? Return any product within 30 days for a full refund, no questions asked.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-headset"></i> </div> <h3>24/7 Support</h3> <p>Our customer service team is available round the clock to assist you with any queries.</p> </div> </div> </div> </section> <!-- Products Section --> <section class="section" id="products"> <div class="container"> <h2 class="section-title">Featured Products</h2> <div class="products-grid"> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1601784551446-20c9e07cdbdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1867&q=80" alt="Wireless Earbuds"> </div> <div class="product-info"> <h3>Wireless Earbuds Pro</h3> <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 class="price">$89.99</div> <a href="#" class="btn">Add to Cart</a> </div> </div> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1547721064-da6cfb341d50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Wireless Charger"> </div> <div class="product-info"> <h3>Fast Wireless Charger</h3> <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="far fa-star"></i> </div> <div class="price">$39.99</div> <a href="#" class="btn">Add to Cart</a> </div> </div> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1516387938699-a93567ec168e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Phone Case"> </div> <div class="product-info"> <h3>Shockproof Phone Case</h3> <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 class="price">$24.99</div> <a href="#" class="btn">Add to Cart</a> </div> </div> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2089&q=80" alt="Power Bank"> </div> <div class="product-info"> <h3>20,000mAh Power Bank</h3> <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 class="price">$49.99</div> <a href="#" class="btn">Add to Cart</a> </div> </div> </div> </div> </section> <!-- About Section --> <section class="section about" id="about"> <div class="container"> <h2 class="section-title">About Us</h2> <div class="about-content"> <div class="about-img"> <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Our Team"> </div> <div class="about-text"> <h2>We Provide The Best Mobile Accessories</h2> <p>Founded in 2015, GadgetGear has been at the forefront of providing high-quality mobile accessories that combine style, functionality, and durability.</p> <p>Our mission is to enhance your mobile experience with innovative products that protect your devices, improve their functionality, and reflect your personal style.</p> <p>All our products undergo rigorous testing to ensure they meet our high standards before they reach your hands. We partner with trusted manufacturers worldwide to bring you the best accessories at competitive prices.</p> <a href="#" class="btn">Learn More</a> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="section testimonials" id="testimonials"> <div class="container"> <h2 class="section-title">Customer Reviews</h2> <div class="testimonials-grid"> <div class="testimonial-card"> <div class="testimonial-img"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Sarah Johnson"> </div> <div class="testimonial-text"> "The wireless earbuds are amazing! The sound quality is exceptional and they're so comfortable to wear for long periods." </div> <div class="testimonial-author">Sarah Johnson</div> <div class="testimonial-role">Verified Buyer</div> </div> <div class="testimonial-card"> <div class="testimonial-img"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Michael Chen"> </div> <div class="testimonial-text"> "I've dropped my phone multiple times with this case and it's still in perfect condition. Best protection I've ever had!" </div> <div class="testimonial-author">Michael Chen</div> <div class="testimonial-role">Verified Buyer</div> </div> <div class="testimonial-card"> <div class="testimonial-img"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="Emily Rodriguez"> </div> <div class="testimonial-text"> "The power bank is a lifesaver! It charges my phone 4-5 times and is still compact enough to carry in my purse." </div> <div class="testimonial-author">Emily Rodriguez</div> <div class="testimonial-role">Verified Buyer</div> </div> </div> </div> </section> <!-- Stats Section --> <section class="section stats"> <div class="container"> <div class="stats-grid"> <div class="stat-item"> <div class="stat-number">10,000+</div> <div class="stat-text">Happy Customers</div> </div> <div class="stat-item"> <div class="stat-number">500+</div> <div class="stat-text">Products Available</div> </div> <div class="stat-item"> <div class="stat-number">50+</div> <div class="stat-text">Brands Partnered</div> </div> <div class="stat-item"> <div class="stat-number">24/7</div> <div class="stat-text">Customer Support</div> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="section newsletter"> <div class="container"> <h2 class="section-title">Subscribe to Our Newsletter</h2> <p>Stay updated with our latest products, exclusive offers, and mobile accessory trends.</p> <form class="newsletter-form"> <input type="email" placeholder="Enter your email address" required> <button type="submit" class="btn">Subscribe</button> </form> </div> </section> <!-- Blog Section --> <section class="section" id="blog"> <div class="container"> <h2 class="section-title">Latest Blog Posts</h2> <div class="blog-grid"> <div class="blog-card"> <div class="blog-img"> <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Wireless Technology"> </div> <div class="blog-content"> <div class="blog-date">June 15, 2023</div> <h3>The Future of Wireless Technology</h3> <p>Explore how wireless technology is evolving and what it means for mobile accessories in the coming years.</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-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Phone Protection"> </div> <div class="blog-content"> <div class="blog-date">May 28, 2023</div> <h3>Essential Tips for Phone Protection</h3> <p>Learn the best practices to protect your smartphone from drops, water damage, and everyday wear and tear.</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-1601784551446-20c9e07cdbdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1867&q=80" alt="Audio Accessories"> </div> <div class="blog-content"> <div class="blog-date">April 10, 2023</div> <h3>Choosing the Right Audio Accessories</h3> <p>A comprehensive guide to selecting the perfect headphones or earbuds for your lifestyle and needs.</p> <a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="section contact" id="contact"> <div class="container"> <h2 class="section-title">Get In Touch</h2> <div class="contact-content"> <div class="contact-info"> <h3>Contact Information</h3> <div class="contact-details"> <p><i class="fas fa-map-marker-alt"></i> 123 Accessory Street, Tech City, TC 10001</p> <p><i class="fas fa-phone"></i> +1 (555) 123-4567</p> <p><i class="fas fa-envelope"></i> info@gadgetgear.com</p> <p><i class="fas fa-clock"></i> Mon-Fri: 9AM - 6PM, Sat: 10AM - 4PM</p> </div> <h3>Follow Us</h3> <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-linkedin-in"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> <div class="contact-form"> <form> <div class="form-group"> <label for="name">Your Name</label> <input type="text" id="name" required> </div> <div class="form-group"> <label for="email">Your Email</label> <input type="email" id="email" required> </div> <div class="form-group"> <label for="subject">Subject</label> <input type="text" id="subject" required> </div> <div class="form-group"> <label for="message">Your Message</label> <textarea id="message" required></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <div class="footer-content"> <div class="footer-col"> <h3>GadgetGear</h3> <p>Your one-stop shop for premium mobile accessories that combine style, functionality, and durability.</p> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#features">Features</a></li> <li><a href="#products">Products</a></li> <li><a href="#about">About Us</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-col"> <h3>Categories</h3> <ul> <li><a href="#">Phone Cases</a></li> <li><a href="#">Headphones</a></li> <li><a href="#">Chargers</a></li> <li><a href="#">Power Banks</a></li> <li><a href="#">Screen Protectors</a></li> </ul> </div> <div class="footer-col"> <h3>Support</h3> <ul> <li><a href="#">FAQs</a></li> <li><a href="#">Shipping Policy</a></li> <li><a href="#">Return Policy</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms & Conditions</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2023 GadgetGear. All Rights Reserved.</p> </div> </div> </footer> </body> </html>
CSS
:root { --primary-color: #FFD700; --secondary-color: #FFC000; --dark-color: #333333; --light-color: #FFFFFF; --gray-color: #F5F5F5; --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--dark-color); overflow-x: hidden; } a { text-decoration: none; color: var(--dark-color); transition: var(--transition); } ul { list-style: none; } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .btn { display: inline-block; padding: 12px 30px; background-color: var(--primary-color); color: var(--dark-color); border: none; border-radius: 30px; font-weight: 600; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow); } .btn:hover { background-color: var(--secondary-color); transform: translateY(-3px); } .section { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 50px; font-size: 2.5rem; font-weight: 700; position: relative; color: var(--dark-color); } .section-title::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background-color: var(--primary-color); border-radius: 2px; } /* Header */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: var(--light-color); box-shadow: var(--shadow); transition: var(--transition); } .header-inner { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .logo { font-size: 1.8rem; font-weight: 800; color: var(--dark-color); } .logo span { color: var(--primary-color); } .nav-links { display: flex; } .nav-links li { margin-left: 30px; } .nav-links a { font-weight: 600; position: relative; } .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%; } .hamburger { display: none; cursor: pointer; font-size: 1.5rem; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover; display: flex; align-items: center; text-align: center; color: var(--light-color); padding-top: 80px; } .hero-content { max-width: 800px; margin: 0 auto; animation: fadeIn 1s ease-in-out; } .hero h1 { font-size: 3.5rem; margin-bottom: 20px; font-weight: 800; } .hero h1 span { color: var(--primary-color); } .hero p { font-size: 1.2rem; margin-bottom: 30px; } /* Features Section */ .features { background-color: var(--gray-color); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .feature-card { background-color: var(--light-color); padding: 30px; border-radius: 10px; text-align: center; box-shadow: var(--shadow); transition: var(--transition); animation: fadeInUp 0.5s ease-in-out; } .feature-card:hover { transform: translateY(-10px); } .feature-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; } .feature-card h3 { font-size: 1.5rem; margin-bottom: 15px; } /* Products Section */ .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .product-card { background-color: var(--light-color); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); animation: fadeInUp 0.5s ease-in-out; } .product-card:hover { transform: translateY(-10px); } .product-img { height: 200px; overflow: hidden; } .product-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .product-card:hover .product-img img { transform: scale(1.1); } .product-info { padding: 20px; } .product-info h3 { font-size: 1.2rem; margin-bottom: 10px; } .product-info .price { font-size: 1.3rem; font-weight: 700; color: var(--primary-color); margin-bottom: 15px; } .rating { color: var(--primary-color); margin-bottom: 15px; } /* About Section */ .about { background-color: var(--gray-color); } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .about-img { position: relative; animation: fadeInLeft 0.8s ease-in-out; } .about-img img { border-radius: 10px; box-shadow: var(--shadow); } .about-text { animation: fadeInRight 0.8s ease-in-out; } .about-text h2 { font-size: 2.5rem; margin-bottom: 20px; } .about-text p { margin-bottom: 20px; } /* Testimonials Section */ .testimonials { text-align: center; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .testimonial-card { background-color: var(--light-color); padding: 30px; border-radius: 10px; box-shadow: var(--shadow); transition: var(--transition); animation: fadeInUp 0.5s ease-in-out; } .testimonial-card:hover { transform: translateY(-10px); } .testimonial-img { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; } .testimonial-img img { width: 100%; height: 100%; object-fit: cover; } .testimonial-text { font-style: italic; margin-bottom: 20px; } .testimonial-author { font-weight: 700; } .testimonial-role { color: #777; font-size: 0.9rem; } /* Stats Section */ .stats { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover; color: var(--light-color); text-align: center; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; } .stat-item { padding: 30px; animation: fadeIn 0.8s ease-in-out; } .stat-number { font-size: 3rem; font-weight: 700; margin-bottom: 10px; color: var(--primary-color); } .stat-text { font-size: 1.2rem; } /* Newsletter Section */ .newsletter { background-color: var(--primary-color); text-align: center; } .newsletter h2 { color: var(--dark-color); } .newsletter p { max-width: 600px; margin: 0 auto 30px; } .newsletter-form { display: flex; max-width: 500px; margin: 0 auto; } .newsletter-form input { flex: 1; padding: 15px; border: none; border-radius: 30px 0 0 30px; font-family: 'Poppins', sans-serif; } .newsletter-form .btn { border-radius: 0 30px 30px 0; } /* Blog Section */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .blog-card { background-color: var(--light-color); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); animation: fadeInUp 0.5s ease-in-out; } .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: 20px; } .blog-date { font-size: 0.9rem; color: #777; margin-bottom: 10px; } .blog-content h3 { font-size: 1.3rem; margin-bottom: 10px; } .blog-content p { margin-bottom: 15px; } .read-more { color: var(--primary-color); font-weight: 600; } /* Contact Section */ .contact { background-color: var(--gray-color); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } .contact-info { animation: fadeInLeft 0.8s ease-in-out; } .contact-info h3 { font-size: 1.5rem; margin-bottom: 20px; } .contact-details { margin-bottom: 30px; } .contact-details p { margin-bottom: 10px; display: flex; align-items: center; } .contact-details i { margin-right: 10px; color: var(--primary-color); } .social-links { display: flex; gap: 15px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--light-color); border-radius: 50%; color: var(--dark-color); transition: var(--transition); } .social-links a:hover { background-color: var(--primary-color); transform: translateY(-5px); } .contact-form { animation: fadeInRight 0.8s ease-in-out; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 600; } .form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Poppins', sans-serif; } .form-group textarea { height: 150px; } /* Footer */ footer { background-color: var(--dark-color); color: var(--light-color); padding: 50px 0 20px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-bottom: 40px; } .footer-col h3 { font-size: 1.3rem; margin-bottom: 20px; color: var(--primary-color); } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { color: #ccc; } .footer-col ul li a:hover { color: var(--primary-color); padding-left: 5px; } .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #444; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @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); } } /* Responsive Styles */ @media (max-width: 992px) { .section-title { font-size: 2rem; } .hero h1 { font-size: 2.8rem; } .about-content { grid-template-columns: 1fr; } .about-img { order: 2; } .about-text { order: 1; } .contact-content { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav-links { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: var(--light-color); flex-direction: column; align-items: center; padding-top: 30px; transition: var(--transition); } .nav-links.active { left: 0; } .nav-links li { margin: 15px 0; } .hamburger { display: block; } .hero h1 { font-size: 2.2rem; } .hero p { font-size: 1rem; } .newsletter-form { flex-direction: column; } .newsletter-form input { border-radius: 30px; margin-bottom: 10px; } .newsletter-form .btn { border-radius: 30px; width: 100%; } } @media (max-width: 576px) { .section { padding: 60px 0; } .section-title { font-size: 1.8rem; } .hero h1 { font-size: 1.8rem; } .btn { padding: 10px 20px; } }
JavaScript
// Mobile Navigation const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); hamburger.addEventListener('click', () => { navLinks.classList.toggle('active'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('active'); }); }); // Sticky Header window.addEventListener('scroll', () => { const header = document.querySelector('header'); header.classList.toggle('sticky', window.scrollY > 0); }); // Scroll Reveal Animation const sr = ScrollReveal({ origin: 'top', distance: '60px', duration: 1000, delay: 200, reset: true }); sr.reveal('.hero-content', { delay: 300 }); sr.reveal('.feature-card', { interval: 200 }); sr.reveal('.product-card', { interval: 200 }); sr.reveal('.about-img, .about-text', { origin: 'left', interval: 200 }); sr.reveal('.testimonial-card', { interval: 200 }); sr.reveal('.stat-item', { interval: 200 }); sr.reveal('.blog-card', { interval: 200 }); sr.reveal('.contact-info, .contact-form', { origin: 'left', interval: 200 }); // Smooth Scrolling for Anchor Links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); });
Output Preview
Desktop
Mobile
Fullscreen