|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NOVA | Minimal Luxury Design</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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
silver: { |
|
|
100: '#f5f7fa', |
|
|
200: '#e4e7eb', |
|
|
300: '#cbd2d9', |
|
|
400: '#9aa5b1', |
|
|
500: '#7b8794', |
|
|
600: '#616e7c', |
|
|
700: '#52606d', |
|
|
800: '#3e4c59', |
|
|
900: '#323f4b', |
|
|
}, |
|
|
platinum: '#e5e4e2', |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
serif: ['Playfair Display', 'serif'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, rgba(245,247,250,0.98) 0%, rgba(255,255,255,0.9) 100%); |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
display: block; |
|
|
width: 0; |
|
|
height: 1px; |
|
|
background: #000; |
|
|
transition: width .3s; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-8px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.text-stroke { |
|
|
-webkit-text-stroke: 1px #000; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.scroll-down { |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
40% { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
60% { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-white text-gray-900 antialiased"> |
|
|
|
|
|
<nav class="fixed w-full z-50 bg-white bg-opacity-90 backdrop-blur-sm border-b border-silver-200"> |
|
|
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center"> |
|
|
<a href="#" class="text-2xl font-serif font-bold tracking-tight">NOVA</a> |
|
|
<div class="hidden md:flex space-x-10"> |
|
|
<a href="#" class="nav-link text-sm uppercase tracking-wider">Work</a> |
|
|
<a href="#" class="nav-link text-sm uppercase tracking-wider">Studio</a> |
|
|
<a href="#" class="nav-link text-sm uppercase tracking-wider">Journal</a> |
|
|
<a href="#" class="nav-link text-sm uppercase tracking-wider">Contact</a> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="md:hidden text-gray-900"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<div class="hidden md:flex items-center space-x-2"> |
|
|
<span class="text-xs tracking-widest">EN</span> |
|
|
<i class="fas fa-chevron-down text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="min-h-screen hero-gradient flex items-center pt-20"> |
|
|
<div class="max-w-7xl mx-auto px-6 py-20 md:py-32"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> |
|
|
<div class="space-y-8"> |
|
|
<h1 class="text-5xl md:text-7xl font-serif font-bold leading-tight"> |
|
|
<span class="block">Elegance</span> |
|
|
<span class="block text-silver-600">Redefined</span> |
|
|
</h1> |
|
|
<p class="text-lg md:text-xl text-silver-600 max-w-lg leading-relaxed"> |
|
|
We craft digital experiences that blend minimalism with sophistication, creating timeless designs that stand out. |
|
|
</p> |
|
|
<div class="flex space-x-6 pt-4"> |
|
|
<a href="#" class="px-8 py-3 bg-black text-white text-sm uppercase tracking-wider hover:bg-gray-900 transition duration-300"> |
|
|
Explore Work |
|
|
</a> |
|
|
<a href="#" class="px-8 py-3 border border-black text-sm uppercase tracking-wider hover:bg-black hover:text-white transition duration-300"> |
|
|
Our Studio |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="absolute -top-12 -right-12 w-64 h-64 bg-silver-100 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> |
|
|
<div class="absolute -bottom-12 -left-12 w-64 h-64 bg-silver-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" |
|
|
alt="Minimal design" |
|
|
class="w-full h-auto object-cover rounded-lg shadow-xl"> |
|
|
<div class="absolute -bottom-6 -right-6 bg-white p-6 shadow-lg"> |
|
|
<span class="block text-xs uppercase tracking-widest text-silver-500">Featured Project</span> |
|
|
<span class="block font-serif text-xl mt-1">Horizon UI</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-20 text-center scroll-down"> |
|
|
<span class="block text-xs tracking-widest mb-2">SCROLL</span> |
|
|
<i class="fas fa-chevron-down animate-bounce"></i> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-silver-100"> |
|
|
<div class="max-w-7xl mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-500">Collaborations</span> |
|
|
<h2 class="text-3xl md:text-4xl font-serif font-bold mt-4">Selected Clients</h2> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div class="flex justify-center items-center h-24 opacity-70 hover:opacity-100 transition duration-300"> |
|
|
<span class="text-2xl font-serif font-bold">VOGUE</span> |
|
|
</div> |
|
|
<div class="flex justify-center items-center h-24 opacity-70 hover:opacity-100 transition duration-300"> |
|
|
<span class="text-2xl font-serif font-bold">APPLE</span> |
|
|
</div> |
|
|
<div class="flex justify-center items-center h-24 opacity-70 hover:opacity-100 transition duration-300"> |
|
|
<span class="text-2xl font-serif font-bold">HERMÈS</span> |
|
|
</div> |
|
|
<div class="flex justify-center items-center h-24 opacity-70 hover:opacity-100 transition duration-300"> |
|
|
<span class="text-2xl font-serif font-bold">BALENCIAGA</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20"> |
|
|
<div class="max-w-7xl mx-auto px-6"> |
|
|
<div class="flex justify-between items-end mb-16"> |
|
|
<div> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-500">Portfolio</span> |
|
|
<h2 class="text-3xl md:text-4xl font-serif font-bold mt-4">Recent Works</h2> |
|
|
</div> |
|
|
<a href="#" class="hidden md:flex items-center space-x-2 group"> |
|
|
<span class="text-sm uppercase tracking-widest group-hover:underline">View All</span> |
|
|
<i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="card-hover"> |
|
|
<div class="overflow-hidden rounded-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" |
|
|
alt="Project 1" |
|
|
class="w-full h-96 object-cover transition-transform duration-700 hover:scale-105"> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-500">Web Design</span> |
|
|
<h3 class="text-2xl font-serif font-bold mt-2">Monochrome</h3> |
|
|
<p class="text-silver-600 mt-2">A luxury fashion e-commerce experience</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-hover"> |
|
|
<div class="overflow-hidden rounded-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1560493676-04071c5f467b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" |
|
|
alt="Project 2" |
|
|
class="w-full h-96 object-cover transition-transform duration-700 hover:scale-105"> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-500">Branding</span> |
|
|
<h3 class="text-2xl font-serif font-bold mt-2">Atelier</h3> |
|
|
<p class="text-silver-600 mt-2">Visual identity for a design studio</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center md:hidden"> |
|
|
<a href="#" class="inline-flex items-center space-x-2 group"> |
|
|
<span class="text-sm uppercase tracking-widest group-hover:underline">View All Projects</span> |
|
|
<i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-black text-white"> |
|
|
<div class="max-w-7xl mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" |
|
|
alt="Our Studio" |
|
|
class="w-full h-auto object-cover rounded-lg"> |
|
|
</div> |
|
|
<div class="space-y-8"> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-400">About Us</span> |
|
|
<h2 class="text-3xl md:text-4xl font-serif font-bold">Design Philosophy</h2> |
|
|
<p class="text-silver-300 text-lg leading-relaxed"> |
|
|
Founded in 2015, NOVA is a boutique design studio specializing in minimal, sophisticated digital experiences. |
|
|
We believe in the power of restraint, where every element serves a purpose. |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-8 pt-4"> |
|
|
<div> |
|
|
<span class="text-4xl font-serif font-bold">18+</span> |
|
|
<span class="block text-sm text-silver-300 mt-2">International Awards</span> |
|
|
</div> |
|
|
<div> |
|
|
<span class="text-4xl font-serif font-bold">50+</span> |
|
|
<span class="block text-sm text-silver-300 mt-2">Satisfied Clients</span> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="inline-flex items-center space-x-2 group mt-8"> |
|
|
<span class="text-sm uppercase tracking-widest group-hover:underline">Our Story</span> |
|
|
<i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-silver-100"> |
|
|
<div class="max-w-4xl mx-auto px-6 text-center"> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-500">Testimonials</span> |
|
|
<h2 class="text-3xl md:text-4xl font-serif font-bold mt-4 mb-12">Client Experiences</h2> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute -top-12 -left-12 w-32 h-32 bg-silver-200 rounded-full mix-blend-multiply filter blur-xl opacity-50"></div> |
|
|
<div class="absolute -bottom-12 -right-12 w-32 h-32 bg-silver-300 rounded-full mix-blend-multiply filter blur-xl opacity-50"></div> |
|
|
|
|
|
<div class="relative bg-white p-12 rounded-lg shadow-sm"> |
|
|
<div class="text-5xl font-serif font-bold text-silver-200 mb-8">"</div> |
|
|
<p class="text-xl text-silver-700 leading-relaxed mb-8"> |
|
|
Working with NOVA was transformative for our brand. Their ability to distill complex ideas into elegant, minimal designs is unparalleled. The result exceeded our expectations. |
|
|
</p> |
|
|
<div class="flex flex-col items-center"> |
|
|
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" |
|
|
alt="Client" |
|
|
class="w-16 h-16 rounded-full object-cover mb-4"> |
|
|
<span class="font-medium">Sarah Johnson</span> |
|
|
<span class="text-sm text-silver-500">Creative Director, Hermès</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20"> |
|
|
<div class="max-w-7xl mx-auto px-6"> |
|
|
<div class="flex justify-between items-end mb-16"> |
|
|
<div> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-500">Insights</span> |
|
|
<h2 class="text-3xl md:text-4xl font-serif font-bold mt-4">From The Journal</h2> |
|
|
</div> |
|
|
<a href="#" class="hidden md:flex items-center space-x-2 group"> |
|
|
<span class="text-sm uppercase tracking-widest group-hover:underline">All Articles</span> |
|
|
<i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="card-hover border border-silver-200 rounded-lg overflow-hidden"> |
|
|
<div class="h-64 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1545239351-ef35f43d514b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" |
|
|
alt="Article 1" |
|
|
class="w-full h-full object-cover transition-transform duration-700 hover:scale-105"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-500">Design • May 2023</span> |
|
|
<h3 class="text-xl font-serif font-bold mt-2">The Art of Subtraction</h3> |
|
|
<p class="text-silver-600 mt-3 mb-4">Exploring how minimal design creates more impactful user experiences.</p> |
|
|
<a href="#" class="text-sm font-medium flex items-center space-x-2 group"> |
|
|
<span>Read More</span> |
|
|
<i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-hover border border-silver-200 rounded-lg overflow-hidden"> |
|
|
<div class="h-64 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1454165804606-c3aa57c482dc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" |
|
|
alt="Article 2" |
|
|
class="w-full h-full object-cover transition-transform duration-700 hover:scale-105"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-500">Branding • April 2023</span> |
|
|
<h3 class="text-xl font-serif font-bold mt-2">Typography as Identity</h3> |
|
|
<p class="text-silver-600 mt-3 mb-4">How type choices define luxury brands in the digital space.</p> |
|
|
<a href="#" class="text-sm font-medium flex items-center space-x-2 group"> |
|
|
<span>Read More</span> |
|
|
<i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-hover border border-silver-200 rounded-lg overflow-hidden"> |
|
|
<div class="h-64 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" |
|
|
alt="Article 3" |
|
|
class="w-full h-full object-cover transition-transform duration-700 hover:scale-105"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-500">Strategy • March 2023</span> |
|
|
<h3 class="text-xl font-serif font-bold mt-2">Digital Luxury in 2023</h3> |
|
|
<p class="text-silver-600 mt-3 mb-4">Key trends shaping high-end digital experiences this year.</p> |
|
|
<a href="#" class="text-sm font-medium flex items-center space-x-2 group"> |
|
|
<span>Read More</span> |
|
|
<i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center md:hidden"> |
|
|
<a href="#" class="inline-flex items-center space-x-2 group"> |
|
|
<span class="text-sm uppercase tracking-widest group-hover:underline">View All Articles</span> |
|
|
<i class="fas fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-32 bg-silver-900 text-white"> |
|
|
<div class="max-w-4xl mx-auto px-6 text-center"> |
|
|
<span class="text-xs uppercase tracking-widest text-silver-400">Get In Touch</span> |
|
|
<h2 class="text-3xl md:text-5xl font-serif font-bold mt-4 mb-8">Let's Create Something Remarkable</h2> |
|
|
<p class="text-silver-300 text-lg max-w-2xl mx-auto leading-relaxed mb-12"> |
|
|
We're currently accepting new projects. Reach out to discuss how we can help elevate your digital presence. |
|
|
</p> |
|
|
<a href="#" class="px-10 py-4 bg-white text-black text-sm uppercase tracking-wider hover:bg-silver-100 transition duration-300 inline-flex items-center"> |
|
|
<span>Start a Project</span> |
|
|
<i class="fas fa-arrow-right ml-4 text-xs transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black text-white py-16"> |
|
|
<div class="max-w-7xl mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-12"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-serif font-bold mb-6">NOVA</h3> |
|
|
<p class="text-silver-400 text-sm leading-relaxed"> |
|
|
A boutique design studio specializing in minimal, sophisticated digital experiences for luxury brands worldwide. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm uppercase tracking-widest text-silver-500 mb-6">Studio</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">About</a></li> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">Team</a></li> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">Careers</a></li> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm uppercase tracking-widest text-silver-500 mb-6">Work</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">Portfolio</a></li> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">Case Studies</a></li> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">Process</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-sm uppercase tracking-widest text-silver-500 mb-6">Connect</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">Instagram</a></li> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">LinkedIn</a></li> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">Twitter</a></li> |
|
|
<li><a href="#" class="text-silver-300 hover:text-white text-sm">Dribbble</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-silver-900 mt-16 pt-10 flex flex-col md:flex-row justify-between items-center"> |
|
|
<span class="text-silver-500 text-sm">© 2023 NOVA Design Studio. All rights reserved.</span> |
|
|
<div class="flex space-x-6 mt-6 md:mt-0"> |
|
|
<a href="#" class="text-silver-500 hover:text-white text-sm">Privacy Policy</a> |
|
|
<a href="#" class="text-silver-500 hover:text-white text-sm">Terms of Service</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const mobileMenuButton = document.querySelector('button.md\\:hidden'); |
|
|
if(mobileMenuButton) { |
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
alert('Mobile menu would open here in a full implementation'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</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=natana/wow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
