405 lines
14 KiB
HTML
405 lines
14 KiB
HTML
<div class="lg:py-24 flex flex-col my-6 p-auto lg:px-20">
|
||
<h2 class="flex py-2 mx-auto font-normal lg:text-6xl">
|
||
The Team
|
||
</h2>
|
||
<div class="lg:max-w-4xl lg:text-xl text-lg text-center mb-8 mx-auto leading-relaxed">
|
||
Spread across the world, our team has
|
||
built some of the world’s best Internet storage and cloud automation technologies since the ‘90s. With a strong
|
||
vision for the future, we’re now on a mission to create a peer-to-peer Internet that can host all of humanity’s
|
||
digital workloads via smart contract, removing all forms of centralization from global IT systems.
|
||
</div>
|
||
<div class="flex overflow-x-scroll pb-10 scrollable">
|
||
<div class="flex flex-nowrap ml-10 mt-10">
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/kristof-de-spiegeleer/" title="Kristof De Spiegeleer">
|
||
<img src="/images/people/kristof_de_spiegeleer.jpeg" class="rounded-full mx-auto mt-3" alt="Kristof De Spiegeleer">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/adnan-fatayerji/" title="Adnan Fatayerji">
|
||
<img src="/images/people/adnan_fatayerji.jpg" class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/sabrina-sadik/" title="Sabrina Sadik">
|
||
<img src="/images/people/sabrina_sadik.jpg" class="rounded-full mx-auto mt-3" alt="Sabrina Sadik">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/sacha-obeegadoo/" title="Sacha obeegadoo">
|
||
<img src="/images/people/sacha_obeegadoo.jpg" class="rounded-full mx-auto mt-3" alt="Sacha obeegadoo">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/jan-de-landtsheer/" title="Jan De Landtsheer">
|
||
<img src="/images/people/jan_de_landtsheer.jpeg" class="rounded-full mx-auto mt-3" alt="Jan De Landtsheer">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/reem-khamis/" title="Reem Khamis">
|
||
<img src="/images/people/reem_khamis.jpg" class="rounded-full mx-auto mt-3" alt="Reem Khamis">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/ahmed-thabet/" title="Ahmed Thabet">
|
||
<img src="/images/people/ahmed_thabet.jpg" class="rounded-full mx-auto mt-3" alt="Ahmed Thabet">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/florian-fournier/" title="Florian Fournier">
|
||
<img src="/images/people/florian_fournier.jpeg" class="rounded-full mx-auto mt-3" alt="Florian Fournier">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/ewald-weizenbauer/" title="Ewald Weizenbauer">
|
||
<img src="/images/people/ewald_weizenbauer.jpg" class="rounded-full mx-auto mt-3" alt="Ewald Weizenbauer">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/owen-kemp/" title="Owen Kemp">
|
||
<img src="/images/people/owen_kemp.jpeg" class="rounded-full mx-auto mt-3" alt="Owen Kemp">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/peter-van-der-henst/" title="Peter van der Henst">
|
||
<img src="/images/people/peter_van_der_henst.png" class="rounded-full mx-auto mt-3" alt="Peter van der Henst">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/alexandre-hannelas/" title="alexandre_hannelas">
|
||
<img src="/images/people/alexandre_hannelas.jpeg" class="rounded-full mx-auto mt-3" alt="alexandre_hannelas">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/karoline-zizka/" title="Karoline Zizka">
|
||
<img src="/images/people/karoline_zizka.jpeg" class="rounded-full mx-auto mt-3" alt="Karoline Zizka">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/lee-smet/" title="Lee Smet">
|
||
<img src="/images/people/lee_smet.png" class="rounded-full mx-auto mt-3" alt="Lee Smet">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/maxime-daniel/" title="Maxime Daniel">
|
||
<img src="/images/people/maxime_daniel.png" class="rounded-full mx-auto mt-3" alt="Maxime Daniel">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/pierre-van-hoorebeke/" title="Pierre van Hoorebeke">
|
||
<img src="/images/people/pierre_van_hoorebeke.jpg" class="rounded-full mx-auto mt-3" alt="Pierre van Hoorebeke">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/sam-taggart/" title="Sam Taggart">
|
||
<img src="/images/people/sam_taggart.jpg" class="rounded-full mx-auto mt-3" alt="Sam Taggart">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/scott-yeager/" title="Scott Yeager">
|
||
<img src="/images/people/scott_yeager.jpg" class="rounded-full mx-auto mt-3" alt="Scott Yeager">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{#
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/gloria-anne/" title="Gloria Anne">
|
||
<img src="images/people/gloria_anne.png" class="rounded-full mx-auto mt-3" alt="Gloria Anne">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
#}
|
||
<div class="inline-block px-3">
|
||
<div class="
|
||
box
|
||
max-w-xs
|
||
overflow-hidden
|
||
rounded-full
|
||
shadow-md
|
||
hover:shadow-xl
|
||
transition-shadow
|
||
duration-300
|
||
ease-in-out
|
||
">
|
||
<a href="/people/sasha-astiadi/" title="Sasha Astiadi">
|
||
<img src="/images/people/sasha_astiadi.png" class="rounded-full mx-auto mt-3" alt="Sasha Astiadi">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.scrollable::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
.scrollable::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.scrollable::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(45deg, #70dfc9, #ee7bf7);
|
||
border-radius: 20px;
|
||
}
|
||
|
||
/* #70dfc9, #ee7bf7 */
|
||
.box {
|
||
position: relative;
|
||
height: 130px;
|
||
width: 130px;
|
||
}
|
||
|
||
.box::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-radius: 50%;
|
||
padding: 10px;
|
||
background: linear-gradient(45deg, #70dfc9, #ee7bf7);
|
||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||
-webkit-mask-composite: destination-out;
|
||
mask-composite: exclude;
|
||
}
|
||
|
||
.box img {
|
||
filter: grayscale(100%);
|
||
height: 110px;
|
||
width: 110px;
|
||
}
|
||
|
||
.box img:hover {
|
||
filter: grayscale(0);
|
||
}
|
||
</style>
|