Composants d’amélioration de la navigation
Un composant de navigation conçu avec une esthétique brutaliste, avec des designs audacieux, un contraste élevé et des mises en page inhabituelles. Il comprend des effets réactifs et prend en charge les thèmes sombres avec CSS.
HTML Code
<nav class="bg-white dark:bg-gray-800 p-6">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full border-2 border-black dark:border-white">
<h1 class="text-2xl font-bold text-black dark:text-white">Brutal Nav</h1>
</div>
<ul class="flex space-x-6">
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#home">Home</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#about">About</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#services">Services</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="bg-gray-300 dark:bg-gray-700 my-6">
<img src="https://picsum.photos/1200/300?random=1" alt="Banner" class="w-full h-auto">
</div>
<div class="container mx-auto py-6">
<h2 class="text-xl font-bold text-black dark:text-white">Featured</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 1</h3>
</div>
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 2</h3>
</div>
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 3</h3>
</div>
</div>
</div>
<footer class="bg-gray-200 dark:bg-gray-600 p-4 text-center">
<p class="text-sm text-black dark:text-white">© 2023 Brutalism Design. All Rights Reserved.</p>
</footer>
</nav>Composants associés
Navigation de la carte des nouvelles de l’agriculture
Un composant de navigation simple, inspiré du papier/de l’impression, comprenant une carte d’actualités pour l’agriculture et les sites Web agricoles, utilisant une palette de couleurs analogue. Il est entièrement réactif avec la prise en charge du mode sombre.
Composants d’amélioration de la navigation
Un composant de navigation de style rétro/vintage conçu pour la consommation de blogs et de contenu avec prise en charge du thème sombre.
Navigation gouvernementale inspirée du papier et de l’impression
Un composant de navigation complexe, inspiré du papier/de l’impression pour les sites Web gouvernementaux/publics, avec des tons sépia/bruns, une réactivité et une prise en charge du mode sombre. Il comprend la navigation principale, la recherche et une section « liens rapides » ou « services ».