Glamour Studio 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>Glamour Studio | Premium Beauty Services</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"> </head> <body> <!-- Header Section --> <header> <nav class="navbar"> <a href="#" class="logo"><i class="fas fa-spa"></i>Glamour Studio</a> <div class="menu-toggle" id="mobile-menu"> <i class="fas fa-bars"></i> </div> <ul class="nav-links" id="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#team">Team</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <!-- Hero Section --> <section class="hero" id="home"> <div class="hero-content slide-in-left"> <h1 class="hero-title">Discover Your <span class="velvet-caption">Natural Beauty</span></h1> <p class="hero-subtitle">Experience luxury beauty treatments tailored to enhance your unique features and boost your confidence.</p> <a href="#services" class="btn">Explore Services</a> </div> </section> <!-- About Section --> <section class="section" id="about"> <h2 class="section-title">About Our <span class="velvet-caption">Studio</span></h2> <div class="about-content"> <div class="about-text slide-in-left"> <h3>Where Beauty Meets Elegance</h3> <p>At Glamour Studio, we believe that beauty is an art form that should be accessible to everyone. Our team of certified professionals is dedicated to providing personalized services that highlight your natural beauty.</p> <p>Founded in 2010, we've grown from a small boutique to one of the most sought-after beauty destinations in the city, thanks to our commitment to excellence and client satisfaction.</p> <a href="#contact" class="btn">Book Consultation</a> </div> <div class="about-image slide-in-right"> <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1886&q=80" alt="Beauty Studio Interior"> </div> </div> </section> <!-- Services Section --> <section class="section services" id="services"> <h2 class="section-title">Our <span class="velvet-caption">Services</span></h2> <div class="services-container"> <!-- Service Card 1 --> <div class="service-card slide-in-up"> <div class="service-image"> <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80" alt="Hair Styling"> </div> <div class="service-content"> <h3 class="service-title">Hair Styling</h3> <p class="service-price">From $50</p> <p class="service-desc">Transform your look with our expert hair styling services, from trendy cuts to luxurious treatments.</p> <a href="#" class="btn">Book Now</a> </div> </div> <!-- Service Card 2 --> <div class="service-card slide-in-up" style="animation-delay: 0.2s;"> <div class="service-image"> <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Facial Treatments"> </div> <div class="service-content"> <h3 class="service-title">Facial Treatments</h3> <p class="service-price">From $80</p> <p class="service-desc">Rejuvenate your skin with our customized facials using premium skincare products.</p> <a href="#" class="btn">Book Now</a> </div> </div> <!-- Service Card 3 --> <div class="service-card slide-in-up" style="animation-delay: 0.4s;"> <div class="service-image"> <img src="https://images.unsplash.com/photo-1519735777090-ec97162dc266?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1715&q=80" alt="Nail Art"> </div> <div class="service-content"> <h3 class="service-title">Nail Art</h3> <p class="service-price">From $35</p> <p class="service-desc">Express your style with our creative nail designs and premium manicure/pedicure services.</p> <a href="#" class="btn">Book Now</a> </div> </div> <!-- Service Card 4 --> <div class="service-card slide-in-up" style="animation-delay: 0.6s;"> <div class="service-image"> <img src="https://images.unsplash.com/photo-1600334129128-685c5582fd35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Makeup"> </div> <div class="service-content"> <h3 class="service-title">Professional Makeup</h3> <p class="service-price">From $65</p> <p class="service-desc">Enhance your natural beauty with our professional makeup services for any occasion.</p> <a href="#" class="btn">Book Now</a> </div> </div> <!-- Service Card 5 --> <div class="service-card slide-in-up" style="animation-delay: 0.8s;"> <div class="service-image"> <img src="https://images.unsplash.com/photo-1600334129128-685c5582fd35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Waxing"> </div> <div class="service-content"> <h3 class="service-title">Waxing & Hair Removal</h3> <p class="service-price">From $25</p> <p class="service-desc">Smooth, hair-free skin with our professional waxing services using high-quality products.</p> <a href="#" class="btn">Book Now</a> </div> </div> <!-- Service Card 6 --> <div class="service-card slide-in-up" style="animation-delay: 1s;"> <div class="service-image"> <img src="https://images.unsplash.com/photo-1596704017256-9c3a411a86d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Bridal Package"> </div> <div class="service-content"> <h3 class="service-title">Bridal Packages</h3> <p class="service-price">From $200</p> <p class="service-desc">Complete bridal beauty packages to make your special day absolutely perfect.</p> <a href="#" class="btn">Book Now</a> </div> </div> </div> </section> <!-- Showcase Section --> <section class="section showcase"> <h2 class="section-title">Our <span class="velvet-caption">Work</span></h2> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <!-- Slide 1 --> <div class="swiper-slide"> <div class="showcase-slide"> <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80" alt="Hair Makeover"> <h3 class="showcase-title">Hair Makeover</h3> <p class="showcase-desc">Our stylist transformed Sarah's look with a modern cut and balayage color that perfectly complements her skin tone.</p> <a href="#" class="btn">View More</a> </div> </div> <!-- Slide 2 --> <div class="swiper-slide"> <div class="showcase-slide"> <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Bridal Makeup"> <h3 class="showcase-title">Bridal Makeup</h3> <p class="showcase-desc">Jessica's wedding day look featured natural glam makeup that lasted all day and photographed beautifully.</p> <a href="#" class="btn">View More</a> </div> </div> <!-- Slide 3 --> <div class="swiper-slide"> <div class="showcase-slide"> <img src="https://images.unsplash.com/photo-1596704017256-9c3a411a86d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Nail Art"> <h3 class="showcase-title">Creative Nail Art</h3> <p class="showcase-desc">Emily wanted something unique for her vacation - our nail artist created this tropical design with 3D elements.</p> <a href="#" class="btn">View More</a> </div> </div> </div> <div class="swiper-pagination"></div> </div> </section> <!-- Team Section --> <section class="section" id="team"> <h2 class="section-title">Meet Our <span class="velvet-caption">Experts</span></h2> <div class="team-container"> <!-- Team Member 1 --> <div class="team-card slide-in-up"> <div class="team-image"> <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Sarah Johnson"> <div class="team-social"> <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="team-info"> <h3 class="team-name">Sarah Johnson</h3> <p class="team-role">Master Stylist</p> </div> </div> <!-- Team Member 2 --> <div class="team-card slide-in-up" style="animation-delay: 0.2s;"> <div class="team-image"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1761&q=80" alt="Emily Chen"> <div class="team-social"> <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="team-info"> <h3 class="team-name">Emily Chen</h3> <p class="team-role">Makeup Artist</p> </div> </div> <!-- Team Member 3 --> <div class="team-card slide-in-up" style="animation-delay: 0.4s;"> <div class="team-image"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1888&q=80" alt="Lisa Rodriguez"> <div class="team-social"> <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="team-info"> <h3 class="team-name">Lisa Rodriguez</h3> <p class="team-role">Skincare Specialist</p> </div> </div> <!-- Team Member 4 --> <div class="team-card slide-in-up" style="animation-delay: 0.6s;"> <div class="team-image"> <img src="https://images.unsplash.com/photo-1583864697784-a0efc8379f70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1888&q=80" alt="Mia Williams"> <div class="team-social"> <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="team-info"> <h3 class="team-name">Mia Williams</h3> <p class="team-role">Nail Technician</p> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="section testimonials" id="testimonials"> <h2 class="section-title">Client <span class="velvet-caption">Testimonials</span></h2> <div class="swiper testimonialSwiper"> <div class="swiper-wrapper"> <!-- Testimonial 1 --> <div class="swiper-slide"> <div class="testimonial-slide"> <p class="testimonial-text">I've been coming to Glamour Studio for years and they never disappoint. Sarah always knows exactly what haircut will suit me best. The atmosphere is so relaxing and the staff are all wonderful.</p> <div class="testimonial-author"> <div class="author-image"> <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Jennifer Lopez"> </div> <div class="author-info"> <h4>Jennifer Lopez</h4> <p>Regular Client</p> </div> </div> </div> </div> <!-- Testimonial 2 --> <div class="swiper-slide"> <div class="testimonial-slide"> <p class="testimonial-text">Emily did my makeup for my wedding and I couldn't have been happier. She listened to what I wanted and executed it perfectly. I felt beautiful all day and my makeup lasted through tears and dancing!</p> <div class="testimonial-author"> <div class="author-image"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Amanda Smith"> </div> <div class="author-info"> <h4>Amanda Smith</h4> <p>Bride</p> </div> </div> </div> </div> <!-- Testimonial 3 --> <div class="swiper-slide"> <div class="testimonial-slide"> <p class="testimonial-text">The facial I received from Lisa transformed my skin. She identified issues I didn't even know I had and recommended products that actually work. My skin has never looked better!</p> <div class="testimonial-author"> <div class="author-image"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Rachel Green"> </div> <div class="author-info"> <h4>Rachel Green</h4> <p>New Client</p> </div> </div> </div> </div> <!-- Testimonial 4 --> <div class="swiper-slide"> <div class="testimonial-slide"> <p class="testimonial-text">Mia's nail art is incredible! She takes my vague ideas and turns them into works of art. I get compliments everywhere I go. Worth every penny for the quality and creativity.</p> <div class="testimonial-author"> <div class="author-image"> <img src="https://randomuser.me/api/portraits/women/76.jpg" alt="Taylor Swift"> </div> <div class="author-info"> <h4>Taylor Swift</h4> <p>Nail Art Enthusiast</p> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </section> <!-- Pricing Section --> <section class="section" id="pricing"> <h2 class="section-title">Our <span class="velvet-caption">Pricing</span></h2> <div class="pricing-container"> <!-- Package 1 --> <div class="pricing-card slide-in-up"> <h3 class="pricing-title">Basic Care</h3> <div class="pricing-price">$49<span>/month</span></div> <ul class="pricing-features"> <li><i class="fas fa-check"></i> 1 Haircut & Styling</li> <li><i class="fas fa-check"></i> 1 Basic Manicure</li> <li><i class="fas fa-check"></i> 10% Off Products</li> <li><i class="fas fa-times"></i> No Facial Treatments</li> <li><i class="fas fa-times"></i> No Makeup Services</li> </ul> <a href="#" class="btn">Choose Plan</a> </div> <!-- Package 2 --> <div class="pricing-card slide-in-up popular" style="animation-delay: 0.2s;"> <div class="popular-badge">Most Popular</div> <h3 class="pricing-title">Premium Care</h3> <div class="pricing-price">$99<span>/month</span></div> <ul class="pricing-features"> <li><i class="fas fa-check"></i> 2 Hair Services</li> <li><i class="fas fa-check"></i> 1 Facial Treatment</li> <li><i class="fas fa-check"></i> 2 Manicures</li> <li><i class="fas fa-check"></i> 15% Off Products</li> <li><i class="fas fa-check"></i> 1 Makeup Application</li> </ul> <a href="#" class="btn">Choose Plan</a> </div> <!-- Package 3 --> <div class="pricing-card slide-in-up" style="animation-delay: 0.4s;"> <h3 class="pricing-title">Luxury Care</h3> <div class="pricing-price">$199<span>/month</span></div> <ul class="pricing-features"> <li><i class="fas fa-check"></i> Unlimited Hair Services</li> <li><i class="fas fa-check"></i> 2 Facial Treatments</li> <li><i class="fas fa-check"></i> Unlimited Manicures</li> <li><i class="fas fa-check"></i> 20% Off Products</li> <li><i class="fas fa-check"></i> 2 Makeup Applications</li> </ul> <a href="#" class="btn">Choose Plan</a> </div> </div> </section> <!-- Contact Section --> <section class="section contact" id="contact"> <h2 class="section-title">Get In <span class="velvet-caption">Touch</span></h2> <div class="contact-container"> <div class="contact-info slide-in-left"> <h3>Contact Information</h3> <div class="info-item"> <div class="info-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="info-text"> <h4>Our Location</h4> <p>123 Beauty Street, Glamour City, GC 12345</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-phone-alt"></i> </div> <div class="info-text"> <h4>Phone Number</h4> <p>+1 (555) 123-4567</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-envelope"></i> </div> <div class="info-text"> <h4>Email Address</h4> <p>info@glamourstudio.com</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-clock"></i> </div> <div class="info-text"> <h4>Working Hours</h4> <p>Monday - Friday: 9am - 8pm<br>Saturday: 10am - 6pm<br>Sunday: 11am - 5pm</p> </div> </div> </div> <div class="contact-form slide-in-right"> <h3>Book An Appointment</h3> <form> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" class="form-control" placeholder="Enter your name" required> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" class="form-control" placeholder="Enter your email" required> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone" class="form-control" placeholder="Enter your phone number" required> </div> <div class="form-group"> <label for="service">Service Interested In</label> <select id="service" class="form-control" required> <option value="">Select a service</option> <option value="hair">Hair Styling</option> <option value="facial">Facial Treatments</option> <option value="makeup">Professional Makeup</option> <option value="nails">Nail Services</option> <option value="waxing">Waxing</option> <option value="bridal">Bridal Packages</option> </select> </div> <div class="form-group"> <label for="message">Additional Message</label> <textarea id="message" class="form-control" placeholder="Any special requests or notes"></textarea> </div> <button type="submit" class="btn">Book Now</button> </form> </div> </div> </section> <!-- Footer --> <footer> <div class="footer-content"> <div class="footer-col"> <h3>Glamour Studio</h3> <p>Your premier destination for luxury beauty treatments and personalized care in the heart of the city.</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-pinterest-p"></i></a> </div> </div> <div class="footer-col"> <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="#services">Services</a></li> <li><a href="#team">Our Team</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-col"> <h3>Services</h3> <ul class="footer-links"> <li><a href="#">Hair Styling</a></li> <li><a href="#">Makeup</a></li> <li><a href="#">Facials</a></li> <li><a href="#">Nail Art</a></li> <li><a href="#">Waxing</a></li> <li><a href="#">Bridal Packages</a></li> </ul> </div> <div class="footer-col"> <h3>Newsletter</h3> <p>Subscribe to our newsletter for special offers and beauty tips.</p> <form> <div class="form-group"> <input type="email" class="form-control" placeholder="Your Email Address" required> </div> <button type="submit" class="btn">Subscribe</button> </form> </div> </div> <div class="copyright"> <p>© 2023 Glamour Studio. All Rights Reserved.</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> </body> </html>
CSS
:root { --primary-color: #FFD700; --primary-dark: #FFC000; --primary-light: #FFF9C4; --text-dark: #333333; --text-light: #f8f8f8; --glass-bg: rgba(255, 255, 255, 0.15); --glass-border: rgba(255, 255, 255, 0.18); --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: #f9f9f9; color: var(--text-dark); overflow-x: hidden; } /* Header Section */ header { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); padding: 1rem 5%; position: fixed; width: 100%; z-index: 1000; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow); border-bottom: 1px solid var(--glass-border); } .navbar { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8rem; font-weight: 700; color: white; text-decoration: none; display: flex; align-items: center; } .logo i { margin-right: 0.5rem; color: white; } .nav-links { display: flex; list-style: none; } .nav-links li { margin-left: 2rem; } .nav-links a { color: white; text-decoration: none; font-weight: 500; transition: all 0.3s ease; position: relative; } .nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; background: white; bottom: -5px; left: 0; transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } .menu-toggle { display: none; cursor: pointer; color: white; font-size: 1.5rem; } /* Hero Section */ .hero { height: 100vh; background: url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80') no-repeat center center/cover; display: flex; align-items: center; padding: 0 5%; position: relative; } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } .hero-content { position: relative; z-index: 1; max-width: 600px; color: white; } .hero-title { font-size: 3.5rem; margin-bottom: 1rem; line-height: 1.2; } .hero-subtitle { font-size: 1.2rem; margin-bottom: 2rem; font-weight: 300; } .btn { display: inline-block; background: var(--primary-color); color: var(--text-dark); padding: 0.8rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; } .btn:hover { background: white; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } /* About Section */ .section { padding: 5rem 5%; } .section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; position: relative; color: var(--text-dark); } .section-title::after { content: ''; position: absolute; width: 80px; height: 4px; background: var(--primary-color); bottom: -10px; left: 50%; transform: translateX(-50%); } .about-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; } .about-text { flex: 1; min-width: 300px; } .about-text h3 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--primary-dark); } .about-text p { margin-bottom: 1.5rem; line-height: 1.6; } .about-image { flex: 1; min-width: 300px; position: relative; } .about-image img { width: 100%; border-radius: 10px; box-shadow: var(--shadow); } .about-image::before { content: ''; position: absolute; width: 100%; height: 100%; border: 3px solid var(--primary-color); border-radius: 10px; top: -20px; left: -20px; z-index: -1; } /* Services Section */ .services { background: linear-gradient(135deg, #f9f9f9, #fff); } .services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .service-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.5s ease; position: relative; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--primary-color); } .service-image { height: 200px; overflow: hidden; } .service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .service-card:hover .service-image img { transform: scale(1.1); } .service-content { padding: 1.5rem; } .service-title { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--text-dark); } .service-price { font-size: 1.2rem; color: var(--primary-dark); margin-bottom: 1rem; font-weight: 600; } .service-desc { margin-bottom: 1.5rem; color: #666; line-height: 1.6; } /* Showcase Section */ .showcase { background: linear-gradient(135deg, var(--primary-light), white); position: relative; overflow: hidden; } .swiper { width: 100%; padding: 3rem 0; } .showcase-slide { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--glass-border); padding: 2rem; text-align: center; max-width: 800px; margin: 0 auto; } .showcase-slide img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 10px; margin-bottom: 1.5rem; } .showcase-title { font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-dark); } .showcase-desc { color: var(--text-dark); line-height: 1.6; margin-bottom: 1.5rem; } .swiper-pagination-bullet { background: var(--primary-color) !important; opacity: 0.5 !important; width: 12px !important; height: 12px !important; } .swiper-pagination-bullet-active { opacity: 1 !important; background: var(--primary-dark) !important; } /* Team Section */ .team-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .team-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; text-align: center; } .team-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .team-image { height: 300px; overflow: hidden; position: relative; } .team-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .team-card:hover .team-image img { transform: scale(1.1); } .team-social { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(255, 215, 0, 0.8); padding: 1rem; transform: translateY(100%); transition: transform 0.3s ease; } .team-card:hover .team-social { transform: translateY(0); } .team-social a { color: white; margin: 0 0.5rem; font-size: 1.2rem; transition: all 0.3s ease; } .team-social a:hover { color: var(--text-dark); } .team-info { padding: 1.5rem; } .team-name { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--text-dark); } .team-role { color: var(--primary-dark); font-weight: 500; } /* Testimonials Section */ .testimonials { background: linear-gradient(135deg, var(--primary-light), white); } .testimonial-slide { background: white; border-radius: 15px; padding: 2rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); margin: 1rem; position: relative; } .testimonial-slide::before { content: '\201C'; position: absolute; top: 20px; left: 20px; font-size: 4rem; color: var(--primary-light); font-family: serif; line-height: 1; } .testimonial-text { font-style: italic; margin-bottom: 1.5rem; padding-top: 1rem; position: relative; z-index: 1; } .testimonial-author { display: flex; align-items: center; } .author-image { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin-right: 1rem; } .author-image img { width: 100%; height: 100%; object-fit: cover; } .author-info h4 { font-size: 1.1rem; margin-bottom: 0.2rem; } .author-info p { color: #666; font-size: 0.9rem; } /* Pricing Section */ .pricing-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .pricing-card { background: white; border-radius: 15px; padding: 2rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .pricing-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .pricing-card.popular { border: 2px solid var(--primary-color); } .popular-badge { position: absolute; top: 0; right: 0; background: var(--primary-color); color: var(--text-dark); padding: 0.5rem 1rem; font-weight: 600; border-bottom-left-radius: 15px; } .pricing-title { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-dark); } .pricing-price { font-size: 2.5rem; color: var(--primary-dark); margin-bottom: 1.5rem; font-weight: 700; } .pricing-price span { font-size: 1rem; color: #666; } .pricing-features { margin-bottom: 2rem; } .pricing-features li { list-style: none; margin-bottom: 0.8rem; color: #666; } .pricing-features li i { color: var(--primary-color); margin-right: 0.5rem; } /* Contact Section */ .contact { background: linear-gradient(135deg, var(--primary-light), white); } .contact-container { display: flex; flex-wrap: wrap; gap: 2rem; } .contact-info { flex: 1; min-width: 300px; } .contact-info h3 { font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--primary-dark); } .info-item { display: flex; align-items: flex-start; margin-bottom: 1.5rem; } .info-icon { width: 50px; height: 50px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1rem; color: white; font-size: 1.2rem; } .info-text h4 { font-size: 1.2rem; margin-bottom: 0.3rem; } .info-text p { color: #666; } .contact-form { flex: 1; min-width: 300px; background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; } .form-control { width: 100%; padding: 0.8rem 1rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; transition: all 0.3s ease; } .form-control:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2); } textarea.form-control { min-height: 150px; resize: vertical; } /* Footer */ footer { background: var(--text-dark); color: white; padding: 3rem 5%; text-align: center; } .footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 2rem; } .footer-col { flex: 1; min-width: 250px; margin-bottom: 1.5rem; } .footer-col h3 { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--primary-color); } .footer-col p { margin-bottom: 1rem; color: #bbb; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 0.8rem; } .footer-links a { color: #bbb; text-decoration: none; transition: all 0.3s ease; } .footer-links a:hover { color: var(--primary-color); padding-left: 5px; } .social-links { display: flex; justify-content: center; margin-top: 1rem; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; margin: 0 0.5rem; color: white; transition: all 0.3s ease; } .social-links a:hover { background: var(--primary-color); color: var(--text-dark); transform: translateY(-5px); } .copyright { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5rem; color: #bbb; } /* Animations */ @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; } } @keyframes slideInUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .slide-in-left { animation: slideInLeft 1s ease forwards; } .slide-in-right { animation: slideInRight 1s ease forwards; } .slide-in-up { animation: slideInUp 1s ease forwards; } /* Velvet Caption Effect */ .velvet-caption { position: relative; display: inline-block; } .velvet-caption::after { content: ''; position: absolute; width: 100%; height: 8px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); bottom: -10px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.5s ease; } .velvet-caption:hover::after { transform: scaleX(1); transform-origin: left; } /* Responsive Styles */ @media (max-width: 992px) { .hero-title { font-size: 2.8rem; } } @media (max-width: 768px) { .menu-toggle { display: block; } .nav-links { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); flex-direction: column; align-items: center; padding: 2rem 0; transition: all 0.5s ease; } .nav-links.active { left: 0; } .nav-links li { margin: 1rem 0; } .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1rem; } .section-title { font-size: 2rem; } } @media (max-width: 576px) { .hero-title { font-size: 2rem; } .btn { padding: 0.6rem 1.5rem; } .section { padding: 3rem 5%; } }
JavaScript
// Mobile Menu Toggle const mobileMenu = document.getElementById('mobile-menu'); const navLinks = document.getElementById('nav-links'); mobileMenu.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'); }); }); // Initialize Swiper for Showcase const showcaseSwiper = new Swiper('.mySwiper', { loop: true, autoplay: { delay: 5000, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, }); // Initialize Swiper for Testimonials const testimonialSwiper = new Swiper('.testimonialSwiper', { loop: true, autoplay: { delay: 7000, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, breakpoints: { 640: { slidesPerView: 1, spaceBetween: 20, }, 768: { slidesPerView: 2, spaceBetween: 30, }, 1024: { slidesPerView: 3, spaceBetween: 40, }, } }); // Scroll Reveal Animation const scrollReveal = ScrollReveal({ origin: 'top', distance: '60px', duration: 2000, delay: 200, reset: true }); scrollReveal.reveal('.slide-in-left', { origin: 'left' }); scrollReveal.reveal('.slide-in-right', { origin: 'right' }); scrollReveal.reveal('.slide-in-up', { origin: 'bottom' }); // 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