Bauhaus_Retro_Photography_TOC
Un composant de table des matières complexe et réactif pour les sites Web de photographie, inspiré des principes de conception du Bauhaus et d’une palette de couleurs rétro/vintage. Comprend des formes géométriques, des couleurs sourdes et une prise en charge complète du mode sombre, idéal pour les galeries de photos et les portfolios.
HTML Code
<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>Composants associés
Composant de la table des matières
Un composant de table des matières réactif conçu dans le style Glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, prenant en charge les thèmes clairs et sombres avec Tailwind CSS.
Bonbons rétro Table des matières
Un composant de table des matières à thème rétro nostalgique avec une palette de couleurs inspirée des bonbons, adapté aux sites Web d’alimentation et de restaurants. Dispose d’une navigation de type barre latérale « collante » avec des indicateurs de défilement fluides et la prise en charge du mode sombre.
Composant de la table des matières
Un composant de table des matières réactif conçu dans le style Material Design avec prise en charge des tons de terre et des thèmes sombres pour les sites Web d’entreprise.