Beauty Salon Contact 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>Glamour Studio | Beauty Salon</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <!-- Hero Section --> <section class="hero"> <div class="container hero-content"> <div class="row justify-content-center text-center"> <div class="col-md-12 col-lg-12"> <div class="typewriter"> <h1 class="display-3 fw-bold mb-4">Reveal Your Natural Beauty .</h1> </div> <p class="lead mb-4">Where beauty meets perfection and relaxation</p> <a href="#contact" class="btn btn-primary btn-lg">Book an Appointment</a> </div> </div> </div> </section> <!-- About Section --> <section class="curvy-section curvy-top curvy-bottom"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 mb-5 mb-lg-0"> <img src="https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8U2Fsb29ufGVufDB8fDB8fHww" alt="About Glamour Studio" class="img-fluid about-img"> </div> <div class="col-lg-6"> <h2 class="display-5 fw-bold mb-4">About <span class="text-primary">Glamour Studio</span></h2> <p class="tagline">Where Beauty Meets Artistry</p> <p class="lead">At Glamour Studio, we believe that every person deserves to feel beautiful and confident. With over 10 years of experience, we've established ourselves as the premier beauty destination for those seeking exceptional service in a luxurious environment.</p> <p>Our team of skilled beauty professionals combines technical expertise with artistic vision to enhance your natural beauty and provide you with an unforgettable experience.</p> <div class="mt-4"> <a href="#" class="btn btn-outline-primary me-2">Our Story</a> <a href="#" class="btn btn-primary">Meet Our Team</a> </div> </div> </div> </div> </section> <!-- Mission Section --> <section class="mission"> <div class="container"> <div class="row justify-content-center text-center mb-5"> <div class="col-md-10 col-lg-8"> <h2 class="display-5 fw-bold mb-4">Our Mission</h2> <p class="lead">To provide exceptional beauty services that enhance natural beauty, boost confidence, and provide a relaxing escape from everyday life.</p> </div> </div> <div class="row"> <div class="col-md-4 mb-4"> <div class="text-center"> <div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;"> <i class="fas fa-spa text-white fa-2x"></i> </div> <h4>Premium Products</h4> <p>We use only the highest quality, professional-grade products</p> </div> </div> <div class="col-md-4 mb-4"> <div class="text-center"> <div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;"> <i class="fas fa-star text-white fa-2x"></i> </div> <h4>Expert Stylists</h4> <p>Our team includes award-winning beauty professionals</p> </div> </div> <div class="col-md-4 mb-4"> <div class="text-center"> <div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;"> <i class="fas fa-gem text-white fa-2x"></i> </div> <h4>Luxury Experience</h4> <p>Enjoy a pampering session in our elegant, comfortable studio</p> </div> </div> </div> </div> </section> <!-- Services Section --> <section class="services"> <div class="container"> <div class="row justify-content-center text-center mb-5"> <div class="col-md-10 col-lg-8"> <h2 class="display-5 fw-bold mb-4">Our Premium Services</h2> <p class="lead">Indulge in our range of luxury beauty treatments</p> </div> </div> <div class="row"> <div class="col-md-4"> <div class="service-card"> <img src="https://images.unsplash.com/photo-1599351431202-1e0f0137899a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80" class="service-img w-100" alt="Hair Styling"> <div class="p-4 text-center"> <div class="service-icon"> <i class="fas fa-cut"></i> </div> <h4>Hair Styling</h4> <p>From precision cuts to stunning color transformations</p> <a href="#" class="btn btn-outline-primary mt-3">Learn More</a> </div> </div> </div> <div class="col-md-4"> <div class="service-card"> <img src="https://images.unsplash.com/photo-1512496015851-a90fb38ba796?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" class="service-img w-100" alt="Facial Treatments"> <div class="p-4 text-center"> <div class="service-icon"> <i class="fas fa-smile"></i> </div> <h4>Facial Treatments</h4> <p>Rejuvenating facials tailored to your skin's needs</p> <a href="#" class="btn btn-outline-primary mt-3">Learn More</a> </div> </div> </div> <div class="col-md-4"> <div class="service-card"> <img src="https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8U2Fsb29ufGVufDB8fDB8fHww" class="service-img w-100" alt="Nail Art"> <div class="p-4 text-center"> <div class="service-icon"> <i class="fas fa-hand-sparkles"></i> </div> <h4>Nail Artistry</h4> <p>Manicures, pedicures, and stunning nail designs</p> <a href="#" class="btn btn-outline-primary mt-3">Learn More</a> </div> </div> </div> </div> </div> </section> <!-- Vision Section --> <section class="vision"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 order-lg-2 mb-5 mb-lg-0"> <img src="https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8U2Fsb29ufGVufDB8fDB8fHww" alt="Our Vision" class="img-fluid vision-img"> </div> <div class="col-lg-6 order-lg-1"> <h2 class="display-5 fw-bold mb-4 animated-headline">Our Vision</h2> <p class="lead">To be the leading beauty destination known for innovation, exceptional service, and transformative results.</p> <p>We envision a future where everyone has access to premium beauty services that not only enhance appearance but also promote self-care and well-being.</p> <p>Through continuous education, cutting-edge techniques, and a commitment to excellence, we aim to set new standards in the beauty industry.</p> <div class="mt-4"> <a href="#" class="btn btn-primary">Our Beauty Philosophy</a> </div> </div> </div> </div> </section> <!-- Contact Form Section --> <section id="contact" class="contact-form"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-8"> <div class="form-container"> <h2 class="display-5 fw-bold text-center mb-4">Book Your Appointment</h2> <p class="text-center mb-5">Ready to experience the Glamour Studio difference? Contact us to schedule your beauty transformation.</p> <form> <div class="row"> <div class="col-md-6 mb-3"> <label for="firstName" class="form-label">First Name</label> <input type="text" class="form-control" id="firstName" required> </div> <div class="col-md-6 mb-3"> <label for="lastName" class="form-label">Last Name</label> <input type="text" class="form-control" id="lastName" required> </div> </div> <div class="mb-3"> <label for="email" class="form-label">Email Address</label> <input type="email" class="form-control" id="email" required> </div> <div class="mb-3"> <label for="phone" class="form-label">Phone Number</label> <input type="tel" class="form-control" id="phone"> </div> <div class="mb-3"> <label for="service" class="form-label">I'm interested in</label> <select class="form-select" id="service"> <option selected>Hair Services</option> <option>Skincare & Facials</option> <option>Nail Services</option> <option>Makeup Artistry</option> <option>Waxing & Threading</option> <option>Other Services</option> </select> </div> <div class="mb-3"> <label for="message" class="form-label">Your Message</label> <textarea class="form-control" id="message" rows="5" required></textarea> </div> <div class="text-center"> <button type="submit" class="btn btn-primary btn-lg">Send Request</button> </div> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container footer-content"> <div class="row"> <div class="col-lg-4 mb-4 mb-lg-0"> <h3 class="mb-4">Glamour Studio</h3> <p>Where beauty meets artistry and transformation begins.</p> <div class="social-icons mt-4"> <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-pinterest-p"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> <div class="col-lg-4 mb-4 mb-lg-0"> <h4 class="mb-4">Contact Info</h4> <p><i class="fas fa-map-marker-alt me-2"></i> 123 Beauty Avenue, Glamour District, CA 90210</p> <p><i class="fas fa-phone me-2"></i> +1 (310) 555-BEAUTY</p> <p><i class="fas fa-envelope me-2"></i> info@glamourstudio.com</p> </div> <div class="col-lg-4"> <h4 class="mb-4">Opening Hours</h4> <p>Monday - Friday: 9:00 AM - 8:00 PM</p> <p>Saturday: 9:00 AM - 6:00 PM</p> <p>Sunday: 10:00 AM - 4:00 PM</p> <p class="mt-3">*By appointment only</p> </div> </div> <hr class="my-4 bg-light"> <div class="text-center"> <p>© 2023 Glamour Studio. All rights reserved.</p> </div> </div> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
CSS
:root { --primary: #d4af37; --secondary: #f8d7da; --accent: #e83e8c; --dark: #212529; --light: #ffffff; --gradient: linear-gradient(135deg, #d4af37 0%, #e83e8c 100%); } body { font-family: 'Montserrat', sans-serif; color: var(--dark); overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: 'Playfair Display', serif; font-weight: 700; } /* Curvy Sections */ .curvy-section { position: relative; padding: 5rem 0; } .curvy-section::before, .curvy-section::after { content: ''; position: absolute; left: 0; right: 0; height: 80px; background-size: 100% 100%; z-index: 10; } .curvy-top::before { top: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E"); } .curvy-bottom::after { bottom: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E"); transform: rotate(180deg); } /* Hero Section with Typing Effect */ .hero { height: 100vh; background: url('https://images.unsplash.com/photo-1560066984-138dadb4c035?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover; display: flex; align-items: center; position: relative; color: white; } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .hero-content { position: relative; z-index: 1; } .typewriter h1 { overflow: hidden; border-right: .15em solid var(--accent); white-space: nowrap; margin: 0 auto; letter-spacing: .1em; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--accent); } } /* About Section */ .about-img { border-radius: 20px; overflow: hidden; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .about-img:hover { transform: scale(1.03); } .tagline { font-size: 2.5rem; font-weight: 800; color: var(--accent); line-height: 1.2; margin-bottom: 1.5rem; } /* Mission & Vision */ .mission, .vision { padding: 5rem 0; } .mission { background-color: var(--secondary); } .vision-img { border-radius: 20px; overflow: hidden; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .animated-headline { position: relative; display: inline-block; } .animated-headline::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 5px; background: var(--gradient); transform: scaleX(0); transform-origin: bottom right; transition: transform 0.5s ease; } .animated-headline:hover::after { transform: scaleX(1); transform-origin: bottom left; } /* Services Section */ .services { padding: 5rem 0; } .service-card { border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; margin-bottom: 30px; background: white; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); } .service-img { height: 200px; object-fit: cover; } .service-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; } /* Contact Form */ .contact-form { background: url('https://images.unsplash.com/photo-1595476108010-b4d1f102b59b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1776&q=80') no-repeat center center/cover; padding: 5rem 0; position: relative; } .contact-form::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); } .form-container { position: relative; z-index: 1; background: white; padding: 3rem; border-radius: 20px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1); } .form-control { border-radius: 10px; padding: 0.8rem 1.2rem; border: 2px solid #e9ecef; transition: all 0.3s; } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25); } .btn-primary { background: var(--gradient); border: none; padding: 0.8rem 2rem; border-radius: 10px; font-weight: 600; transition: all 0.3s; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3); } /* Footer */ footer { background: url('https://images.unsplash.com/photo-1595476108010-b4d1f102b59b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1776&q=80') no-repeat center center/cover; padding: 5rem 0 2rem; position: relative; color: white; } footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(232, 62, 140, 0.9); } .footer-content { position: relative; z-index: 1; } .social-icons a { color: white; font-size: 1.5rem; margin-right: 1rem; transition: all 0.3s; } .social-icons a:hover { color: var(--primary); transform: translateY(-5px); } /* Responsive Adjustments */ @media (max-width: 768px) { .hero { height: 80vh; } .tagline { font-size: 2rem; } .form-container { padding: 2rem; } }
JavaScript
Output Preview
Desktop
Mobile
Fullscreen