Retro_Jewel_Tone_Entertainment_Layout
엔터테인먼트 플랫폼을 위한 적당히 복잡한 레트로/빈티지에서 영감을 받은 레이아웃 구성 요소로, 풍부한 보석 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다.
HTML 코드
<div class="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 text-purple-200 dark:bg-gradient-to-br dark:from-gray-900 dark:via-black dark:to-gray-900 dark:text-gray-200 font-sans">
<!-- Header -->
<header class="bg-purple-950/70 backdrop-blur-sm shadow-lg py-4 px-6 md:px-10 dark:bg-black/70 flex justify-between items-center z-10 relative">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/60/60?random=1" alt="Logo" class="h-10 w-10 md:h-12 md:w-12 rounded-full border-2 border-emerald-500 shadow-md retro-glow-md">
<h1 class="text-3xl md:text-4xl font-bold tracking-wider text-emerald-400 drop-shadow-lg font-mono-retro">VCR-Vision</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
Home
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
Movies
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
TV Shows
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
Genres
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
</a>
</nav>
<div class="flex items-center space-x-4">
<button class="md:hidden text-emerald-300 hover:text-emerald-100">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="h-10 w-10 md:h-12 md:w-12 rounded-full border-2 border-sapphire-400 shadow-md retro-glow-sm">
</div>
</header>
<!-- Main Content Area -->
<main class="container mx-auto px-4 py-8 md:py-12 relative z-0">
<!-- Hero Section -->
<section class="mb-12 relative rounded-lg overflow-hidden shadow-2xl border-4 border-sapphire-500 backdrop-blur-lg animated-shadow-border">
<img src="https://picsum.photos/1200/600?random=2" alt="Featured Content" class="w-full h-64 md:h-96 object-cover object-top filter dark:brightness-75">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90">
<div class="absolute bottom-0 left-0 p-6 md:p-10">
<h2 class="text-4xl md:text-6xl font-bold mb-2 text-ruby-400 drop-shadow-lg font-mono-retro tracking-wide">The Pixel Odyssey</h2>
<p class="text-xl md:text-2xl text-emerald-200 mb-4 max-w-2xl font-body-retro leading-snug tracking-wide">Explore a groundbreaking journey through digital realms. A visual spectacle unlike any other, rated PG-13.</p>
<div class="flex space-x-4">
<button class="bg-ruby-600 hover:bg-ruby-700 text-white font-bold py-3 px-6 rounded-lg text-lg transform hover:scale-105 transition duration-300 shadow-lg border-2 border-ruby-400 retro-button-glow">
Play Now
</button>
<button class="bg-transparent border-2 border-emerald-500 text-emerald-300 hover:bg-emerald-500 hover:text-white font-bold py-3 px-6 rounded-lg text-lg transform hover:scale-105 transition duration-300 shadow-lg retro-button-glow">
More Info
</button>
</div>
</div>
</div>
</section>
<!-- Content Carousel/Categories -->
<section class="mb-12">
<h3 class="text-3xl md:text-4xl font-bold mb-6 text-sapphire-400 font-mono-retro tracking-wider drop-shadow-md">Trending Now</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6">
<!-- Card 1 -->
<div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
<img src="https://picsum.photos/300/200?random=3" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
<div class="p-4">
<h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Galactic Glitch</h4>
<p class="text-sm text-purple-300">Sci-Fi Adventure</p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
<img src="https://picsum.photos/300/200?random=4" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
<div class="p-4">
<h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Neon Nights</h4>
<p class="text-sm text-purple-300">Cyberpunk Thriller</p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
<img src="https://picsum.photos/300/200?random=5" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
<div class="p-4">
<h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">VHS Voodoo</h4>
<p class="text-sm text-purple-300">Horror Mystery</p>
</div>
</div>
<!-- Card 4 -->
<div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
<img src="https://picsum.photos/300/200?random=6" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
<div class="p-4">
<h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Digital Dreamscapes</h4>
<p class="text-sm text-purple-300">Fantasy Epic</p>
</div>
</div>
<!-- Card 5 -->
<div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
<img src="https://picsum.photos/300/200?random=7" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
<div class="p-4">
<h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Arcade Apocalypse</h4>
<p class="text-sm text-purple-300">Action Comedy</p>
</div>
</div>
</div>
</section>
<!-- Interactive Block (e.g., ad or special offer) -->
<section class="mb-12 bg-emerald-800/60 p-8 rounded-lg shadow-xl border-4 border-emerald-500 text-center relative overflow-hidden animated-scanline">
<div class="absolute inset-0 bg-grid-pattern opacity-10 dark:opacity-5"></div>
<h3 class="text-3xl md:text-5xl font-extrabold text-ruby-300 mb-4 relative z-10 font-mono-retro drop-shadow-xl animated-text-flicker">EXCLUSIVE RETRO DEAL!</h3>
<p class="text-xl md:text-2xl text-emerald-200 mb-6 relative z-10 font-body-retro leading-tight">Get 3 months FREE on premium access with code:
<span class="block mt-2 text-ruby-400 text-4xl md:text-5xl font-bold bg-purple-900/50 inline-block px-4 py-2 rounded-lg border-2 border-ruby-500 box-shadow-code retro-button-glow">VCR-GEMS</span>
</p>
<button class="bg-ruby-700 hover:bg-ruby-800 text-white font-bold py-4 px-8 rounded-full text-xl transform hover:scale-105 transition duration-300 shadow-xl border-4 border-ruby-500 relative z-10 retro-button-glow">
Claim Offer Now!
</button>
</section>
<!-- More Content Categories -->
<section>
<h3 class="text-3xl md:text-4xl font-bold mb-6 text-sapphire-400 font-mono-retro tracking-wider drop-shadow-md">Staff Picks</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Featured Item 1 -->
<div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 md:flex items-center text-left retro-card-glow">
<img src="https://picsum.photos/400/250?random=8" alt="Staff Pick" class="w-full md:w-1/2 h-56 md:h-auto object-cover">
<div class="p-6 flex-1">
<h4 class="text-2xl font-bold text-emerald-300 mb-2 font-mono-retro">The Quantum Loop</h4>
<p class="text-base text-purple-300 mb-4 font-body-retro">A mind-bending sci-fi thriller about time paradoxes and alternate realities. Gripping from start to finish.</p>
<button class="bg-sapphire-600 hover:bg-sapphire-700 text-white font-bold py-2 px-5 rounded-md text-base retro-button-glow">
Watch Now
</button>
</div>
</div>
<!-- Featured Item 2 -->
<div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 md:flex items-center text-left retro-card-glow">
<img src="https://picsum.photos/400/250?random=9" alt="Staff Pick" class="w-full md:w-1/2 h-56 md:h-auto object-cover">
<div class="p-6 flex-1">
<h4 class="text-2xl font-bold text-emerald-300 mb-2 font-mono-retro">Synthwave City</h4>
<p class="text-base text-purple-300 mb-4 font-body-retro">Dive into the vibrant, dangerous streets of a neon-soaked metropolis. A must-see for all 80s enthusiasts.</p>
<button class="bg-sapphire-600 hover:bg-sapphire-700 text-white font-bold py-2 px-5 rounded-md text-base retro-button-glow">
Watch Now
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-purple-950/70 backdrop-blur-sm py-8 px-6 md:px-10 dark:bg-black/70 mt-12 shadow-inner border-t-2 border-purple-800 dark:border-gray-800">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center text-sm">
<div class="mb-4 md:mb-0 text-emerald-400 font-mono-retro drop-shadow-md">
© 2023 VCR-Vision. All rights reserved.
</div>
<nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 text-emerald-300 font-header-retro">
<a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Privacy Policy</a>
<a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Terms of Service</a>
<a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Contact Us</a>
<a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Sitemap</a>
</nav>
</div>
</footer>
<!-- Custom Styles (for fonts and animations) - typically in a <style> tag or CSS file -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
.font-mono-retro {
font-family: 'Press Start 2P', cursive;
}
.font-header-retro {
font-family: 'Press Start 2P', cursive;
font-size: 0.9em; /* Adjust to make it fit better */
}
.font-body-retro {
font-family: 'VT323', monospace;
}
/* Retro Glow Effect for Elements */
.retro-glow-md {
box-shadow: 0 0px 10px rgba(6, 182, 212, 0.7), /* Cyan */
0 0px 20px rgba(139, 92, 246, 0.5); /* Violet */
transition: all 0.3s ease-in-out;
}
.retro-glow-sm {
box-shadow: 0 0px 8px rgba(6, 182, 212, 0.5), /* Cyan */
0 0px 15px rgba(139, 92, 246, 0.3); /* Violet */
transition: all 0.3s ease-in-out;
}
.retro-button-glow:hover {
box-shadow: 0 0 15px rgba(251, 191, 36, 0.8), /* Amber */
0 0 25px rgba(239, 68, 68, 0.6); /* Red */
}
.retro-card-glow {
transition: all 0.3s ease-out;
}
.retro-card-glow:hover {
box-shadow: 0 0 15px rgba(16, 185, 129, 0.8), /* Green */
0 0 25px rgba(59, 130, 246, 0.6); /* Blue */
}
/* Animated Scanline Effect */
.animated-scanline {
position: relative;
overflow: hidden;
}
.animated-scanline::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.7), transparent);
animation: scanlineEffect 4s linear infinite;
opacity: 0.5;
}
@keyframes scanlineEffect {
0% { transform: translateY(0%); }
50% { transform: translateY(1000%); }
100% { transform: translateY(0%); opacity: 0; }
}
/* Animated Shadow Border for Hero */
.animated-shadow-border {
position: relative;
z-index: 0;
}
.animated-shadow-border::before {
content: '';
position: absolute;
inset: -5px; /* Adjust to size the glow */
border-radius: inherit; /* Match border-radius of parent */
background: linear-gradient(45deg, #10b981, #6366f1, #ef4444, #f59e0b, #3b82f6);
background-size: 400% 400%;
animation: glowBorder 10s ease infinite;
filter: blur(10px); /* Adjust blur for glow intensity */
z-index: -1;
opacity: 0.7;
}
@keyframes glowBorder {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Grid pattern for the interactive block */
.bg-grid-pattern {
background-image: linear-gradient(to right, rgba(0,255,255,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,255,255,0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
/* Text flicker effect */
.animated-text-flicker {
animation: textFlicker 3s infinite alternate;
}
@keyframes textFlicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor; }
20%, 24%, 55% { text-shadow: none; }
}
/* Box Shadow for Code */
.box-shadow-code {
box-shadow: 0 0 5px rgba(251, 191, 36, 0.7),
0 0 10px rgba(239, 68, 68, 0.5);
}
</style>
</div>관련 구성 요소
E-commerce 레이아웃 구성 요소
회색조 머티리얼 디자인 미학을 갖춘 단순하고 반응이 빠른 전자상거래 레이아웃 구성 요소로, 제품 그리드, 머리글 및 바닥글이 특징이며 모두 다크 모드를 지원합니다. 제품 이미지에 picsum.photos를 사용합니다.
Glassmorphism_Social_Media_Layout_Component
복잡하고 반응이 빠른 소셜 미디어 레이아웃 구성 요소로, 반투명 반투명 요소, 흐림 효과 및 보색 구성표가 있는 glassmorphism 디자인을 특징으로 합니다. 사이드바, 기본 콘텐츠 영역, 오른쪽 사이드바가 포함되어 있으며 모두 다크 모드를 지원합니다.
Dashboard Layout 구성 요소
Material Design 미학이 있는 반응형 대시보드 레이아웃에는 사이드바, 헤더 및 기본 콘텐츠 영역이 포함됩니다. 다크 모드를 지원하며 균형 잡힌 모습을 위해 보색을 사용합니다. 복잡성은 순전히 CSS 및 Tailwind 클래스로 달성되는 대화식과 같은 기능으로 보통입니다.