Retro_Jewel_Tone_Entertainment_Layout
A moderate complexity retro/vintage inspired layout component for entertainment platforms, featuring rich jewel tones and full responsiveness with dark mode support.
HTML Code
<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>Related Components
Blog Layout with Gradient Sidebar
A responsive blog layout component with a main content area and a gradient sidebar, featuring subtle muted colors, smooth transitions, and full dark mode support. Designed for content consumption on various screen sizes.
RetroBusinessLayout
A retro/vintage-themed layout component for business websites, featuring a grayscale color scheme and simple design. It is responsive and includes dark mode support.
Glassmorphism E-commerce Feature Layout Component
Glassmorphism E-commerce Feature Layout Component