Brutalist_RealEstate_Product_Gallery
Il s’agit d’un composant complexe de galerie de produits de style brutaliste pour les annonces immobilières, avec des tons de bijoux, des couleurs saturées riches, un contraste élevé et la prise en charge du mode sombre. Conçu pour afficher les détails de la propriété avec plusieurs éléments interactifs.
HTML Code
<div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 antialiased">
<!-- Section Header -->
<div class="mb-8 md:mb-12 border-b-4 border-l-4 border-emerald-700 dark:border-red-700 p-4 bg-emerald-100 dark:bg-stone-800">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold uppercase tracking-tight text-emerald-900 dark:text-red-600 mb-2 leading-none">
Hot Property Listings
</h1>
<p class="text-lg sm:text-xl md:text-2xl font-semibold text-emerald-800 dark:text-red-400">
Explore our brutalist collection of available properties.
</p>
</div>
<!-- Product Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">
<!-- Property Card 1 -->
<div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-red-700 dark:border-emerald-700 shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] dark:shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)]">
<div class="absolute top-0 left-0 bg-red-700 dark:bg-emerald-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider -translate-x-2 -translate-y-2 rotate-3 hover:rotate-0 transition-transform">FEATURED</div>
<img src="https://picsum.photos/id/1018/600/400" alt="Modern Apartment Building" class="w-full h-64 object-cover border-b-4 border-red-700 dark:border-emerald-700">
<div class="p-6">
<h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-emerald-900 dark:text-emerald-500 mb-2 border-b-2 border-red-500 pb-2">Urban Loft Residence</h2>
<p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">A striking, industrial-inspired loft in the heart of downtown. Concrete finishes and exposed ductwork provide a raw, authentic living experience.</p>
<div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
<div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">☑</span> 3 Beds</div>
<div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">☑</span> 2 Baths</div>
<div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">☑</span> 1,800 sqft</div>
<div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">☑</span> Built 1978</div>
</div>
<div class="flex items-baseline justify-between mb-6 border-t-2 border-red-500 pt-4">
<span class="text-4xl sm:text-5xl font-extrabold text-red-700 dark:text-red-400">$850K</span>
<span class="text-xl font-bold text-emerald-700 dark:text-emerald-400">Negotiable</span>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 bg-emerald-700 dark:bg-ruby-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-emerald-900 dark:hover:bg-ruby-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
View Details
</button>
<button class="flex-none bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
Call Agent
</button>
</div>
<div class="mt-6 pt-4 border-t-2 border-emerald-500 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-red-700 dark:border-slate-300 mr-3">
<div>
<p class="text-sm font-semibold text-emerald-800 dark:text-emerald-300">Agent: John Smith</p>
<p class="text-xs text-stone-600 dark:text-stone-400">Available 24/7</p>
</div>
</div>
<a href="#" class="text-sm font-bold text-emerald-700 dark:text-emerald-400 hover:underline border-b-2 border-transparent hover:border-emerald-700 dark:hover:border-emerald-400 transition-colors">Message</a>
</div>
</div>
</div>
<!-- Property Card 2 -->
<div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-emerald-700 dark:border-red-700 shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] dark:shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)]">
<div class="absolute top-0 right-0 bg-emerald-700 dark:bg-red-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider translate-x-2 -translate-y-2 -rotate-3 hover:rotate-0 transition-transform">NEW LISTING</div>
<img src="https://picsum.photos/id/1041/600/400" alt="Scenic Countryside Home" class="w-full h-64 object-cover border-b-4 border-emerald-700 dark:border-red-700">
<div class="p-6">
<h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-red-900 dark:text-red-500 mb-2 border-b-2 border-emerald-500 pb-2">Brutalist Countryside Retreat</h2>
<p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">An unapologetic concrete masterpiece nestled in serene landscapes. Stripped-back design meets rural tranquility, offering profound escapism.</p>
<div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
<div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">☑</span> 4 Beds</div>
<div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">☑</span> 3 Baths</div>
<div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">☑</span> 2,500 sqft</div>
<div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">☑</span> Built 2005</div>
</div>
<div class="flex items-baseline justify-between mb-6 border-t-2 border-emerald-500 pt-4">
<span class="text-4xl sm:text-5xl font-extrabold text-emerald-700 dark:text-emerald-400">$1.2M</span>
<span class="text-xl font-bold text-red-700 dark:text-red-400">Fixed Price</span>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
View Details
</button>
<button class="flex-none bg-emerald-700 dark:bg-ruby-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-emerald-900 dark:hover:bg-ruby-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
Call Agent
</button>
</div>
<div class="mt-6 pt-4 border-t-2 border-red-500 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-emerald-700 dark:border-slate-300 mr-3">
<div>
<p class="text-sm font-semibold text-red-800 dark:text-red-300">Agent: Jane Doe</p>
<p class="text-xs text-stone-600 dark:text-stone-400">Response time: 1hr</p>
</div>
</div>
<a href="#" class="text-sm font-bold text-red-700 dark:text-red-400 hover:underline border-b-2 border-transparent hover:border-red-700 dark:hover:border-red-400 transition-colors">Message</a>
</div>
</div>
</div>
<!-- Property Card 3 -->
<div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-sapphire-700 dark:border-emerald-700 shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] dark:shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)]">
<div class="absolute top-0 left-0 bg-sapphire-700 dark:bg-emerald-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider -translate-x-2 -translate-y-2 rotate-3 hover:rotate-0 transition-transform">PREMIUM</div>
<img src="https://picsum.photos/id/1050/600/400" alt="Commercial Space" class="w-full h-64 object-cover border-b-4 border-sapphire-700 dark:border-emerald-700">
<div class="p-6">
<h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-sapphire-900 dark:text-sapphire-500 mb-2 border-b-2 border-red-500 pb-2">Commercial Block B</h2>
<p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">A robust, imposing commercial building ready for redevelopment. Massive potential with a no-nonsense, concrete structure.</p>
<div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
<div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">☑</span> 5 Floors</div>
<div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">☑</span> 10 Offices</div>
<div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">☑</span> 10,000 sqft</div>
<div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">☑</span> Built 1960</div>
</div>
<div class="flex items-baseline justify-between mb-6 border-t-2 border-red-500 pt-4">
<span class="text-4xl sm:text-5xl font-extrabold text-red-700 dark:text-red-400">$3.5M</span>
<span class="text-xl font-bold text-sapphire-700 dark:text-sapphire-400">Offer Welcome</span>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 bg-sapphire-700 dark:bg-emerald-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-sapphire-900 dark:hover:bg-emerald-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
View Details
</button>
<button class="flex-none bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
Call Agent
</button>
</div>
<div class="mt-6 pt-4 border-t-2 border-sapphire-500 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-sapphire-700 dark:border-slate-300 mr-3">
<div>
<p class="text-sm font-semibold text-sapphire-800 dark:text-sapphire-300">Agent: Mike Ross</p>
<p class="text-xs text-stone-600 dark:text-stone-400">Key Holder</p>
</div>
</div>
<a href="#" class="text-sm font-bold text-sapphire-700 dark:text-sapphire-400 hover:underline border-b-2 border-transparent hover:border-sapphire-700 dark:hover:border-sapphire-400 transition-colors">Message</a>
</div>
</div>
</div>
</div>
<!-- Call to action/Footer space -->
<div class="mt-12 md:mt-16 text-center border-t-4 border-r-4 border-emerald-700 dark:border-red-700 p-6 bg-emerald-100 dark:bg-stone-800">
<p class="text-xl sm:text-2xl font-bold uppercase text-emerald-900 dark:text-red-500 mb-4">Ready to find your brutalist dream?</p>
<button class="inline-block bg-red-700 dark:bg-sapphire-700 text-stone-50 px-8 py-4 text-xl font-bold uppercase border-4 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)]">
Browse All Properties
</button>
</div>
<!-- Custom Colors for Brutalism Jewel Tones -->
<style>
.dark .bg-ruby-700 { background-color: rgb(150, 40, 60); } /* Darker Ruby */
.dark .hover\:bg-ruby-900:hover { background-color: rgb(110, 20, 40); } /* Even darker Ruby */
.dark .bg-sapphire-700 { background-color: rgb(60, 80, 150); } /* Darker Sapphire */
.dark .hover\:bg-sapphire-900:hover { background-color: rgb(40, 60, 110); } /* Even darker Sapphire */
.text-emerald-900 { color: rgb(0, 50, 20); } /* Darker Emerald */
.text-red-900 { color: rgb(70, 0, 0); } /* Darker Red */
.text-sapphire-900 { color: rgb(0, 0, 40); } /* Darker Sapphire */
/* Light mode custom colors */
.bg-emerald-700 { background-color: rgb(5, 150, 105); } /* Emerald Green */
.hover\:bg-emerald-900:hover { background-color: rgb(4, 120, 85); } /* Darker Emerald for hover */
.border-emerald-700 { border-color: rgb(5, 150, 105); } /* Emerald Border */
.text-emerald-700 { color: rgb(5, 150, 105); } /* Emerald Text */
.text-emerald-800 { color: rgb(4, 130, 95); } /* Slightly darker Emerald Text */
.text-emerald-900 { color: rgb(3, 100, 75); } /* Even darker Emerald Text */
.border-emerald-500 { border-color: rgb(6, 175, 125); } /* Lighter Emerald Border */
.text-emerald-400 { color: rgb(4, 185, 130); } /* Lighter Emerald Text */
.text-emerald-300 { color: rgb(5, 200, 140); } /* Even lighter Emerald Text */
.bg-red-700 { background-color: rgb(220, 38, 38); } /* Ruby Red */
.hover\:bg-red-900:hover { background-color: rgb(180, 30, 30); } /* Darker Ruby for hover */
.border-red-700 { border-color: rgb(220, 38, 38); } /* Ruby Border */
.text-red-700 { color: rgb(220, 38, 38); } /* Ruby Text */
.text-red-800 { color: rgb(190, 35, 35); } /* Slightly darker Ruby Text */
.text-red-900 { color: rgb(150, 30, 30); } /* Even darker Ruby Text */
.border-red-500 { border-color: rgb(239, 68, 68); } /* Lighter Ruby Border */
.text-red-400 { color: rgb(248, 113, 113); } /* Lighter Ruby Text */
.text-red-300 { color: rgb(252, 165, 165); } /* Even lighter Ruby Text */
.bg-sapphire-700 { background-color: rgb(37, 99, 235); } /* Sapphire Blue */
.hover\:bg-sapphire-900:hover { background-color: rgb(29, 78, 216); } /* Darker Sapphire for hover */
.border-sapphire-700 { border-color: rgb(37, 99, 235); } /* Sapphire Border */
.text-sapphire-700 { color: rgb(37, 99, 235); } /* Sapphire Text */
.text-sapphire-800 { color: rgb(30, 80, 190); } /* Slightly darker Sapphire Text */
.text-sapphire-900 { color: rgb(20, 60, 150); } /* Even darker Sapphire Text */
.border-sapphire-500 { border-color: rgb(59, 130, 246); } /* Lighter Sapphire Border */
.text-sapphire-400 { color: rgb(96, 165, 250); } /* Lighter Sapphire Text */
.text-sapphire-300 { color: rgb(147, 197, 253); } /* Even lighter Sapphire Text */
</style>
</div>Composants associés
Watercolor_Artistic_Dating_Product_Gallery
Un composant de galerie de produits complexe et réactif avec un style de conception « Aquarelle/Artistique » et une palette de couleurs « Candy/Sweet », adapté aux plateformes de rencontres et aux réseaux sociaux. Dispose de plusieurs éléments interactifs, de la prise en charge du mode sombre et du HTML sémantique.
Composant de galerie de produits
Composant de galerie de produits réactif avec prise en charge du mode sombre
Composant de galerie de produits
Un composant de galerie de produits réactif avec une esthétique de conception matérielle, avec une mise en page basée sur une grille et des éléments interactifs adaptés à la présentation de produits ou d’un portefeuille. Inclut la prise en charge du mode sombre et utilise un schéma de couleurs analogue.