next content after cycle complete

ge-theme/static/css/about-us.css

@@ -45,7 +45,7 @@
 }
 .a-button:hover{
     background-color: #3E3F45;
-    color: #ffffff;
+    color: #b3e6ff;
 }
 .wrapper-carousel{
     box-sizing: border-box;

ge-theme/static/css/howitworks.css

@@ -73,6 +73,80 @@
 .handmaid-img{
     padding-top: 20px;
 }
+.buttons-at-end{
+    margin-top: 30px;
+    box-sizing: border-box;
+    border-top: solid 2px #e6e6e6;
+    border-bottom: solid 2px #e6e6e6;
+    padding: 30px;
+    gap: 30px;
+}
+.buttons-end{
+    background: #ffffff;
+    border: 1px solid black;
+    color: black;
+    padding: 0.5em;
+    text-align: center;
+    /*padding: 12px 6px;*/
+    text-decoration: none;
+    width: 150px;
+    border-radius: 25px;
+}
+.buttons-end:hover{
+    background-color: #3E3F45;
+    color: #b3e6ff;
+}
+.community-wrap{
+    margin-left: 500px;
+    margin-right: 500px;
+    /*margin: auto;*/
+}
+.community-text{
+    font-weight: bold;
+    padding-bottom: 40px;
+}
+.round-this{
+    border-radius: 50%;
+    border: 1px solid #a3a3c2;
+    /*box-shadow: 2px 2px 2px #a3a3c2;*/
+    padding: 5px;
+    /*padding-top: 40px;*/
+}
+.margin-plus{
+    padding-top: 100px;
+}
+.workforces{
+    padding-top: 10px;
+    font-weight: bold;
+}
+.word-box{
+    box-sizing: border-box;
+    margin: auto;
+    border-style: solid;
+    border-color: #ffffff;
+    /*max-height: 800px;*/
+    height: auto;
+    max-width: 400px;
+}
+.increase-font{
+    font-weight: bold;
+    font-size: 30px;
+}
+.cuteimg-container{
+    width: 120px;
+    height: 120px;
+}
+.cuteimg-container img{
+    width: 100%;
+    height: auto;
+    border-radius: 50%;
+    border: 1px solid #a3a3c2;
+    padding: 5px;
+}
+.cute-imgs{
+    gap: 5px;
+}
+
 @media only screen and (max-width: 480px){
     .text-img{
         font-size: 30px;
@@ -110,6 +184,18 @@
         transform: rotate(90deg);
         overflow: hidden;
     }
+    .community-wrap{
+        margin: auto;
+        /*margin-left: 10px;*/
+        /*margin-right: 10px;*/
+    }
+    .margin-plus{
+        padding-top: 40px;
+        font-size: 5vmin;
+    }
+    .increase-font{
+        font-size: 20px;
+    }
 }
 
 @media (min-width: 600px) and (max-width: 1024px){
@@ -144,4 +230,9 @@
         overflow: hidden;
 
     }
+    .community-wrap{
+        margin: auto;
+        /*margin-left: 10px;*/
+        /*margin-right: 10px;*/
+    }
 }

ge-theme/templates/about-us.html

@@ -21,8 +21,8 @@
                 <div class="inline-buttons">
                     <a class="a-button" href="{{SITEURL}}/pages/sarafu-network.html">Sarafu network</a>
                     <a class="a-button" href="#">History</a>
-                    <a class="a-button" href="#">Team</a>
+                    <a class="a-button" href="#meet-the-team">Team</a>
-                    <a class="a-button" href="#">Sponsors</a>
+                    <a class="a-button" href="#sponsors">Sponsors</a>
                 </div>
             </div>
         </div>
@@ -275,7 +275,7 @@
     <div class="grid-color-wrap">
         <div class="row d-flex justify-content-center text-center first-row grid-wrapper">
             <div class="meet-title">
-                <h2>MEET THE TEAM</h2>
+                <a id="meet-the-team"><h2>MEET THE TEAM</h2></a>
                 <div class="big-line-between"></div>
             </div>
             <div class="col-lg-4 col-md-6 col-sm-12">
@@ -412,7 +412,7 @@
 
     <div class="sponsors-wrapper ">
         <div class="justify-content-center">
-            <p class="sponsor-text">Our sponsors and partners include</p>
+            <a id="sponsors"><p class="sponsor-text">Our sponsors and partners include</p></a>
         </div>
 
         <div class="d-flex flex-wrap justify-content-center sponsor-imgs">

ge-theme/templates/howit-works.html

@@ -65,6 +65,54 @@
                 </div>
             </div>
         </div>
+        <div class=" d-flex buttons-at-end justify-content-center">
+            <a class="buttons-end" href="{{SITEURL}}/pages/how-it-works.html">Our model</a>
+            <a class="buttons-end" href="{{SITEURL}}/pages/research.html">Impacts</a>
+        </div>
+    </div>
+    <div class="image-span-over">
+        <p>image-missing</p>
+    </div>
+    <div class="community-wrap">
+        <div class="center-this">
+            <h2 class="community-text">Community Inclusion Currencies (CICs) connect</h2>
+        </div>
+        <div class="row">
+            <div class="col-4">
+                <div class="center-this">
+                    <img class="img-fluid round-this" src="{{SITEURL}}/theme/images/howitworks-imgs/round-img1.webp">
+                    <p class="workforces">Underutilized workforces</p>
+                </div>
+            </div>
+            <div class="col-4">
+                <div class="center-this">
+                    <i class="fas fa-plus fa-5x margin-plus"></i>
+                </div>
+            </div>
+            <div class="col-4">
+                <div class="center-this">
+                    <img class="img-fluid round-this" src="{{SITEURL}}/theme/images/howitworks-imgs/round-img2.webp">
+                    <p class="workforces">Underutilized resources</p>
+                </div>
+            </div>
+        </div>
+        <div class="center-this">
+            <div class="word-box">
+                <p class="increase-font">to local markets and capital reserves that guarantee the provision of basic needs</p>
+            </div>
+        </div>
+        <div class="d-flex justify-content-center">
+            <div class="cuteimg-container">
+                <img class="img-fluid cute-imgs" src="{{SITEURL}}/theme/images/howitworks-imgs/cartimg.gif">
+            </div>
+            <div class="cuteimg-container">
+                <img class="img-fluid cute-imgs" src="{{SITEURL}}/theme/images/howitworks-imgs/house-img.gif">
+            </div>
+            <div class="cuteimg-container">
+                <img class="img-fluid cute-imgs" src="{{SITEURL}}/theme/images/howitworks-imgs/foodimg.gif">
+            </div>
+
+        </div>
     </div>
 
 

output/pages/about-us.html

@@ -82,8 +82,8 @@
                 <div class="inline-buttons">
                     <a class="a-button" href="../pages/sarafu-network.html">Sarafu network</a>
                     <a class="a-button" href="#">History</a>
-                    <a class="a-button" href="#">Team</a>
+                    <a class="a-button" href="#meet-the-team">Team</a>
-                    <a class="a-button" href="#">Sponsors</a>
+                    <a class="a-button" href="#sponsors">Sponsors</a>
                 </div>
             </div>
         </div>
@@ -336,7 +336,7 @@
     <div class="grid-color-wrap">
         <div class="row d-flex justify-content-center text-center first-row grid-wrapper">
             <div class="meet-title">
-                <h2>MEET THE TEAM</h2>
+                <a id="meet-the-team"><h2>MEET THE TEAM</h2></a>
                 <div class="big-line-between"></div>
             </div>
             <div class="col-lg-4 col-md-6 col-sm-12">
@@ -473,7 +473,7 @@
 
     <div class="sponsors-wrapper ">
         <div class="justify-content-center">
-            <p class="sponsor-text">Our sponsors and partners include</p>
+            <a id="sponsors"><p class="sponsor-text">Our sponsors and partners include</p></a>
         </div>
 
         <div class="d-flex flex-wrap justify-content-center sponsor-imgs">

output/pages/how-it-works.html

@@ -126,6 +126,54 @@
                 </div>
             </div>
         </div>
+        <div class=" d-flex buttons-at-end justify-content-center">
+            <a class="buttons-end" href="../pages/how-it-works.html">Our model</a>
+            <a class="buttons-end" href="../pages/research.html">Impacts</a>
+        </div>
+    </div>
+    <div class="image-span-over">
+        <p>image-missing</p>
+    </div>
+    <div class="community-wrap">
+        <div class="center-this">
+            <h2 class="community-text">Community Inclusion Currencies (CICs) connect</h2>
+        </div>
+        <div class="row">
+            <div class="col-4">
+                <div class="center-this">
+                    <img class="img-fluid round-this" src="../theme/images/howitworks-imgs/round-img1.webp">
+                    <p class="workforces">Underutilized workforces</p>
+                </div>
+            </div>
+            <div class="col-4">
+                <div class="center-this">
+                    <i class="fas fa-plus fa-5x margin-plus"></i>
+                </div>
+            </div>
+            <div class="col-4">
+                <div class="center-this">
+                    <img class="img-fluid round-this" src="../theme/images/howitworks-imgs/round-img2.webp">
+                    <p class="workforces">Underutilized resources</p>
+                </div>
+            </div>
+        </div>
+        <div class="center-this">
+            <div class="word-box">
+                <p class="increase-font">to local markets and capital reserves that guarantee the provision of basic needs</p>
+            </div>
+        </div>
+        <div class="d-flex justify-content-center">
+            <div class="cuteimg-container">
+                <img class="img-fluid cute-imgs" src="../theme/images/howitworks-imgs/cartimg.gif">
+            </div>
+            <div class="cuteimg-container">
+                <img class="img-fluid cute-imgs" src="../theme/images/howitworks-imgs/house-img.gif">
+            </div>
+            <div class="cuteimg-container">
+                <img class="img-fluid cute-imgs" src="../theme/images/howitworks-imgs/foodimg.gif">
+            </div>
+
+        </div>
     </div>
 
 

output/theme/css/about-us.css

@@ -45,7 +45,7 @@
 }
 .a-button:hover{
     background-color: #3E3F45;
-    color: #ffffff;
+    color: #b3e6ff;
 }
 .wrapper-carousel{
     box-sizing: border-box;

output/theme/css/howitworks.css

@@ -73,6 +73,80 @@
 .handmaid-img{
     padding-top: 20px;
 }
+.buttons-at-end{
+    margin-top: 30px;
+    box-sizing: border-box;
+    border-top: solid 2px #e6e6e6;
+    border-bottom: solid 2px #e6e6e6;
+    padding: 30px;
+    gap: 30px;
+}
+.buttons-end{
+    background: #ffffff;
+    border: 1px solid black;
+    color: black;
+    padding: 0.5em;
+    text-align: center;
+    /*padding: 12px 6px;*/
+    text-decoration: none;
+    width: 150px;
+    border-radius: 25px;
+}
+.buttons-end:hover{
+    background-color: #3E3F45;
+    color: #b3e6ff;
+}
+.community-wrap{
+    margin-left: 500px;
+    margin-right: 500px;
+    /*margin: auto;*/
+}
+.community-text{
+    font-weight: bold;
+    padding-bottom: 40px;
+}
+.round-this{
+    border-radius: 50%;
+    border: 1px solid #a3a3c2;
+    /*box-shadow: 2px 2px 2px #a3a3c2;*/
+    padding: 5px;
+    /*padding-top: 40px;*/
+}
+.margin-plus{
+    padding-top: 100px;
+}
+.workforces{
+    padding-top: 10px;
+    font-weight: bold;
+}
+.word-box{
+    box-sizing: border-box;
+    margin: auto;
+    border-style: solid;
+    border-color: #ffffff;
+    /*max-height: 800px;*/
+    height: auto;
+    max-width: 400px;
+}
+.increase-font{
+    font-weight: bold;
+    font-size: 30px;
+}
+.cuteimg-container{
+    width: 120px;
+    height: 120px;
+}
+.cuteimg-container img{
+    width: 100%;
+    height: auto;
+    border-radius: 50%;
+    border: 1px solid #a3a3c2;
+    padding: 5px;
+}
+.cute-imgs{
+    gap: 5px;
+}
+
 @media only screen and (max-width: 480px){
     .text-img{
         font-size: 30px;
@@ -110,6 +184,18 @@
         transform: rotate(90deg);
         overflow: hidden;
     }
+    .community-wrap{
+        margin: auto;
+        /*margin-left: 10px;*/
+        /*margin-right: 10px;*/
+    }
+    .margin-plus{
+        padding-top: 40px;
+        font-size: 5vmin;
+    }
+    .increase-font{
+        font-size: 20px;
+    }
 }
 
 @media (min-width: 600px) and (max-width: 1024px){
@@ -144,4 +230,9 @@
         overflow: hidden;
 
     }
+    .community-wrap{
+        margin: auto;
+        /*margin-left: 10px;*/
+        /*margin-right: 10px;*/
+    }
 }

output/theme/css/howitworks.css~

@@ -56,22 +56,6 @@
 .last-content-box{
     display: inline-block;
 }
-/*.right-this{*/
-/*    text-align: right;*/
-/*}*/
-/*.reduce-gap{*/
-/*    display: inline;*/
-/*}*/
-/*.arrow-container{*/
-/*    !*margin-left: -100px;*!*/
-/*    !*display: flex;*!*/
-/*    width: 200px;*/
-/*    height: 120px;*/
-/*}*/
-/*.arrow-container img{*/
-/*    width: 100%;*/
-/*    height: auto;*/
-/*}*/
 .rotate-up{
     transform: rotate(250deg);
 }
@@ -86,18 +70,81 @@
     overflow: hidden;
     /*margin-left: -30px;*/
 }
-/*.vertical-center{*/
-/*    vertical-align: center;*/
-/*}*/
 .handmaid-img{
     padding-top: 20px;
 }
-/*.last-content-box{*/
+.buttons-at-end{
-/*    display: inline;*/
+    margin-top: 30px;
-/*}*/
+    box-sizing: border-box;
-/*.bottom{*/
+    border-top: solid 2px #e6e6e6;
-/*    align-self: flex-end;*/
+    border-bottom: solid 2px #e6e6e6;
-/*}*/
+    padding: 30px;
+    gap: 30px;
+}
+.buttons-end{
+    background: #ffffff;
+    border: 1px solid black;
+    color: black;
+    padding: 0.5em;
+    text-align: center;
+    /*padding: 12px 6px;*/
+    text-decoration: none;
+    width: 150px;
+    border-radius: 25px;
+}
+.buttons-end:hover{
+    background-color: #3E3F45;
+    color: #b3e6ff;
+}
+.community-wrap{
+    margin-left: 500px;
+    margin-right: 500px;
+    /*margin: auto;*/
+}
+.community-text{
+    font-weight: bold;
+    padding-bottom: 40px;
+}
+.round-this{
+    border-radius: 50%;
+    /*border: 1px solid #a3a3c2;*/
+    box-shadow: 2px 2px 2px #a3a3c2;
+    padding: 5px;
+    /*padding-top: 40px;*/
+}
+.margin-plus{
+    padding-top: 100px;
+}
+.workforces{
+    padding-top: 10px;
+    font-weight: bold;
+}
+.word-box{
+    box-sizing: border-box;
+    margin: auto;
+    border-style: solid;
+    border-color: #ffffff;
+    /*max-height: 800px;*/
+    height: auto;
+    max-width: 400px;
+}
+.increase-font{
+    font-weight: bold;
+    font-size: 30px;
+}
+.cuteimg-container{
+    width: 120px;
+    height: 120px;
+}
+.cuteimg-container img{
+    width: 100%;
+    height: auto;
+    border-radius: 50%;
+    border: 1px solid #a3a3c2;
+    padding: 5px;
+    gap: 5px;
+}
+
 @media only screen and (max-width: 480px){
     .text-img{
         font-size: 30px;
@@ -128,6 +175,25 @@
     .img-extend{
         height: 300px;
     }
+    .rotate-up-side{
+        transform: rotate(200deg);
+    }
+    .rotate-down-side{
+        transform: rotate(90deg);
+        overflow: hidden;
+    }
+    .community-wrap{
+        margin: auto;
+        /*margin-left: 10px;*/
+        /*margin-right: 10px;*/
+    }
+    .margin-plus{
+        padding-top: 40px;
+        font-size: 5vmin;
+    }
+    .increase-font{
+        font-size: 20px;
+    }
 }
 
 @media (min-width: 600px) and (max-width: 1024px){
@@ -157,4 +223,14 @@
     .tree-img{
         margin-left: auto;
     }
+    .rotate-down-side{
+        transform: rotate(100deg);
+        overflow: hidden;
+
+    }
+    .community-wrap{
+        margin: auto;
+        /*margin-left: 10px;*/
+        /*margin-right: 10px;*/
+    }
 }