Brutalist_Retro_Media_Embed_E-commercio
Un componente multimediale embed complesso, reattivo e in stile brutalista per l'e-commerce, caratterizzato da contrasto elevato, una tavolozza di colori retrò, supporto per la modalità oscura e molteplici elementi interattivi per le vetrine dei prodotti.
Codice HTML
<div class="font-sans bg-[#F0E6D2] text-[#333333] dark:bg-[#1E272C] dark:text-[#E0E0E0] p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">
<div class="max-w-7xl mx-auto border-4 border-[#8B0000] dark:border-[#FFD700] bg-[#EAE0C8] dark:bg-[#2C3E50] shadow-[10px_10px_0px_0px_#8B0000] dark:shadow-[10px_10px_0px_0px_#FFD700] relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full border-t-4 border-l-4 border-b-4 border-r-4 border-[#8B0000] dark:border-[#FFD700] pointer-events-none z-10"></div>
<!-- Header Bar -->
<div class="bg-[#8B0000] dark:bg-[#FFD700] text-[#F0E6D2] dark:text-[#1E272C] p-3 border-b-4 border-[#333333] dark:border-[#FFD700] relative z-20">
<div class="flex items-center justify-between">
<h2 class="text-xl sm:text-2xl font-bold uppercase tracking-wider">// PRODUCT SHOWCASE : ITEM #1337</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">X</button>
<button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">_</button>
<button class="px-3 py-1 bg-[#333333] text-[#F0E6D2] text-sm font-bold uppercase border-2 border-[#F0E6D2] hover:bg-[#555555] dark:bg-[#1E272C] dark:text-[#FFD700] dark:border-[#FFD700] dark:hover:bg-[#334455]">[]</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-0 relative z-0">
<!-- Main Media Area (left/top) -->
<div class="md:col-span-2 lg:col-span-3 border-r-4 border-b-4 md:border-b-0 border-[#8B0000] dark:border-[#FFD700] p-4 md:p-6 lg:p-8 flex items-center justify-center bg-[#D2B48C] dark:bg-[#34495E]">
<div class="w-full aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-4 border-[#333333] dark:border-[#FFD700] shadow-[5px_5px_0px_0px_#333333] dark:shadow-[5px_5px_0px_0px_#FFD700]">
<!-- Placeholder for Video/Main Image -->
<img src="https://picsum.photos/1000/562?random=1" alt="Main Product Media" class="w-full h-full object-cover grayscale opacity-90 hover:grayscale-0 hover:opacity-100 transition-all duration-300">
</div>
</div>
<!-- Product Info / Controls (right/bottom) -->
<div class="md:col-span-1 lg:col-span-1 p-4 md:p-6 lg:p-8 bg-[#ECC9A3] dark:bg-[#4A636F] flex flex-col justify-between border-b-4 md:border-b-0 md:border-l-4 md:border-t-0 border-[#8B0000] dark:border-[#FFD700]">
<div>
<h3 class="text-2xl sm:text-3xl font-bold uppercase mb-2 text-[#8B0000] dark:text-[#FFD700]">Vintage Gizmo XL</h3>
<p class="text-base sm:text-lg mb-4 leading-tight text-[#333333] dark:text-[#E0E0E0]">A retro-futuristic device for analog data manipulation. Extremely rare. Acts like a charm, looks like a beast.</p>
<div class="flex items-baseline mb-4">
<p class="text-4xl font-extrabold text-[#A0522D] dark:text-[#FF9900] mr-2">$499.<span class="text-3xl">99</span></p>
<p class="text-2xl line-through text-[#666666] dark:text-[#999999]">$699.<span class="text-xl">99</span></p>
</div>
<div class="mb-4 border-b-2 border-[#8B0000] dark:border-[#FFD700] pb-4">
<h4 class="text-lg font-bold uppercase mb-2 text-[#8B0000] dark:text-[#FFD700]">// STATUS</h4>
<div class="flex justify-around text-center">
<div class="flex-1">
<p class="text-xl font-bold text-[#333333] dark:text-[#E0E0E0]">IN STOCK</p>
<p class="text-sm text-[#666666] dark:text-[#999999]">Qty: <span class="font-bold">1</span></p>
</div>
<div class="flex-1">
<p class="text-xl font-bold text-[#E0B200] dark:text-[#99E000]">LIMITED</p>
<p class="text-sm text-[#666666] dark:text-[#999999]">Edition</p>
</div>
</div>
</div>
</div>
<div class="space-y-4">
<button class="w-full py-4 bg-[#8B0000] dark:bg-[#FFD700] text-[#F0E6D2] dark:text-[#1E272C] text-xl font-extrabold uppercase border-4 border-[#333333] dark:border-[#1E272C] shadow-[5px_5px_0px_0px_#333333] dark:shadow-[5px_5px_0px_0px_#1E272C] hover:shadow-[2px_2px_0px_0px_#333333] dark:hover:shadow-[2px_2px_0px_0px_#1E272C] hover:translate-x-2 hover:translate-y-2 transition-all duration-150">
ADD TO CART
</button>
<button class="w-full py-3 bg-[#A0522D] dark:bg-[#2C3E50] text-[#F0E6D2] dark:text-[#FFD700] text-lg font-bold uppercase border-2 border-[#333333] dark:border-[#FFD700] hover:bg-[#B0633C] dark:hover:bg-[#3A5060]">
MORE DETAILS
</button>
</div>
</div>
<!-- Thumbnail Gallery -->
<div class="col-span-1 md:col-span-3 lg:col-span-4 p-4 md:p-6 lg:p-8 border-t-4 border-[#8B0000] dark:border-[#FFD700] bg-[#D2B48C] dark:bg-[#34495E]">
<h4 class="text-lg font-bold uppercase mb-4 text-[#8B0000] dark:text-[#FFD700]">// RELATED VISUALS</h4>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
<img src="https://picsum.photos/300/200?random=2" alt="Thumbnail 1" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
<img src="https://picsum.photos/300/200?random=3" alt="Thumbnail 2" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
<img src="https://picsum.photos/300/200?random=4" alt="Thumbnail 3" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
<img src="https://picsum.photos/300/200?random=5" alt="Thumbnail 4" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden sm:block">
<img src="https://picsum.photos/300/200?random=6" alt="Thumbnail 5" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden lg:block">
<img src="https://picsum.photos/300/200?random=7" alt="Thumbnail 6" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden xl:block">
<img src="https://picsum.photos/300/200?random=8" alt="Thumbnail 7" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
<div class="aspect-video bg-[#A0522D] dark:bg-[#2C3E50] overflow-hidden border-2 border-[#333333] dark:border-[#FFD700] cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700] hidden xl:block">
<img src="https://picsum.photos/300/200?random=9" alt="Thumbnail 8" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-filter duration-300">
</div>
</div>
</div>
<!-- Customer Reviews / Related Products (Bottom Strip) -->
<div class="col-span-1 md:col-span-3 lg:col-span-4 p-4 md:p-6 lg:p-8 border-t-4 border-[#8B0000] dark:border-[#FFD700] bg-[#ECC9A3] dark:bg-[#4A636F]">
<h4 class="text-lg font-bold uppercase mb-4 text-[#8B0000] dark:text-[#FFD700]">// CUSTOMER OVERVIEW</h4>
<div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-8">
<div class="flex-shrink-0">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Customer Avatar" class="w-24 h-24 rounded-full border-4 border-[#333333] dark:border-[#FFD700] shadow-[3px_3px_0px_0px_#333333] dark:shadow-[3px_3px_0px_0px_#FFD700]">
</div>
<div class="flex-grow text-center sm:text-left">
<p class="text-xl font-bold text-[#A0522D] dark:text-[#FF9900] mb-2">"Absolutely RAW Power!"</p>
<p class="text-base text-[#333333] dark:text-[#E0E0E0] mb-2">This Gizmo XL exceeded all my expectations. The brutalist design is a refreshing change, and its functionality is unmatched. Highly recommend for any serious collector.</p>
<p class="text-sm text-[#666666] dark:text-[#999999]">- <span class="font-bold">J. DOE</span>, Verified Purchaser</p>
</div>
</div>
<div class="mt-6 text-center">
<button class="px-6 py-2 bg-[#333333] text-[#F0E6D2] dark:bg-[#1E272C] dark:text-[#FFD700] text-sm font-bold uppercase border-2 border-[#F0E6D2] dark:border-[#FFD700] hover:bg-[#555555] dark:hover:bg-[#334455] shadow-[3px_3px_0px_0px_#8B0000] dark:shadow-[3px_3px_0px_0px_#FFD700]">
READ ALL REVIEWS
</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente di incorporamento multimediale
Un componente Media Embed reattivo progettato con lo stile Glassmorphism, con elementi interattivi per il consumo di contenuti.
Componente di incorporamento del supporto neumorfico
Un componente multimediale complesso e neumorfico con colori vivaci, progettato per CRM/Business Tools, che mostra un lettore video, contenuti correlati e controlli interattivi con reattività completa e supporto della modalità oscura.
Componente di incorporamento multimediale - Marketplace
Un componente di incorporamento multimediale complesso e reattivo progettato per un marketplace, caratterizzato da un'estetica Material Design con una tavolozza di colori retrò/vintage e supporto per la modalità scura.