Namkeen Delights 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>Namkeen Delights - Premium Snack Manufacturing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Header/Hero Section --> <header id="home"> <nav id="navbar"> <div class="logo">Namkeen Delights</div> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#products">Products</a></li> <li><a href="#process">Process</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <div class="hero animated fadeIn"> <h1 class="animated fadeIn delay-1">Authentic Indian Namkeens</h1> <p class="animated fadeIn delay-2">Handcrafted with traditional recipes and premium ingredients for that perfect crunch and flavor</p> <a href="#products" class="cta-button animated fadeIn delay-3">Explore Products</a> </div> </header> <!-- About Section --> <section id="about" class="about"> <div class="section-title animated"> <h2>Our Story</h2> </div> <div class="about-content"> <div class="about-text animated slideInLeft"> <h3>Traditional Taste, Modern Quality</h3> <p>Founded in 1995, Namkeen Delights began as a small family business in Rajasthan. Today, we've grown into one of India's most trusted namkeen manufacturers while staying true to our roots.</p> <p>Our secret lies in the perfect blend of traditional recipes passed down through generations and modern quality control measures that ensure consistency and hygiene in every pack.</p> <p>We source only the finest ingredients from trusted farmers and suppliers across India to bring you authentic flavors that remind you of home.</p> <a href="#process" class="cta-button">Our Process</a> </div> <div class="about-image animated slideInRight"> <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Namkeen making process"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/brown-and-white-powder-on-brown-wooden-table-5fNmWej4tAA" target="_blank">Unsplash</a></p> </div> </div> </section> <!-- Products Section --> <section id="products" class="products"> <div class="section-title animated"> <h2>Our Products</h2> </div> <div class="product-grid"> <div class="product-card animated fadeIn delay-1"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1623241894050-7b7c028806a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Bhujia Sev"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/selective-focus-photography-of-brown-powder-in-bowl-5fNmWej4tAA" target="_blank">Unsplash</a></p> </div> <div class="product-info"> <h3>Traditional Bhujia Sev</h3> <p>Our signature crispy bhujia made with besan and authentic spices</p> <div class="price">₹120 / 200g</div> </div> </div> <div class="product-card animated fadeIn delay-2"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1602526430789-7820d1adf1a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Aloo Bhujia"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/grayscale-photo-of-powder-5fNmWej4tAA" target="_blank">Unsplash</a></p> </div> <div class="product-info"> <h3>Spicy Aloo Bhujia</h3> <p>Potato-based crispy snack with a perfect blend of spices</p> <div class="price">₹110 / 200g</div> </div> </div> <div class="product-card animated fadeIn delay-3"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Mathri"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/white-ceramic-bowl-with-brown-powder-5fNmWej4tAA" target="_blank">Unsplash</a></p> </div> <div class="product-info"> <h3>Rajasthani Mathri</h3> <p>Flaky, crispy mathri with ajwain and black pepper</p> <div class="price">₹150 / 250g</div> </div> </div> <div class="product-card animated fadeIn delay-4"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1602526432604-029a709e131c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Chana Chur"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/grayscale-photography-of-powder-5fNmWej4tAA" target="_blank">Unsplash</a></p> </div> <div class="product-info"> <h3>Masala Chana Chur</h3> <p>Crunchy mixture of fried lentils, peanuts and spices</p> <div class="price">₹130 / 200g</div> </div> </div> </div> </section> <!-- Process Section --> <section id="process" class="process"> <div class="section-title animated"> <h2>Our Manufacturing Process</h2> </div> <div class="process-steps"> <div class="step animated fadeIn delay-1"> <div class="step-icon"> <i class="fas fa-seedling"></i> </div> <h3>Quality Ingredients</h3> <p>We source only the finest raw materials from trusted suppliers across India</p> </div> <div class="step animated fadeIn delay-2"> <div class="step-icon"> <i class="fas fa-mortar-pestle"></i> </div> <h3>Traditional Recipes</h3> <p>Using age-old family recipes with perfect spice blends</p> </div> <div class="step animated fadeIn delay-3"> <div class="step-icon"> <i class="fas fa-utensils"></i> </div> <h3>Hygienic Preparation</h3> <p>Prepared in FDA-approved facilities with strict hygiene standards</p> </div> <div class="step animated fadeIn delay-4"> <div class="step-icon"> <i class="fas fa-box-open"></i> </div> <h3>Careful Packaging</h3> <p>Packed to preserve freshness and crunch with quality packaging</p> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="section-title animated"> <h2>What Our Customers Say</h2> </div> <div class="testimonial-grid"> <div class="testimonial-card animated fadeIn delay-1"> <div class="testimonial-text"> "The bhujia sev from Namkeen Delights reminds me of my grandmother's cooking. Authentic taste with perfect crispness every time." </div> <div class="client-info"> <div class="client-image"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Priya Sharma"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/woman-wearing-black-scoop-neck-top-5fNmWej4tAA" target="_blank">Unsplash</a></p> </div> <div class="client-name"> <h4>Priya Sharma</h4> <p>Regular Customer</p> </div> </div> </div> <div class="testimonial-card animated fadeIn delay-2"> <div class="testimonial-text"> "As a retailer, I've been selling Namkeen Delights products for 5 years. Their consistent quality keeps my customers coming back." </div> <div class="client-info"> <div class="client-image"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Rajiv Patel"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/man-wearing-black-suit-jacket-5fNmWej4tAA" target="_blank">Unsplash</a></p> </div> <div class="client-name"> <h4>Rajiv Patel</h4> <p>Retail Partner</p> </div> </div> </div> <div class="testimonial-card animated fadeIn delay-3"> <div class="testimonial-text"> "Living abroad, these namkeens are my taste of home. The packaging ensures they arrive fresh and crispy every time." </div> <div class="client-info"> <div class="client-image"> <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80" alt="Neha Kapoor"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/woman-smiling-5fNmWej4tAA" target="_blank">Unsplash</a></p> </div> <div class="client-name"> <h4>Neha Kapoor</h4> <p>NRI Customer</p> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery"> <div class="section-title animated"> <h2>Our Gallery</h2> </div> <div class="gallery-grid"> <div class="gallery-item animated fadeIn delay-1"> <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Manufacturing Facility"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/person-holding-bowl-5fNmWej4tAA" target="_blank">Unsplash</a></p> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item animated fadeIn delay-2"> <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Ingredients"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/brown-and-white-powder-on-brown-wooden-table-5fNmWej4tAA" target="_blank">Unsplash</a></p> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item animated fadeIn delay-3"> <img src="https://images.unsplash.com/photo-1623241894050-7b7c028806a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Bhujia Making"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/selective-focus-photography-of-brown-powder-in-bowl-5fNmWej4tAA" target="_blank">Unsplash</a></p> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item animated fadeIn delay-4"> <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Packaging"> <p style="text-align: center; font-size: 0.8rem; margin-top: 5px;">Image from <a href="https://unsplash.com/photos/white-ceramic-bowl-with-brown-powder-5fNmWej4tAA" target="_blank">Unsplash</a></p> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="section-title animated"> <h2>Contact Us</h2> </div> <div class="contact-container"> <div class="contact-info animated slideInLeft"> <h3>Get in Touch</h3> <p>Have questions about our products or want to become a distributor? Reach out to us!</p> <div class="info-item"> <div class="info-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div> <h4>Address</h4> <p>123 Food Industrial Area, Jaipur, Rajasthan 302016</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-phone-alt"></i> </div> <div> <h4>Phone</h4> <p>+91 98765 43210</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-envelope"></i> </div> <div> <h4>Email</h4> <p>info@namkeendelights.com</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-clock"></i> </div> <div> <h4>Working Hours</h4> <p>Mon-Sat: 9:00 AM - 6:00 PM</p> </div> </div> </div> <div class="contact-form animated slideInRight"> <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">Email Address</label> <input type="email" id="email" required> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone"> </div> <div class="form-group"> <label for="message">Your Message</label> <textarea id="message" required></textarea> </div> <button type="submit" class="cta-button">Send Message</button> </form> </div> </div> </section> <!-- Footer --> <footer> <div class="footer-content"> <div class="footer-column"> <h3>Namkeen Delights</h3> <p>Bringing authentic Indian snacks to your home since 1995. Traditional taste with modern quality standards.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="footer-column"> <h3>Quick Links</h3> <ul class="footer-links"> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#products">Products</a></li> <li><a href="#process">Our Process</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-column"> <h3>Products</h3> <ul class="footer-links"> <li><a href="#">Bhujia Sev</a></li> <li><a href="#">Aloo Bhujia</a></li> <li><a href="#">Mathri</a></li> <li><a href="#">Chana Chur</a></li> <li><a href="#">Special Mixtures</a></li> </ul> </div> <div class="footer-column"> <h3>Contact Info</h3> <ul class="footer-links"> <li><i class="fas fa-map-marker-alt"></i> 123 Food Industrial Area, Jaipur</li> <li><i class="fas fa-phone-alt"></i> +91 98765 43210</li> <li><i class="fas fa-envelope"></i> info@namkeendelights.com</li> </ul> </div> </div> <div class="copyright"> <p>© 2023 Namkeen Delights. All Rights Reserved.</p> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
:root { --primary: #f39c12; --secondary: #e67e22; --dark: #2c3e50; --light: #ecf0f1; --accent: #e74c3c; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: #f9f9f9; overflow-x: hidden; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes slideInLeft { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .animated { opacity: 0; animation-fill-mode: both; } .fadeIn { animation: fadeIn 1s ease-out forwards; } .slideInLeft { animation: slideInLeft 1s ease-out forwards; } .slideInRight { animation: slideInRight 1s ease-out forwards; } .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } .delay-4 { animation-delay: 0.8s; } .delay-5 { animation-delay: 1s; } /* Header */ header { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); background-size: cover; background-position: center; color: white; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; } .logo { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary); } nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 10%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; transition: all 0.3s ease; } nav.scrolled { background-color: rgba(44, 62, 80, 0.9); padding: 15px 10%; box-shadow: 0 5px 20px rgba(0,0,0,0.1); } .nav-links { display: flex; list-style: none; } .nav-links li { margin-left: 30px; } .nav-links a { color: white; text-decoration: none; font-weight: 500; transition: color 0.3s; } .nav-links a:hover { color: var(--primary); } .cta-button { display: inline-block; background-color: var(--primary); color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; margin-top: 20px; transition: all 0.3s; border: 2px solid var(--primary); } .cta-button:hover { background-color: transparent; color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .hero h1 { font-size: 3.5rem; margin-bottom: 20px; } .hero p { font-size: 1.2rem; max-width: 700px; margin-bottom: 30px; } /* Section Styling */ section { padding: 100px 10%; } .section-title { text-align: center; margin-bottom: 60px; position: relative; } .section-title h2 { font-size: 2.5rem; color: var(--dark); margin-bottom: 15px; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background-color: var(--primary); } /* About Section */ .about { background-color: white; } .about-content { display: flex; align-items: center; gap: 50px; } .about-text { flex: 1; } .about-image { flex: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 30px rgba(0,0,0,0.1); } .about-image img { width: 100%; height: auto; transition: transform 0.5s; } .about-image:hover img { transform: scale(1.05); } /* Products Section */ .products { background-color: #f5f5f5; } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .product-card { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); } .product-image { height: 250px; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .product-card:hover .product-image img { transform: scale(1.1); } .product-info { padding: 20px; } .product-info h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--dark); } .product-info p { color: #666; margin-bottom: 15px; } .price { font-weight: 700; color: var(--primary); font-size: 1.2rem; } /* Process Section */ .process { background-color: white; } .process-steps { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; } .step { flex: 1; min-width: 250px; text-align: center; padding: 30px 20px; background-color: #f9f9f9; border-radius: 10px; transition: all 0.3s; } .step:hover { background-color: var(--primary); color: white; transform: translateY(-10px); } .step:hover .step-icon { color: white; } .step-icon { font-size: 3rem; color: var(--primary); margin-bottom: 20px; transition: all 0.3s; } .step h3 { margin-bottom: 15px; } /* Testimonials */ .testimonials { background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); background-size: cover; background-attachment: fixed; color: white; text-align: center; } .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .testimonial-card { background-color: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: 30px; border-radius: 10px; transition: all 0.3s; } .testimonial-card:hover { transform: translateY(-10px); background-color: rgba(255,255,255,0.2); } .testimonial-text { font-style: italic; margin-bottom: 20px; } .client-info { display: flex; align-items: center; justify-content: center; } .client-image { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin-right: 15px; } .client-image img { width: 100%; height: 100%; object-fit: cover; } .client-name { text-align: left; } .client-name h4 { margin-bottom: 5px; } /* Gallery */ .gallery { background-color: #f5f5f5; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .gallery-item { height: 250px; overflow: hidden; border-radius: 10px; position: relative; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .gallery-item:hover img { transform: scale(1.1); } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay i { color: white; font-size: 2rem; } /* Contact */ .contact { background-color: white; } .contact-container { display: flex; gap: 50px; } .contact-info { flex: 1; } .contact-info h3 { font-size: 1.5rem; margin-bottom: 20px; color: var(--dark); } .info-item { display: flex; align-items: flex-start; margin-bottom: 20px; } .info-icon { font-size: 1.2rem; color: var(--primary); margin-right: 15px; margin-top: 5px; } .contact-form { flex: 1; background-color: #f9f9f9; padding: 30px; border-radius: 10px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 500; } .form-group input, .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; } .form-group textarea { height: 150px; } /* Footer */ footer { background-color: var(--dark); color: white; padding: 50px 10% 20px; text-align: center; } .footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; margin-bottom: 40px; } .footer-column { flex: 1; min-width: 250px; text-align: left; } .footer-column h3 { font-size: 1.3rem; margin-bottom: 20px; color: var(--primary); } .footer-links { list-style: none; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: #bbb; text-decoration: none; transition: color 0.3s; } .footer-links a:hover { color: var(--primary); } .social-links { display: flex; gap: 15px; } .social-links a { color: white; background-color: rgba(255,255,255,0.1); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s; } .social-links a:hover { background-color: var(--primary); transform: translateY(-5px); } .copyright { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; color: #bbb; } /* Responsive */ @media (max-width: 768px) { .about-content, .contact-container { flex-direction: column; } .hero h1 { font-size: 2.5rem; } section { padding: 60px 5%; } nav { padding: 15px 5%; } .nav-links { display: none; } }
JavaScript
// Navbar scroll effect window.addEventListener('scroll', function() { const navbar = document.getElementById('navbar'); if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Animation on scroll const animateOnScroll = function() { const elements = document.querySelectorAll('.animated'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementPosition < windowHeight - 100) { element.classList.add(element.dataset.animation || 'fadeIn'); } }); }; // Initialize animations on load window.addEventListener('load', function() { animateOnScroll(); }); // Add scroll event listener for animations window.addEventListener('scroll', animateOnScroll); // 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