Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Glamour Nails & Spa</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap'); | |
| </style> | |
| </head> | |
| <body class="font-poppins"> | |
| <custom-navbar></custom-navbar> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-gradient-to-r from-gray-800 to-gray-600 text-white overflow-hidden"> | |
| <img src="http://static.photos/spa/1920x1080/1" alt="Spa background" class="absolute inset-0 w-full h-full object-cover"> | |
| <div class="relative z-10 text-center px-4"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 font-playfair">Glamour Nails & Spa</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Where beauty meets perfection. Book your appointment today!</p> | |
| <a href="#services" class="bg-white text-gray-800 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300 inline-block">Our Services</a> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-16 font-playfair">Our Services</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> | |
| <img src="http://static.photos/spa/640x360/1" alt="Manicure" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-3">Manicure</h3> | |
| <p class="text-gray-600">Professional nail care with polish application</p> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> | |
| <img src="https://huggingface.co/spaces/Awale-1000/glamour-nails-spa/resolve/main/images/SR59-200Y-d3.webp" alt="Pedicure" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-3">Pedicure</h3> | |
| <p class="text-gray-600">Revitalizing foot treatment and polish</p> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> | |
| <img src="http://static.photos/spa/640x360/3" alt="Nail Art" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-3">Nail Art</h3> | |
| <p class="text-gray-600">Custom designs to express your style</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> | |
| <img src="http://static.photos/spa/640x360/4" alt="Our Salon" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-4xl font-bold mb-6 font-playfair">About Our Salon</h2> | |
| <p class="text-gray-600 mb-4">At Glamour Nails & Spa, we believe in providing exceptional nail care services in a relaxing and hygienic environment.</p> | |
| <p class="text-gray-600 mb-6">Our team of licensed professionals is dedicated to making your experience enjoyable while delivering beautiful results.</p> | |
| <a href="#contact" class="bg-gray-800 text-white px-6 py-2 rounded-full font-bold hover:bg-gray-700 transition duration-300 inline-block">Contact Us</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Nail Gallery Section --> | |
| <section id="gallery" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-16 font-playfair">Nail Art Gallery</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <img src="https://huggingface.co/spaces/Awale-1000/glamour-nails-spa/resolve/main/images/WhatsApp%20Image%202025-10-23%20at%2011.46.26.jpeg" alt="Nail Design 1" class="rounded-lg shadow hover:shadow-lg transition duration-300"> | |
| <img src="https://huggingface.co/spaces/Awale-1000/glamour-nails-spa/resolve/main/images/WhatsApp%20Image%202025-10-23%20at%2011.46.26%20(1).jpeg" alt="Nail Design 2" class="rounded-lg shadow hover:shadow-lg transition duration-300"> | |
| <img src="https://huggingface.co/spaces/Awale-1000/glamour-nails-spa/resolve/main/images/WhatsApp%20Image%202025-10-23%20at%2011.46.25.jpeg" alt="Nail Design 3" class="rounded-lg shadow hover:shadow-lg transition duration-300"> | |
| <img src="https://huggingface.co/spaces/Awale-1000/glamour-nails-spa/resolve/main/images/WhatsApp%20Image%202025-10-23%20at%2011.46.25%20(1).jpeg" alt="Nail Design 4" class="rounded-lg shadow hover:shadow-lg transition duration-300"> | |
| <img src="https://huggingface.co/spaces/Awale-1000/glamour-nails-spa/resolve/main/images/WhatsApp%20Image%202025-10-23%20at%2011.46.25%20(2).jpeg" alt="Nail Design 5" class="rounded-lg shadow hover:shadow-lg transition duration-300"> | |
| <img src="https://huggingface.co/spaces/Awale-1000/glamour-nails-spa/resolve/main/images/WhatsApp%20Image%202025-10-23%20at%2011.46.24.jpeg" alt="Nail Design 6" class="rounded-lg shadow hover:shadow-lg transition duration-300"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lash Services Section --> | |
| <section id="lash-services" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-16 font-playfair">Lash Services</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <video autoplay loop muted class="w-full h-64 object-cover"> | |
| <source src="https://huggingface.co/spaces/Awale-1000/glamour-nails-spa/resolve/main/videos/WhatsApp%20Video%202025-10-23%20at%2011.45.48.mp4" type="video/mp4"> | |
| </video> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-3">Classic Lashes</h3> | |
| <p class="text-gray-600">Natural looking lash extensions</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <video autoplay loop muted class="w-full h-64 object-cover"> | |
| <source src="https://huggingface.co/spaces/Awale-1000/glamour-nails-spa/resolve/main/videos/WhatsApp%20Video%202025-10-23%20at%2011.45.49.mp4" type="video/mp4"> | |
| </video> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-3">Volume Lashes</h3> | |
| <p class="text-gray-600">Full, dramatic lash extensions</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <video autoplay loop muted class="w-full h-64 object-cover"> | |
| <source src="https://huggingface.co/spaces/Awale-1000/glamour-nails-spa/resolve/main/videos/WhatsApp%20Video%202025-10-23%20at%2011.45.49%20(1).mp4" type="video/mp4"> | |
| </video> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-3">Hybrid Lashes</h3> | |
| <p class="text-gray-600">Mix of classic and volume lashes</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-800 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl font-bold text-center mb-16 font-playfair">Contact Us</h2> | |
| <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-gray-700 p-8 text-white"> | |
| <h3 class="text-2xl font-bold mb-4">Visit Us</h3> | |
| <p class="mb-6">123 Beauty Street<br>New York, NY 10001</p> | |
| <h3 class="text-2xl font-bold mb-4">Hours</h3> | |
| <p class="mb-2">Monday - Friday: 9am - 8pm</p> | |
| <p class="mb-6">Saturday - Sunday: 10am - 6pm</p> | |
| <h3 class="text-2xl font-bold mb-4">Call Us</h3> | |
| <p class="text-xl mb-6">(555) 123-4567</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-pink-200"><i data-feather="facebook"></i></a> | |
| <a href="#" class="hover:text-pink-200"><i data-feather="instagram"></i></a> | |
| <a href="#" class="hover:text-pink-200"><i data-feather="twitter"></i></a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8 text-gray-800"> | |
| <h3 class="text-2xl font-bold mb-4">Book an Appointment</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label class="block mb-1">Name</label> | |
| <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300"> | |
| </div> | |
| <div> | |
| <label class="block mb-1">Email</label> | |
| <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300"> | |
| </div> | |
| <div> | |
| <label class="block mb-1">Phone</label> | |
| <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300"> | |
| </div> | |
| <div> | |
| <label class="block mb-1">Service</label> | |
| <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300"> | |
| <option>Manicure</option> | |
| <option>Pedicure</option> | |
| <option>Nail Art</option> | |
| <option>Full Set</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full bg-gray-800 text-white py-3 rounded-lg hover:bg-gray-700 transition duration-300">Submit</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| VANTA.WAVES({ | |
| el: "#vanta-waves", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xffffff, | |
| shininess: 100.00, | |
| waveHeight: 15.00, | |
| waveSpeed: 0.75, | |
| zoom: 0.85 | |
| }); | |
| </script> | |
| </body> | |
| </html> |