| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Vapor Shark | Premium Vape Shop in Margate, FL</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&display=swap'); |
| body { |
| font-family: 'Montserrat', sans-serif; |
| background-color: #0a0a0a; |
| color: #f0f0f0; |
| } |
| .neon-text { |
| text-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff; |
| } |
| .neon-border { |
| box-shadow: 0 0 10px #00f0ff, inset 0 0 10px #00f0ff; |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%); |
| } |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 240, 255, 0.2); |
| } |
| .form-input { |
| background-color: rgba(255,255,255,0.05); |
| border: 1px solid rgba(0, 240, 255, 0.3); |
| } |
| .form-input:focus { |
| outline: none; |
| border-color: #00f0ff; |
| box-shadow: 0 0 10px rgba(0, 240, 255, 0.5); |
| } |
| </style> |
| </head> |
| <body class="gradient-bg"> |
| |
| <nav class="bg-black/80 backdrop-blur-md fixed w-full z-50"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex justify-between items-center"> |
| <a href="#" class="text-2xl font-bold neon-text">VAPOR SHARK</a> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#about" class="hover:text-cyan-400 transition">About</a> |
| <a href="#products" class="hover:text-cyan-400 transition">Products</a> |
| <a href="#why-us" class="hover:text-cyan-400 transition">Why Us</a> |
| <a href="#location" class="hover:text-cyan-400 transition">Location</a> |
| <a href="#contact" class="hover:text-cyan-400 transition">Contact</a> |
| </div> |
| <button class="md:hidden"> |
| <i data-feather="menu" class="text-white"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20"> |
| <div class="absolute inset-0 bg-black/50 z-10"></div> |
| <video autoplay muted loop class="absolute inset-0 w-full h-full object-cover"> |
| <source src="https://static.videezy.com/system/resources/previews/000/043/629/original/4K_235.mp4" type="video/mp4"> |
| </video> |
| <div class="container mx-auto px-6 z-20 text-center" data-aos="fade-up"> |
| <h1 class="text-5xl md:text-7xl font-bold mb-4 neon-text">VAPOR SHARK</h1> |
| <p class="text-xl md:text-2xl mb-8">Serving Margate since 2014</p> |
| <a href="#products" class="bg-transparent border-2 border-cyan-400 text-cyan-400 px-8 py-3 rounded-full hover:bg-cyan-400 hover:text-black transition duration-300 font-bold"> |
| Explore Products |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right"> |
| <h2 class="text-3xl font-bold mb-6 neon-text">About Vapor Shark</h2> |
| <p class="mb-4">Located in the heart of Margate, Vapor Shark has been the premier destination for vape enthusiasts since 2014.</p> |
| <p class="mb-4">We pride ourselves on offering the highest quality products and exceptional customer service.</p> |
| <div class="space-y-4 mt-8"> |
| <div class="flex items-center"> |
| <i data-feather="map-pin" class="text-cyan-400 mr-4"></i> |
| <span>5514 W Sample Rd, Margate, FL 33073</span> |
| </div> |
| <div class="flex items-center"> |
| <i data-feather="phone" class="text-cyan-400 mr-4"></i> |
| <span>+1 (954) 414-1620</span> |
| </div> |
| <div class="flex items-center"> |
| <i data-feather="clock" class="text-cyan-400 mr-4"></i> |
| <span>8:00 AM – 10:00 PM, 7 days a week</span> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2" data-aos="fade-left"> |
| <div class="w-full h-64 bg-gray-800 flex items-center justify-center rounded-lg neon-border"> |
| <p class="text-white text-xl font-bold">Store Front Photo Here</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="products" class="py-20 bg-black/30"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold mb-12 text-center neon-text" data-aos="fade-up">Featured Products</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-900/50 rounded-lg overflow-hidden transition duration-300 product-card" data-aos="fade-up" data-aos-delay="100"> |
| <div class="w-full h-64 bg-gray-800 flex items-center justify-center"> |
| <p class="text-white text-xl font-bold">Vape Device Image Here</p> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Premium Vape Device</h3> |
| <p class="text-gray-400 mb-4">Advanced technology for the perfect vaping experience.</p> |
| <button class="bg-cyan-400 text-black px-4 py-2 rounded-full font-bold hover:bg-cyan-300 transition"> |
| Learn More |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900/50 rounded-lg overflow-hidden transition duration-300 product-card" data-aos="fade-up" data-aos-delay="200"> |
| <div class="w-full h-64 bg-gray-800 flex items-center justify-center"> |
| <p class="text-white text-xl font-bold">E-Liquid Image Here</p> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Premium E-Liquids</h3> |
| <p class="text-gray-400 mb-4">Wide variety of flavors and nicotine strengths.</p> |
| <button class="bg-cyan-400 text-black px-4 py-2 rounded-full font-bold hover:bg-cyan-300 transition"> |
| Learn More |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900/50 rounded-lg overflow-hidden transition duration-300 product-card" data-aos="fade-up" data-aos-delay="300"> |
| <div class="w-full h-64 bg-gray-800 flex items-center justify-center"> |
| <p class="text-white text-xl font-bold">Accessories Image Here</p> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Vape Accessories</h3> |
| <p class="text-gray-400 mb-4">Everything you need for your vaping setup.</p> |
| <button class="bg-cyan-400 text-black px-4 py-2 rounded-full font-bold hover:bg-cyan-300 transition"> |
| Learn More |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="why-us" class="py-20"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold mb-12 text-center neon-text" data-aos="fade-up">Why Choose Vapor Shark</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 justify-items-center"> |
| <div class="bg-gray-900/50 p-6 rounded-lg text-center" data-aos="fade-up" data-aos-delay="100"> |
| <div class="bg-cyan-400/10 p-4 rounded-full inline-block mb-4"> |
| <i data-feather="award" class="text-cyan-400 w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Long-Standing Shop</h3> |
| <p class="text-gray-400">Trusted in Margate since 2014 with thousands of satisfied customers.</p> |
| </div> |
| |
| <div class="bg-gray-900/50 p-6 rounded-lg text-center" data-aos="fade-up" data-aos-delay="200"> |
| <div class="bg-cyan-400/10 p-4 rounded-full inline-block mb-4"> |
| <i data-feather="check-circle" class="text-cyan-400 w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Quality Products</h3> |
| <p class="text-gray-400">We carry only the best brands and highest quality products.</p> |
| </div> |
| |
| |
| <div class="bg-gray-900/50 p-6 rounded-lg text-center" data-aos="fade-up" data-aos-delay="400"> |
| <div class="bg-cyan-400/10 p-4 rounded-full inline-block mb-4"> |
| <i data-feather="heart" class="text-cyan-400 w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Great Service</h3> |
| <p class="text-gray-400">We go above and beyond to ensure you have the best experience.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="location" class="py-20 bg-black/30"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold mb-12 text-center neon-text" data-aos="fade-up">Our Location</h2> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0" data-aos="fade-right"> |
| <div class="bg-gray-900 p-6 rounded-lg"> |
| <h3 class="text-xl font-bold mb-4">Visit Us Today</h3> |
| <p class="mb-4">We're conveniently located at:</p> |
| <p class="mb-6 font-bold">5514 W Sample Rd, Margate, FL 33073</p> |
| <p class="mb-4">Open 7 days a week from 8:00 AM to 10:00 PM</p> |
| <a href="tel:+19544141620" class="inline-block bg-cyan-400 text-black px-6 py-3 rounded-full font-bold hover:bg-cyan-300 transition"> |
| Call Us Now |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2" data-aos="fade-left"> |
| |
| <div class="aspect-w-16 aspect-h-9"> |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3578.123456789012!2d-80.12345678901234!3d26.123456789012345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjbCsDA3JzI0LjQiTiA4MMKwMDcnMjQuNCJX!5e0!3m2!1sen!2sus!4v1234567890123!5m2!1sen!2sus" |
| width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg neon-border"></iframe> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold mb-12 text-center neon-text" data-aos="fade-up">Get In Touch</h2> |
| <div class="max-w-3xl mx-auto"> |
| <form class="space-y-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div data-aos="fade-right"> |
| <label for="name" class="block mb-2">Your Name</label> |
| <input type="text" id="name" class="w-full form-input px-4 py-3 rounded-lg"> |
| </div> |
| <div data-aos="fade-left"> |
| <label for="email" class="block mb-2">Your Email</label> |
| <input type="email" id="email" class="w-full form-input px-4 py-3 rounded-lg"> |
| </div> |
| </div> |
| <div data-aos="fade-up"> |
| <label for="message" class="block mb-2">Your Message</label> |
| <textarea id="message" rows="5" class="w-full form-input px-4 py-3 rounded-lg"></textarea> |
| </div> |
| <div class="text-center" data-aos="fade-up"> |
| <button type="submit" class="bg-cyan-400 text-black px-8 py-3 rounded-full font-bold hover:bg-cyan-300 transition"> |
| Send Message |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-black py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <h3 class="text-2xl font-bold neon-text">VAPOR SHARK</h3> |
| <p class="text-gray-400 mt-2">Serving Margate since 2014</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
| <i data-feather="facebook"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
| <i data-feather="instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition"> |
| <i data-feather="twitter"></i> |
| </a> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> |
| <p>© 2023 Vapor Shark. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| feather.replace(); |
| |
| |
| document.querySelector('button.md\\:hidden').addEventListener('click', function() { |
| const menu = document.querySelector('.md\\:flex.space-x-8'); |
| menu.classList.toggle('hidden'); |
| menu.classList.toggle('flex'); |
| menu.classList.toggle('flex-col'); |
| menu.classList.toggle('absolute'); |
| menu.classList.toggle('top-20'); |
| menu.classList.toggle('right-6'); |
| menu.classList.toggle('bg-black'); |
| menu.classList.toggle('p-4'); |
| menu.classList.toggle('rounded-lg'); |
| menu.classList.toggle('space-y-4'); |
| menu.classList.toggle('space-x-8'); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
