Hugging Face's logo

Spaces:
VNPROJECT
/
vs-pre
Running

App Files Community
vs-pre / index.html
VNPROJECT's picture
VNPROJECT
take out this image and put text instead like "store front photo here" - Initial Deployment
5505517 verified
Raw History Blame Contribute Delete
15.8 kB
<!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">
<!-- Navigation -->
<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>
<!-- Hero Section -->
<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>
<!-- About 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>
<!-- Products 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">
<!-- Product 1 -->
<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>
<!-- Product 2 -->
<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>
<!-- Product 3 -->
<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>
<!-- Why Choose Us 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>
<!-- Location 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">
<!-- Google Maps Placeholder -->
<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>
<!-- Contact 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 -->
<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>&copy; 2023 Vapor Shark. All rights reserved.</p>
</div>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
// Mobile menu toggle
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>