File size: 7,221 Bytes
865fbf7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
<!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">
<!-- Navigation -->
<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">
<!-- Logo -->
<div class="text-xl font-medium tracking-tight">
STEPHANIE PARAÍSO
</div>
<!-- Desktop Nav -->
<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>
<!-- Icons -->
<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>
<!-- Mobile Menu Button -->
<button class="md:hidden focus:outline-none">
<i class="fas fa-bars text-gray-900 text-xl"></i>
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<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>
<!-- Featured Collections -->
<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">
<!-- Collection 1 -->
<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>
<!-- Collection 2 -->
<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>
<!-- Collection 3 -->
<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> |