아르 데코 게이밍 그리드 레이아웃
반응형 아르데코에서 영감을 받은 게임 그리드 레이아웃은 기하학적 패턴, 회색조 색상 및 인터랙티브 요소를 특징으로 합니다. 게임 웹사이트 및 인터페이스용으로 설계되었으며 다크 모드를 지원합니다.
HTML 코드
<div class="min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-50 font-sans p-4 sm:p-8 transition-colors duration-300">
<!-- Grid Container -->
<div class="container mx-auto max-w-7xl grid gap-4 lg:gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
<!-- Main Feature Game Card (First Row Spanning) -->
<div class="lg:col-span-2 relative overflow-hidden rounded-lg shadow-xl dark:shadow-2xl bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-900 border-2 border-gray-300 dark:border-gray-700 ">
<!-- Art Deco Pattern Overlay -->
<div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'><g fill=\'%23000\' fill-opacity=\'0.1\'><path d=\'M0 0h1v20H0zM0 0h20v1H0zM19 0h1v20h-1zM0 19h20v1H0z\'/><rect x=\'5\' y=\'5\' width=\'10\' height=\'10\' fill=\'%23000\' opacity=\'0.2\'/><path d=\'M10 0v20M0 10h20\' stroke=\'%23000\' stroke-width=\'0.5\' opacity=\'0.1\'/></g></svg>');"></div>
<img src="https://picsum.photos/1200/800?random=1" alt="Featured Game" class="w-full h-80 md:h-96 object-cover object-center transform scale-100 hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="absolute bottom-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-t from-gray-900/90 to-transparent">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2 text-gray-50 drop-shadow-lg leading-tight">Cosmic Odyssey: Starfall</h2>
<p class="text-gray-200 text-sm sm:text-base font-medium flex items-center mb-4">
<svg class="w-4 h-4 mr-1 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
Released: 2023-11-15
</p>
<button class="px-6 py-3 bg-gray-50 border-2 border-gray-50 text-gray-900 font-semibold rounded-full shadow-lg hover:bg-gray-200 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group">
<span class="relative z-10">Play Now</span>
<span class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
</button>
</div>
</div>
<!-- Game Card 1 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transform hover:-translate-y-1 hover:shadow-2xl transition-all duration-300 ease-in-out">
<img src="https://picsum.photos/600/400?random=2" alt="Game One" class="w-full h-48 object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 relative z-10">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-100">Neon City Racers</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">High-octane futuristic racing.</p>
<div class="mt-4 flex justify-between items-center">
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300">Action</span>
<button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
<!-- Game Card 2 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transform hover:-translate-y-1 hover:shadow-2xl transition-all duration-300 ease-in-out">
<img src="https://picsum.photos/600/400?random=3" alt="Game Two" class="w-full h-48 object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 relative z-10">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-100">Aetherian Chronicles</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Epic fantasy RPG adventure.</p>
<div class="mt-4 flex justify-between items-center">
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300">RPG</span>
<button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
<!-- Latest News/Blog Card -->
<div class="lg:col-span-2 relative overflow-hidden rounded-lg shadow-xl dark:shadow-2xl bg-gradient-to-tl from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-900 border-2 border-gray-300 dark:border-gray-700 p-4 sm:p-6 flex flex-col justify-between">
<!-- Art Deco Pattern Overlay -->
<div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'><g fill=\'%23000\' fill-opacity=\'0.1\'><path d=\'M0 0h1v20H0zM0 0h20v1H0zM19 0h1v20h-1zM0 19h20v1H0z\'/><rect x=\'5\' y=\'5\' width=\'10\' height=\'10\' fill=\'%23000\' opacity=\'0.2\'/><path d=\'M10 0v20M0 10h20\' stroke=\'%23000\' stroke-width=\'0.5\' opacity=\'0.1\'/></g></svg>');"></div>
<h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 drop-shadow-md dark:text-gray-50 relative z-10">Latest Intel</h2>
<div class="space-y-4 relative z-10">
<!-- News Item 1 -->
<div class="bg-gray-50 dark:bg-gray-950 p-3 rounded-md border border-gray-200 dark:border-gray-800 flex items-start space-x-3 group hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
<img src="https://picsum.photos/50/50?random=4" alt="News Thumbnail" class="w-16 h-16 rounded-md object-cover flex-shrink-0">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-gray-50">New Patch incoming: 'The Void Gazer'</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Discover the new content, bug fixes, and balance changes for your favorite game.</p>
<span class="text-xs text-gray-500 dark:text-gray-400 block mt-2">2 hours ago</span>
</div>
</div>
<!-- News Item 2 -->
<div class="bg-gray-50 dark:bg-gray-950 p-3 rounded-md border border-gray-200 dark:border-gray-800 flex items-start space-x-3 group hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
<img src="https://picsum.photos/50/50?random=5" alt="News Thumbnail" class="w-16 h-16 rounded-md object-cover flex-shrink-0">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-gray-50">Dev AMA Session Recap: Future of the game revealed!</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Highlights from our recent Ask Me Anything session with the development team.</p>
<span class="text-xs text-gray-500 dark:text-gray-400 block mt-2">Yesterday</span>
</div>
</div>
</div>
<button class="mt-6 w-full px-6 py-3 bg-gray-50 border-2 border-gray-50 text-gray-900 font-semibold rounded-full shadow-lg hover:bg-gray-200 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group z-10">
<span class="relative z-10">Read All News</span>
<span class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
</button>
</div>
<!-- Leaderboard Card -->
<div class="relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-4 sm:p-6 flex flex-col">
<h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-50">Top Players</h3>
<div class="space-y-3">
<!-- Player 1 -->
<div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
<span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">1.</span>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
<div class="flex-grow">
<p class="font-semibold text-gray-800 dark:text-gray-100">Axton_Prime</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Score: 1,230,456</p>
</div>
<span class="text-lg font-bold text-gray-800 dark:text-gray-100">🏆</span>
</div>
<!-- Player 2 -->
<div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
<span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">2.</span>
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
<div class="flex-grow">
<p class="font-semibold text-gray-800 dark:text-gray-100">Shadow_Queen</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Score: 987,654</p>
</div>
<span class="text-lg font-bold text-gray-800 dark:text-gray-100">🥈</span>
</div>
<!-- Player 3 -->
<div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
<span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">3.</span>
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
<div class="flex-grow">
<p class="font-semibold text-gray-800 dark:text-gray-100">Vortex_Hunter</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Score: 876,543</p>
</div>
<span class="text-lg font-bold text-gray-800 dark:text-gray-100">🥉</span>
</div>
</div>
<button class="mt-6 w-full px-6 py-3 bg-gray-200 border border-gray-200 text-gray-800 font-semibold rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group ">
<span class="relative z-10">View Full Leaderboard</span>
<span class="absolute inset-0 bg-gradient-to-r from-gray-500 to-gray-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
</button>
</div>
<!-- Community/Stream Card -->
<div class="relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-4 sm:p-6 flex flex-col">
<h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-50">Live Streams</h3>
<div class="space-y-3">
<!-- Stream Item 1 -->
<div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Streamer Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-red-500 flex-shrink-0 animate-pulse">
<div class="flex-grow">
<p class="font-semibold text-gray-800 dark:text-gray-100">GamerGirl_Lexa <span class="text-red-500 text-xs font-bold ml-1">LIVE</span></p>
<p class="text-sm text-gray-600 dark:text-gray-400">Playing: Cosmic Odyssey</p>
</div>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50 transition-colors duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm14.553 5.356A1.5 1.5 0 0117 12.004v1.992a1.5 1.5 0 01-2.447 1.156l-3.371-2.106a1.5 1.5 0 010-2.312l3.371-2.106zM9 10a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1v-4z"></path><path d="M2 13a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2z"></path></svg>
</a>
</div>
<!-- Stream Item 2 -->
<div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Streamer Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-red-500 flex-shrink-0 animate-pulse">
<div class="flex-grow">
<p class="font-semibold text-gray-800 dark:text-gray-100">ProGamer_Xero <span class="text-red-500 text-xs font-bold ml-1">LIVE</span></p>
<p class="text-sm text-gray-600 dark:text-gray-400">Playing: Neon City Racers</p>
</div>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50 transition-colors duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm14.553 5.356A1.5 1.5 0 0117 12.004v1.992a1.5 1.5 0 01-2.447 1.156l-3.371-2.106a1.5 1.5 0 010-2.312l3.371-2.106zM9 10a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1v-4z"></path><path d="M2 13a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2z"></path></svg>
</a>
</div>
</div>
<button class="mt-6 w-full px-6 py-3 bg-gray-200 border border-gray-200 text-gray-800 font-semibold rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group">
<span class="relative z-10">Join Community</span>
<span class="absolute inset-0 bg-gradient-to-r from-gray-500 to-gray-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
</button>
</div>
</div>
</div>관련 구성 요소
Travel_Booking_Grid_Layout_Component
여행 예약 웹사이트를 위한 복잡하고 반응이 빠른 그리드 레이아웃 구성 요소로, 기업/전문 디자인, 유사한 색 구성표 및 다크 모드를 지원합니다. 목적지 카드, 검색 입력 및 사이드바가 있습니다.
사이버펑크 CRM 그리드
사이버펑크-미래주의적 네온 미학을 가진 CRM/비즈니스 도구를 위한 반응형 그리드 레이아웃 구성 요소로, 어두운 배경과 따뜻한 일몰 악센트 색상을 특징으로 합니다. 대화형 요소와 다크 모드 지원이 포함됩니다.