Coffee Haven 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>Coffee Haven - Artisanal Coffee Experience</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 --> <header id="header"> <a href="#" class="logo">Coffee <span>Haven</span></a> <nav id="nav"> <div class="close-menu"> <i class="fas fa-times"></i> </div> <ul> <li><a href="#hero">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#menu">Menu</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#team">Team</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <div class="menu-toggle"> <i class="fas fa-bars"></i> </div> </header> <!-- Hero Section --> <section id="hero"> <div class="hero-content animated fadeIn"> <h1>Artisanal Coffee Experience</h1> <p>Discover the perfect blend of quality, flavor, and ambiance at Coffee Haven. Our handcrafted beverages are made with the finest locally-sourced ingredients.</p> <div class="hero-buttons"> <a href="#menu" class="btn">View Menu</a> <a href="#contact" class="btn btn-outline">Book a Table</a> </div> </div> <div class="hero-image animated fadeIn delay-1"> <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Specialty Coffee"> <img src="https://images.unsplash.com/photo-1515444744559-7be63e1600de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Coffee Beans" class="coffee-beans bean-1"> <img src="https://images.unsplash.com/photo-1515444744559-7be63e1600de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Coffee Beans" class="coffee-beans bean-2"> </div> </section> <!-- About Section --> <section id="about"> <div class="about-image animated slideInLeft"> <img src="https://images.unsplash.com/photo-1445116572660-236099ec97a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Coffee Shop Interior"> </div> <div class="about-content animated slideInRight"> <h2>Our Story</h2> <p>Founded in 2010, Coffee Haven began as a small passion project between two coffee enthusiasts. What started as a dream to share exceptional coffee with our community has grown into a beloved local institution.</p> <p>We meticulously source our beans from sustainable farms around the world, roast them in-house to perfection, and craft each beverage with care and precision. Our baristas are trained to bring out the unique flavors in every cup.</p> <p>Beyond coffee, we've created a warm, inviting space where people can connect, work, or simply enjoy a moment of peace.</p> <a href="#team" class="btn">Meet Our Team</a> </div> </section> <!-- Menu Section --> <section id="menu"> <h2 class="animated fadeIn">Our Menu</h2> <p class="animated fadeIn delay-1">Discover our carefully crafted selection of coffee, tea, and delicious treats</p> <div class="menu-container"> <!-- Coffee --> <div class="menu-item animated fadeIn delay-1"> <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Espresso"> <div class="menu-item-content"> <h3>Espresso</h3> <p>Our signature rich and creamy espresso, pulled to perfection</p> <div class="price">$3.50</div> </div> </div> <!-- Latte --> <div class="menu-item animated fadeIn delay-2"> <img src="https://images.unsplash.com/photo-1568649929103-28ffbefaca1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Latte"> <div class="menu-item-content"> <h3>Haven Latte</h3> <p>Espresso with steamed milk and a light layer of foam</p> <div class="price">$4.75</div> </div> </div> <!-- Cold Brew --> <div class="menu-item animated fadeIn delay-3"> <img src="https://images.unsplash.com/photo-1600854207865-0eaf8c153a01?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Cold Brew"> <div class="menu-item-content"> <h3>Cold Brew</h3> <p>Smooth, slow-steeped cold brew coffee served over ice</p> <div class="price">$4.50</div> </div> </div> <!-- Avocado Toast --> <div class="menu-item animated fadeIn delay-1"> <img src="https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Avocado Toast"> <div class="menu-item-content"> <h3>Avocado Toast</h3> <p>Sourdough bread with smashed avocado, cherry tomatoes, and microgreens</p> <div class="price">$8.50</div> </div> </div> <!-- Croissant --> <div class="menu-item animated fadeIn delay-2"> <img src="https://images.unsplash.com/photo-1589010588553-46e8e7c21788?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1980&q=80" alt="Croissant"> <div class="menu-item-content"> <h3>Butter Croissant</h3> <p>Flaky, buttery croissant made fresh daily</p> <div class="price">$3.75</div> </div> </div> <!-- Matcha Latte --> <div class="menu-item animated fadeIn delay-3"> <img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Matcha Latte"> <div class="menu-item-content"> <h3>Matcha Latte</h3> <p>Ceremonial grade matcha whisked with steamed milk</p> <div class="price">$5.25</div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery"> <h2 class="animated fadeIn">Gallery</h2> <p class="animated fadeIn delay-1">A glimpse into our coffee haven</p> <div class="gallery-container"> <div class="gallery-item animated fadeIn delay-1"> <img src="https://images.unsplash.com/photo-1453614512568-c4024d13c247?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80" alt="Coffee Shop Interior"> </div> <div class="gallery-item animated fadeIn delay-2"> <img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Barista Making Coffee"> </div> <div class="gallery-item animated fadeIn delay-3"> <img src="https://images.unsplash.com/photo-1498804103079-a6351b050096?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Coffee on Table"> </div> <div class="gallery-item animated fadeIn delay-1"> <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Coffee Close Up"> </div> <div class="gallery-item animated fadeIn delay-2"> <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Coffee Shop Exterior"> </div> <div class="gallery-item animated fadeIn delay-3"> <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Coffee Art"> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials"> <h2 class="animated fadeIn">What Our Customers Say</h2> <p class="animated fadeIn delay-1">Don't just take our word for it</p> <div class="testimonials-container"> <div class="testimonial animated fadeIn delay-1"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Sarah J."> <h3>Sarah J.</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> <p>"The best latte I've ever had! The atmosphere is so cozy and the staff is incredibly friendly. This is my go-to spot for getting work done or catching up with friends."</p> </div> <div class="testimonial animated fadeIn delay-2"> <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 T."> <h3>Michael T.</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> <p>"As a coffee connoisseur, I'm very particular about my brew. Coffee Haven never disappoints. Their single-origin pour-overs are exceptional, and they rotate interesting beans weekly."</p> </div> <div class="testimonial animated fadeIn delay-3"> <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="Jessica L."> <h3>Jessica L.</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> <p>"I come here every Saturday morning with my laptop. The wifi is reliable, the chairs are comfortable, and the avocado toast is to die for. Plus, the baristas remember my usual order!"</p> </div> <div class="testimonial animated fadeIn delay-1"> <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="David K."> <h3>David K.</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> <p>"The cold brew here is life-changing. I've tried to replicate it at home but nothing comes close. The team clearly puts so much care into every aspect of their business."</p> </div> </div> </section> <!-- Team Section --> <section id="team"> <h2 class="animated fadeIn">Meet Our Team</h2> <p class="animated fadeIn delay-1">The passionate people behind your perfect cup</p> <div class="team-container"> <div class="team-member animated fadeIn delay-1"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1987&q=80" alt="Alex Rodriguez"> <h3>Alex Rodriguez</h3> <p>Head Barista & Roaster</p> <p>With 12 years in specialty coffee, Alex ensures every cup meets our exacting standards.</p> <div class="social-links"> <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"></i></a> </div> </div> <div class="team-member animated fadeIn delay-2"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="Jamie Chen"> <h3>Jamie Chen</h3> <p>Coffee Director</p> <p>Jamie travels the world to source our exceptional beans and develop new blends.</p> <div class="social-links"> <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"></i></a> </div> </div> <div class="team-member animated fadeIn delay-3"> <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1987&q=80" alt="Marcus Johnson"> <h3>Marcus Johnson</h3> <p>Pastry Chef</p> <p>Marcus creates our delicious baked goods using local, seasonal ingredients.</p> <div class="social-links"> <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"></i></a> </div> </div> <div class="team-member animated fadeIn delay-1"> <img src="https://images.unsplash.com/photo-1542190891-2093d38760f2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80" alt="Sophia Martinez"> <h3>Sophia Martinez</h3> <p>Customer Experience</p> <p>Sophia ensures every guest feels welcome and leaves with a smile.</p> <div class="social-links"> <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"></i></a> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact"> <div class="contact-info animated slideInLeft"> <h2>Visit Us</h2> <div class="info-item"> <i class="fas fa-map-marker-alt"></i> <div> <h3>Location</h3> <p>123 Brew Street, Coffee District<br>Portland, OR 97201</p> </div> </div> <div class="info-item"> <i class="fas fa-clock"></i> <div> <h3>Hours</h3> <p>Monday - Friday: 6:30am - 7pm<br> Saturday - Sunday: 7am - 8pm</p> </div> </div> <div class="info-item"> <i class="fas fa-phone-alt"></i> <div> <h3>Phone</h3> <p>(503) 555-0199</p> </div> </div> <div class="info-item"> <i class="fas fa-envelope"></i> <div> <h3>Email</h3> <p>hello@coffeehaven.com</p> </div> </div> </div> <div class="contact-form animated slideInRight"> <h2>Get In Touch</h2> <form> <div class="form-group"> <label for="name">Name</label> <input type="text" id="name" required> </div> <div class="form-group"> <label for="email">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">Message</label> <textarea id="message" required></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> </section> <!-- Footer --> <footer> <a href="#" class="footer-logo">Coffee <span>Haven</span></a> <div class="footer-links"> <a href="#hero">Home</a> <a href="#about">About</a> <a href="#menu">Menu</a> <a href="#gallery">Gallery</a> <a href="#testimonials">Testimonials</a> <a href="#team">Team</a> <a href="#contact">Contact</a> <a href="#">Privacy Policy</a> </div> <div class="social-icons"> <a href="#"><i class="fab fa-instagram"></i></a> <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-tiktok"></i></a> </div> <p class="copyright">© 2023 Coffee Haven. All rights reserved.</p> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary: #6F4E37; --secondary: #C4A484; --light: #F5F5DC; --dark: #3E2723; --accent: #D2B48C; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: var(--light); color: var(--dark); overflow-x: hidden; } section { min-height: 100vh; padding: 5rem 10%; position: relative; overflow: hidden; } h1, h2, h3 { font-family: 'Playfair Display', serif; color: var(--primary); } h1 { font-size: 4rem; margin-bottom: 1.5rem; } h2 { font-size: 3rem; margin-bottom: 1.5rem; } p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem; } .btn { display: inline-block; background-color: var(--primary); color: white; padding: 0.8rem 1.8rem; border-radius: 30px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: 2px solid var(--primary); } .btn:hover { background-color: transparent; color: var(--primary); } .btn-outline { background-color: transparent; color: var(--primary); } .btn-outline:hover { background-color: var(--primary); color: white; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } @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: forwards; } .fadeIn { animation: fadeIn 1s ease forwards; } .slideInLeft { animation: slideInLeft 1s ease forwards; } .slideInRight { animation: slideInRight 1s ease forwards; } .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } /* Header/Navigation */ header { position: fixed; top: 0; left: 0; width: 100%; padding: 1.5rem 10%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; transition: all 0.3s ease; } header.scrolled { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); padding: 1rem 10%; } .logo { font-size: 2rem; font-weight: 700; color: var(--primary); text-decoration: none; font-family: 'Playfair Display', serif; } .logo span { color: var(--secondary); } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 2.5rem; } nav ul li a { color: var(--dark); text-decoration: none; font-weight: 600; transition: color 0.3s ease; position: relative; } nav ul li a:hover { color: var(--primary); } nav ul li a::after { content: ''; position: absolute; width: 0; height: 2px; background-color: var(--primary); bottom: -5px; left: 0; transition: width 0.3s ease; } nav ul li a:hover::after { width: 100%; } .menu-toggle { display: none; cursor: pointer; font-size: 1.5rem; color: var(--primary); } /* Hero Section */ #hero { display: flex; align-items: center; background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('https://images.unsplash.com/photo-1498804103079-a6351b050096?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80') no-repeat center center/cover; } .hero-content { width: 50%; } .hero-image { width: 50%; position: relative; } .hero-image img { width: 100%; max-width: 500px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); animation: float 4s ease-in-out infinite; } .coffee-beans { position: absolute; width: 100px; opacity: 0.7; } .bean-1 { top: -30px; left: -30px; animation: float 3s ease-in-out infinite; } .bean-2 { bottom: -20px; right: -20px; animation: float 3.5s ease-in-out infinite 0.5s; } /* About Section */ #about { background-color: var(--primary); color: white; display: flex; align-items: center; } #about h2 { color: white; } .about-image { width: 50%; position: relative; } .about-image img { width: 100%; max-width: 500px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .about-content { width: 50%; padding-left: 5rem; } /* Menu Section */ #menu { text-align: center; background-color: var(--light); } #menu h2 { margin-bottom: 3rem; } .menu-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .menu-item { background-color: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .menu-item:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .menu-item img { width: 100%; height: 200px; object-fit: cover; } .menu-item-content { padding: 1.5rem; } .menu-item h3 { margin-bottom: 0.5rem; } .price { font-weight: 700; color: var(--primary); font-size: 1.3rem; } /* Gallery Section */ #gallery { background-color: var(--secondary); text-align: center; } .gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .gallery-item { border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; position: relative; } .gallery-item:hover { transform: scale(1.05); } .gallery-item img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.1); } /* Testimonials Section */ #testimonials { text-align: center; } .testimonials-container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 2rem; padding: 2rem 0; scrollbar-width: none; /* Firefox */ } .testimonials-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .testimonial { min-width: 300px; scroll-snap-align: start; background-color: white; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .testimonial img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 3px solid var(--secondary); } .testimonial h3 { margin-bottom: 0.5rem; } .rating { color: var(--accent); margin-bottom: 1rem; } /* Team Section */ #team { background-color: var(--primary); color: white; text-align: center; } #team h2 { color: white; } .team-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; } .team-member { background-color: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 15px; transition: transform 0.3s ease; } .team-member:hover { transform: translateY(-10px); background-color: rgba(255, 255, 255, 0.2); } .team-member img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 5px solid var(--secondary); } .social-links { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; } .social-links a { color: white; background-color: var(--secondary); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .social-links a:hover { background-color: var(--accent); } /* Contact Section */ #contact { display: flex; align-items: center; } .contact-info { width: 50%; } .contact-info h2 { margin-bottom: 2rem; } .info-item { display: flex; align-items: center; margin-bottom: 1.5rem; } .info-item i { font-size: 1.5rem; color: var(--primary); margin-right: 1rem; width: 50px; height: 50px; background-color: rgba(111, 78, 55, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .contact-form { width: 50%; padding-left: 5rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; } .form-group input, .form-group textarea { width: 100%; padding: 0.8rem 1rem; border: 2px solid #ddd; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); } .form-group textarea { height: 150px; resize: vertical; } /* Footer */ footer { background-color: var(--dark); color: white; text-align: center; padding: 3rem 10%; } .footer-logo { font-size: 2rem; font-weight: 700; color: white; text-decoration: none; font-family: 'Playfair Display', serif; margin-bottom: 1.5rem; display: inline-block; } .footer-logo span { color: var(--secondary); } .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; } .footer-links a { color: white; text-decoration: none; transition: color 0.3s ease; } .footer-links a:hover { color: var(--secondary); } .social-icons { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; } .social-icons a { color: white; font-size: 1.5rem; transition: color 0.3s ease; } .social-icons a:hover { color: var(--secondary); } .copyright { opacity: 0.7; font-size: 0.9rem; } /* Responsive Styles */ @media (max-width: 1200px) { section { padding: 5rem 7%; } } @media (max-width: 992px) { h1 { font-size: 3.5rem; } h2 { font-size: 2.5rem; } #hero, #about, #contact { flex-direction: column; text-align: center; } .hero-content, .hero-image, .about-content, .about-image, .contact-info, .contact-form { width: 100%; } .about-content, .contact-form { padding-left: 0; margin-top: 3rem; } .info-item { justify-content: center; } } @media (max-width: 768px) { section { padding: 5rem 5%; } h1 { font-size: 3rem; } .menu-toggle { display: block; } nav { position: fixed; top: 0; right: -100%; width: 80%; max-width: 400px; height: 100vh; background-color: white; box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1); transition: right 0.3s ease; display: flex; align-items: center; justify-content: center; } nav.active { right: 0; } nav ul { flex-direction: column; align-items: center; } nav ul li { margin: 1.5rem 0; } .close-menu { position: absolute; top: 2rem; right: 2rem; font-size: 1.5rem; cursor: pointer; } } @media (max-width: 576px) { h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } .btn { padding: 0.7rem 1.5rem; } }
JavaScript
// Navigation Scroll Effect window.addEventListener('scroll', function() { const header = document.getElementById('header'); if (window.scrollY > 100) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // Mobile Menu Toggle const menuToggle = document.querySelector('.menu-toggle'); const nav = document.getElementById('nav'); const closeMenu = document.querySelector('.close-menu'); menuToggle.addEventListener('click', function() { nav.classList.add('active'); }); closeMenu.addEventListener('click', function() { nav.classList.remove('active'); }); // Close mobile menu when clicking a link const navLinks = document.querySelectorAll('nav ul li a'); navLinks.forEach(link => { link.addEventListener('click', function() { nav.classList.remove('active'); }); }); // Scroll Animation const animatedElements = document.querySelectorAll('.animated'); function checkScroll() { animatedElements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementPosition < windowHeight - 100) { element.classList.add(element.classList[1]); // Add the animation class (fadeIn, slideInLeft, etc.) } }); } // Initialize animations on page load for elements already in view window.addEventListener('load', checkScroll); // Check for new elements on scroll window.addEventListener('scroll', checkScroll); // 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' }); } }); }); // Pulse animation for CTA buttons const ctaButtons = document.querySelectorAll('.btn'); setInterval(function() { ctaButtons.forEach(button => { button.style.animation = 'pulse 2s infinite'; setTimeout(() => { button.style.animation = ''; }, 2000); }); }, 8000);
Output Preview
Desktop
Mobile
Fullscreen