<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Coobble · Your Curated Closet</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* ========== RESET & BASE ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
color: #1a1a1a;
background: #ffffff;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* ========== BUTTONS ========== */
.btn {
display: inline-block;
padding: 16px 40px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.7rem;
letter-spacing: 2px;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.btn-primary {
background: #1a1a1a;
color: #ffffff;
}
.btn-primary:hover {
background: #000000;
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
color: #1a1a1a;
border: 1.5px solid #1a1a1a;
}
.btn-outline:hover {
background: #1a1a1a;
color: #ffffff;
}
.btn-secondary {
background: #a8d5c4;
color: #1a1a1a;
}
.btn-secondary:hover {
background: #8fc9b5;
}
.btn i { margin-right: 8px; }
/* ========== HEADER ========== */
header {
padding: 18px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f0f0f0;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo i {
font-size: 1.4rem;
color: #a8d5c4;
}
.logo h1 {
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: 1.5rem;
color: #1a1a1a;
letter-spacing: 2px;
}
.logo span {
font-size: 0.5rem;
font-weight: 300;
color: #999;
letter-spacing: 3px;
text-transform: uppercase;
display: block;
margin-top: -4px;
}
nav {
display: flex;
gap: 28px;
}
nav a {
font-size: 0.65rem;
font-weight: 500;
color: #4a4a4a;
text-transform: uppercase;
letter-spacing: 1.5px;
transition: 0.2s;
position: relative;
}
nav a:hover { color: #a8d5c4; }
nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: #a8d5c4;
transition: 0.3s;
}
nav a:hover::after { width: 100%; }
.header-actions {
display: flex;
gap: 18px;
align-items: center;
}
.header-actions i {
font-size: 0.95rem;
color: #4a4a4a;
transition: 0.2s;
cursor: pointer;
position: relative;
}
.header-actions i:hover { color: #a8d5c4; }
.badge-count {
position: absolute;
top: -8px;
right: -10px;
background: #1a1a1a;
color: #fff;
font-size: 0.4rem;
padding: 2px 6px;
font-weight: 600;
}
.mobile-menu {
display: none;
font-size: 1.2rem;
cursor: pointer;
}
/* ========== HERO ========== */
.hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 50px 0 40px;
}
.hero-content { flex: 1; }
.hero-content .tag {
font-size: 0.5rem;
font-weight: 500;
color: #a8d5c4;
letter-spacing: 3px;
text-transform: uppercase;
border-bottom: 1px solid #a8d5c4;
padding-bottom: 4px;
display: inline-block;
margin-bottom: 14px;
}
.hero-content h1 {
font-family: 'Playfair Display', serif;
font-size: 3.4rem;
font-weight: 400;
line-height: 1.08;
color: #1a1a1a;
margin-bottom: 14px;
}
.hero-content h1 .highlight {
color: #a8d5c4;
font-style: italic;
}
.hero-content p {
font-size: 0.95rem;
color: #666;
max-width: 420px;
font-weight: 300;
margin-bottom: 22px;
}
.features {
display: flex;
gap: 24px 36px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.features span {
font-size: 0.75rem;
color: #4a4a4a;
font-weight: 400;
display: flex;
align-items: center;
gap: 8px;
}
.features span i { color: #a8d5c4; font-size: 0.85rem; }
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-image {
flex: 1;
text-align: center;
position: relative;
}
.hero-image i {
font-size: 10rem;
color: #f0f0f0;
display: block;
line-height: 1;
}
.floating-badge {
position: absolute;
background: #fff;
padding: 10px 18px;
border: 1px solid #f0f0f0;
font-size: 0.65rem;
color: #1a1a1a;
box-shadow: 0 8px 30px rgba(0,0,0,0.04);
display: flex;
align-items: center;
gap: 8px;
animation: float 3s ease-in-out infinite;
}
.floating-badge i { color: #a8d5c4; font-size: 0.9rem; }
.floating-badge.premium { top: 5%; right: 0; }
.floating-badge.quality { bottom: 10%; left: 0; animation-delay: 1.5s; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* ========== TRUST BAR ========== */
.trust {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 24px;
background: #fafafa;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 30px;
}
.trust span {
font-size: 0.7rem;
color: #4a4a4a;
display: flex;
align-items: center;
gap: 8px;
}
.trust span i { color: #a8d5c4; font-size: 0.85rem; }
.trust .stars { color: #a8d5c4; letter-spacing: 1px; }
.trust .highlight {
background: #1a1a1a;
color: #fff;
padding: 4px 16px;
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 1.5px;
}
/* ========== CATEGORIES ========== */
.section-title {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
font-weight: 400;
text-align: center;
margin-bottom: 6px;
}
.section-title i { color: #a8d5c4; margin-right: 10px; }
.section-sub {
text-align: center;
color: #888;
font-weight: 300;
font-size: 0.9rem;
margin-bottom: 32px;
}
.categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 14px;
margin-bottom: 40px;
}
.category {
padding: 24px 12px 20px;
text-align: center;
border: 1px solid #f0f0f0;
transition: 0.3s;
cursor: pointer;
}
.category:hover {
border-color: #a8d5c4;
transform: translateY(-3px);
}
.category i {
font-size: 1.8rem;
color: #a8d5c4;
display: block;
margin-bottom: 8px;
}
.category h4 {
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.category p {
font-size: 0.6rem;
color: #999;
font-weight: 300;
margin-top: 2px;
}
/* ========== PRODUCTS ========== */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
margin-bottom: 40px;
}
.product {
border: 1px solid #f0f0f0;
padding: 0 0 16px 0;
text-align: center;
transition: 0.3s;
position: relative;
}
.product:hover {
transform: translateY(-4px);
border-color: #e0e0e0;
box-shadow: 0 12px 40px rgba(0,0,0,0.03);
}
.product .badge {
position: absolute;
top: 12px;
left: 12px;
background: #1a1a1a;
color: #fff;
font-size: 0.4rem;
padding: 2px 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.product .badge.premium { background: #a8d5c4; color: #1a1a1a; }
.product-image {
background: #fafafa;
padding: 24px 0 20px;
font-size: 3rem;
color: #d0d0d0;
margin-bottom: 12px;
}
.product-brand {
font-size: 0.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #a8d5c4;
}
.product-name {
font-weight: 500;
font-size: 0.85rem;
margin-bottom: 2px;
}
.product-desc {
font-size: 0.65rem;
color: #999;
font-weight: 300;
margin-bottom: 6px;
}
.product-price {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
}
.product-price .original {
font-size: 0.75rem;
color: #bbb;
text-decoration: line-through;
font-weight: 300;
margin-right: 6px;
}
.product-condition {
font-size: 0.45rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
background: #f5f5f5;
padding: 2px 12px;
display: inline-block;
margin-top: 6px;
}
/* ========== CONSIGNMENT ========== */
.consign {
background: #fafafa;
padding: 32px 40px;
border: 1px solid #f0f0f0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}
.consign h3 {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 400;
}
.consign h3 i { color: #a8d5c4; margin-right: 10px; }
.consign p {
color: #666;
font-weight: 300;
font-size: 0.9rem;
max-width: 420px;
}
.consign .stats {
display: flex;
gap: 32px;
}
.consign .stats .num {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: #a8d5c4;
}
.consign .stats .label {
font-size: 0.55rem;
color: #999;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ========== STEPS ========== */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 24px;
padding: 32px 0;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 40px;
}
.step {
text-align: center;
}
.step .num {
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
color: #e8e8e8;
}
.step i {
font-size: 1.8rem;
color: #a8d5c4;
display: block;
margin: 6px 0;
}
.step h4 {
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.step p {
font-size: 0.7rem;
color: #999;
font-weight: 300;
}
/* ========== CTA ========== */
.cta {
background: #1a1a1a;
padding: 36px 44px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cta h3 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: #fff;
font-weight: 400;
}
.cta h3 i { color: #a8d5c4; margin-right: 10px; }
.cta p {
color: #b0b0b0;
font-weight: 300;
font-size: 0.9rem;
}
.cta .btn {
background: #fff;
color: #1a1a1a;
padding: 14px 40px;
}
.cta .btn:hover { background: #f0f0f0; }
/* ========== FOOTER ========== */
footer {
padding: 28px 0 24px;
border-top: 1px solid #f0f0f0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
color: #999;
font-size: 0.7rem;
}
footer a {
color: #999;
text-transform: uppercase;
font-size: 0.6rem;
letter-spacing: 1px;
transition: 0.2s;
}
footer a:hover { color: #a8d5c4; }
footer .links { display: flex; gap: 24px; flex-wrap: wrap; }
footer .social i {
font-size: 1rem;
margin-left: 14px;
color: #bbb;
transition: 0.2s;
cursor: pointer;
}
footer .social i:hover { color: #a8d5c4; }
footer .info { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
footer .info .loc { font-size: 0.6rem; color: #bbb; }
footer .info .loc i { color: #a8d5c4; margin-right: 4px; }
/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
nav { display: none; }
.mobile-menu { display: block; }
.hero { flex-direction: column; padding: 30px 0; }
.hero-content h1 { font-size: 2.4rem; }
.hero-image i { font-size: 6rem; }
.floating-badge { display: none; }
.trust { flex-direction: column; align-items: flex-start; }
.consign { flex-direction: column; align-items: flex-start; gap: 16px; }
.consign .stats { width: 100%; justify-content: space-around; }
.cta { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 24px; }
.cta h3 { font-size: 1.6rem; }
footer { flex-direction: column; align-items: flex-start; gap: 14px; }
.product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.steps { grid-template-columns: 1fr; gap: 16px; }
.section-title { font-size: 1.6rem; }
}
@media (max-width: 480px) {
.container { padding: 0 16px; }
.hero-content h1 { font-size: 2rem; }
.hero-content p { font-size: 0.85rem; }
.product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.product-image { font-size: 2.2rem; padding: 16px 0; }
.product-price { font-size: 1rem; }
.features { flex-direction: column; gap: 8px; }
.hero-buttons .btn { width: 100%; text-align: center; }
.cta .btn { width: 100%; text-align: center; }
}
</style>
</head>
<body>
<!-- ===== HEADER ===== -->
<header>
<div class="container" style="display:flex; justify-content:space-between; align-items:center; width:100%; padding:0 24px;">
<div class="logo">
<i class="fas fa-bubble"></i>
<div>
<h1>coobble</h1>
<span>your curated closet</span>
</div>
</div>
<nav>
<a href="#">New</a>
<a href="#">Brands</a>
<a href="#">How it works</a>
<a href="#">Sell</a>
</nav>
<div class="header-actions">
<i class="fas fa-search"></i>
<i class="far fa-heart"></i>
<i class="fas fa-shopping-bag">
<span class="badge-count">3</span>
</i>
<i class="far fa-user"></i>
<div class="mobile-menu"><i class="fas fa-bars"></i></div>
</div>
</div>
</header>
<!-- ===== HERO ===== -->
<section class="hero">
<div class="container" style="display:flex; align-items:center; justify-content:space-between; gap:40px; width:100%;">
<div class="hero-content">
<span class="tag">Curated activewear</span>
<h1>Your <span class="highlight">curated</span> closet</h1>
<p>Premium pre-loved activewear from Lululemon, Alo Yoga, Vuori, Outdoor Voices & more — curated for you.</p>
<div class="features">
<span><i class="fas fa-check-circle"></i> Authenticity guaranteed</span>
<span><i class="fas fa-check-circle"></i> Expertly curated</span>
</div>
<div class="hero-buttons">
<a href="#" class="btn btn-primary"><i class="fas fa-shopping-bag"></i> Shop</a>
<a href="#" class="btn btn-outline"><i class="fas fa-handshake"></i> Consign</a>
</div>
</div>
<div class="hero-image">
<i class="fas fa-tshirt"></i>
<div class="floating-badge premium"><i class="fas fa-star"></i> Premium curation</div>
<div class="floating-badge quality"><i class="fas fa-check-circle"></i> Quality guaranteed</div>
</div>
</div>
</section>
<!-- ===== TRUST ===== -->
<div class="container">
<div class="trust">
<span><i class="fas fa-check-circle"></i> 100% authentic</span>
<span><span class="stars">★★★★★</span> 4.9/5</span>
<span><i class="fas fa-recycle"></i> 1,200+ items revived</span>
<span class="highlight">Sustainable style</span>
</div>
</div>
<!-- ===== CATEGORIES ===== -->
<div class="container">
<h2 class="section-title"><i class="fas fa-grid"></i> Shop by category</h2>
<p class="section-sub">Discover exceptional pieces, curated for you</p>
<div class="categories">
<div class="category"><i class="fas fa-tshirt"></i><h4>Tops</h4><p>Tanks · Tees</p></div>
<div class="category"><i class="fas fa-vest"></i><h4>Bottoms</h4><p>Leggings · Pants</p></div>
<div class="category"><i class="fas fa-vest-patches"></i><h4>Outerwear</h4><p>Jackets · Hoodies</p></div>
<div class="category"><i class="fas fa-shoe-prints"></i><h4>Shoes</h4><p>Sneakers · Boots</p></div>
<div class="category"><i class="fas fa-bag"></i><h4>Accessories</h4><p>Bags · Hats</p></div>
<div class="category"><i class="fas fa-user-tie"></i><h4>Sets</h4><p>Coordinates</p></div>
</div>
</div>
<!-- ===== FEATURED ===== -->
<div class="container">
<h2 class="section-title"><i class="fas fa-star"></i> Featured pieces</h2>
<p class="section-sub">Premium activewear, expertly curated</p>
<div class="product-grid">
<div class="product">
<span class="badge premium">Premium</span>
<div class="product-image"><i class="fas fa-tshirt"></i></div>
<div class="product-brand">Alo Yoga</div>
<div class="product-name">Airbrush Leggings</div>
<div class="product-desc">Size M · Black</div>
<div class="product-price"><span class="original">$98</span> $65</div>
<div class="product-condition">★ Excellent</div>
</div>
<div class="product">
<span class="badge">New</span>
<div class="product-image"><i class="fas fa-tshirt"></i></div>
<div class="product-brand">Lululemon</div>
<div class="product-name">Align High-Rise Pant</div>
<div class="product-desc">Size 6 · Navy</div>
<div class="product-price"><span class="original">$128</span> $89</div>
<div class="product-condition">★ Pristine</div>
</div>
<div class="product">
<span class="badge premium">Premium</span>
<div class="product-image"><i class="fas fa-vest"></i></div>
<div class="product-brand">Vuori</div>
<div class="product-name">Performance Jogger</div>
<div class="product-desc">Size S · Heather Grey</div>
<div class="product-price"><span class="original">$98</span> $59</div>
<div class="product-condition">★ Excellent</div>
</div>
<div class="product">
<span class="badge premium">Premium</span>
<div class="product-image"><i class="fas fa-vest-patches"></i></div>
<div class="product-brand">Outdoor Voices</div>
<div class="product-name">CloudKnit Hoodie</div>
<div class="product-desc">Size M · Oatmeal</div>
<div class="product-price"><span class="original">$148</span> $95</div>
<div class="product-condition">★ Like new</div>
</div>
</div>
</div>
<!-- ===== CONSIGNMENT ===== -->
<div class="container">
<div class="consign">
<div>
<h3><i class="fas fa-handshake"></i> Sell your pieces</h3>
<p>Turn your pre-loved fashion into cash. We curate, price & sell — you get paid.</p>
</div>
<div class="stats">
<div><div class="num">85%</div><div class="label">Sell-through</div></div>
<div><div class="num">3-7</div><div class="label">Days to sell</div></div>
<div><div class="num">70%</div><div class="label">Your payout</div></div>
</div>
</div>
</div>
<!-- ===== STEPS ===== -->
<div class="container">
<div class="steps">
<div class="step">
<div class="num">01</div>
<i class="fas fa-envelope"></i>
<h4>Tell us</h4>
<p>Send photos & details</p>
</div>
<div class="step">
<div class="num">02</div>
<i class="fas fa-star"></i>
<h4>Get offer</h4>
<p>We evaluate & price</p>
</div>
<div class="step">
<div class="num">03</div>
<i class="fas fa-box"></i>
<h4>Ship</h4>
<p>Free shipping label</p>
</div>
<div class="step">
<div class="num">04</div>
<i class="fas fa-hand-holding-heart"></i>
<h4>Get paid</h4>
<p>Cash when it sells</p>
</div>
</div>
</div>
<!-- ===== CTA ===== -->
<div class="container">
<div class="cta">
<div>
<h3><i class="fas fa-heart"></i> Ready to sell?</h3>
<p>Free shipping · Fast payout · Sustainable style</p>
</div>
<a href="#" class="btn"><i class="fas fa-handshake"></i> Consign now</a>
</div>
</div>
<!-- ===== FOOTER ===== -->
<div class="container">
<footer>
<div class="links">
<a href="#">About</a>
<a href="#">Sustainability</a>
<a href="#">Contact</a>
<a href="#">FAQ</a>
</div>
<div class="info">
<span class="loc"><i class="fas fa-map-marker-alt"></i> Arlington · GP · Irving</span>
<div class="social">
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-whatsapp"></i>
<span style="margin-left:10px; font-weight:300;">2026 · coobble</span>
</div>
</div>
</footer>
</div>
</body>
</html>