update community

content/community/_index.md

@@ -26,6 +26,7 @@ We're a 100% open-source and community-driven project that builds the critical i
 <br>
 <br>
 
+
 <!-- section 3 (INTERNET) -->
 
 {% row(style="center narrow") %}
@@ -91,12 +92,42 @@ Join the growing community of ThreeFold’s most passionate supporters. Bring yo
 
 Check out the FAQs or ask a question on the ThreeFold Forum.
 
-<button>[ThreeFold FAQ](https://honf2dpejik.typeform.com/to/Hubtbirs)</button>
-<button>[Farm FAQ](https://honf2dpejik.typeform.com/to/Hubtbirs)</button>
-<button>[TFT FAQ](https://honf2dpejik.typeform.com/to/Hubtbirs)</button>
+<button>[ThreeFold FAQ](/faq)</button>
+<button>[Farm FAQ](/farmfaq)</button>
+<button>[TFT FAQ](/tftfaq)</button>
 
 {% end %}
 
+<br>
+<br>
+<!-- 
+  <div class="header section banner">
+      <div class="center">
+        <h1 class="text-8xl uppercase">
+          <strong>Join our Team</strong>
+        </h1>
+      </div>
+      <div
+        class="back"
+        style="background-image: url('/images//tf_people.jpg')"
+      ></div>
+    </div> -->
+    
+
+<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20">
+    <a href="/careers" class="section banner" >
+      <div class="center">
+        <h2 class="h1">
+          <strong>Join our Team</strong>
+        </h2>
+      </div>
+      <div class="back" style="background-image: url('/images//tf_people.jpg')"
+      ></div>
+    </a>
+</div>
+
+
+
 
 
 

css/index.css

@@ -174,3 +174,120 @@ header {
   -webkit-filter: grayscale(0%);
   filter: grayscale(0%);
 }
+
+
+.banner {
+  width: 100%;
+  margin: 0;
+  padding: 120px 0;
+  text-align: center;
+  position: relative;
+  display: block;
+  color: #fff !important;
+  letter-spacing: 0.5px;
+  overflow: hidden;
+  background: #00838d;
+  transition: 1.5s;
+}
+
+.header {
+  height: auto;
+  background: none;
+  padding: 200px 0;
+}
+
+.banner h2,
+.header h1 {
+  margin: auto;
+  color: #fff;
+  position: relative;
+  transition: 0.3s;
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.header h1 {
+  color: #000;
+  transition: none;
+}
+
+.banner h2 svg {
+  font-size: 40px;
+  margin-left: 15px;
+  position: absolute;
+  top: 55%;
+  transform: translateY(-50%) scale(0.5);
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.banner .back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-position: center;
+  background-size: cover;
+  filter: grayscale(1) contrast(1.4);
+  opacity: 0.25;
+  transition: 1.5s;
+}
+
+.header .back {
+  filter: none;
+  opacity: 1;
+  background-position: center;
+
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.banner:hover {
+  background: #4b3a92;
+}
+
+.header:hover {
+  background: none;
+}
+
+.banner:hover h2 svg {
+  transform: translateY(-50%) scale(1);
+  opacity: 1;
+}
+
+.banner:hover h2 {
+  padding-right: 40px;
+}
+
+.header:hover h1 {
+  padding-right: 0;
+}
+
+.banner:hover .back {
+  transform: scale(1.03);
+}
+
+.header:hover .back {
+  transform: none;
+}
+@media (max-width: 640px) {
+  .banner h2 {
+    font: 600 7vw/10vw;
+  }
+
+  .header h1 {
+    font-size: 35px;
+  }
+
+  .banner h2 svg {
+    font-size: 30px;
+  }
+}
+
+@media (max-width: 480px) {
+  .banner,
+  .header {
+    padding: 80px 0;
+  }
+}