HTML 代码
<div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-800 dark:text-amber-100 p-4 sm:p-8 md:p-12 min-h-screen">
<!-- Retro/Vintage Header -->
<header class="mb-8 md:mb-12 text-center relative">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-stone-700 dark:text-amber-200 drop-shadow-lg relative z-10">
The Canvas of Light
</h1>
<p class="mt-2 text-lg sm:text-xl text-stone-600 dark:text-amber-300 relative z-10">
A Collection of Visual Poetry
</p>
<!-- Artistic brush stroke effect -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full max-w-lg bg-gradient-to-br from-amber-200 to-orange-200 dark:from-stone-700 dark:to-orange-900 opacity-60 dark:opacity-40 rounded-full blur-3xl"></div>
</header>
<!-- Main grid for photo gallery -->
<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-7xl mx-auto">
<!-- Featured Photo Card 1 -->
<div class="col-span-1 rounded-xl overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 border border-amber-200 dark:border-stone-700 backdrop-blur-sm">
<div class="relative pb-2/3 overflow-hidden group">
<img src="https://picsum.photos/id/1047/800/600" alt="Abstract watercolor mountain landscape" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Whispers of Dawn</h3>
</div>
</div>
<div class="p-4">
<p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Landscape • Fine Art</p>
<p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">A serene moment captured, blending the soft hues of dawn with the rugged peaks of nature.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-sm text-stone-500 dark:text-amber-400">Oct 23, 1978</span>
<button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
View Artwork
</button>
</div>
</div>
</div>
<!-- Featured Photo Card 2 -->
<div class="col-span-1 border border-amber-200 dark:border-stone-700 rounded-xl overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 backdrop-blur-sm">
<div class="relative pb-2/3 overflow-hidden group">
<img src="https://picsum.photos/id/1025/800/600" alt="Vintage portrait of a man, artistic filter" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Soulful Gaze</h3>
</div>
</div>
<div class="p-4">
<p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Portrait • Candid</p>
<p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">An intimate portrayal, capturing raw emotion and a timeless connection.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-sm text-stone-500 dark:text-amber-400">Sep 15, 1982</span>
<button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
View Artwork
</button>
</div>
</div>
</div>
<!-- Unique Artistic Section (Larger on Desktop for complexity) -->
<div class="lg:col-span-1 rounded-xl overflow-hidden shadow-xl bg-orange-200 dark:bg-stone-700 text-stone-800 dark:text-amber-100 p-6 md:p-8 flex flex-col justify-between border border-orange-300 dark:border-stone-600 relative overflow-hidden">
<h3 class="text-2xl sm:text-3xl font-bold text-stone-700 dark:text-amber-100 drop-shadow-md mb-4 z-10">Explore the Palette</h3>
<p class="text-base sm:text-lg mb-6 z-10">Dive into our curated collections, where every image tells a story, painted with light and shadow. Discover the depth of artistic expression.</p>
<!-- Interactive element: Artist Profile -->
<div class="flex items-center space-x-4 mb-6 z-10">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Artist's avatar" class="w-16 h-16 rounded-full border-4 border-orange-400 dark:border-stone-500 shadow-lg">
<div>
<p class="font-semibold text-lg">Eleanor Vance</p>
<p class="text-sm text-stone-700 dark:text-amber-200">Master of Light</p>
</div>
</div>
<button class="w-full py-3 rounded-full bg-orange-400 dark:bg-orange-800 text-stone-900 dark:text-amber-100 font-bold text-lg hover:bg-orange-500 dark:hover:bg-orange-900 transition-colors duration-200 shadow-md transform hover:scale-105 z-10">
Follow the Artist
</button>
<!-- Watercolor blob background -->
<div class="absolute -top-10 -left-10 w-48 h-48 bg-orange-300 dark:bg-stone-600 opacity-60 dark:opacity-40 rounded-full blur-3xl transform rotate-45"></div>
<div class="absolute -bottom-10 -right-10 w-48 h-48 bg-amber-300 dark:bg-stone-500 opacity-60 dark:opacity-40 rounded-full blur-3xl transform -rotate-15"></div>
</div>
<!-- General Photo Card 3 -->
<div class="col-span-1 rounded-xl border border-amber-200 dark:border-stone-700 overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 backdrop-blur-sm">
<div class="relative pb-2/3 overflow-hidden group">
<img src="https://picsum.photos/id/1069/800/600" alt="Vibrant street photography" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Urban Canvas</h3>
</div>
</div>
<div class="p-4">
<p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Street • Abstract</p>
<p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">The raw beauty of city life, captured in a candid and colorful brushstroke.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-sm text-stone-500 dark:text-amber-400">Apr 01, 1974</span>
<button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
View Artwork
</button>
</div>
</div>
</div>
<!-- General Photo Card 4 (Another example) -->
<div class="col-span-1 rounded-xl border border-amber-200 dark:border-stone-700 overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 backdrop-blur-sm">
<div class="relative pb-2/3 overflow-hidden group">
<img src="https://picsum.photos/id/1080/800/600" alt="Still life with artistic lighting" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Still Life Reverie</h3>
</div>
</div>
<div class="p-4">
<p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Still Life • Studio</p>
<p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">A thoughtful composition, exploring textures and light in a classic setup.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-sm text-stone-500 dark:text-amber-400">Dec 08, 1969</span>
<button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
View Artwork
</button>
</div>
</div>
</div>
<!-- Call to action/Filter section on smaller screens, joins grid on larger -->
<div class="col-span-1 rounded-xl border border-orange-300 dark:border-stone-600 overflow-hidden shadow-xl bg-orange-200 dark:bg-stone-700 text-stone-800 dark:text-amber-100 p-6 md:p-8 flex flex-col justify-center items-center text-center">
<h3 class="text-xl sm:text-2xl font-bold mb-4">Refine Your View</h3>
<p class="text-base text-stone-700 dark:text-amber-200 mb-6">Our extensive archives await your discovery. Filter by style, era, or artist.</p>
<button class="w-full max-w-xs py-3 rounded-full bg-orange-400 dark:bg-orange-800 text-stone-900 dark:text-amber-100 font-bold text-lg hover:bg-orange-500 dark:hover:bg-orange-900 transition-colors duration-200 shadow-md transform hover:scale-105">
Browse Collections
</button>
</div>
</section>
<!-- Footer with subtle artistic elements -->
<footer class="mt-12 md:mt-16 text-center text-stone-600 dark:text-amber-300 relative z-10">
<p class="text-sm">© 2023 Artistic Lens. All rights reserved.</p>
<!-- Subtle watercolor splash -->
<div class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-48 h-16 bg-amber-200 dark:bg-stone-700 opacity-60 dark:opacity-40 rounded-full blur-2xl transform -skew-x-12"></div>
</footer>
</div>