92 lines
2.8 KiB
HTML
92 lines
2.8 KiB
HTML
<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 we’re 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>
|
||
<a href="/action" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Pre-register Now</a>
|
||
</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>
|