✨ feat: update index.html template for improved layout and accessibility
This commit is contained in:
@@ -39,6 +39,35 @@
|
|||||||
animation: textReveal 1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
|
animation: textReveal 1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Marker-Animation für den Text */
|
||||||
|
@keyframes markerAnimation {
|
||||||
|
0% { width: 0; opacity: 0; }
|
||||||
|
20% { width: 100%; opacity: 0.7; }
|
||||||
|
80% { width: 100%; opacity: 0.7; }
|
||||||
|
100% { width: 0; opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.marker-animation {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marker-animation::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 6px;
|
||||||
|
width: 0;
|
||||||
|
background: linear-gradient(to right, rgba(109, 40, 217, 0.3), rgba(139, 92, 246, 0.6), rgba(109, 40, 217, 0.3));
|
||||||
|
border-radius: 3px;
|
||||||
|
opacity: 0;
|
||||||
|
animation: markerAnimation 2.5s ease-in-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marker-animation-delay::after {
|
||||||
|
animation-delay: 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
.delay-1 { animation-delay: 0.2s; }
|
.delay-1 { animation-delay: 0.2s; }
|
||||||
.delay-2 { animation-delay: 0.4s; }
|
.delay-2 { animation-delay: 0.4s; }
|
||||||
.delay-3 { animation-delay: 0.6s; }
|
.delay-3 { animation-delay: 0.6s; }
|
||||||
@@ -131,16 +160,9 @@
|
|||||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
<div class="text-center mb-16">
|
<div class="text-center mb-16">
|
||||||
<h1 class="hero-heading mb-8 text-gray-900 dark:text-white">
|
<h1 class="hero-heading mb-8 text-gray-900 dark:text-white">
|
||||||
<div class="overflow-hidden">
|
<div class="overflow-hidden flex justify-center gap-6">
|
||||||
<span class="gradient-text inline-block text-reveal">Wissen</span>
|
<span class="relative inline-block text-reveal marker-animation">Wissen.</span>
|
||||||
</div>
|
<span class="relative inline-block text-reveal delay-1 marker-animation marker-animation-delay">Vernetzen.</span>
|
||||||
<div class="overflow-hidden mt-2">
|
|
||||||
<span class="inline-block text-reveal delay-1">neu</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-2 relative overflow-hidden">
|
|
||||||
<span class="relative inline-block text-reveal delay-2">vernetzen
|
|
||||||
<div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-purple-500/0 via-purple-500/70 to-purple-500/0 rounded-full"></div>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</h1>
|
</h1>
|
||||||
<div class="overflow-hidden">
|
<div class="overflow-hidden">
|
||||||
|
|||||||
Reference in New Issue
Block a user