Files
www_threefold_io/templates/partials/action/action.html
2024-12-04 11:23:07 -05:00

91 lines
2.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<div class="relative isolate overflow-hidden bg-transparent text-white pt-12 pb-24">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="relative grid lg:grid-cols-12 lg:gap-8">
<!-- Left Content -->
<div class="lg:col-span-7">
<div class="mx-auto max-w-2xl lg:mx-0">
<h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">When 3 Becomes 4</h1>
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br>
Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br>
For over a decade, ThreeFold has been dedicated to realize this vision, and were excited to announce
our next steps on <span class="font-semibold">December 12, 2024. </span>
</p>
</div>
</div>
<!-- Right Blockquote -->
<div class="lg:col-span-5">
<figure class=" mt-6 pl-8">
<blockquote class=" text-2xl text-white fade-in font-semibold ">
<p class="lg:text-2xl text-xl leading-normal text-white font-semibold">We believe actions are more important than words. <br><br>
This page is in black & white, to let YOU be the <span style="color: red;">color</span> of the future of the internet.
</p>
</blockquote>
<br>
</figure>
</div>
</div>
</div>
</div>
<style>
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
blockquote {
border-left-width: 2px;
padding-left: 1rem;
}
.blockquote::before {
content: open-quote;
font-size: 4rem;
position: absolute;
top: -1rem;
left: -1rem;
color: #ffffff;
}
.inline-flex {
display: flex;
align-items: center;
}
.items-center {
justify-content: center;
}
.gap-2 {
gap: 0.5rem; /* Adjust the gap size as needed */
}
</style>