Spaces:

visionarymedia
/

lunar-threads-eclipse

Running

App Files Files Community

Jordan Ward commited on Oct 16, 2025

Commit

3b1d19b

verified ·

1 Parent(s): 1b044f5

create this clothing brand home page in the saem exact way as this website: eclipsearc.com but with this as the video bakcground: https://imgur.com/VwNWg57 instead of the video they have and make it look good on desktop and mobile. and use this as the logo: https://imgur.com/eSK8pvF

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +241 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Lunar Threads Eclipse
-emoji: 💻
-colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Lunar Threads Eclipse 👕
+colorFrom: blue
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,242 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lunar Threads | 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>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
+        html, body {
+            font-family: 'Montserrat', sans-serif;
+            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>
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 bg-black bg-opacity-70 backdrop-blur-sm nav-transition">
+        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
+            <div class="flex items-center">
+                <img src="https://i.imgur.com/eSK8pvF.png" alt="Lunar Threads Logo" class="h-10 md:h-12">
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="#" class="text-white hover:text-gray-300 font-medium">Shop</a>
+                <a href="#" class="text-white hover:text-gray-300 font-medium">Collections</a>
+                <a href="#" class="text-white hover:text-gray-300 font-medium">About</a>
+                <a href="#" class="text-white hover:text-gray-300 font-medium">Contact</a>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button class="text-white hover:text-gray-300">
+                    <i data-feather="search"></i>
+                </button>
+                <button class="text-white hover:text-gray-300">
+                    <i data-feather="shopping-bag"></i>
+                </button>
+                <button class="md:hidden text-white hover:text-gray-300">
+                    <i data-feather="menu"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center relative px-6">
+        <div class="text-center max-w-4xl mx-auto">
+            <h1 class="text-5xl md:text-8xl font-bold mb-6 text-stroke uppercase tracking-tighter">Lunar Threads</h1>
+            <p class="text-lg md:text-xl mb-10 max-w-2xl mx-auto">Where cosmic inspiration meets urban fashion. The Eclipse Collection redefines streetwear with celestial elegance.</p>
+            <div class="flex flex-col md:flex-row justify-center gap-4">
+                <button class="bg-white text-black px-8 py-3 font-medium hover:bg-gray-200 hover-scale">Shop Now</button>
+                <button class="border border-white px-8 py-3 font-medium hover:bg-white hover:text-black hover-scale">Explore</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">Eclipse 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/black/640x360/1" alt="Eclipse 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">Eclipse 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/black/640x360/2" alt="Nebula 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">Nebula 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/black/640x360/3" alt="Celestial 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">Celestial Joggers</h3>
+                        <p class="text-gray-400">$69.99</p>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-16">
+                <button class="border border-white px-8 py-3 font-medium hover:bg-white hover:text-black transition duration-300 hover-scale">
+                    View All Products
+                </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">Cosmic Craftsmanship</h2>
+                <p class="text-lg md:text-xl mb-10">
+                    Each piece in our Eclipse Collection is meticulously designed with celestial inspiration,
+                    crafted from premium sustainable materials, and made to transcend seasons.
+                </p>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <div>
+                        <i data-feather="moon" class="h-12 w-12 mx-auto mb-4"></i>
+                        <h3 class="text-xl font-medium mb-2">Celestial Design</h3>
+                        <p class="text-gray-300">Inspired by cosmic phenomena and astronomical events</p>
+                    </div>
+                    <div>
+                        <i data-feather="feather" class="h-12 w-12 mx-auto mb-4"></i>
+                        <h3 class="text-xl font-medium mb-2">Premium Materials</h3>
+                        <p class="text-gray-300">Ethically sourced fabrics with premium quality</p>
+                    </div>
+                    <div>
+                        <i data-feather="globe" class="h-12 w-12 mx-auto mb-4"></i>
+                        <h3 class="text-xl font-medium mb-2">Sustainable Practices</h3>
+                        <p class="text-gray-300">Committed to reducing our cosmic footprint</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">Join Our Cosmic Journey</h2>
+            <p class="text-lg mb-10 max-w-2xl mx-auto">
+                Subscribe for exclusive drops, celestial updates, 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-white text-black px-6 py-3 font-medium hover:bg-gray-200 hover-scale">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/eSK8pvF.png" alt="Lunar Threads Logo" class="h-12 mb-6">
+                    <p class="text-gray-400">Where the cosmos meets contemporary 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 Lunar Threads. All rights reserved.</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        feather.replace();
+        // Scroll effect for navigation
+        window.addEventListener('scroll', function() {
+            const nav = document.querySelector('nav');
+            if (window.scrollY > 50) {
+                nav.classList.add('shadow-lg');
+                nav.classList.add('py-3');
+                nav.classList.remove('py-4');
+            } else {
+                nav.classList.remove('shadow-lg');
+                nav.classList.remove('py-3');
+                nav.classList.add('py-4');
+            }
+        });
+    </script>
+</body>
 </html>