Jordan Ward
remove the "nagad clothing" text andthe text under it. just keep the button
ba72840 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NAGAD CLOTHING | ECLIPSE COLLECTION</title> | |
| <link rel="icon" type="image/x-icon" href="https://i.imgur.com/eSK8pvF.png"> | |
| <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> | |
| <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Permanent+Marker&display=swap'); | |
| html, body { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .graffiti-font { | |
| font-family: 'Permanent Marker', cursive; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| } | |
| .video-bg { | |
| position: fixed; | |
| right: 0; | |
| bottom: 0; | |
| min-width: 100%; | |
| min-height: 100%; | |
| z-index: -1; | |
| object-fit: cover; | |
| opacity: 0.9; | |
| } | |
| .nav-transition { | |
| transition: all 0.3s ease; | |
| } | |
| .text-stroke { | |
| -webkit-text-stroke: 1px white; | |
| color: transparent; | |
| } | |
| .hover-scale { | |
| transition: transform 0.3s ease; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white"> | |
| <!-- Video Background --> | |
| <video autoplay muted loop class="video-bg"> | |
| <source src="https://i.imgur.com/VwNWg57.mp4" type="video/mp4"> | |
| </video> | |
| <!-- Logo Only --> | |
| <div class="fixed w-full z-50 py-6 flex justify-center"> | |
| <img src="https://i.imgur.com/rSHItIR.png" alt="Nagad Clothing Logo" class="h-10 md:h-12"> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center relative px-6"> | |
| <div class="text-center max-w-4xl mx-auto"> | |
| <div class="flex justify-center"> | |
| <button class="bg-white bg-opacity-20 text-white px-8 py-3 font-medium tracking-wide hover:bg-opacity-30 hover-scale transform transition-all duration-300"> | |
| Shop The Collection | |
| </button> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 flex justify-center"> | |
| <a href="#featured" class="animate-bounce"> | |
| <i data-feather="chevron-down" class="text-white"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Featured Collection --> | |
| <section id="featured" class="py-20 px-6 bg-black bg-opacity-70"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-16 text-center graffiti-font">HIP HOP HYMNAL COLLECTION</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-10"> | |
| <!-- Product 1 --> | |
| <div class="group relative overflow-hidden hover-scale"> | |
| <div class="aspect-square overflow-hidden"> | |
| <img src="http://static.photos/music/640x360/1" alt="Scripture Hoodie" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-xl font-medium">Scripture Hoodie</h3> | |
| <p class="text-gray-400">$89.99</p> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="group relative overflow-hidden hover-scale"> | |
| <div class="aspect-square overflow-hidden"> | |
| <img src="http://static.photos/music/640x360/2" alt="Boombox Tee" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-xl font-medium">Boombox Tee</h3> | |
| <p class="text-gray-400">$49.99</p> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="group relative overflow-hidden hover-scale"> | |
| <div class="aspect-square overflow-hidden"> | |
| <img src="http://static.photos/music/640x360/3" alt="Record Joggers" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-xl font-medium">Record Joggers</h3> | |
| <p class="text-gray-400">$69.99</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <button class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white px-12 py-4 font-bold tracking-wider uppercase hover:bg-gradient-to-r hover:from-purple-600 hover:via-pink-600 hover:to-red-600 hover-scale transform transition-all duration-300 shadow-lg hover:shadow-xl"> | |
| Shop The Full Collection | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 px-6 relative"> | |
| <div class="absolute inset-0 bg-black bg-opacity-80"></div> | |
| <div class="container mx-auto relative z-10"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-8 graffiti-font">HOLY HIP HOP HERITAGE</h2> | |
| <p class="text-lg md:text-xl mb-10"> | |
| Each piece in our collection blends urban style with biblical truth, | |
| crafted from premium materials to honor both faith and culture. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <i data-feather="music" class="h-12 w-12 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-medium mb-2">Gospel Beats</h3> | |
| <p class="text-gray-300">Inspired by scripture and hip hop culture</p> | |
| </div> | |
| <div> | |
| <i data-feather="disc" class="h-12 w-12 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-medium mb-2">Retro Style</h3> | |
| <p class="text-gray-300">Classic hip hop vibes with a holy message</p> | |
| </div> | |
| <div> | |
| <i data-feather="book" class="h-12 w-12 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-medium mb-2">Scriptural Roots</h3> | |
| <p class="text-gray-300">Designs rooted in biblical truth</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-20 px-6 bg-black bg-opacity-70"> | |
| <div class="container mx-auto max-w-4xl text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 graffiti-font">JOIN THE MOVEMENT</h2> | |
| <p class="text-lg mb-10 max-w-2xl mx-auto"> | |
| Subscribe for exclusive drops, mixtape releases, and 10% off your first order. | |
| </p> | |
| <div class="flex flex-col md:flex-row gap-4 max-w-xl mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 bg-transparent border border-white text-white placeholder-gray-400 focus:outline-none focus:border-gray-400"> | |
| <button class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white px-8 py-3 font-bold tracking-wider uppercase hover:bg-gradient-to-r hover:from-purple-600 hover:via-pink-600 hover:to-red-600 hover-scale transform transition-all duration-300 shadow-lg hover:shadow-xl">Subscribe</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-10"> | |
| <div> | |
| <img src="https://i.imgur.com/rSHItIR.png" alt="Nagad Clothing Logo" class="h-12 mb-6"> | |
| <p class="text-gray-400">Where faith meets hip hop culture. Spreading the gospel through urban fashion.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4">Shop</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">All Products</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">New Arrivals</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Best Sellers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Sale</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4">Info</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Sustainability</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Shipping & Returns</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4">Connect</h3> | |
| <div class="flex space-x-4 mb-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a> | |
| </div> | |
| <p class="text-gray-400 text-sm">© 2023 Nagad Clothing. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |