Carte de contenu de conception matérielle pour l’éducation
Une carte de contenu simple et réactive conçue avec les principes de conception matérielle, la palette de couleurs bleues de l’entreprise et la prise en charge du mode sombre, adaptée aux plateformes éducatives.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<!-- Card Header with Image -->
<div class="relative">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Course Thumbnail">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
<h3 class="text-xl font-bold text-white leading-tight">Introduction to Web Development</h3>
</div>
</div>
<!-- Card Content -->
<div class="p-4 flex flex-col gap-3">
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
Learn the fundamentals of HTML, CSS, and JavaScript to build your first websites. This course is perfect for beginners.
</p>
<div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center gap-1">
<svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
<span>2h 30m</span>
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
<span>5 Modules</span>
</div>
</div>
</div>
<!-- Card Footer with Action Button -->
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 flex justify-end">
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
Start Course
</button>
</div>
</div>
</div>Composants associés
Composant d’affichage du contenu
Un composant d’affichage de contenu réactif avec un style de design minimaliste et plat, idéal pour les blogs et la consommation de contenu. Il a une palette de couleurs en niveaux de gris et est équipé d’éléments interactifs tout en prenant en charge le mode sombre.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu simple et réactif avec un effet de glassmorphism, une prise en charge du thème sombre et une palette de couleurs complémentaire, adaptée aux blogs ou à la consommation de contenu.
Composant d’affichage du contenu
Composant d’affichage de contenu de style 3D présentant des travaux ou des produits de portefeuille avec une palette de couleurs en niveaux de gris et une conception réactive incluant la prise en charge du mode sombre.