more progress on about us page

ge-theme/static/css/howitworks.css

@@ -146,6 +146,24 @@
 .cute-imgs{
     gap: 5px;
 }
+.long-drawings-wrap{
+    margin-left: 200px;
+    margin-right: 200px;
+    padding-top: 100px;
+}
+
+.text-img-font{
+    font-size: 30px;
+    font-weight: bold;
+}
+.diff-font{
+    padding-top: 150px;
+    font-weight: bold;
+    font-size: 15px;
+}
+/*.rotate-torch{*/
+/*    transform: rotate(-20deg);*/
+/*}*/
 
 @media only screen and (max-width: 480px){
     .text-img{
@@ -196,6 +214,23 @@
     .increase-font{
         font-size: 20px;
     }
+    .long-drawings-wrap{
+        padding-top: 20px;
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .text-img-font{
+        font-size: 12px;
+        font-weight: bold;
+    }
+    .diff-font{
+        padding-top: 10px;
+        font-weight: lighter;
+        font-size: 12px;
+    }
+    /*.img-small-media{*/
+    /*    height: 100%;*/
+    /*}*/
 }
 
 @media (min-width: 600px) and (max-width: 1024px){
@@ -235,4 +270,18 @@
         /*margin-left: 10px;*/
         /*margin-right: 10px;*/
     }
+    .long-drawings-wrap{
+        padding-top: 40px;
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    .text-img-font{
+        font-size: 20px;
+        font-weight: bold;
+    }
+    .diff-font{
+        padding-top: 150px;
+        font-weight: bold;
+        font-size: 15px;
+    }
 }

ge-theme/templates/howit-works.html

@@ -111,10 +111,39 @@
             <div class="cuteimg-container">
                 <img class="img-fluid cute-imgs" src="{{SITEURL}}/theme/images/howitworks-imgs/foodimg.gif">
             </div>
-
         </div>
     </div>
+    <div class="image-span-over">
+        <p>image-missing</p>
+    </div>
+    <div class="long-drawings-wrap">
+        <div class="row justify-content-center">
+            <div class="col-4">
+<!--                <div class="img-cont">-->
+                <img class="img-fluid img-small-media" src="{{SITEURL}}/theme/images/howitworks-imgs/drawing1.webp">
+<!--                </div>-->
+            </div>
+            <div class="col-4">
+                <p class="text-img-font center-this">Investments and donations provide funding and liquidity for CICs to develop local industries and infrastructure</p>
+            </div>
+        </div>
+        <div class="row justify-content-center">
+            <div class="col-4 center-this">
+                <img class="img-fluid rotate-torch" src="{{SITEURL}}/theme/images/howitworks-imgs/long-torch.gif">
+            </div>
+            <div class="col-4">
+                <p class="diff-font center-this">These industries act as backers for the community currencies that are issued into the region through interest-free credit, community services and operational costs</p>
+            </div>
+        </div>
+        <div class="row justify-content-center">
+            <div class="col-4">
+                 <img class="img-fluid img-extend" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs1resized.gif">
+            </div>
+            <div class="col-4">
 
+            </div>
+        </div>
+    </div>
 
 </div>
 

output/pages/how-it-works.html

@@ -172,10 +172,39 @@
             <div class="cuteimg-container">
                 <img class="img-fluid cute-imgs" src="../theme/images/howitworks-imgs/foodimg.gif">
             </div>
-
         </div>
     </div>
+    <div class="image-span-over">
+        <p>image-missing</p>
+    </div>
+    <div class="long-drawings-wrap">
+        <div class="row justify-content-center">
+            <div class="col-4">
+<!--                <div class="img-cont">-->
+                <img class="img-fluid img-small-media" src="../theme/images/howitworks-imgs/drawing1.webp">
+<!--                </div>-->
+            </div>
+            <div class="col-4">
+                <p class="text-img-font center-this">Investments and donations provide funding and liquidity for CICs to develop local industries and infrastructure</p>
+            </div>
+        </div>
+        <div class="row justify-content-center">
+            <div class="col-4 center-this">
+                <img class="img-fluid rotate-torch" src="../theme/images/howitworks-imgs/long-torch.gif">
+            </div>
+            <div class="col-4">
+                <p class="diff-font center-this">These industries act as backers for the community currencies that are issued into the region through interest-free credit, community services and operational costs</p>
+            </div>
+        </div>
+        <div class="row justify-content-center">
+            <div class="col-4">
+                 <img class="img-fluid img-extend" src="../theme/images/howitworks-imgs/manyimgs1resized.gif">
+            </div>
+            <div class="col-4">
 
+            </div>
+        </div>
+    </div>
 
 </div>
 

output/theme/css/howitworks.css

@@ -146,6 +146,24 @@
 .cute-imgs{
     gap: 5px;
 }
+.long-drawings-wrap{
+    margin-left: 200px;
+    margin-right: 200px;
+    padding-top: 100px;
+}
+
+.text-img-font{
+    font-size: 30px;
+    font-weight: bold;
+}
+.diff-font{
+    padding-top: 150px;
+    font-weight: bold;
+    font-size: 15px;
+}
+/*.rotate-torch{*/
+/*    transform: rotate(-20deg);*/
+/*}*/
 
 @media only screen and (max-width: 480px){
     .text-img{
@@ -196,6 +214,23 @@
     .increase-font{
         font-size: 20px;
     }
+    .long-drawings-wrap{
+        padding-top: 20px;
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .text-img-font{
+        font-size: 12px;
+        font-weight: bold;
+    }
+    .diff-font{
+        padding-top: 10px;
+        font-weight: lighter;
+        font-size: 12px;
+    }
+    /*.img-small-media{*/
+    /*    height: 100%;*/
+    /*}*/
 }
 
 @media (min-width: 600px) and (max-width: 1024px){
@@ -235,4 +270,18 @@
         /*margin-left: 10px;*/
         /*margin-right: 10px;*/
     }
+    .long-drawings-wrap{
+        padding-top: 40px;
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    .text-img-font{
+        font-size: 20px;
+        font-weight: bold;
+    }
+    .diff-font{
+        padding-top: 150px;
+        font-weight: bold;
+        font-size: 15px;
+    }
 }

output/theme/css/howitworks.css~

@@ -107,8 +107,8 @@
 }
 .round-this{
     border-radius: 50%;
-    /*border: 1px solid #a3a3c2;*/
+    border: 1px solid #a3a3c2;
-    box-shadow: 2px 2px 2px #a3a3c2;
+    /*box-shadow: 2px 2px 2px #a3a3c2;*/
     padding: 5px;
     /*padding-top: 40px;*/
 }
@@ -142,8 +142,28 @@
     border-radius: 50%;
     border: 1px solid #a3a3c2;
     padding: 5px;
+}
+.cute-imgs{
     gap: 5px;
 }
+.long-drawings-wrap{
+    margin-left: 200px;
+    margin-right: 200px;
+    padding-top: 100px;
+}
+
+.text-img-font{
+    font-size: 30px;
+    font-weight: bold;
+}
+.diff-font{
+    padding-top: 150px;
+    font-weight: bold;
+    font-size: 15px;
+}
+/*.rotate-torch{*/
+/*    transform: rotate(-20deg);*/
+/*}*/
 
 @media only screen and (max-width: 480px){
     .text-img{
@@ -194,6 +214,23 @@
     .increase-font{
         font-size: 20px;
     }
+    .long-drawings-wrap{
+        padding-top: 20px;
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .text-img-font{
+        font-size: 12px;
+        font-weight: bold;
+    }
+    .diff-font{
+        padding-top: 20px;
+        font-weight: bold;
+        font-size: 15px;
+    }
+    /*.img-small-media{*/
+    /*    height: 100%;*/
+    /*}*/
 }
 
 @media (min-width: 600px) and (max-width: 1024px){
@@ -233,4 +270,18 @@
         /*margin-left: 10px;*/
         /*margin-right: 10px;*/
     }
+    .long-drawings-wrap{
+        padding-top: 40px;
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    .text-img-font{
+        font-size: 20px;
+        font-weight: bold;
+    }
+    .diff-font{
+        padding-top: 150px;
+        font-weight: bold;
+        font-size: 15px;
+    }
 }