ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finished all home

Browse Source
This commit is contained in:
Ehab Hassan
2025-06-02 12:25:41 +03:00
parent e52da1e474
commit 7b4c8d9ffd
12 changed files with 253 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
content/home/index.md
View File

@@ -9,7 +9,6 @@ extra:
<!-- section 1 (header) -->
{{ hero_text_center(
title="Built for Everyone by Everyone, Everywhere",
subtitle="Unleashing the Power of Decentralized Networks",
@@ -49,9 +48,11 @@ extra:
<br>
<dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-8 gap-y-4">
{{ right_content(
subtitle ="COMPUTE",
header="Bare Metal Operating System",
header="Bare Metal",
sub_header="Operating System",
description1="Zero OS, an efficient and secure operating system, runs directly on the hardware – enabling an autonomous cloud.",
description2="Can run any Web2, Web3, or AI workload at the edge of the Internet, with more scalability and reliability."
) }}
@@ -77,7 +78,7 @@ extra:
<!-- section 3 -->
<!-- section 3 (stats) -->
{{ grid_stats(
title_1="Powered by",
@@ -98,9 +99,9 @@ extra:
{{ center_text(
title="Anything That Runs on Linux Can Run on ThreeFold",
description="The new internet infrastructure can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities.",
button_text="",
button_link=""
description_1="The new internet infrastructure can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities.",
button_text_1="",
button_link_1=""
) }}
@@ -142,17 +143,13 @@ extra:
button_link_2="https://threefold.info/aibox/docs/"
) }}
</dl>
</div>
</div>
</div>
<!-- section 5 -->
<div class="container mx-auto lg:max-w-7xl lg:py-24 py-12 px-4 lg:px-0">
@@ -160,9 +157,8 @@ extra:
{{ left_text(
title="How it works",
description_1="At the base, nodes form the physical foundation—distributed computers that provide processing power, storage, and networking capabilities. These nodes work together to create a global, community-powered infrastructure.",
description_2="Regardless of technical expertise, anyone can deploy nodes from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process 'farming.'",
button_text="",
button_link=""
description_2="Regardless of technical expertise, anyone can deploy nodes from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process 'farming.'"
) }}
@@ -185,27 +181,125 @@ extra:
description="The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud."
) }}
</dl>
</div>
<div class="mt-6 flex items-center justify-center gap-x-6">
<a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
</div>
<div class="mt-6 lg:mt-10 flex items-center justify-center gap-x-6">
<a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Become a Farmer</a>
</div>
</div>
<!-- section 6 -->
{{ self_healing() }}
<div class="lg:py-24 py-12">
{{ center_text(
title="A Self-Healing Internet Infrastructure",
subtitle="Scalable globally, Green, Unbreakable & Secure",
description_1="",
image_src ="/images/selfhealing.png",
image_alt="selfhealin",
button_text_1="",
button_link_1=""
) }}
</div>
</div>
<!-- section 7 -->
{{ web4() }}
<div class="lg:py-24 py-12 text-center">
<!-- section 8 -->
# More Resilient, More Powerful, <br> More Diverse With You
{{ cta() }}
{{ center_text(
title="",
description_1="Unlike the corporate internet, where users are the product, in the new internet, participants are the owners and beneficiaries.",
description_2="By participating, you're not just using the technology, you're also helping to build a digital world that protects privacy, promotes fairness, and returns control to the people.",
button_text_1="Join ThreeFold",
button_link_1="/action",
button_text_2="",
button_link_2=""
) }}
</div>
</div>
<!-- section 8 (Faq) -->
<div class="lg:max-w-7xl container mx-auto lg:py-24 py-12">
## Frequently Asked Questions
<br>
{{ accordion(
id_accordion="accordion1"
question="Is this a separate new Internet?",
description="No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet."
) }}
{{ accordion(
id_accordion="accordion2"
question="Why do we need a new Internet?",
description="The Internet used to be a peer to peer network, but has become fragile and too centralized. There are so many problems with the current Internet, such as authenticity, privacy, security, and sustainability that we believe a fundamental new approach is needed."
) }}
{{ accordion(
id_accordion="accordion3"
question="How can I participate?",
description="You can participate by becoming a farmer, a user, a partner or by developing apps. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications, and many more."
) }}
{{ accordion(
id_accordion="accordion4"
question="How can I get V4 nodes?",
description="Our partners are selling V4 nodes with a new reward scheme and ready to grow to millions of nodes."
) }}
{{ accordion(
id_accordion="accordion5"
question="What can I do with the ThreeFold Grid?",
description="ThreeFold grid can be used to host any web2, web3 and future workload. For more details see our docs."
) }}
{{ accordion(
id_accordion="accordion6"
question="How secure and private is my data?",
description="ThreeFold is designed to be secure and private by default. We use end-to-end encryption to protect your data and ensure that only you have access to your data."
)
}}
{{ accordion(
id_accordion="accordion7"
question="Who should use the ThreeFold Grid ?",
description="Individuals, businesses, and organizations who want to be autonomous and have full control over their data and applications. Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. We are building a channel of solution providers and integrators who want to build on top of ThreeFold."
)
}}
</div>
<!-- section 9 Cta -->
{{ cta(
title_1="Build the",
title_2="Internet of Tomorrow,",
title_3="Today",
button_text_1="Take the Next Step",
button_link_1="/signup",
button_text_2="Learn More",
button_link_2="/action"
) }}

2
css/index.css
View File

@@ -287,7 +287,7 @@ a img:hover {
}
p {
@apply text-lg text-gray-200 font-light;
@apply text-pretty lg:text-xl text-lg font-light text-gray-200;
font-family: "Inter", sans-serif !important;
}

41
templates/shortcodes/accordion.html Normal file
View File

@@ -0,0 +1,41 @@
<div class="rounded-lg overflow-hidden my-2 border border-gray-500">
<input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
<label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">
<span class="text-lg font-medium text-white">{{ question }}</span>
<svg class="w-6 h-6 text-white transition-transform peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
<div class="p-4">
{% if description %}
<p class="text-lg">{{ description }} </p>
{% endif %}
</div>
</div>
</div>
<style>
.accordion:hover {
background-color: rgb(255 255 255 / 5%) !important;
}
</style>

84
templates/shortcodes/center_text.html
View File

@@ -1,16 +1,76 @@
{% set title = title | default(value="Built") %}
{% set description = description | default(value="") %}
{% set button_text = button_text | default(value="") %}
{% set button_link = button_link | default(value="") %}
{% set title = title | default(value="") %}
{% set subtitle = subtitle | default(value="") %}
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}
{% set description_1 = description_1 | default(value="") %}
{% set description_2 = description_2 | default(value="") %}
{% set button_text_1 = button_text_1 | default(value="") %}
{% set button_link_1 = button_link_1 | default(value="") %}
{% set button_text_2 = button_text_2 | default(value="") %}
{% set button_link_2 = button_link_2 | default(value="") %}
<div class="text-center mx-auto max-w-7xl px-4 lg:px-8">
<div class="text-center mx-auto lg:max-w-7xl px-4 lg:px-8">
<div class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
<h2 class="mx-auto fade-in">{{ title}}</h2>
<p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
{{ description }}
</p>
{% if button_link %}
<a href="{{ button_link }}" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">{{ button_text }} <span aria-hidden="true">→</span></a>
<h2 class="mx-auto fade-in">{{ title }}</h2>
{% if subtitle %}
<h3 class="fade-in mt-2">{{ subtitle }}</h3>
{% endif %}
</div>
<p class="my-4 mx-auto max-w-3xl fade-in">
{{ description_1 }}
</p>
<p class="my-2 mx-auto max-w-3xl fade-in">
{{ description_2 }}
</p>
{% if image_src %}
<div class="fade-in relative -mx-4 my-8" aria-hidden="true">
<img class="fade-in blinking-effect relative mx-auto" src="{{ image_src }}" alt="{{ image_alt }}">
</div>
{% endif %}
<div class="lg:mt-4 flex items-center justify-center gap-x-6">
{% if button_link_1 %}
<a href="{{ button_link_1 }}" class="fade-in rounded-2xl bg-white lg:my-6 my-4 px-4 py-2 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">{{ button_text_1 }}</a>
{% endif %}
{% if button_link_2 %}
<a href="{{ button_link_2 }}" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">{{ button_text_2 }} <span aria-hidden="true">→</span></a>
{% endif %}
</div>
</div>
<style>
/* Define the fade-in 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 */
}
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
</style>

18
templates/shortcodes/cta.html
View File

@@ -1,13 +1,21 @@
{% set title_1 = title_1 | default(value="Built") %}
{% set title_2 = title_2 | default(value="") %}
{% set title_3 = title_3 | default(value="") %}
{% set button_text_1 = button_text_1 | default(value="") %}
{% set button_link_1 = button_link_1 | default(value="") %}
{% set button_text_2 = button_text_2 | default(value="") %}
{% set button_link_2 = button_link_2 | default(value="") %}
<div class="bg-transparent pt-12 pb-12">
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
<h2 class="lg:text-balance max-w-xl leading-tight text-left items-start font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
Build the <br>Internet of Tomorrow,<br> Today
<h2 class="lg:text-balance max-w-xl leading-tight items-start fade-in">
{{ title_1 }} <br>{{ title_2 }}<br> {{ title_3 }}
</h2>
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
<a href="/signup" target="_blank" class="blinking-effect rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Take the Next Step
<a href="{{ button_link_1 }}" target="_blank" class="blinking-effect rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
{{ button_text_1 }}
</a>
<a href="/action" class="fade-in text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
<a href="{{ button_link_2 }}" class="fade-in text-sm/6 font-semibold text-white">{{ button_text_2 }}<span aria-hidden="true">→</span></a>
</div>
</div>
</div>

2
templates/shortcodes/farm_steps.html
View File

@@ -10,7 +10,7 @@
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<div class="fade-in-box flex flex-col p-8 rounded-2xl mb-6 bg-white/5">
<img class="fade-in blinking-effect relative mx-auto mb-4" width="30%" src="{{ image_src }}" alt="{{ image_alt }}">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
{{ title }}

85
templates/shortcodes/farmers.html
View File

@@ -1,85 +0,0 @@
<div class="bg-transparent lg:py-24 py-12">
<div class="mx-auto max-w-7xl px-4 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white capitalize">How it works</h2>
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
At the base, nodes form the physical foundation—distributed computers that provide processing power, storage, and networking capabilities. These nodes work together to create a global, community-powered infrastructure.
</p>
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
Regardless of technical expertise, anyone can deploy nodes from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
</p>
</div>
<section class="bg-transparent">
<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
<div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
1. HOST A NODE
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
<p class="mt-6">
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
2. OFFER CAPACITY
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud.</p>
<p class="mt-6">
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
3. EARN REWARDS
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
</p>
<p class="mt-6">
</p>
</dd>
</div>
</div>
<div class="mt-6 flex items-center justify-center gap-x-6">
<a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
</div>
</div>
</dl>
</div>
</div>
</section>
<style>
/* Fade-in animation for the grid items */
.fade-in-box {
opacity: 0;
animation: fadeIn 0.6s ease-in-out forwards;
}
/* Fading in each grid item with a slight delay */
.fade-in-box:nth-child(1) { animation-delay: 0s; }
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
.fade-in-box:nth-child(6) { animation-delay: 1s; }
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
.fade-in-box:nth-child(11) { animation-delay: 2s; }
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>

4
templates/shortcodes/grid_stats.html
View File

@@ -14,8 +14,8 @@
<div class="text-center">
<h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white ">{{ title_1 }}
<br>{{ title_2 }}</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description_1 }}</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description_2 }}</p>
<p class="mx-auto mt-6 max-w-3xl fade-in">{{ description_1 }}</p>
<p class="mx-auto mt-6 max-w-3xl fade-in">{{ description_2 }}</p>
</div>
<dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<!-- ssd -->

4
templates/shortcodes/hero_text_center.html
View File

@@ -15,11 +15,11 @@
<div class="mx-auto max-w-3xl text-center">
<h1 class="fade-in">
{{ title }}</h1>
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description }}</p>
<p class="mx-auto mt-8 max-w-3xl fade-in">{{ description }}</p>
<!-- <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> -->
<br>
<div class="mt-6 flex items-center justify-center gap-x-8">
<div class="mt-6 flex lg:flex-row flex-col items-center justify-center gap-x-8 gap-y-8">
{% if button1_link %}
<a href="{{ button1_link }}"
class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">{{ button1_text }}</a>

8
templates/shortcodes/left_text.html
View File

@@ -4,16 +4,12 @@
{% set button_text = button_text | default(value="") %}
{% set button_link = button_link | default(value="") %}
<div class="max-w-3xl lg:px-16 px-0 lg:pb-12 pb-6">
<h2 class="fade-in text-balance lg:text-5xl text-3xl leading-tight font-normal tracking-tight text-white">{{ title }}
</h2>
<p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description_1 }}</p>
<p class="mx-auto mt-6 mb-6 max-w-3xl fade-in">{{ description_1 }}</p>
<p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description_2 }}</p>
<p class="mx-auto mt-6 mb-2 max-w-3xl fade-in">{{ description_2 }}</p>
{% if button_link %}

2
templates/shortcodes/right_content.html
View File

@@ -1,5 +1,6 @@
{% set subtitle = subtitle | default(value="") %}
{% set header = header | default(value="") %}
{% set sub_header = sub_header | default(value="") %}
{% set description1 = description1 | default(value="") %}
{% set description2 = description2 | default(value="") %}
@@ -7,6 +8,7 @@
<div class="pt-0">
<dt class="font-normal text-sm text-gray-200">{{ subtitle }}</dt>
<dt class="mt-1 font-semibold text-base text-gray-200">{{ header }} </dt>
<dt class="mt-1 font-semibold text-base text-gray-200">{{ sub_header }} </dt>
</div>
<div class="pt-0">
<dd class="font-light text-gray-300 text-sm mb-2">{{ description1 }} </dd>

55
templates/shortcodes/self_healing.html
View File

@@ -1,55 +0,0 @@
<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
<div class="mx-auto max-w-7xl px-4 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center">
<h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white capitalize">A Self-Healing Internet Infrastructure</h2>
<br>
<h2 class="fade-in text-balance lg:text-4xl text-xl font-normal tracking-tight text-white capitalize">Scalable globally, Green, Unbreakable & Secure</h2>
<div class="fade-in relative -mx-4 my-8" aria-hidden="true">
<img class="fade-in blinking-effect relative mx-auto" src="/images/selfhealing.png" alt="">
</div>
{# <div class="mt-16 fade-in flex items-center justify-center gap-x-6">
<a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Be Part of Web4</a>
</div> #}
</div>
</div>
</div>
</div>
<style>
/* Define the fade-in 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 */
}
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
</style>