遊び心のあるジュエルトーンの写真コンテンツディスプレイ
写真ポートフォリオやギャラリー向けの複雑で遊び心があり、楽しいコンテンツ表示コンポーネントで、明るい宝石の色調、丸みを帯びた要素、ダークモードをサポートするレスポンシブデザインが特徴です。アイキャッチ画像、グリッドレイアウト、プロファイルセクションなど、複数のインタラクティブ要素を紹介しています。
HTMLコード
<div class="font-sans bg-amber-50 text-emerald-950 dark:bg-zinc-900 dark:text-emerald-100 p-4 sm:p-8 md:p-12 lg:p-16 rounded-3xl shadow-xl border border-amber-200 dark:border-zinc-800 transition-colors duration-300">
<!-- Header Section -->
<header class="flex flex-col md:flex-row items-center justify-between mb-12">
<div class="flex items-center space-x-4 mb-6 md:mb-0">
<img src="https://randomuser.me/api/portraits/men/88.jpg" alt="Photographer Avatar" class="w-20 h-20 rounded-full object-cover shadow-lg border-4 border-emerald-400 dark:border-emerald-600 animate-bounce-slow">
<div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-emerald-800 dark:text-emerald-300 drop-shadow-lg leading-tight">Lens Lullaby</h1>
<p class="text-xl sm:text-2xl text-emerald-700 dark:text-emerald-400 font-medium">Capturing Joy, One Pixel at a Time</p>
</div>
</div>
<nav class="flex flex-wrap justify-center gap-4 sm:gap-6">
<a href="#gallery" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">Gallery</a>
<a href="#about" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">About</a>
<a href="#contact" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">Contact</a>
</nav>
</header>
<!-- Featured Photo Section -->
<section class="mb-16 bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-800 dark:to-teal-900 rounded-3xl p-6 sm:p-8 shadow-2xl animate-pop-in border border-emerald-300 dark:border-teal-700">
<h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Featured Snapshots</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
<div class="relative col-span-1 md:col-span-2 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
<img src="https://picsum.photos/id/1050/800/600" alt="Featured Photo 1" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
<div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
<p class="text-white font-semibold text-lg drop-shadow-lg">Mountain Majesty</p>
</div>
</div>
<div class="relative col-span-1 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
<img src="https://picsum.photos/id/1018/800/600" alt="Featured Photo 2" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
<div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
<p class="text-white font-semibold text-lg drop-shadow-lg">Forest Whispers</p>
</div>
</div>
<div class="relative col-span-1 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
<img src="https://picsum.photos/id/1003/800/600" alt="Featured Photo 3" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
<div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
<p class="text-white font-semibold text-lg drop-shadow-lg">Ocean's Embrace</p>
</div>
</div>
</div>
</section>
<!-- Photo Gallery Grid -->
<section id="gallery" class="mb-16">
<h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Our Charming Gallery</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Photo Card 1 -->
<div class="bg-rose-100 dark:bg-rose-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-rose-300 dark:border-rose-700 cursor-pointer">
<img src="https://picsum.photos/id/1025/400/300" alt="Gallery Image 1" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
<h3 class="font-semibold text-xl text-rose-800 dark:text-rose-200 mb-2">Playful Pup</h3>
<p class="text-sm text-rose-700 dark:text-rose-300">A furry friend enjoying the sunshine.</p>
</div>
<!-- Photo Card 2 -->
<div class="bg-violet-100 dark:bg-violet-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-violet-300 dark:border-violet-700 cursor-pointer">
<img src="https://picsum.photos/id/1069/400/300" alt="Gallery Image 2" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
<h3 class="font-semibold text-xl text-violet-800 dark:text-violet-200 mb-2">Urban Glow</h3>
<p class="text-sm text-violet-700 dark:text-violet-300">City lights at twilight, a symphony of colors.</p>
</div>
<!-- Photo Card 3 -->
<div class="bg-emerald-100 dark:bg-emerald-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-emerald-300 dark:border-emerald-700 cursor-pointer">
<img src="https://picsum.photos/id/111/400/300" alt="Gallery Image 3" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
<h3 class="font-semibold text-xl text-emerald-800 dark:text-emerald-200 mb-2">Nature's Embrace</h3>
<p class="text-sm text-emerald-700 dark:text-emerald-300">Lush green forest, a peaceful escape.</p>
</div>
<!-- Photo Card 4 -->
<div class="bg-sky-100 dark:bg-sky-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-sky-300 dark:border-sky-700 cursor-pointer">
<img src="https://picsum.photos/id/1084/400/300" alt="Gallery Image 4" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
<h3 class="font-semibold text-xl text-sky-800 dark:text-sky-200 mb-2">Desert Harmony</h3>
<p class="text-sm text-sky-700 dark:text-sky-300">Sand dunes and skies, a timeless landscape.</p>
</div>
<!-- Photo Card 5 -->
<div class="bg-rose-100 dark:bg-rose-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-rose-300 dark:border-rose-700 cursor-pointer">
<img src="https://picsum.photos/id/1043/400/300" alt="Gallery Image 5" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
<h3 class="font-semibold text-xl text-rose-800 dark:text-rose-200 mb-2">Bright Bloom</h3>
<p class="text-sm text-rose-700 dark:text-rose-300">Vibrant flowers in full splendid bloom.</p>
</div>
<!-- Photo Card 6 -->
<div class="bg-violet-100 dark:bg-violet-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-violet-300 dark:border-violet-700 cursor-pointer">
<img src="https://picsum.photos/id/1048/400/300" alt="Gallery Image 6" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
<h3 class="font-semibold text-xl text-violet-800 dark:text-violet-200 mb-2">Cozy Corner</h3>
<p class="text-sm text-violet-700 dark:text-violet-300">A warm, inviting space for quiet moments.</p>
</div>
<!-- Photo Card 7 -->
<div class="bg-emerald-100 dark:bg-emerald-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-emerald-300 dark:border-emerald-700 cursor-pointer">
<img src="https://picsum.photos/id/1039/400/300" alt="Gallery Image 7" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
<h3 class="font-semibold text-xl text-emerald-800 dark:text-emerald-200 mb-2">Leafy Green</h3>
<p class="text-sm text-emerald-700 dark:text-emerald-300">Patterns of nature in close-up.</p>
</div>
<!-- Photo Card 8 -->
<div class="bg-sky-100 dark:bg-sky-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-sky-300 dark:border-sky-700 cursor-pointer">
<img src="https://picsum.photos/id/1000/400/300" alt="Gallery Image 8" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
<h3 class="font-semibold text-xl text-sky-800 dark:text-sky-200 mb-2">Rustic Charm</h3>
<p class="text-sm text-sky-700 dark:text-sky-300">Old world beauty, captured in time.</p>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="mb-16 bg-gradient-to-bl from-emerald-100 to-sky-100 dark:from-emerald-800 dark:to-sky-900 rounded-3xl p-6 sm:p-8 shadow-2xl animate-fade-in border border-emerald-300 dark:border-sky-700">
<h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Meet the Visionary</h2>
<div class="flex flex-col md:flex-row items-center md:items-start gap-8">
<img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Photographer Profile" class="w-48 h-48 rounded-full object-cover shadow-2xl border-6 border-emerald-500 dark:border-emerald-700 flex-shrink-0 animate-spin-slow-reverse">
<div class="text-center md:text-left">
<h3 class="text-3xl font-semibold text-emerald-700 dark:text-emerald-400 mb-4">Anya Pixelbloom</h3>
<p class="text-lg leading-relaxed text-emerald-900 dark:text-emerald-200 mb-4">
Hello! I'm Anya, a passionate photographer with an eye for the whimsical and joy-filled moments of life.
My journey began with a simple point-and-shoot camera and a dream to capture the hidden magic in everyday scenes.
From the grand landscapes to the tiniest details, I believe every shot tells a unique story.
</p>
<p class="text-lg leading-relaxed text-emerald-900 dark:text-emerald-200">
My style is a blend of vibrant colors, playful compositions, and a touch of fantasy. I love connecting with my subjects,
whether they're people, pets, or places, and bringing out their true essence. Let's create some wonderful memories together!
</p>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="mb-16">
<h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Hear the Happy Snaps!</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-amber-100 dark:bg-amber-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-amber-300 dark:border-amber-700 animate-slide-up">
<p class="text-lg italic text-amber-800 dark:text-amber-200 mb-4">"Anya's photos radiated pure joy! She captured our family's laughter and love in such a vibrant, authentic way. Every picture is a treasure!"</p>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-amber-400">
<div>
<p class="font-semibold text-amber-900 dark:text-amber-100">Clara & Family</p>
<p class="text-sm text-amber-700 dark:text-amber-300">Happy Clients</p>
</div>
</div>
</div>
<div class="bg-teal-100 dark:bg-teal-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-teal-300 dark:border-teal-700 animate-slide-up animation-delay-200">
<p class="text-lg italic text-teal-800 dark:text-teal-200 mb-4">"The colors and composition in her landscape shots are breathtaking. Anya truly brings out the magic in every scene. Highly recommend!"</p>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-teal-400">
<div>
<p class="font-semibold text-teal-900 dark:text-teal-100">Leo Explorer</p>
<p class="text-sm text-teal-700 dark:text-teal-300">Adventure Enthusiast</p>
</div>
</div>
</div>
<div class="bg-rose-100 dark:bg-rose-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-rose-300 dark:border-rose-700 animate-slide-up animation-delay-400">
<p class="text-lg italic text-rose-800 dark:text-rose-200 mb-4">"Professional, fun, and incredibly talented! Anya made our pet photoshoot an absolute blast, and the results were more charming than we imagined."</p>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/55.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-rose-400">
<div>
<p class="font-semibold text-rose-900 dark:text-rose-100">Zara & Whiskers</p>
<p class="text-sm text-rose-700 dark:text-rose-300">Pet Parents</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action / Contact -->
<section id="contact" class="bg-gradient-to-tr from-emerald-200 to-violet-200 dark:from-emerald-700 dark:to-violet-800 rounded-3xl p-8 sm:p-10 text-center shadow-2xl animate-pulse-light border border-emerald-400 dark:border-violet-700">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-emerald-900 dark:text-emerald-100 mb-6 drop-shadow">Ready to Capture Your Story?</h2>
<p class="text-xl sm:text-2xl text-emerald-800 dark:text-emerald-200 mb-8 max-w-3xl mx-auto">Let's create some magical moments together! Reach out and tell me about your vision.</p>
<a href="mailto:[email protected]" class="inline-block bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-400 dark:hover:bg-emerald-300 text-white dark:text-emerald-900 text-xl sm:text-2xl font-bold px-10 py-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out border-2 border-emerald-600 dark:border-emerald-400 animate-button-pop">
Let's Chat!
</a>
</section>
<!-- Custom Keyframe Animations (for demonstration purposes, would be in CSS) -->
<style>
@keyframes bounce-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-bounce-slow {
animation: bounce-slow 4s infinite ease-in-out;
}
@keyframes pop-in {
0% { opacity: 0; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
.animate-pop-in {
animation: pop-in 0.8s ease-out forwards;
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animate-fade-in {
animation: fade-in 1s ease-out forwards;
}
@keyframes spin-slow-reverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.animate-spin-slow-reverse {
animation: spin-slow-reverse 60s linear infinite;
}
@keyframes slide-up {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
animation: slide-up 0.6s ease-out forwards;
}
/* Delay variants */
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
@keyframes pulse-light {
0%, 100% { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
50% { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 20px -5px rgba(0, 0, 0, 0.25); }
}
.dark .animate-pulse-light {
animation: pulse-light 3s ease-in-out infinite;
}
@keyframes button-pop {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
.animate-button-pop {
animation: button-pop 2s infinite ease-in-out;
}
</style>
</div>関連コンポーネント
コンテンツ表示コンポーネント
パステルカラーのスキューモーフィックスタイルでデザインされたレスポンシブソーシャルメディアコンテンツ表示コンポーネントで、複数のインタラクティブ要素とダークモードのサポートを備えています。
Memphis_Content_Display_Component
エンターテインメント/メディアプラットフォーム向けの複雑でレスポンシブなコンテンツ表示コンポーネントで、黒と白の配色と明るいアクセントカラー(フクシア)のメンフィスデザインスタイルが特徴です。ダークモードのサポートとプレースホルダー画像が含まれています。