add all pages

public/technology/index.html

@@ -12,8 +12,8 @@
 
   
   
-  <title>page3 &bull; examplezola</title>
-  <meta property="og:title" content="page3 &bull; examplezola" />
+  <title>Technology &bull; examplezola</title>
+  <meta property="og:title" content="Technology &bull; examplezola" />
   
   
 
@@ -164,28 +164,28 @@
                     
                     
                         <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;home&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                            Home
+                            OurPhone
                         </a>
                         <div class="relative">
                         </div>
                     
                     
-                        <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;buy&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                            page3
+                        <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;buynow&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                            BUY NOW
                         </a>
                         <div class="relative">
                         </div>
                     
                     
                         <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;specs&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                            page2
+                            Specs
                         </a>
                         <div class="relative">
                         </div>
                     
                     
                         <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;technology&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                            page3
+                            Technology
                         </a>
                         <div class="relative">
                         </div>
@@ -218,22 +218,22 @@
                              
                             
                             
-                            <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;buy&#x2F;" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                page3
+                            <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;buynow&#x2F;" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                BUY NOW
                             </a>
                             <hr/>
                         
                             
                             
                             <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;specs&#x2F;" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                page2
+                                Specs
                             </a>
                             <hr/>
                         
                             
                             
                             <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;technology&#x2F;" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                page3
+                                Technology
                             </a>
                             <hr/>
                         
@@ -289,7 +289,13 @@ Parameters:
             
             
                 
-                    
+            
+            
+        
+            
+            
+            
+                
                     
                 
             
@@ -298,6 +304,8 @@ Parameters:
             
             
             
+                
+                    
                 
             
             
@@ -387,7 +395,7 @@ Parameters:
 
 
         <div id="" class="relative justify-center flex overflow-hidden  " style="">
-            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-8 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
         
          
 
@@ -397,9 +405,140 @@ Parameters:
                     <!-- handles mermaid markdown content display -->
 
                     
-                        <h1 id="text-8xl">TITLE</h1>
-<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
-<p><button><a href="https://examplezola.tf/">BUTTON</a></button></p>
+                        <h1 id="powered-by-threefold">Powered by ThreeFold</h1>
+<br>
+<p><img src="https://examplezola.tf/technology/./img/tfbg.png#mx-auto" alt="Image" /></p>
+<p><a href="https://library.threefold.me/info/threefold#/tfgrid/threefold__tfgrid_home" target="_blank"><ins>The world’s largest decentralized network </ins></a>by <a href="https://threefold.io/"><strong>ThreeFold</strong></a><br>allows every application on the <strong>OurApps™</strong> to attain a level of security and privacy like never seen before.</p>
+<br>
+<p><button><a href="https://library.threefold.me/info/threefold/#/tfgrid/threefold__tfgrid_home">Learn More</a></button></p>
+
+                    
+                </div>
+            
+        
+    </div>
+</div><!-- section 2 (graphene) -->
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+
+<!-- This fixes link & img paths in local, prod, and wth prefix -->
+
+    
+    
+    
+        
+            
+            
+        
+            
+            
+            
+                
+            
+            
+        
+    
+
+
+
+
+
+
+<!-- aligns columns depending on col number-->
+ 
+    
+
+
+
+
+
+
+
+
+
+<!-- Padding -->
+
+
+
+
+    
+        
+    
+
+
+
+
+
+
+
+<!-- Margins -->
+
+
+
+
+    
+        
+    
+    
+
+
+
+
+
+
+
+
+    
+
+    
+
+     <!-- makes row semi-full screen width, strips margins -->
+    
+
+        <!-- makes row full screen width, strips margins -->
+    
+
+    
+    
+
+
+
+
+
+<!-- makes row full screen width and adds background img -->
+
+
+
+
+
+
+
+
+<!-- Cancels page margins so that rows can have separate margins -->
+
+
+
+        <div id="" class="relative justify-center flex overflow-hidden  " style="">
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40" style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+        
+         
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
+                    <!-- handles mermaid markdown content display -->
+
+                    
+                        <p><img src="https://examplezola.tf/technology/./img/graphene.png#mx-auto" alt="Image" /></p>
 
                     
                 </div>
@@ -408,12 +547,581 @@ Parameters:
 
             <!-- Hides empty columns if displayed vertically in small screen -->
             
-                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
                     <!-- handles mermaid markdown content display -->
 
                     
                         
-<p><img src="https://examplezola.tf/technology/placeholder.jpg#medium#mx-auto" alt="Image" /></p>
+<h1 id="meet">Meet</h1>
+<h1 id="graphene-ostm">Graphene OS™</h1>
+<p><a href="https://grapheneos.org/features" target="_blank"><ins><strong>Graphene OS</strong></ins></a><strong>™</strong> 
+is a private and secure Android-compatible mobile operating system. 
+Gain a full control and access to your sovereign internet life.</p>
+
+                    
+                </div>
+            
+        
+    </div>
+</div><!-- section 2 (co-found) -->
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+
+<!-- This fixes link & img paths in local, prod, and wth prefix -->
+
+    
+    
+    
+        
+            
+            
+        
+            
+            
+            
+                
+                    
+                
+            
+            
+        
+            
+            
+            
+                
+            
+            
+        
+    
+
+
+
+
+
+
+<!-- aligns columns depending on col number-->
+ 
+    
+
+
+
+
+
+
+
+
+
+<!-- Padding -->
+
+
+
+
+    
+        
+    
+
+
+
+
+
+
+
+<!-- Margins -->
+
+
+
+
+    
+        
+    
+    
+
+
+
+
+
+
+
+
+    
+
+    
+
+     <!-- makes row semi-full screen width, strips margins -->
+    
+
+        <!-- makes row full screen width, strips margins -->
+    
+
+    
+    
+
+
+
+
+
+<!-- makes row full screen width and adds background img -->
+
+
+
+
+
+
+
+
+<!-- Cancels page margins so that rows can have separate margins -->
+
+
+
+        <div id="" class="relative justify-center flex overflow-hidden  " style="">
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40" style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+        
+         
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
+                    <!-- handles mermaid markdown content display -->
+
+                    
+                        <h1 id="ourversetm"><a href="https://ourverse.tf/">OurVerse™</a></h1>
+<p><a href="https://ourverse.tf/" target="_blank"><ins><strong>OurVerse</strong></ins></a><strong>™</strong> is a secure and open-source digital world offering alternative SuperApps to centralized apps, customized by <strong>OurPhone™</strong> team.</p>
+
+                    
+                </div>
+            
+         
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
+                    <!-- handles mermaid markdown content display -->
+
+                    
+                        
+<p><img src="https://examplezola.tf/technology/./img/ourverse.png#mx-auto" alt="Image" />
+<br></p>
+
+                    
+                </div>
+            
+        
+    </div>
+</div><!-- section 5 apps -->
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+
+<!-- This fixes link & img paths in local, prod, and wth prefix -->
+
+    
+
+
+
+
+
+
+<!-- aligns columns depending on col number-->
+ 
+    
+
+
+
+
+
+
+
+
+
+<!-- Padding -->
+
+
+
+
+    
+        
+    
+
+
+
+
+
+
+
+<!-- Margins -->
+
+
+
+
+    
+        
+    
+    
+
+
+
+
+
+
+
+
+    
+        
+        
+    
+
+    
+
+     <!-- makes row semi-full screen width, strips margins -->
+    
+
+        <!-- makes row full screen width, strips margins -->
+    
+
+    
+    
+
+
+
+
+
+<!-- makes row full screen width and adds background img -->
+
+
+
+
+
+
+
+
+<!-- Cancels page margins so that rows can have separate margins -->
+
+
+
+        <div id="" class="relative justify-center flex overflow-hidden  " style="">
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-2 md:py-4 lg:pt-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+        
+         
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
+                    <!-- handles mermaid markdown content display -->
+
+                    
+                        <h1 id="threefold-s">ThreeFold's</h1>
+<h1 id="decentralized-internet">Decentralized Internet</h1>
+
+                    
+                </div>
+            
+        
+    </div>
+</div><!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+
+<!-- This fixes link & img paths in local, prod, and wth prefix -->
+
+    
+    
+    
+        
+            
+            
+        
+            
+            
+            
+                
+            
+            
+        
+            
+            
+            
+                
+                    
+                
+            
+            
+        
+    
+
+
+
+
+
+
+<!-- aligns columns depending on col number-->
+ 
+    
+
+
+
+
+
+
+
+
+
+<!-- Padding -->
+
+
+
+
+
+
+
+
+
+
+<!-- Margins -->
+
+
+
+
+    
+        
+    
+    
+
+
+
+
+
+
+
+
+    
+
+    
+
+     <!-- makes row semi-full screen width, strips margins -->
+    
+
+        <!-- makes row full screen width, strips margins -->
+    
+
+    
+    
+
+
+
+
+
+<!-- makes row full screen width and adds background img -->
+
+
+
+
+
+
+
+
+<!-- Cancels page margins so that rows can have separate margins -->
+
+
+
+        <div id="" class="relative justify-center flex overflow-hidden  " style="">
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-8 md:py-8 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40" style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+        
+         
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
+                    <!-- handles mermaid markdown content display -->
+
+                    
+                        <p><img src="https://examplezola.tf/technology/./img/technology.png#mx-auto" alt="Image" /></p>
+
+                    
+                </div>
+            
+         
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4">
+                    <!-- handles mermaid markdown content display -->
+
+                    
+                        
+<p>Learn about the magic of the technology behind <strong>OurPhone™</strong> such as <strong>Quantum Safe Storage System</strong>,<strong>Planetary Network</strong>, <strong>EDGE Computing</strong>, and many more.</p>
+<p><button><a href="https://library.threefold.me/info/threefold/#/technology/threefold__zos">Learn More</a></button></p>
+
+                    
+                </div>
+            
+        
+    </div>
+</div><!-- section 6 Buy -->
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+
+<!-- This fixes link & img paths in local, prod, and wth prefix -->
+
+    
+    
+    
+        
+            
+            
+        
+            
+            
+            
+                
+            
+            
+        
+            
+            
+            
+                
+                    
+                    
+                
+            
+            
+        
+    
+
+
+
+
+
+
+<!-- aligns columns depending on col number-->
+ 
+    
+
+
+
+
+
+
+
+
+
+<!-- Padding -->
+
+
+
+
+    
+        
+    
+
+
+
+
+
+
+
+<!-- Margins -->
+
+
+
+
+    
+        
+    
+    
+
+
+
+
+
+
+
+
+    
+        
+        
+    
+
+    
+
+     <!-- makes row semi-full screen width, strips margins -->
+    
+
+        <!-- makes row full screen width, strips margins -->
+    
+
+    
+    
+
+
+
+
+
+<!-- makes row full screen width and adds background img -->
+
+
+
+
+
+
+
+
+<!-- Cancels page margins so that rows can have separate margins -->
+
+
+
+        <div id="" class="relative justify-center flex overflow-hidden  " style="">
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-8 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+        
+         
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
+                    <!-- handles mermaid markdown content display -->
+
+                    
+                        <h1 id="ourphonetm">OurPhone™</h1>
+<p><img src="https://examplezola.tf/technology/./img/placeholder.png#medium#mx-auto" alt="Image" />
+<br>
+<br></p>
+<h3 id="a-truly-decentralized-smartphone"><strong>A Truly Decentralized Smartphone</strong></h3>
+<h3 id="like-no-other"><strong>Like No Other</strong></h3>
+<p><button><a href="https://examplezola.tf/buynow">Buy Now</a></button></p>
 
                     
                 </div>
@@ -438,7 +1146,7 @@ Parameters:
         
         <div class="customize">
             
-            <p class="text-center">ALL RIGHTS RESERVED 2022</p>
+            <p class="text-center">&#169; Ourphone&trade; All Rights Reserved 2022</p>
         </div>
     
 </footer>