Présentation du portefeuille Neumorphism
Une mise en page Neumorphism simple et réactive pour un portfolio, prenant en charge le mode sombre.
HTML Code
<div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8">
<div class="container mx-auto">
<!-- Header -->
<header class="p-6 mb-8 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
</header>
<!-- Main Content -->
<main class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Project Card -->
<div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 1</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 1.</p>
<img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
</div>
<!-- Project Card -->
<div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 2</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 2.</p>
<img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
</div>
</main>
<!-- Footer -->
<footer class="mt-8 p-6 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-center text-gray-700 dark:text-gray-300">
<p>© 2023 My Portfolio</p>
</footer>
</div>
</div>
<style>
/* Custom Neumorphism Shadows */
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
</style>Composants associés
Composant de mise en page en mode sombre
Un composant de mise en page réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Comprend un en-tête, une zone de contenu et un pied de page simples. Le mode sombre est géré par le préfixe 'dark :' dans les classes Tailwind.
Composant Composants de mise en page
Une mise en page de composant Web réactive suivant les principes de conception matérielle pour une application de médias sociaux avec prise en charge du thème sombre.
Composant de mise en page du tableau de bord
Une mise en page de tableau de bord réactive avec l’esthétique de Material Design, y compris une barre latérale, un en-tête et une zone de contenu principal. Il prend en charge le mode sombre et utilise des couleurs complémentaires pour un look équilibré. La complexité est modérée avec des fonctionnalités de type interactif réalisées uniquement avec des classes CSS et Tailwind.