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
MemphisMapsComponent_CryptoBlockchain
Un composant de cartes complexe et réactif inspiré du « Memphis Design » pour les applications de crypto-monnaie/blockchain, avec des couleurs audacieuses, des formes géométriques et une palette de couleurs chaudes de coucher de soleil. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant Cartes
Un composant Maps doté d’un design glassmorphism avec des effets réactifs et la prise en charge du thème sombre, utilisant Tailwind CSS.
IndustrielVibrantMapsComposant
Un composant cartographique réactif et interactif avec une esthétique industrielle, brute et une palette de couleurs vives, adapté aux applications technologiques/SaaS. Inclut la prise en charge du mode sombre.