Brutalism_Photography_Maps_Component
Un composant de carte simple, de style brutaliste, pour les portfolios de photographie, avec une palette de couleurs violettes audacieuses avec un contraste élevé et une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-violet-200 dark:bg-violet-950 text-violet-900 dark:text-violet-100 font-mono min-h-screen">
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold mb-6 sm:mb-8 tracking-tighter uppercase border-b-4 border-violet-900 dark:border-violet-400 pb-2">
Photographic Locations // Map<span class="text-violet-700 dark:text-violet-400">.</span>Focus
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10">
<!-- Map Placeholder Section -->
<div class="relative bg-violet-400 dark:bg-violet-800 border-4 border-violet-900 dark:border-violet-400 overflow-hidden group">
<img src="https://picsum.photos/id/1080/800/600" alt="Abstract map visual" class="w-full h-64 sm:h-80 md:h-96 object-cover object-center transform transition-transform duration-500 group-hover:scale-105 saturate-150 brightness-75">
<div class="absolute inset-0 bg-gradient-to-t from-violet-900 via-transparent to-transparent opacity-80 dark:from-violet-950 dark:opacity-90"></div>
<div class="absolute bottom-0 left-0 p-4 sm:p-6 text-violet-100 tracking-tighter">
<p class="text-xl sm:text-2xl font-bold uppercase mb-1 drop-shadow-lg">[Location: Unknown]</p>
<p class="text-sm sm:text-base font-light opacity-80 drop-shadow-lg">Coordinates: [DATA REDACTED]</p>
</div>
<div class="absolute top-4 right-4 text-violet-900 dark:text-violet-200 bg-violet-200 dark:bg-violet-700 px-3 py-1 text-sm font-bold border-2 border-violet-900 dark:border-violet-400 uppercase">
Interactive View Coming.
</div>
</div>
<!-- Location List / Details -->
<div class="bg-violet-400 dark:bg-violet-800 border-4 border-violet-900 dark:border-violet-400 p-4 sm:p-6 lg:p-8">
<h3 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 border-b-2 border-violet-900 dark:border-violet-400 pb-1">Selected Locations // Shots.</h3>
<ul class="space-y-4 sm:space-y-5">
<li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[-2deg] hover:skew-x-0">
<span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">01.</span>
<div>
<p class="font-bold text-lg sm:text-xl uppercase leading-tight">Urban Sprawl</p>
<p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Downtown Concrete. 2023.</p>
</div>
</li>
<li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[2deg] hover:skew-x-0">
<span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">02.</span>
<div>
<p class="font-bold text-lg sm:text-xl uppercase leading-tight">Coastal Edge</p>
<p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Sea Storm Horizon. 2022.</p>
</div>
</li>
<li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[-2deg] hover:skew-x-0">
<span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">03.</span>
<div>
<p class="font-bold text-lg sm:text-xl uppercase leading-tight">Desert Solitude</p>
<p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Vast Sands, Empty Skies. 2020.</p>
</div>
</li>
<li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[2deg] hover:skew-x-0">
<span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">04.</span>
<div>
<p class="font-bold text-lg sm:text-xl uppercase leading-tight">Forest Veil</p>
<p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Deep Woods Mystique. 2021.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="mt-8 sm:mt-10 text-center">
<button class="px-6 py-3 sm:px-8 sm:py-4 bg-violet-900 dark:bg-violet-400 text-violet-100 dark:text-violet-900 text-lg sm:text-xl font-bold uppercase border-4 border-violet-900 dark:border-violet-400 shadow-[8px_8px_0px_rgba(79,0,172,1)] dark:shadow-[8px_8px_0px_rgba(139,92,246,1)] transition-all duration-200 hover:shadow-[4px_4px_0px_rgba(79,0,172,1)] dark:hover:shadow-[4px_4px_0px_rgba(139,92,246,1)]">
Explore More Locations // Get.Dirty
</button>
</div>
</div>Composants associés
Neon_Glow_Maps_Component
Un composant cartographique simple et réactif avec un effet néon/lueur, conçu pour les portfolios de photographie. Dispose de couleurs neutres froides, de la prise en charge du mode sombre et d’une image de carte de remplacement.
LuxuryFoodMapsComposant
Un composant de carte de nourriture/restaurant élégant et réactif avec une palette de couleurs sur le thème des bonbons, adapté aux ordinateurs de bureau, aux tablettes et aux mobiles, y compris la prise en charge du mode sombre. Comprend une zone de carte bien visible et une liste d’emplacements de restaurants haut de gamme.
Luxury_Autumn_Maps_Component
Un composant de carte réactif et élégant conçu pour les sites Web de voyage et de tourisme de luxe, avec des couleurs d’automne et une prise en charge du mode sombre.