Luxury_Portfolio_Cards_Ocean_Blue
복잡한 럭셔리/프리미엄 포트폴리오 카드 구성 요소로, 작품이나 제품을 선보이기 위해 바다/블루 톤으로 디자인되었습니다. 반응형 디자인, 세련된 타이포그래피, 우아한 비주얼, 완전한 다크 모드 지원이 특징입니다.
HTML 코드
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-950 dark:to-blue-900 py-12 px-4 sm:px-6 lg:px-8 font-serif text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-6 drop-shadow-lg text-blue-900 dark:text-blue-200 leading-tight">
Our Exquisite Creations
</h2>
<p class="text-xl sm:text-2xl text-center mb-16 max-w-3xl mx-auto dark:text-gray-300">
Dive into a curated collection of our most distinguished projects, crafted with precision and an unwavering pursuit of perfection.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Card 1 -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700 ">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1018/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Azure Sky Residency</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A beacon of modern architecture, featuring bespoke interiors and breathtaking panoramic views.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Designer Avatar">
<span>Anya Sharma</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">Architecture</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
View Project
</a>
</div>
</div>
<!-- Card 2 -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1042/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Symphony of the Seas</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An opulent yacht interior design, blending classic elegance with cutting-edge marine technology.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Designer Avatar">
<span>Julian Thorne</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">Interior Design</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
Explore Details
</a>
</div>
</div>
<!-- Card 3 -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1044/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Elysian Gardens Revitalization</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A transformative landscape design, harmonizing natural beauty with sustainable urban living.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Designer Avatar">
<span>Lena Petrov</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">Landscape</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
See Portfolio
</a>
</div>
</div>
<!-- Card 4 (Placeholder - could be dynamic) -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/10/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Oceanic Brand Identity</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">Crafting a distinctive visual language for a luxury coastal resort brand.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/71.jpg" alt="Designer Avatar">
<span>Marcus Finn</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">Branding</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
Discover More
</a>
</div>
</div>
<!-- Card 5 (Placeholder) -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1025/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Digital Horizon App</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An intuitive and visually stunning mobile application designed for premium travel experiences.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Designer Avatar">
<span>Chloe Rivers</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">UI/UX Design</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
View Case Study
</a>
</div>
</div>
<!-- Card 6 (Placeholder) -->
<div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1049/600/400" alt="Project Image">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Timeless Sculpture Series</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A collection of bespoke artistic sculptures, blending classical forms with contemporary abstract elements.</p>
</div>
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Designer Avatar">
<span>David Hayes</span>
</div>
<span class="text-blue-600 dark:text-blue-400 font-semibold">Art & Craft</span>
</div>
<a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
Discover Collection
</a>
</div>
</div>
</div>
</div>
</div>