예술적 사진 미디어 구성 요소
사진 포트폴리오를 위한 복잡하고 반응이 빠른 미디어 구성 요소로, 수채화/예술적 디자인 스타일과 레트로/빈티지 색상 팔레트를 특징으로 합니다. 여러 대화형 요소와 완전한 다크 모드 지원이 포함됩니다.
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>관련 구성 요소
Glassmorphic 미디어 컴포넌트
Tailwind CSS로 제작된 glassmorphism 디자인(젖빛 유리 효과)이 있는 반응형 미디어 카드 구성 요소입니다. 호버로 표시되는 재생 아이콘이 있는 이미지 자리 표시자(picsum.photos), 텍스트 콘텐츠, 아바타가 있는 작성자 섹션(randomuser.me 에서) 및 작업 버튼이 있습니다. 이 구성 요소는 Tailwind CSS 'dark:' 변형을 사용하여 다크 모드를 지원하며 다양한 화면 크기에 반응합니다. JavaScript가 필요하지 않습니다. 최적의 시각 효과를 얻으려면 이 구성 요소를 대비되는 배경에 배치하십시오. 다크 모드 기능은 적절한 Tailwind CSS 구성(예: tailwind.config.js의 'darkMode: "class"')을 가정합니다.
머티리얼 디자인 블로그 카드
이미지, 제목, 발췌문 및 작성자 정보가 포함된 반응형 블로그 게시물 카드 구성 요소로, 따뜻한 일몰 톤의 머티리얼 디자인 스타일로 디자인되었습니다. 다크 모드 지원이 포함됩니다.