다크 모드 포트폴리오 레이아웃
포트폴리오를 위한 다크 모드 반응형 레이아웃 구성 요소로, Tailwind CSS를 사용하는 단색 색 구성표를 특징으로 합니다. 콘텐츠에 대한 자리 표시자를 포함하며 JavaScript 없이 중간 정도의 복잡성을 위해 설계되었습니다.
HTML 코드
<div class="min-h-screen bg-gray-900 text-gray-200 p-4">
<div class="container mx-auto">
<header class="flex justify-between items-center py-6">
<h1 class="text-2xl font-bold text-gray-100">My Portfolio</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-gray-100">Home</a></li>
<li><a href="#" class="hover:text-gray-100">Projects</a></li>
<li><a href="#" class="hover:text-gray-100">Contact</a></li>
</ul>
</nav>
</header>
<main class="grid grid-cols-1 md:grid-cols-2 gap-8 py-8">
<section>
<h2 class="text-xl font-semibold mb-4">About Me</h2>
<p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section>
<h2 class="text-xl font-semibold mb-4">Recent Projects</h2>
<div class="space-y-4">
<div class="bg-gray-800 p-4 rounded-md">
<h3 class="font-semibold">Project One</h3>
<p class="text-gray-500 text-sm">A brief description of project one.</p>
</div>
<div class="bg-gray-800 p-4 rounded-md">
<h3 class="font-semibold">Project Two</h3>
<p class="text-gray-500 text-sm">A brief description of project two.</p>
</div>
</div>
</section>
</main>
<footer class="text-center py-6 text-gray-500">
© 2023 My Portfolio
</footer>
</div>
</div>
관련 구성 요소
Retro_Jewel_Tone_Entertainment_Layout
엔터테인먼트 플랫폼을 위한 적당히 복잡한 레트로/빈티지에서 영감을 받은 레이아웃 구성 요소로, 풍부한 보석 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다.
레트로비즈니스레이아웃
비즈니스 웹사이트를 위한 레트로/빈티지 테마의 레이아웃 구성 요소로, 그레이스케일 색 구성표와 심플한 디자인을 특징으로 합니다. 반응이 빠르며 다크 모드 지원이 포함됩니다.