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 avec une conception Neumorphism, une palette de couleurs complémentaire, une complexité modérée et une prise en charge réactive du thème sombre pour un tableau de bord. La conception intègre des ombres douces pour l’effet Neumorphism et utilise des couleurs complémentaires pour créer une interface visuellement attrayante. Il convient à un tableau de bord fournissant des panneaux de visualisation de données et de contrôle.
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.
Navigation collante brutaliste
Un composant de navigation autocollant de style brutaliste avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Présente un contraste élevé, une typographie audacieuse et une esthétique austère et brute.