finished deploy page

content/deploy/index.md

@@ -0,0 +1,276 @@
+---
+title: "Deploy"
+description: "About a decade ago, a group of passionate Internet & Cloud veterans came together to build a system." # quotation marks to allow colons where used
+template: "page.html"
+insert_anchor_links: "left"
+extra:
+  author: Your name here
+  imgPath: about/deploy_hero.png
+---
+
+<!-- section 1 (header) -->
+<div class="container mx-auto">
+
+{% row(style="header") %} 
+
+![Image](deploy_hero.png#mx-auto)
+
+|||
+
+### **<span class="blue">Build Your Own Digital Experiences</span>**
+
+## **Deploy On The Grid**
+
+ThreeFold has developed extensive technology and tools for <span class="blue">developers</span> and system <span class="blue">administrators.</span>
+
+<br>
+
+From decentralized cloud computing and blockchain integration to overseeing infrastructures and optimizing performance, there is a breadth of options for smooth and efficient operations.
+
+<button class="green">[Developer Documentation](https://www.manual.grid.tf/documentation/developers/developers.html)</button> 
+<button class="blue_b">[Sysadmin Documentation](https://www.manual.grid.tf/documentation/system_administrators/system_administrators.html)</button>
+
+
+{% end %}
+
+</div>
+
+
+
+<!-- section 2 Key Features -->
+
+
+<div style="background-color:#F6F6F6">
+
+<div class="container mx-auto">
+
+
+{% row( style="center mtop semiNarrow") %}
+
+#### <span class="green_text">Deploy With ThreeFold</span>
+
+<br>
+
+## **Key Features**
+
+{% end %}
+
+{% row( style="center semiNarrow") %}
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
+
+
+**<span class="blue mb-2">Anything LINUX can run on the Grid</span>**
+
+
+<p class="text-base">Anything that runs on Linux can run on ThreeFold's innovative operating system, guaranteeing compatibility and flexibility.</p>
+
+
+</div>
+
+|||
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue mb-2">VIRTUAL MACHINES & GATEWAY TECHNOLOGY</span>**
+
+
+<p class="text-base">ThreeFold’s gateway tech allows any node on the grid to obtain a FQDN, secure mesh network traffic, and synced configurations. Coupled with our VMs, the possibilities are endless.</p>
+
+
+</div>
+
+|||
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue mb-2">ONE-CLICK SOLUTION FOR WORKLOADS</span>**
+
+
+<p class="text-base">The Grid offers ready-community solutions to deploy industry-grade workloads in one click. You can also build your own solutions thanks to the open-source nature of the grid.</p>
+
+</div>
+
+{% end %}
+
+
+{% row( style="center semiNarrow") %}
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
+
+
+**<span class="blue mb-2">OPEN SOURCE LOW LEVEL OPERATING SYSTEM</span>**
+
+
+<p class="text-base">Enables anyone to become a cloud provider. This operating system supports all required Web2 and Web3 workloads.</p>
+
+
+</div>
+
+|||
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue mb-2">PEER TO PEER MESH NETWORK</span>**
+
+
+<p class="text-base">The only overlay network which considers locality: routing decisions are based on peer proximity. Offers privacy and redundancy that are currently not possible elsewhere.</p>
+
+
+</div>
+
+|||
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue mb-2">QUANTUM SAFE STORAGE SYSTEM</span>**
+
+
+<p class="text-base">QSSS is capable of storing data in ways that are indestructible, efficient, and ultra-scalable. Storage algorithms fragment and disperse files over multiple nodes.</p>
+
+
+</div>
+
+
+{% end %}
+
+
+{% row( style="center semiNarrow") %}
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
+
+
+**<span class="blue mb-2">TOOLS AVAILABLE  FOR SYSADMINS</span>**
+
+
+<p class="text-base">Deploy your own workload architectures with tools such as Terraform, Pulumi and Kubernetes.</p>
+
+
+</div>
+
+|||
+
+
+
+
+|||
+
+<div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
+
+
+**<span class="blue mb-2">AI AND MACHINE LEARNING WORKLOADS WITH GPU</span>**
+
+
+<p class="text-base">The grid supports GPU nodes enabling artificial intelligence and machine learning workloads within minutes.</p>
+
+
+</div>
+
+{% end %}
+
+<br>
+
+
+
+{% row( style="center mbottom semiNarrow") %}
+
+<button class="green">[Dive Deeper](https://manual.grid.tf/documentation/developers/developers.html)</button>
+
+{% end %}
+
+</div>
+
+</div>
+
+
+
+
+<!-- section 3 applications  -->
+
+<div class="container mx-auto">
+
+{% row( style="narrow margin") %}
+
+## **Ready Community Applications**
+
+#### **Easily <span class="blue">deploy</span> your favourite applications on the ThreeFold Grid with a <span class="blue">click of a button</span>**
+
+<br>
+
+![Image](application.png)
+
+<br>
+
+<button class="green">[Learn More](https://manual.grid.tf/documentation/dashboard/deploy/applications.html?highlight=ready#)</button> 
+<button class="blue_b">[Deploy Now](https://dashboard.grid.tf)</button>
+
+{% end %}
+
+</div>
+
+
+
+<style>
+
+
+
+  .green{
+
+    background-color:#58CF77 !important;
+    color: #fff !important;
+
+  }
+
+.green:hover {
+  background-color:#7ad993 !important;
+}
+  .green a{
+     color: #fff !important;
+  }
+ 
+.green:hover {
+  background-color:#7ad993 !important;
+}
+
+.green_text{
+  color: #58CF77 ;
+}
+
+
+    .blue_b{
+
+    background-color:#2E83FF !important;
+    color: #fff !important;
+
+  }
+  .blue_b a{
+     color: #fff !important;
+  }
+
+.blue_b:hover {
+  background-color:#5596f5 !important;
+}
+  
+.rounded_img img {
+  border-radius: 8px;
+}
+
+.person img{
+  border-radius: 100%;
+  max-width:100px;
+  
+}
+
+.myscale{
+  transition: transform .5s; 
+}
+
+.myscale:hover{
+  transform: scale(1.2); 
+  background-color: whitesmoke;
+}
+  </style>

content/header/index.md

@@ -8,6 +8,7 @@ extra:
 ---
 
 - [About]("/about")
+- [Deploy]("/deploy")
 - [Host]("/host")
 - [Utilization]("/utilization")
 - [News]("/newsroom")

css/index.css

@@ -143,6 +143,12 @@ h1 {
   height: 240px !important;
 }
 
+.key_card{
+
+  height: 200px;
+
+}
+
 
 @layer components {
   h1 {
@@ -495,6 +501,10 @@ header {
   .mytest{
     height: auto;
   }
+
+  .key_card{
+    height: auto;
+  }
 }
 
 header #menu button {