Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Talyssa Lashes Bahr | Premium Eyelash Services</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-pattern { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .booking-form { | |
| background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg fixed w-full z-10"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold text-xl">TLB</div> | |
| <span class="text-xl font-semibold text-gray-800">Talyssa Lashes Bahr</span> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <div class="md:hidden flex items-center"> | |
| <button class="outline-none mobile-menu-button"> | |
| <svg class="w-6 h-6 text-gray-700" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Desktop menu --> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="text-pink-600 font-medium">Home</a> | |
| <a href="#services" class="text-gray-700 hover:text-pink-600 transition">Services</a> | |
| <a href="#about" class="text-gray-700 hover:text-pink-600 transition">About</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-pink-600 transition">Testimonials</a> | |
| <a href="#contact" class="text-gray-700 hover:text-pink-600 transition">Contact</a> | |
| <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full transition">Book Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden mobile-menu bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-4 space-y-1"> | |
| <a href="#home" class="block px-3 py-2 text-pink-600 font-medium">Home</a> | |
| <a href="#services" class="block px-3 py-2 text-gray-700 hover:text-pink-600 transition">Services</a> | |
| <a href="#about" class="block px-3 py-2 text-gray-700 hover:text-pink-600 transition">About</a> | |
| <a href="#testimonials" class="block px-3 py-2 text-gray-700 hover:text-pink-600 transition">Testimonials</a> | |
| <a href="#contact" class="block px-3 py-2 text-gray-700 hover:text-pink-600 transition">Contact</a> | |
| <button class="block w-full text-left px-3 py-2 bg-pink-500 hover:bg-pink-600 text-white rounded transition">Book Now</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-pattern min-h-screen flex items-center justify-center text-white pt-16"> | |
| <div class="max-w-4xl mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Enhance Your Natural Beauty</h1> | |
| <p class="text-xl md:text-2xl mb-10">Premium eyelash extensions and beauty treatments tailored to your unique style</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <button class="bg-pink-500 hover:bg-pink-600 text-white px-8 py-4 rounded-full text-lg font-medium transition">Book Appointment</button> | |
| <button class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-800 text-white px-8 py-4 rounded-full text-lg font-medium transition">Our Services</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our Signature Services</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Experience luxury with our premium lash treatments designed to enhance your natural beauty</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1596704017254-9757e8a4faf4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Classic Lash Extensions</h3> | |
| <p class="text-gray-600 mb-4">Natural-looking extensions that add length and definition to your lashes.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-pink-500 font-bold">$120+</span> | |
| <button class="text-pink-500 hover:text-pink-600 font-medium">Learn More</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1596704017254-9757e8a4faf4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jj81support/taly" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |