From f145fbabc484042aa31cb9431c22dc8d26e5ed7e Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 3 Apr 2022 14:10:29 +0200
Subject: [PATCH] Add team sec

---
 content/_index.md                  |  5 +-
 templates/shortcodes/team_sec.html | 79 ++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 templates/shortcodes/team_sec.html

diff --git a/content/_index.md b/content/_index.md
index 35e664b..f9fa548 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -88,13 +88,10 @@ Zero-OS is a stateless and lightweight operating system designed to host anythin
 
 {% end %}
 
-{% row(style="center moderate") %}
 
+{% team_sec() %}
 ## **THE TEAM**
 
-<br>
-
-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.
 
 {% end %}
 
diff --git a/templates/shortcodes/team_sec.html b/templates/shortcodes/team_sec.html
new file mode 100644
index 0000000..8254c21
--- /dev/null
+++ b/templates/shortcodes/team_sec.html
@@ -0,0 +1,79 @@
+<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>
\ No newline at end of file