ArtDecoEducationalGrid
Un componente di layout a griglia complesso e reattivo per piattaforme educative, con motivi geometrici Art Déco e ricchi colori autunnali. Include il supporto per la modalità oscura e più elementi interattivi.
Codice HTML
<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>Componenti correlati
Componente del layout della griglia dello scheumorfismo
Componente di layout della griglia di scheumorfismo con effetti reattivi e supporto per temi scuri.
Griglia del cruscotto del neumorfismo
Componente dashboard del layout della griglia di neumorfismo con combinazione di colori complementari
Monospace/Developer - Componente di layout della griglia musicale/audio
Un componente di layout a griglia semplice e reattivo per piattaforme musicali/audio, progettato con un'estetica monospace/developer che utilizza neutri caldi. Include il supporto per la modalità oscura.