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 des médias sociaux
Un composant de mise en page de médias sociaux réactif et complexe inspiré de la 3D avec des couleurs vives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend un en-tête avec un logo et une navigation, une zone de contenu principale avec des cartes dynamiques pour les messages et une barre latérale pour les profils d’utilisateurs et les sujets tendance. Chaque élément est conçu pour donner un sentiment de profondeur et d’interaction.
Mise en page rétro des médias sociaux
Une mise en page simple et monochrome à thème rétro pour les réseaux sociaux, avec prise en charge du mode sombre.
Composant de mise en page 3D
Un composant de mise en page de médias sociaux réactif 3D Design avec une palette de couleurs en niveaux de gris. Convient aux interfaces de réseaux sociaux.