forked from hero/www_hero_project
79 lines
2.5 KiB
HTML
79 lines
2.5 KiB
HTML
|
<div class="lg:my-32 flex flex-col mt-5 p-auto lg:px-40">
|
|||
|
|
<h2 class="flex py-2 mx-auto uppercase font-bold lg:text-6xl">
|
|||
|
|
THE TEAM
|
|||
|
|
</h2>
|
|||
|
|
<div class="lg:max-w-4xl text-xl 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="https://threefold.io/people/adnan_fatayerji/" title="Adnan Fatayerji">
|
|||
|
|
<img src="https://threefold.io/assets/static/adnan_fatayerji.a68c322.7ba2b95e75c9fab15be532f16ac0d644.jpg"
|
|||
|
|
class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji" />
|
|||
|
|
</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: 150px;
|
|||
|
|
width: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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: 130px;
|
|||
|
|
width: 130px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box img:hover {
|
|||
|
|
filter: grayscale(0);
|
|||
|
|
}
|
|||
|
|
</style>
|