208 lines
7.5 KiB
HTML
208 lines
7.5 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Photography – SkinBase</title>
|
||
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
sb: {
|
||
bg: "#0b1220",
|
||
panel: "rgba(255,255,255,.06)",
|
||
panel2: "rgba(255,255,255,.08)",
|
||
border: "rgba(255,255,255,.10)",
|
||
text: "rgba(255,255,255,.90)",
|
||
muted: "rgba(255,255,255,.62)",
|
||
orange: "#f97316"
|
||
}
|
||
},
|
||
boxShadow: {
|
||
soft: "0 14px 40px rgba(0,0,0,.42)"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
:root { color-scheme: dark; }
|
||
.glass { backdrop-filter: blur(10px); }
|
||
.img-overlay::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 60%);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-sb-bg text-sb-text min-h-screen">
|
||
|
||
<!-- HEADER -->
|
||
<header class="sticky top-0 z-40 bg-black/60 glass border-b border-sb-border">
|
||
<div class="max-w-6xl mx-auto px-4 h-16 flex items-center gap-4">
|
||
<a href="#" class="flex items-center gap-3">
|
||
<div class="h-9 w-9 rounded-xl bg-sb-panel2 border border-sb-border flex items-center justify-center">
|
||
🔥
|
||
</div>
|
||
<span class="text-xl font-semibold">SkinBase</span>
|
||
</a>
|
||
<div class="flex-1"></div>
|
||
<a href="#" class="rounded-xl bg-sb-orange px-4 py-2 font-semibold text-black">Upload</a>
|
||
<div class="h-9 w-9 rounded-xl bg-sb-panel2 border border-sb-border flex items-center justify-center">👤</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- CATEGORY HERO -->
|
||
<section class="relative">
|
||
<div class="absolute inset-0">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?q=80&w=2400&auto=format&fit=crop"
|
||
class="w-full h-full object-cover opacity-40"
|
||
alt=""
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-b from-black/40 via-black/70 to-sb-bg"></div>
|
||
</div>
|
||
|
||
<div class="relative max-w-6xl mx-auto px-4 py-14">
|
||
<div class="max-w-2xl">
|
||
<span class="inline-block rounded-full bg-sb-panel2 border border-sb-border px-4 py-1 text-sm text-sb-muted">
|
||
Category
|
||
</span>
|
||
|
||
<h1 class="mt-4 text-3xl md:text-4xl font-semibold">Photography</h1>
|
||
|
||
<p class="mt-3 text-sb-muted">
|
||
High-quality photography from the SkinBase community — landscapes,
|
||
portraits, abstract shots and more.
|
||
</p>
|
||
|
||
<div class="mt-6 flex flex-wrap gap-4 text-sm">
|
||
<span class="rounded-full bg-sb-panel2 border border-sb-border px-4 py-2">🖼 12,421 artworks</span>
|
||
<span class="rounded-full bg-sb-panel2 border border-sb-border px-4 py-2">👥 3,921 authors</span>
|
||
<span class="rounded-full bg-sb-panel2 border border-sb-border px-4 py-2">⬇ 9.2M downloads</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FILTER BAR -->
|
||
<section class="sticky top-16 z-30 bg-sb-bg/80 glass border-b border-sb-border">
|
||
<div class="max-w-6xl mx-auto px-4 py-3 flex flex-wrap items-center gap-3">
|
||
|
||
<!-- Sort -->
|
||
<select class="rounded-xl bg-sb-panel2 border border-sb-border px-4 py-2 text-sm">
|
||
<option>Newest</option>
|
||
<option>Trending</option>
|
||
<option>Most Downloaded</option>
|
||
<option>Most Liked</option>
|
||
</select>
|
||
|
||
<!-- Time -->
|
||
<select class="rounded-xl bg-sb-panel2 border border-sb-border px-4 py-2 text-sm">
|
||
<option>All time</option>
|
||
<option>This week</option>
|
||
<option>This month</option>
|
||
<option>This year</option>
|
||
</select>
|
||
|
||
<!-- Resolution -->
|
||
<select class="rounded-xl bg-sb-panel2 border border-sb-border px-4 py-2 text-sm">
|
||
<option>Any resolution</option>
|
||
<option>HD</option>
|
||
<option>4K</option>
|
||
<option>8K</option>
|
||
</select>
|
||
|
||
<!-- Toggle -->
|
||
<div class="ml-auto flex gap-2">
|
||
<button class="rounded-xl bg-sb-panel2 border border-sb-border px-3 py-2">☷</button>
|
||
<button class="rounded-xl bg-sb-panel2 border border-sb-border px-3 py-2">☰</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- GRID -->
|
||
<main class="max-w-6xl mx-auto px-4 py-10">
|
||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||
|
||
<!-- CARD -->
|
||
<a href="artwork.html" class="group rounded-2xl overflow-hidden bg-sb-panel2 border border-sb-border shadow-soft">
|
||
<div class="relative aspect-[4/3] img-overlay">
|
||
<img class="h-full w-full object-cover"
|
||
src="https://images.unsplash.com/photo-1482192505345-5655af888cc4?q=80&w=1200&auto=format&fit=crop">
|
||
<span class="absolute left-3 top-3 rounded-md bg-black/40 border border-white/10 px-2 py-1 text-[11px] text-white">
|
||
Landscape
|
||
</span>
|
||
</div>
|
||
<div class="p-3">
|
||
<div class="flex items-start justify-between gap-3">
|
||
<div>
|
||
<div class="font-semibold text-sm group-hover:text-white">Snowy Sunrise</div>
|
||
<div class="mt-1 text-xs text-sb-muted inline-flex items-center gap-2">
|
||
<span class="h-5 w-5 rounded-full bg-white/10 border border-white/10 flex items-center justify-center">👤</span>
|
||
Jimbo2929
|
||
</div>
|
||
</div>
|
||
<div class="text-xs text-sb-muted text-right">
|
||
<div>❤️ 156</div>
|
||
<div class="mt-1">⬇ 895</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- DUPLICATE CARDS -->
|
||
<a href="#" class="rounded-2xl overflow-hidden bg-sb-panel2 border border-sb-border shadow-soft">
|
||
<div class="relative aspect-[4/3] img-overlay">
|
||
<img class="h-full w-full object-cover"
|
||
src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?q=80&w=1200&auto=format&fit=crop">
|
||
</div>
|
||
<div class="p-3">
|
||
<div class="font-semibold text-sm">Black Hawk Bridge</div>
|
||
<div class="mt-1 text-xs text-sb-muted">by Mitsubishiman</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="#" class="rounded-2xl overflow-hidden bg-sb-panel2 border border-sb-border shadow-soft">
|
||
<div class="relative aspect-[4/3] img-overlay">
|
||
<img class="h-full w-full object-cover"
|
||
src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=1200&auto=format&fit=crop">
|
||
</div>
|
||
<div class="p-3">
|
||
<div class="font-semibold text-sm">Silence</div>
|
||
<div class="mt-1 text-xs text-sb-muted">by Konect Knight</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="#" class="rounded-2xl overflow-hidden bg-sb-panel2 border border-sb-border shadow-soft">
|
||
<div class="relative aspect-[4/3] img-overlay">
|
||
<img class="h-full w-full object-cover"
|
||
src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1200&auto=format&fit=crop">
|
||
</div>
|
||
<div class="p-3">
|
||
<div class="font-semibold text-sm">Sunset</div>
|
||
<div class="mt-1 text-xs text-sb-muted">by Udlirant</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
<!-- PAGINATION -->
|
||
<div class="mt-12 flex justify-center gap-2">
|
||
<a class="rounded-xl bg-sb-panel2 border border-sb-border px-4 py-2">‹ Prev</a>
|
||
<a class="rounded-xl bg-sb-orange px-4 py-2 font-semibold text-black">1</a>
|
||
<a class="rounded-xl bg-sb-panel2 border border-sb-border px-4 py-2">2</a>
|
||
<a class="rounded-xl bg-sb-panel2 border border-sb-border px-4 py-2">3</a>
|
||
<a class="rounded-xl bg-sb-panel2 border border-sb-border px-4 py-2">Next ›</a>
|
||
</div>
|
||
</main>
|
||
|
||
</body>
|
||
</html>
|