|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Stephanie Paraíso | Luxury Fashion</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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #ffffff; |
|
|
color: #171717; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 1px; |
|
|
background-color: #171717; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.product-card:hover .product-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.product-overlay { |
|
|
transition: opacity 0.3s ease; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.hover-scale { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.hover-scale:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="antialiased"> |
|
|
|
|
|
<header class="bg-white border-b border-gray-100 sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
|
|
|
<div class="text-xl font-medium tracking-tight"> |
|
|
STEPHANIE PARAÍSO |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="nav-link text-gray-900 hover:text-gray-900 text-sm">Home</a> |
|
|
<a href="#" class="nav-link text-gray-500 hover:text-gray-900 text-sm">Collections</a> |
|
|
<a href="#" class="nav-link text-gray-500 hover:text-gray-900 text-sm">Brands</a> |
|
|
<a href="#" class="nav-link text-gray-500 hover:text-gray-900 text-sm">About</a> |
|
|
<a href="#" class="nav-link text-gray-500 hover:text-gray-900 text-sm">Contact</a> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-6"> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-900"> |
|
|
<i class="fas fa-search text-sm"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-900"> |
|
|
<i class="far fa-user text-sm"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-900 relative"> |
|
|
<i class="fas fa-shopping-bag text-sm"></i> |
|
|
<span class="absolute -top-2 -right-2 bg-gray-900 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">2</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button class="md:hidden focus:outline-none"> |
|
|
<i class="fas fa-bars text-gray-900 text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="py-20 md:py-32 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-medium tracking-tight mb-6">Luxury Fashion,<br>Redefined</h1> |
|
|
<p class="text-lg md:text-xl text-gray-500 mb-8 max-w-2xl mx-auto">Discover curated collections from the world's most exclusive designers.</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<a href="#" class="bg-gray-900 text-white px-6 py-3 text-sm font-medium hover:bg-gray-700 transition">Shop Collection</a> |
|
|
<a href="#" class="border border-gray-900 text-gray-900 px-6 py-3 text-sm font-medium hover:bg-gray-50 transition">Explore</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex justify-between items-center mb-12"> |
|
|
<h2 class="text-2xl font-medium tracking-tight">Featured Collections</h2> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-gray-900">View all</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="group relative overflow-hidden hover-scale"> |
|
|
<div class="aspect-square bg-gray-50"> |
|
|
<img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" |
|
|
alt="Spring Collection" |
|
|
class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="font-medium">Spring Essentials</h3> |
|
|
<p class="text-sm text-gray-500">New arrivals for the season</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group relative overflow-hidden hover-scale"> |
|
|
<div class="aspect-square bg-gray-50"> |
|
|
<img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" |
|
|
alt="Bags Collection" |
|
|
class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="font-medium">Luxury Bags</h3> |
|
|
<p class="text-sm text-gray-500">Iconic designs</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group relative overflow-hidden hover-scale"> |
|
|
<div class="aspect-square bg-gray-50"> |
|
|
<img src="https://images.unsplash.com/photo-1542272604-787c3835535d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80" |
|
|
alt="Footwear Collection" |
|
|
class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="font-medium">Designer Footwear</h3> |
|
|
<p class="text-sm text-gray-500">Step into luxury</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</ |
|
|
</html> |
