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
Composants d’amélioration de la navigation
Un composant de navigation réactif conçu avec les concepts de conception matérielle à l’aide de Tailwind CSS, avec la prise en charge du thème sombre et des images de remplacement.
Composant Composants d’amélioration de la navigation
Un composant de navigation complexe de style brutaliste pour les sites Web d’entreprise avec une palette de couleurs analogue, un design réactif et une prise en charge du mode sombre. Présente des mises en page inhabituelles et un contraste élevé.
Composant d’amélioration de la navigation
Un composant de navigation inspiré du glassmorphisme conçu pour présenter des travaux et des produits de portfolio avec prise en charge des tons de terre et du mode sombre. Le composant présente un effet de verre givré, un design réactif et des éléments minimaux.