Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>STREET INK | Graffiti Fashion Apparel</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Urbanist:wght@400;700;900&display=swap'); | |
| body { | |
| font-family: 'Urbanist', sans-serif; | |
| background-color: #f5f5f5; | |
| color: #333; | |
| } | |
| .graffiti-bg { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,20 Q30,10 40,20 T60,20 T80,20" stroke="black" fill="none" stroke-width="2"/><path d="M10,40 Q20,30 30,40 T50,40 T70,40 T90,40" stroke="black" fill="none" stroke-width="2"/><path d="M15,70 Q25,60 35,70 T55,70 T75,70" stroke="black" fill="none" stroke-width="2"/></svg>'); | |
| background-size: 200px; | |
| opacity: 0.05; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: -1; | |
| } | |
| .title-font { | |
| font-family: 'Rubik Mono One', sans-serif; | |
| text-shadow: 3px 3px 0px rgba(0,0,0,0.2); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px) rotate(1deg); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| } | |
| .tag { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .spray-effect { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .spray-effect::before { | |
| content: ""; | |
| position: absolute; | |
| top: -10px; | |
| left: -10px; | |
| right: -10px; | |
| bottom: -10px; | |
| background: radial-gradient(circle, transparent 20%, rgba(255,255,255,0.3) 20%, rgba(255,255,255,0.3) 80%, transparent 80%, transparent); | |
| background-size: 10px 10px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .spray-effect:hover::before { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="relative"> | |
| <div class="graffiti-bg"></div> | |
| <!-- Announcement Bar --> | |
| <div class="bg-black text-white text-center py-2 px-4"> | |
| <p class="text-sm font-bold">🔥 FREE SHIPPING ON ALL ORDERS OVER $50 🔥</p> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="title-font text-3xl text-pink-600">STREET INK</div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="font-bold hover:text-pink-600 transition">HATS</a> | |
| <a href="#" class="font-bold hover:text-pink-600 transition">BRACELETS</a> | |
| <a href="#" class="font-bold hover:text-pink-600 transition">COLLECTIONS</a> | |
| <a href="#" class="font-bold hover:text-pink-600 transition">ABOUT</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="hover:text-pink-600"><i class="fas fa-search"></i></a> | |
| <a href="#" class="hover:text-pink-600"><i class="fas fa-user"></i></a> | |
| <a href="#" class="hover:text-pink-600 relative"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span class="absolute -top-2 -right-2 bg-pink-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </a> | |
| <button class="md:hidden focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative h-96 md:h-screen max-h-screen overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent opacity-70 z-10"></div> | |
| <div class="absolute inset-0 bg-pink-600 mix-blend-multiply opacity-30 z-10"></div> | |
| <img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Graffiti wall background" | |
| class="w-full h-full object-cover"> | |
| <div class="relative z-20 h-full flex flex-col justify-center px-8 md:px-16"> | |
| <h1 class="title-font text-4xl md:text-7xl text-white mb-4"> | |
| URBAN <span class="text-pink-400">STYLE</span> REBORN | |
| </h1> | |
| <p class="text-white text-lg md:text-xl max-w-lg mb-8"> | |
| Limited edition hats & bracelets inspired by street art culture. Wear your attitude. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> | |
| SHOP NOW | |
| </a> | |
| <a href="#" class="bg-transparent border-2 border-white hover:bg-white hover:text-black text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> | |
| NEW ARRIVALS | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Categories --> | |
| <section class="py-16 px-4 md:px-8"> | |
| <div class="container mx-auto"> | |
| <h2 class="title-font text-3xl md:text-5xl text-center mb-12">STREETWEAR ESSENTIALS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="relative overflow-hidden rounded-xl h-96 group"> | |
| <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Hats collection" | |
| class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-8"> | |
| <h3 class="title-font text-3xl md:text-4xl text-white mb-2">HATS</h3> | |
| <p class="text-white mb-4">Fresh designs that turn heads</p> | |
| <a href="#" class="inline-block bg-white hover:bg-pink-600 hover:text-white text-black font-bold py-2 px-6 rounded-full transition"> | |
| SHOP COLLECTION | |
| </a> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-xl h-96 group"> | |
| <img src="https://images.unsplash.com/photo-1602173574767-37ac01994b2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" | |
| alt="Bracelets collection" | |
| class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> | |
| <div class="absolute bottom-0 left-0 p-8"> | |
| <h3 class="title-font text-3xl md:text-4xl text-white mb-2">BRACELETS</h3> | |
| <p class="text-white mb-4">Handcrafted street jewelry</p> | |
| <a href="#" class="inline-block bg-white hover:bg-pink-600 hover:text-white text-black font-bold py-2 px-6 rounded-full transition"> | |
| SHOP COLLECTION | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-16 px-4 md:px-8 bg-gray-100"> | |
| <div class="container mx-auto"> | |
| <div class="flex justify-between items-center mb-12"> | |
| <h2 class="title-font text-3xl md:text-5xl">HOT RIGHT NOW</h2> | |
| <a href="#" class="text-black hover:text-pink-600 font-bold flex items-center"> | |
| VIEW ALL <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1576871337632-b9aef4c17ab9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D3D&auto=format&fit=crop&w=1887&q=80" | |
| alt="Graffiti snapback hat" | |
| class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-pink-600 text-white text-xs font-bold px-2 py-1 rounded-full tag"> | |
| NEW | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">WILD STYLE SNAPBACK</h3> | |
| <p class="text-gray-600 text-sm mb-3">Limited edition graffiti print</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">$34.99</span> | |
| <button class="bg-black hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm transition"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1596908094221-5d1a6b33410e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" | |
| alt="Skater beanie" | |
| class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">SKATER BEANIE</h3> | |
| <p class="text-gray-600 text-sm mb-3">Warm & stylish</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">$29.99</span> | |
| <button class="bg-black hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm transition"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1611591437918-841e894ef536?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" | |
| alt="Spray paint bracelet" | |
| class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-pink-600 text-white text-xs font-bold px-2 py-1 rounded-full tag"> | |
| BESTSELLER | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">SPRAY CAN BRACELET</h3> | |
| <p class="text-gray-600 text-sm mb-3">Handmade charm bracelet</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">$24.99</span> | |
| <button class="bg-black hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm transition"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1620231109641-54d27822a6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" | |
| alt="Graffiti trucker hat" | |
| class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">TAGGER TRUCKER</h3> | |
| <p class="text-gray-600 text-sm mb-3">Mesh back graffiti hat</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">$32.99</span> | |
| <button class="bg-black hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm transition"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Brand Story --> | |
| <section class="py-16 px-4 md:px-8 bg-black text-white"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1885&q=80" | |
| alt="Artist painting graffiti" | |
| class="w-full rounded-xl shadow-xl"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="title-font text-3xl md:text-5xl mb-6">OUR STORY</h2> | |
| <p class="text-lg mb-6"> | |
| Born from the streets, STREET INK is more than just apparel - it's a movement. | |
| We collaborate with underground artists to bring you unique designs that capture | |
| the raw energy of urban culture. | |
| </p> | |
| <p class="text-lg mb-8"> | |
| Every piece tells a story. From the tags on our hats to the charms on our bracelets, | |
| we celebrate the rebellious spirit of street art. | |
| </p> | |
| <a href="#" class="inline-block bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> | |
| MEET THE ARTISTS | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Instagram Feed --> | |
| <section class="py-16 px-4 md:px-8"> | |
| <div class="container mx-auto"> | |
| <h2 class="title-font text-3xl md:text-5xl text-center mb-12">#STREETINKCREW</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-2"> | |
| <div class="spray-effect overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1541532713592-79a0317b6b77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1888&q=80" | |
| alt="Customer wearing hat" | |
| class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="spray-effect overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1514989940723-e8e51635b782?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Customer wearing bracelet" | |
| class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="spray-effect overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" | |
| alt="Street art background" | |
| class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="spray-effect overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Graffiti wall" | |
| class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center justify-center bg-black hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> | |
| <i class="fab fa-instagram mr-2"></i> FOLLOW US | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 px-4 md:px-8 bg-pink-600 text-white"> | |
| <div class="container mx-auto max-w-4xl text-center"> | |
| <h2 class="title-font text-3xl md:text-5xl mb-6">GET THE DROP</h2> | |
| <p class="text-xl mb-8"> | |
| Sign up for exclusive releases, artist collabs, and 10% off your first order. | |
| </p> | |
| <form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"> | |
| <input type="email" placeholder="YOUR EMAIL" class="flex-grow px-4 py-3 rounded-full text-black focus:outline-none focus:ring-2 focus:ring-black"> | |
| <button type="submit" class="bg-black hover:bg-gray-900 text-white font-bold py-3 px-8 rounded-full transition"> | |
| SUBSCRIBE | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black text-white py-12 px-4 md:px-8"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="title-font text-2xl mb-4">STREET INK</h3> | |
| <p class="mb-4"> | |
| Urban apparel inspired by street art culture. Limited edition drops. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-pink-600"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="hover:text-pink-600"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-pink-600"><i class="fab fa-tiktok"></i></a> | |
| <a href="#" class="hover:text-pink-600"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">SHOP</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-pink-600 transition">All Hats</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">All Bracelets</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">New Arrivals</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">Best Sellers</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">Sale</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">ABOUT</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-pink-600 transition">Our Story</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">Artists</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">Blog</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">Sustainability</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">Store Locator</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">HELP</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-pink-600 transition">Contact Us</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">FAQs</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">Shipping & Returns</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">Size Guide</a></li> | |
| <li><a href="#" class="hover:text-pink-600 transition">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 STREET INK. All rights reserved. Designed with ♥ for street culture.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| const mobileMenu = document.querySelector('.md\\:flex'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| mobileMenu.classList.toggle('flex'); | |
| mobileMenu.classList.toggle('flex-col'); | |
| mobileMenu.classList.toggle('absolute'); | |
| mobileMenu.classList.toggle('top-16'); | |
| mobileMenu.classList.toggle('left-0'); | |
| mobileMenu.classList.toggle('right-0'); | |
| mobileMenu.classList.toggle('bg-white'); | |
| mobileMenu.classList.toggle('p-4'); | |
| mobileMenu.classList.toggle('shadow-lg'); | |
| mobileMenu.classList.toggle('space-y-4'); | |
| mobileMenu.classList.toggle('space-x-8'); | |
| }); | |
| // Product card hover effect | |
| const productCards = document.querySelectorAll('.product-card'); | |
| productCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-5px) rotate(1deg)'; | |
| this.style.boxShadow = '0 10px 20px rgba(0,0,0,0.2)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = ''; | |
| this.style.boxShadow = ''; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <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=LiteSoulAI/street-ink" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |