Composant de navigation collante
Un composant de navigation autocollant conçu dans un style skeuomorphe, mettant en valeur des couleurs complémentaires, adapté à un portfolio avec une interface riche.
HTML Code
<header class="bg-gray-800 dark:bg-gray-900 shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full bg-white shadow-md">
<h1 class="text-white text-2xl font-semibold">My Portfolio</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#about" class="text-gray-200 hover:text-gray-100">About</a>
<a href="#projects" class="text-gray-200 hover:text-gray-100">Projects</a>
<a href="#contact" class="text-gray-200 hover:text-gray-100">Contact</a>
<a href="#blog" class="text-gray-200 hover:text-gray-100">Blog</a>
</nav>
<div class="md:hidden">
<button class="text-gray-200 focus:outline-none" aria-label="Open menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
</div>
</header>
<main class="py-10 bg-gray-100 dark:bg-gray-800">
<section id="about" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">About Me</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section id="projects" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Projects</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
<img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
</div>
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
<img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
</div>
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
<img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
</div>
</div>
</section>
<section id="contact" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Contact Me</h2>
<form class="mt-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<input type="text" placeholder="Name" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" required>
<input type="email" placeholder="Email" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" required>
</div>
<textarea placeholder="Message" class="mt-4 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" rows="4" required></textarea>
<button type="submit" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow">Send Message</button>
</form>
</section>
</main>
<footer class="bg-gray-800 dark:bg-gray-900 py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p class="text-gray-200">© 2023 My Portfolio. All Rights Reserved.</p>
<div class="flex justify-center space-x-4 mt-2">
<a href="https://randomuser.me" class="text-gray-200 hover:text-gray-100" aria-label="Instagram">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
</a>
<a href="#" class="text-gray-200 hover:text-gray-100" aria-label="Twitter">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.643 4.937c-.835.37-1.734.617-2.676.726.96-.576 1.694-1.49 2.04-2.573-.897.53-1.887.916-2.943 1.125-.84-.89-2.025-1.455-3.345-1.455-2.547 0-4.608 2.036-4.608 4.547 0 .356.04.703.117 1.037-3.83-.192-7.22-2.032-9.495-4.82-.395.683-.621 1.477-.621 2.358 0 1.63.826 3.069 2.083 3.917-.767-.024-1.487-.235-2.118-.589v.059c0 2.27 1.623 4.153 3.774 4.583-.395.108-.81.165-1.236.165-.303 0-.6-.029-.889-.086.601 1.864 2.339 3.218 4.394 3.262-1.62 1.28-3.645 2.047-5.842 2.047-.38 0-.759-.022-1.133-.066 2.091 1.335 4.594 2.118 7.269 2.118 8.733 0 13.492-7.31 13.492-13.63 0-.208-.004-.415-.015-.621.918-.658 1.714-1.48 2.347-2.415z"/></svg>
</a>
</div>
</div>
</footer>
Composants associés
Composant de navigation collante
Un composant de navigation autocollant conçu pour le mode sombre avec des effets réactifs utilisant Tailwind CSS.
Skeuomorphe en niveaux de gris Sticky Nav
Une barre de navigation autocollante réactive pour les blogs, stylisée avec un skeuomorphisme à l’aide d’une palette en niveaux de gris. Dispose d’une prise en charge du mode sombre et d’une mise en page simple. Construit avec Tailwind CSS (HTML uniquement), pas de JavaScript. Le design skeuomorphe vise à faire apparaître la barre de navigation comme un élément physique, légèrement en relief.
Composant de navigation collante
Une barre de navigation autocollante simple, propre et fiable, adaptée aux sites Web d’entreprise et professionnels, en particulier aux sites d’emploi et aux plateformes de carrière. Dispose de couleurs à contraste élevé, de réactivité et de prise en charge du mode sombre.