Bauhaus_Retro_Photography_TOC
사진 웹사이트를 위한 복잡하고 반응이 빠른 목차 구성 요소로, Bauhaus의 디자인 원칙과 레트로/빈티지 색상 팔레트에서 영감을 받았습니다. 기하학적 형태, 차분한 색상 및 완전 다크 모드 지원이 특징이며 사진 갤러리 및 포트폴리오에 이상적입니다.
HTML 코드
<div class="font-sans bg-[#F4F1EA] text-[#3D3B40] dark:bg-[#2A2B2D] dark:text-[#EAE7DC] p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-6 sm:gap-8 md:gap-10">
<!-- Main Content Area (simulated) -->
<div class="hidden md:block md:col-span-3 lg:col-span-4 rounded-lg p-6 lg:p-8 bg-[#EAE7DC] dark:bg-[#3D3B40] shadow-md dark:shadow-lg">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#ACD5C3] dark:text-[#A7C9A4] mb-4">Gallery Showcase</h1>
<p class="text-lg leading-relaxed mb-6">Explore the meticulous details and vibrant stories captured through our lens. This simulated content area demonstrates how the Table of Contents would integrate alongside your main photography gallery or portfolio.</p>
<h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Project Overview</h2>
<img src="https://picsum.photos/seed/bauhaus1/800/450" alt="Abstract geometric art" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
<p class="mb-4">Paragraph about the project. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Technique & Vision</h2>
<img src="https://picsum.photos/seed/bauhaus2/800/450" alt="Photography equipment" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
<p class="mb-4">Further details on the techniques used. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Behind the Scenes</h2>
<img src="https://picsum.photos/seed/bauhaus3/800/450" alt="Photographer at work" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
<p>Insights into the creative process. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- Table of Contents Sidebar -->
<div class="md:col-span-1 lg:col-span-1">
<div class="bg-[#ACD5C3] dark:bg-[#8D9B8C] p-4 sm:p-6 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">
<h2 class="text-xl sm:text-2xl font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4 pb-2 border-b-2 border-[#D7B102] dark:border-[#BFB996]">
<span class="block transform -rotate-6 origin-bottom-left inline-block mr-2 text-2xl">▸</span>
Contents
</h2>
<nav class="">
<ul class="space-y-3">
<li>
<a href="#section1" class="block p-3 rounded-md transition-all duration-300 ease-in-out
bg-[#D7B102] text-[#3D3B40] font-semibold tracking-wide uppercase
hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md
dark:bg-[#BFB996] dark:text-[#2A2B2D]
dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D]
relative overflow-hidden group">
<span class="relative z-10">
1. <span class="hidden sm:inline">Project</span> Overview
</span>
<span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left
group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
</a>
</li>
<li>
<a href="#section2" class="block p-3 rounded-md transition-all duration-300 ease-in-out
bg-[#D3A20B] text-[#3D3B40] font-semibold tracking-wide uppercase
hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md
dark:bg-[#B3A880] dark:text-[#2A2B2D]
dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D]
relative overflow-hidden group">
<span class="relative z-10">
2. <span class="hidden sm:inline">Technique &</span> Vision
</span>
<span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left
group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
</a>
</li>
<li>
<a href="#section3" class="block p-3 rounded-md transition-all duration-300 ease-in-out
bg-[#CF920E] text-[#3D3B40] font-semibold tracking-wide uppercase
hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md
dark:bg-[#A99F7A] dark:text-[#2A2B2D]
dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D]
relative overflow-hidden group">
<span class="relative z-10">
3. <span class="hidden sm:inline">Behind the</span> Scenes
</span>
<span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left
group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
</a>
</li>
<li>
<a href="#section4" class="block p-3 rounded-md transition-all duration-300 ease-in-out
bg-[#CB8310] text-[#3D3B40] font-semibold tracking-wide uppercase
hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md
dark:bg-[#A09673] dark:text-[#2A2B2D]
dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D]
relative overflow-hidden group">
<span class="relative z-10">
4. <span class="hidden sm:inline">Client</span> Testimonials
</span>
<span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left
group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
</a>
</li>
<li>
<a href="#section5" class="block p-3 rounded-md transition-all duration-300 ease-in-out
bg-[#C77412] text-[#3D3B40] font-semibold tracking-wide uppercase
hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md
dark:bg-[#978D6D] dark:text-[#2A2B2D]
dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D]
relative overflow-hidden group">
<span class="relative z-10">
5. <span class="hidden sm:inline">Contact</span> & Booking
</span>
<span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left
group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
</a>
</li>
</ul>
</nav>
<div class="mt-8 pt-6 border-t-2 border-[#D7B102] dark:border-[#BFB996]">
<h3 class="text-lg font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4">Related Galleries</h3>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
<img src="https://picsum.photos/seed/gallery1/60/60" alt="Image from cityscape gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
<span class="font-medium text-sm">Cityscapes & Architecture</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
<img src="https://picsum.photos/seed/gallery2/60/60" alt="Image from nature photography gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
<span class="font-medium text-sm">Nature & Wildlife</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
<img src="https://picsum.photos/seed/gallery3/60/60" alt="Image from portrait gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
<span class="font-medium text-sm">Portraits & Editorial</span>
</a>
</li>
</ul>
</div>
<div class="mt-8 pt-6 border-t-2 border-[#D7B102] dark:border-[#BFB996]">
<h3 class="text-lg font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4">Your Photographer</h3>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/82.jpg" alt="Photographer's avatar" class="w-16 h-16 rounded-full object-cover border-4 border-[#D7B102] dark:border-[#BFB996] shadow-md">
<div>
<p class="font-semibold text-lg text-[#F4F1EA] dark:text-[#EAE7DC]">Max Steiner</p>
<p class="text-sm text-[#F4F1EA] dark:text-[#CECAC2] opacity-80">Lead Photographer</p>
</div>
</div>
<p class="text-sm italic text-[#F4F1EA] dark:text-[#EAE7DC] opacity-90 mt-4">"Capturing moments, crafting stories. Bauhaus principles inspire my compositions."
</p>
<a href="#" class="mt-4 block w-full px-4 py-2 text-center rounded-md text-[#3D3B40] bg-[#D7B102] hover:bg-[#EAE7DC]
dark:text-[#2A2B2D] dark:bg-[#BFB996] dark:hover:bg-[#EAE7DC]
font-bold transition-all duration-300 ease-in-out shadow-md hover:shadow-lg
transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-[#D7B102] dark:focus:ring-[#BFB996] focus:ring-opacity-75">
View Portfolio
</a>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
Table of Contents 구성 요소
Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 목차 구성 요소. 이 구성 요소는 포트폴리오 목적으로 설계되었으며, 단색 색 구성표와 JavaScript가 없는 적당한 복잡성 수준을 특징으로 합니다.
Table of Contents 구성 요소
Tailwind CSS를 사용하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 목차 구성요소로, 다크 모드를 지원하고 자리표시자 이미지와 아바타를 제공합니다.
Table of Contents 구성 요소
스큐어모픽 디자인, 트라이어딕 색 구성표 및 어두운 테마 지원을 갖춘 반응형 목차 구성 요소로, 소셜 미디어 인터페이스에 적합합니다. JavaScript는 없으며 HTML 및 Tailwind CSS 만 있습니다.