Composant de navigation en pied de page
Un composant de navigation de pied de page réactif avec un thème sombre, adapté à un site web de portfolio. Il présente une palette de couleurs monochromatique avec différentes nuances d’une seule couleur, une complexité moyenne avec quelques fonctionnalités interactives, et utilise Tailwind CSS pour le style, y compris la prise en charge du mode sombre avec le préfixe dark :.
HTML Code
<footer class="bg-gray-900 text-white dark:bg-gray-900">
<div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
<div class="mb-8 flex justify-center">
<a class="text-teal-400 dark:text-teal-300" href="/">
<span class="sr-only">Home</span>
<span class="text-2xl font-bold">YourPortfolio</span>
</a>
</div>
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<div>
<p class="text-center text-base text-gray-400 dark:text-gray-500 lg:text-left">
Showcasing innovative projects and creative solutions.
</p>
<p class="mt-4 text-center text-base text-gray-400 dark:text-gray-500 lg:text-left">
© 2024 YourPortfolio. All rights reserved.
</p>
</div>
<div class="col-span-2">
<div class="grid grid-cols-1 gap-8 text-center sm:grid-cols-2 lg:grid-cols-3">
<div>
<p class="font-medium text-white dark:text-gray-200">Services</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Web Development</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">UI/UX Design</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Digital Marketing</a>
</nav>
</div>
<div>
<p class="font-medium text-white dark:text-gray-200">Company</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">About Us</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Careers</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Blog</a>
</nav>
</div>
<div>
<p class="font-medium text-white dark:text-gray-200">Contact</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Get in Touch</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Support</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">FAQ</a>
</nav>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-800 pt-8 sm:items-center sm:justify-between sm:flex">
<p class="text-center text-xs text-gray-500 dark:text-gray-600 sm:text-left">
Designed and developed with ❤️
</p>
<ul class="mt-4 flex justify-center gap-6 sm:mt-0 lg:justify-end">
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Dribbble</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</footer>Composants associés
Composant de navigation en pied de page
Composant de navigation de pied de page complexe et réactif conçu pour une place de marché, doté d’une interface utilisateur en mode sombre avec une palette de couleurs noir et blanc et une couleur d’accentuation vive (indigo). Comprend plusieurs sections pour la navigation, les informations sur l’entreprise, les liens juridiques et les médias sociaux, avec une prise en charge complète du mode sombre.
Industrial_Rainbow_Footer_Navigation
Un composant de navigation en pied de page simple et réactif avec une esthétique industrielle, des éléments exposés et un arrière-plan dégradé arc-en-ciel multicolore, conçu pour les interfaces finance/banque. Inclut la prise en charge du mode sombre.
Composant de navigation en pied de page
Un composant de navigation de pied de page réactif pour les tableaux de bord avec prise en charge du thème sombre, avec des micro-interactions sur les survols de liens à l’aide de couleurs triadiques et d’éléments complexes. Pas de JavaScript, seulement du HTML avec Tailwind CSS.