Files
www_threefold_io/templates/shortcodes/grid_stats.html
2024-02-12 20:26:14 +03:00

81 lines
3.2 KiB
HTML

{% set styles = "background-image: url('images/V3.png');" %}
<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
<div class="relative lg:max-w-6xl mx-auto">
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
{{body | markdown | safe }}
<div class="my-10 grid lg:grid-cols-4 lg:gap-8">
<!-- capacity -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img
class="mx-auto p-4"
src="images/V3-08.png"
width="150"
alt=""
>
<div id="capacity" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">capacity</span>
</div>
<!-- Nodes -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img
class="mx-auto p-4"
src="images/V3-09.png"
width="150"
alt=""
>
<div id="nodes" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">nodes</span>
</div>
<!-- countries -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img
class="mx-auto p-4"
src="images/V3-10.png"
width="150"
alt=""
>
<div id="countries" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">countries</span>
</div>
<!-- cores -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img
class="mx-auto p-4"
src="images/V3-11.png"
width="150"
alt=""
>
<div id="cores" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">cores</span>
</div>
</div>
<button class="my-8">
<a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">
Explore ThreeFold Grid Capacity
</a>
</button>
<button class="my-8">
<a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">
Expand the grid
</a>
</button>
</div>
</div>
</section>
<style>
dd {
display: inline-block;
margin: auto;
border-radius: 50%;
line-height: 100px;
}
.bg-green {
background-color: #70dfc9;
}
.bg-pink {
background-color: #ea1ff7;
}
</style>