85 lines
4.3 KiB
HTML
85 lines
4.3 KiB
HTML
<div class="bg-transparent">
|
|
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
|
|
<div class="max-w-3xl px-0 lg:px-16 lg:pb-10 pb-4">
|
|
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
|
|
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black sm:text-5xl">This is Feature4.html
|
|
</h2>
|
|
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
|
<p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
|
|
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
|
|
Get started
|
|
</a>
|
|
</div>
|
|
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
|
|
<dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-6">
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">✓ Communicate securely</dt>
|
|
<dd class="mt-1 font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
|
</div>
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">✓ Store effortlessly</dt>
|
|
<dd class="mt-1 ont-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
|
</div>
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">✓ Restore authenticity</dt>
|
|
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
|
</div>
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">✓ Unlockinsights</dt>
|
|
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
|
</div>
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">✓ Streamline interactions</dt>
|
|
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
|
</div>
|
|
<div class="">
|
|
<dt class="font-medium text-gray-200">✓ digital presence</dt>
|
|
<dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Define the slow blinking animation */
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
|
.fade-in {
|
|
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
|
}
|
|
|
|
/* Optional: Delay the animation for a more staggered effect */
|
|
h2 {
|
|
animation-delay: 0.5s; /* Delay for header */
|
|
}
|
|
|
|
p {
|
|
animation-delay: 1s; /* Delay for paragraphs */
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Apply the blinking animation to the link */
|
|
.blinking-effect {
|
|
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
|
|
}
|
|
</style> |