Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LensCrafted | Professional Photography Portfolio</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="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/client-logos.js"></script> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <custom-navbar></custom-navbar> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-black overflow-hidden"> | |
| <div class="absolute inset-0 bg-black opacity-50"></div> | |
| <video autoplay muted loop class="absolute min-w-full min-h-full object-cover"> | |
| <source src="https://static.videezy.com/system/resources/previews/000/050/246/original/4K_018.mp4" type="video/mp4"> | |
| </video> | |
| <div class="relative z-10 text-center px-4"> | |
| <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6">Capture Moments <span class="text-yellow-400">Forever</span></h1> | |
| <p class="text-xl md:text-2xl text-gray-200 mb-8 max-w-2xl mx-auto">Professional photography services to immortalize your most precious memories</p> | |
| <a href="#contact" class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition duration-300 inline-flex items-center"> | |
| Book a Session | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section id="portfolio" class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">My Portfolio</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Explore my diverse photography projects across different categories</p> | |
| </div> | |
| <!-- Filter Buttons --> | |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> | |
| <button class="filter-btn active px-6 py-2 rounded-full font-medium bg-yellow-400 text-gray-900" data-filter="all">All</button> | |
| <button class="filter-btn px-6 py-2 rounded-full font-medium bg-gray-200 hover:bg-gray-300 transition" data-filter="wedding">Wedding</button> | |
| <button class="filter-btn px-6 py-2 rounded-full font-medium bg-gray-200 hover:bg-gray-300 transition" data-filter="portrait">Portrait</button> | |
| <button class="filter-btn px-6 py-2 rounded-full font-medium bg-gray-200 hover:bg-gray-300 transition" data-filter="landscape">Landscape</button> | |
| <button class="filter-btn px-6 py-2 rounded-full font-medium bg-gray-200 hover:bg-gray-300 transition" data-filter="product">Product</button> | |
| </div> | |
| <!-- Masonry Gallery --> | |
| <div class="masonry-grid gap-6"> | |
| <!-- Images will be loaded via JavaScript --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <img src="http://static.photos/people/640x360/10" alt="Photographer" class="rounded-lg shadow-xl w-full h-auto"> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">About Me</h2> | |
| <p class="text-gray-600 mb-4">Hi, I'm Sarah Johnson, a professional photographer with over 10 years of experience capturing life's beautiful moments.</p> | |
| <p class="text-gray-600 mb-4">My journey began when I received my first camera as a birthday gift, and since then, I've never looked back. Photography isn't just my profession—it's my passion and way of life.</p> | |
| <p class="text-gray-600 mb-6">I specialize in wedding, portrait, and commercial photography, but I'm always excited to take on new challenges and creative projects.</p> | |
| <div class="flex flex-wrap gap-4 mb-6"> | |
| <span class="bg-gray-200 px-4 py-2 rounded-full text-sm font-medium">Canon EOS R5</span> | |
| <span class="bg-gray-200 px-4 py-2 rounded-full text-sm font-medium">Sony A7IV</span> | |
| <span class="bg-gray-200 px-4 py-2 rounded-full text-sm font-medium">Nikon Z7 II</span> | |
| </div> | |
| <a href="#contact" class="inline-flex items-center text-yellow-600 font-medium hover:text-yellow-700 transition"> | |
| Let's Work Together | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">My Services</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Comprehensive photography services tailored to your needs</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <img src="http://static.photos/wedding/640x360/1" alt="Wedding Photography" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Wedding Photography</h3> | |
| <p class="text-gray-600 mb-4">Capture your special day with timeless, romantic imagery that tells your unique love story.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-900">$1,200+</span> | |
| <a href="#contact" class="text-yellow-600 hover:text-yellow-700 font-medium">Book Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <img src="http://static.photos/portrait/640x360/2" alt="Portrait Photography" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Portrait Photography</h3> | |
| <p class="text-gray-600 mb-4">Professional portraits for individuals, families, or business needs that showcase personality and professionalism.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-900">$350+</span> | |
| <a href="#contact" class="text-yellow-600 hover:text-yellow-700 font-medium">Book Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <img src="http://static.photos/product/640x360/3" alt="Product Photography" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Product Photography</h3> | |
| <p class="text-gray-600 mb-4">High-quality images of your products that boost sales and enhance your brand's visual appeal.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-900">$75/hr</span> | |
| <a href="#contact" class="text-yellow-600 hover:text-yellow-700 font-medium">Book Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Section --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4">Trusted By</h2> | |
| <p class="text-gray-600">Brands and clients I've had the pleasure to work with</p> | |
| </div> | |
| <custom-client-logos></custom-client-logos> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Get In Touch</h2> | |
| <p class="text-gray-300 mb-8">Ready to book a session or have questions about my services? Fill out the form or reach out directly.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="mail" class="w-5 h-5 text-yellow-400"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold">Email</h3> | |
| <p class="text-gray-300">hello@lenscrafted.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="phone" class="w-5 h-5 text-yellow-400"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold">Phone</h3> | |
| <p class="text-gray-300">(555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="map-pin" class="w-5 h-5 text-yellow-400"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold">Studio</h3> | |
| <p class="text-gray-300">123 Photography Lane, Creative City, CC 90210</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="font-bold mb-4">Follow Me</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-yellow-400 transition"> | |
| <i data-feather="instagram" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-yellow-400 transition"> | |
| <i data-feather="facebook" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-yellow-400 transition"> | |
| <i data-feather="twitter" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-yellow-400 transition"> | |
| <i data-feather="youtube" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <form class="bg-gray-800 p-8 rounded-lg shadow-lg"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-300 mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-300 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="service" class="block text-gray-300 mb-2">Service Interested In</label> | |
| <select id="service" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white"> | |
| <option value="">Select a service</option> | |
| <option value="wedding">Wedding Photography</option> | |
| <option value="portrait">Portrait Photography</option> | |
| <option value="product">Product Photography</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-300 mb-2">Your Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-4 rounded transition duration-300"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Lightbox Modal --> | |
| <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center hidden"> | |
| <div class="relative max-w-6xl w-full"> | |
| <button id="close-lightbox" class="absolute -top-12 right-0 text-white hover:text-yellow-400 transition"> | |
| <i data-feather="x" class="w-8 h-8"></i> | |
| </button> | |
| <div class="flex items-center justify-center"> | |
| <button id="prev-btn" class="absolute left-0 ml-4 text-white hover:text-yellow-400 transition"> | |
| <i data-feather="chevron-left" class="w-12 h-12"></i> | |
| </button> | |
| <img id="lightbox-img" src="" alt="" class="max-h-screen max-w-full"> | |
| <button id="next-btn" class="absolute right-0 mr-4 text-white hover:text-yellow-400 transition"> | |
| <i data-feather="chevron-right" class="w-12 h-12"></i> | |
| </button> | |
| </div> | |
| <div id="lightbox-caption" class="text-center text-white mt-4"></div> | |
| </div> | |
| </div> | |
| <custom-footer></custom-footer> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |