ArtDecoEducationalGrid
Un composant de mise en page de grille complexe et réactif pour les plateformes éducatives, stylisé avec des motifs géométriques Art déco et de riches couleurs d’automne. Comprend la prise en charge du mode sombre et plusieurs éléments interactifs.
HTML Code
<div class="p-4 sm:p-8 bg-zinc-100 dark:bg-zinc-900 font-serif text-zinc-900 dark:text-zinc-50 min-h-screen">
<div class="max-w-7xl mx-auto space-y-12">
<!-- Header Section -->
<header class="text-center space-y-4 pt-8 pb-12 rounded-xl border-4 border-amber-600 dark:border-amber-400 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-zinc-800 dark:to-zinc-800/50 shadow-lg dark:shadow-xl shadow-amber-300/30 dark:shadow-amber-900/50 relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/art-deco.png')] opacity-20 dark:opacity-10 pointer-events-none"></div>
<h1 class="relative z-10 text-5xl sm:text-6xl font-extrabold text-amber-900 uppercase tracking-widest leading-tight drop-shadow-lg dark:text-amber-300">
The Grand Hall of Knowledge
</h1>
<p class="relative z-10 text-xl sm:text-2xl font-light text-amber-800 dark:text-amber-200 mt-4">
Explore the Foundations of Thought and Creativity
</p>
<div class="relative z-10 mt-8">
<button class="px-8 py-4 bg-amber-700 hover:bg-amber-800 text-white font-bold text-lg rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:bg-amber-500 dark:hover:bg-amber-600 dark:focus:ring-amber-400/50">
Start Your Journey
</button>
</div>
</header>
<!-- Main Content Grid -->
<main class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Featured Course Card -->
<section class="md:col-span-2 bg-gradient-to-br from-red-800 to-red-900 dark:from-red-900 dark:to-red-950 p-6 sm:p-8 rounded-xl shadow-2xl border-4 border-amber-500 dark:border-amber-400 relative overflow-hidden group">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/argyle.png')] opacity-10 dark:opacity-5 pointer-events-none"></div>
<div class="relative z-10 flex flex-col sm:flex-row gap-6 items-center">
<img src="https://picsum.photos/seed/course1/400/300" alt="Featured Course" class="w-full sm:w-2/5 md:w-1/2 lg:w-2/5 aspect-video object-cover rounded-lg border-2 border-amber-300 shadow-md transform group-hover:scale-102 transition duration-300">
<div class="flex-1 text-white">
<h2 class="text-4xl font-bold mb-3 text-amber-200 leading-tight drop-shadow-md">Mastering Art Deco Design Principles</h2>
<p class="text-lg text-amber-100 mb-4 line-clamp-3">Dive deep into the golden age of Art Deco, exploring its iconic geometric forms, opulent materials, and timeless elegance.</p>
<ul class="text-amber-50 text-sm space-y-1 mb-4">
<li><strong class="text-amber-200">Lectures:</strong> 12</li>
<li><strong class="text-amber-200">Duration:</strong> 18 Hours</li>
<li><strong class="text-amber-200">Instructor:</strong> Dr. Eleanor Vance</li>
</ul>
<a href="#" class="inline-block px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white font-semibold rounded-full shadow-lg transition duration-300 ease-in-out transform hover:translate-y-1 focus:outline-none focus:ring-4 focus:ring-amber-300/50 dark:bg-amber-500 dark:hover:bg-amber-600 dark:focus:ring-amber-400/50">
Enroll Now
</a>
</div>
</div>
</section>
<!-- Quick Links / Navigation -->
<nav class="bg-zinc-200 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/crissxcross.png')] opacity-20 dark:opacity-10"></div>
<h2 class="relative z-10 text-3xl font-bold text-amber-900 dark:text-amber-300 mb-6 text-center">Quick Access</h2>
<ul class="relative z-10 space-y-4">
<li>
<a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
<svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
<span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Browse Courses</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
<svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zm-4 4a2 2 0 100 4 2 2 0 000-4zm-8-2a2 2 0 11-4 0 2 2 0 014 0zM7 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
<span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Meet Instructors</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
<svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6a2 2 0 00-2-2H5a2 2 0 00-2 2v13a2 2 0 002 2h4m2 0h4a2 2 0 002-2V6a2 2 0 00-2-2h-4m0 16V6"></path></svg>
<span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">My Dashboard</span>
</a>
</li>
</ul>
</nav>
<!-- Latest Articles Section -->
<section class="md:col-span-3 bg-zinc-50 dark:bg-zinc-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-600 dark:border-400">
<h2 class="text-3xl font-bold text-amber-900 dark:text-amber-300 mb-6 text-center">Latest Insights from Our Scholars</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Article Card 1 -->
<article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
<img src="https://picsum.photos/seed/article1/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
<div class="p-5">
<h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">The Geometry of Gotham: Art Deco Skyscrapers</h3>
<p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">Explore the architectural marvels that defined a city, from the Chrysler Building to the Empire State Building.</p>
<div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
<span>By Jane Doe - <time datetime="2023-10-26">Oct 26, 2023</time></span>
</div>
<a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
Read More <span aria-hidden="true">→</span>
</a>
</div>
</article>
<!-- Article Card 2 -->
<article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
<img src="https://picsum.photos/seed/article2/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
<div class="p-5">
<h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">Autumnal Palettes in Historical Art: A Study</h3>
<p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">Discover how masters throughout history captured the vibrant and melancholic beauty of autumn.</p>
<div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
<span>By John Smith - <time datetime="2023-10-20">Oct 20, 2023</time></span>
</div>
<a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
Read More <span aria-hidden="true">→</span>
</a>
</div>
</article>
<!-- Article Card 3 -->
<article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
<img src="https://picsum.photos/seed/article3/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
<div class="p-5">
<h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">The Resurgence of Craftsmanship in the Digital Age</h3>
<p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">An exploration into how traditional skills are finding new relevance and expression today.</p>
<div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
<span>By Emily White - <time datetime="2023-10-15">Oct 15, 2023</time></span>
</div>
<a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
Read More <span aria-hidden="true">→</span>
</a>
</div>
</article>
</div>
</section>
<!-- Testimonial / Quote Section -->
<section class="md:col-span-2 bg-gradient-to-br from-orange-200 to-orange-300 dark:from-orange-950 dark:to-orange-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] opacity-20 dark:opacity-5 pointer-events-none"></div>
<blockquote class="relative z-10 text-center">
<p class="text-3xl font-light italic text-orange-950 dark:text-orange-100 mb-6 drop-shadow-sm leading-relaxed">
"This platform is a true masterpiece – a seamless blend of historical elegance and cutting-edge education. My learning journey has been endlessly enriched."
</p>
<footer class="text-lg font-bold text-orange-900 dark:text-orange-200 flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Student Avatar" class="w-16 h-16 rounded-full mb-3 border-4 border-orange-500 dark:border-orange-400 shadow-md">
<span>Alexander Vance, <span class="font-normal">Alumni</span></span>
</footer>
</blockquote>
</section>
<!-- Call to Action / Newsletter -->
<aside class="bg-red-700 dark:bg-red-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-500 dark:border-amber-400 relative overflow-hidden flex flex-col justify-between">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/pyramid.png')] opacity-10 dark:opacity-5"></div>
<h2 class="relative z-10 text-3xl font-bold text-white dark:text-amber-200 mb-4 text-center">Join Our Guild</h2>
<p class="relative z-10 text-white text-center mb-6">
Get the latest course updates, exclusive insights, and special offers delivered to your inbox.
</p>
<form class="relative z-10 flex flex-col gap-4">
<input type="email" placeholder="Your email address" class="w-full p-4 rounded-lg bg-red-800/70 dark:bg-red-950/70 text-white placeholder-red-200 dark:placeholder-red-300 border-2 border-red-900 dark:border-red-800 focus:outline-none focus:ring-2 focus:ring-amber-300 focus:border-amber-300">
<button type="submit" class="w-full px-6 py-4 bg-amber-500 hover:bg-amber-600 dark:bg-amber-400 dark:hover:bg-amber-500 text-red-900 font-bold rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300/50">
Subscribe Now
</button>
</form>
</aside>
</main>
<!-- Decorative Footer -->
<footer class="text-center pt-12 pb-8 text-zinc-700 dark:text-zinc-400 border-t-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/shattered.png')] opacity-10 dark:opacity-5"></div>
<p class="relative z-10 text-lg">
© 2023 Grand Hall of Knowledge. All rights reserved.
</p>
</footer>
</div>
</div>Composants associés
Composant de disposition de grille - Finance/Banque
Un composant de mise en page de grille réactif pour les applications financières/bancaires, doté d’une esthétique matérielle épurée avec des neutres chauds et une prise en charge du mode sombre.
FinancialGridWithInteractions
Un composant de mise en page de grille réactif pour les interfaces financières/bancaires, avec des couleurs à contraste élevé et des micro-interactions subtiles au survol. Prend en charge le mode sombre et est conçu pour une complexité modérée.
Watercolor_Artistic_Grid_Layout_Consulting
Un composant de mise en page de grille simple et réactif pour le conseil/les services, avec un design aquarelle/artistique doux avec des neutres froids et la prise en charge du mode sombre.