Retro_Jewel_Tone_Entertainment_Layout
Un composant de mise en page d’inspiration rétro/vintage de complexité modérée pour les plates-formes de divertissement, avec des tons de bijoux riches et une réactivité totale avec la prise en charge du mode sombre.
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>Composants associés
Composant de mise en page 3D
Un composant de mise en page de conception 3D réactif avec des visuels attrayants, incorporant de la profondeur à travers les ombres et les couches. Il inclut la prise en charge du mode sombre et propose des images et des avatars aléatoires.
Glassmorphism Disposition du tableau de bord
Une disposition simple pour un tableau de bord avec des éléments translucides ressemblant à du verre givré, avec une palette de couleurs pastel et une prise en charge du mode sombre.
Mise en page rétro des médias sociaux
Une mise en page simple et monochrome à thème rétro pour les réseaux sociaux, avec prise en charge du mode sombre.