Bauhaus_Retro_Photography_TOC
Un componente di indice complesso e reattivo per siti Web di fotografia, ispirato ai principi di progettazione Bauhaus e a una tavolozza di colori retrò/vintage. Presenta forme geometriche, colori tenui e supporto completo della modalità scura, ideale per gallerie fotografiche e portfolio.
Codice 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>Componenti correlati
Sommario Componente
Un componente dell'indice minimalista e reattivo con stile CSS Tailwind, che supporta la modalità oscura e presenta elementi di design puliti.
Sommario Componente - Toni della Terra 3D
Un complesso componente di sommario ispirato al 3D per siti Web aziendali e aziendali, caratterizzato da toni della terra e piena reattività con supporto della modalità oscura. Progettato per fornire profondità e coinvolgimento.
Sommario Componente
Un componente Sommario reattivo per le interfacce dei social media, progettato con un'interfaccia utente in modalità oscura che utilizza i toni della terra e un layout semplice. Supporta il tema scuro utilizzando Tailwind CSS ed è solo HTML senza JavaScript.