Brutalist_RealEstate_Product_Gallery
부동산 리스팅을 위한 복잡하고 브루탈리즘 스타일의 제품 갤러리 구성 요소로, 보석 색조, 풍부한 채도가 높은 색상, 고대비 및 다크 모드 지원을 특징으로 합니다. 여러 대화형 요소로 속성 세부 정보를 표시하도록 설계되었습니다.
HTML 코드
<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>관련 구성 요소
Product Gallery 구성 요소
Material Design 원칙을 기반으로 하는 Product Gallery 구성 요소로, 반응형 디자인과 어두운 테마 지원을 제공합니다. 자리 표시자 이미지를 포함합니다.
Product Gallery 구성 요소
glassmorphism 디자인 스타일, 밝은 액센트가 있는 흑백 색 구성표를 갖춘 간단하고 반응이 빠른 제품 갤러리 구성 요소로 구인 게시판 또는 경력 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.
사이버펑크 제품 갤러리
사이버펑크 미학을 가미한 반응형 제품 갤러리 구성 요소로, 어두운 배경, 밝은 액센트 색상(일렉트릭 블루) 및 미묘한 인터랙티브 요소를 특징으로 하며, 제품 또는 포트폴리오를 선보이는 데 적합합니다.