예약을 위한 미니멀리스트 세피아 이미지 갤러리
따뜻한 세피아/브라운 톤의 미니멀하고 평평한 디자인의 이미지 갤러리 구성 요소로, 예약 및 예약 시스템에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.
HTML 코드
<div class="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-extrabold text-center mb-4 sm:mb-6 leading-tight">
Our Spaces
</h2>
<p class="text-center text-lg text-stone-600 dark:text-stone-400 mb-8 sm:mb-12 max-w-2xl mx-auto">
Explore our elegantly designed spaces, perfect for your next reservation.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Gallery Item 1 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/404/600/400" alt="Spacious Lounge Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Heritage Room</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">Ideal for intimate gatherings and private consultations.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/292/600/400" alt="Modern Meeting Room" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Loft Studio</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A bright, airy space ideal for creative workshops.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/312/600/400" alt="Cozy Corner Cafe" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Quiet Nook</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">Perfect for focused work or small, confidential meetings.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/296/600/400" alt="Elegant Dining Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Grand Salon</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A versatile space for larger functions and events.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/300/600/400" alt="Spacious Office Setup" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Executive Suite</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A premium setting for corporate meetings and presentations.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/350/600/400" alt="Outdoor Patio Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Garden Terrace</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">An inviting outdoor setting for relaxed gatherings.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>