Skeuomorphic_Autumn_Skip_to_Content_Link
Un composant de lien simple et skeuomorphe « Passer au contenu » conçu avec une palette de couleurs d’automne, adapté aux plateformes éducatives, offrant accessibilité et réactivité avec la prise en charge du mode sombre.
HTML Code
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:rounded-lg focus:px-6 focus:py-3 focus:text-lg focus:shadow-lg focus:outline-none focus:ring-4 focus:ring-offset-4 focus:ring-offset-orange-900 focus:ring-orange-800
bg-gradient-to-br from-amber-700 to-orange-900 text-amber-50 rounded-xl
border-t-2 border-l-2 border-r-4 border-b-4 border-amber-950
shadow-[inset_0_3px_5px_rgba(255,255,255,0.2),inset_0_-3px_5px_rgba(0,0,0,0.3),0_6px_10px_rgba(0,0,0,0.4)]
hover:from-amber-600 hover:to-orange-800
active:from-amber-800 active:to-orange-950 active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.3),inset_0_-3px_5px_rgba(255,255,255,0.2)]
transition-all duration-200 ease-out
dark:from-amber-950 dark:to-orange-900 dark:text-amber-200
dark:border-t-2 dark:border-l-2 dark:border-r-4 dark:border-b-4 dark:border-zinc-800
dark:shadow-[inset_0_3px_5px_rgba(0,0,0,0.3),inset_0_-3px_5px_rgba(255,255,255,0.1),0_6px_10px_rgba(0,0,0,0.7)]
dark:hover:from-amber-900 dark:hover:to-orange-800
dark:active:from-amber-950 dark:active:to-orange-950 dark:active:shadow-[inset_0_3px_5px_rgba(255,255,255,0.1),inset_0_-3px_5px_rgba(0,0,0,0.3)]
">Skip to Main Content</a>
<main id="main-content" class="p-8 bg-orange-50 dark:bg-zinc-900 min-h-screen text-zinc-900 dark:text-zinc-100 flex flex-col justify-center items-center font-sans">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-orange-900 dark:text-orange-200 drop-shadow-md text-center">
Welcome to Our Learning Platform
</h1>
<p class="text-xl md:text-2xl text-orange-800 dark:text-orange-300 mb-8 max-w-3xl text-center">
Explore a world of knowledge and expand your horizons. This is placeholder content for the main section of your educational platform.
</p>
<img src="https://picsum.photos/seed/learn/800/450" alt="Autumn leaves and books" class="rounded-2xl shadow-xl border-4 border-amber-800 dark:border-amber-700 max-w-full h-auto mb-10">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
<img src="https://picsum.photos/seed/course1/100/100" alt="Course thumbnail 1" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
<h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Course Title One</h3>
<p class="text-center text-orange-700 dark:text-orange-300">Dive deep into the fundamentals of web development.</p>
</div>
<div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
<img src="https://picsum.photos/seed/course2/100/100" alt="Course thumbnail 2" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
<h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Interactive Design</h3>
<p class="text-center text-orange-700 dark:text-orange-300">Learn to create engaging user experiences.</p>
</div>
<div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
<img src="https://picsum.photos/seed/course3/100/100" alt="Course thumbnail 3" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
<h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Data Science Basics</h3>
<p class="text-center text-orange-700 dark:text-orange-300">Uncover insights with powerful data analysis.</p>
</div>
</div>
</main>Composants associés
Aller au composant de lien de contenu
Un composant de lien neumorphique « Skip to Content » pour l’accessibilité dans les applications technologiques/SaaS, avec une palette de couleurs violet/violet et une réactivité totale avec prise en charge du mode sombre.
Aller au composant de lien de contenu
Composant Skip to Content Link conçu avec des éléments skeuomorphes ressemblant à un bouton physique. Le composant aura un schéma de couleurs pastel, une complexité modérée y compris des effets de survol et la prise en charge du thème sombre.
Aller au lien de contenu
Un composant de lien réactif « Skip to Content » stylisé avec Glassmorphism, mettant en œuvre un schéma de couleurs complémentaire, une complexité modérée et une prise en charge du mode sombre adapté aux sites Web d’entreprise. Ce composant est implémenté uniquement en HTML avec les classes CSS Tailwind, ne nécessitant aucun JavaScript.