home page styling

ge-theme/static/css/home-styles.css

@@ -1,10 +1,11 @@
 .row-one-words{
     text-align: center;
     font-size: 40px;
+    padding-top: 50px;
 }
-.row-one-img{
+/*.row-one-img{*/
-    padding: 20px;
+/*    padding: 20px;*/
-}
+/*}*/
 .height-row{
     height: 80%;
 }
@@ -16,8 +17,9 @@
 
 }
 .wrapper-col{
-    margin-top: 100px;
+    /*margin-top: 100px;*/
-    margin-left: 150px;
+    /*margin-left: 150px;*/
+    margin: auto;
     border-style: solid;
     border-color: #ffffff;
     box-sizing: border-box;
@@ -28,22 +30,54 @@
     box-sizing: border-box;
     margin: auto;
     border-style: solid;
-    border-color: #0040D0;
+    border-color: #ffffff;
-    max-height: 600px;
+    max-height: 800px;
     max-width: 400px;
 }
 .h2-title{
-    padding-top: 30px;
+    padding-top: 100px;
     font-size: 30px;
+    font-weight: bold;
     text-align: center;
 }
 .row-2-words{
+    padding-top: 40px;
     font-size: 20px;
     text-align: center;
+    padding-bottom: 30px;
 }
 .row-margin{
-    margin-bottom: 50px;
+    margin-bottom: 70px;
 }
+.style-img{
+    width: 100%;
+}
+.butt-style{
+    background: #ffffff;
+    border: 2px solid black;
+    color: black;
+    display: block;
+    padding: 15px 10px;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    width: 180px;
+    border-radius: 25px;
+    margin: auto;
+}
+.butt-style:hover{
+    background-color: #3E3F45;
+    color: #ffffff;
+}
+/*.words-col-wrapper a{*/
+/*    text-decoration: none;*/
+/*    color: black;*/
+/*    border-color: black;*/
+/*    border-width: 2px;*/
+/*    padding: 20px 10px;*/
+/*    border-radius: 2px;*/
+
+/*}*/
 @media only screen and (max-width: 480px){
     .img-style{
         padding-left: 20px;
@@ -52,6 +86,7 @@
         max-width: 400px;
     }
     .row-one-words{
+        padding-top: 10px;
         font-size: 30px;
     }
     .wrapper-col{
@@ -60,4 +95,17 @@
         max-height: 400px;
         /*border-color: #ff4c85;*/
     }
+    .row-2-words{
+        padding-top: 20px;
+        padding-bottom: 10px;
+    }
+    .row-margin{
+        margin-bottom: 10px;
+    }
+    .h2-title{
+        padding-top: 20px;
+    }
+    .style-img{
+        padding-top: 20px;
+    }
 }

ge-theme/templates/home-template.html

@@ -24,11 +24,35 @@
             <div class="words-col-wrapper">
                 <h2 class="h2-title">Ending poverty lies in building communities</h2>
                 <p class="row-2-words">Through Community Inclusion Currencies people have a way to exchange goods and services and incubate projects and businesses, without relying on scarce national currency and volatile markets.</p>
-                <a href="{{SITEURL}}/pages/how-it-works.html" class="butt-style">how it works</a>
+                <a href="{{SITEURL}}/pages/how-it-works.html" class="butt-style">How it works</a>
             </div>
         </div>
         <div class="col-lg-6 col-md-12 col-sm-12">
-            <img class="img-fluid" src="{{SITEURL}}/theme/images/home-imgs/home-img2.webp">
+            <img class="img-fluid style-img" src="{{SITEURL}}/theme/images/home-imgs/home-img2.webp">
+        </div>
+    </div>
+    <div class="row row-margin">
+        <div class="col-lg-6 col-md-12 col-sm-12">
+            <img class="img-fluid style-img" src="{{SITEURL}}/theme/images/home-imgs/home-img3.webp">
+        </div>
+        <div class="col-lg-6 col-md-12 col-sm-12">
+            <div class="words-col-wrapper">
+                <h2 class="h2-title">We envision prospering economies built by thriving communities</h2>
+                <p class="row-2-words">Grassroots Economics is a non-profit foundation that has been seeking to empower marginalized communities to take charge of their own livelihoods and economic future since 2010.</p>
+                <a href="{{SITEURL}}/pages/about-us.html" class="butt-style">About us</a>
+            </div>
+        </div>
+    </div>
+    <div class="row row-margin">
+        <div class="col-lg-6 col-md-12 col-sm-12">
+            <div class="words-col-wrapper">
+                <h2 class="h2-title">Get involved</h2>
+                <p class="row-2-words">Communities should be afforded the same privileges as nations and be empowered to develop their own prospering economies with the stability of their own currencies.</p>
+                <a href="{{SITEURL}}/pages/get-involved.html" class="butt-style">Support us</a>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-12 col-md-12">
+            <img class="img-fluid style-img" src="{{SITEURL}}/theme/images/home-imgs/home-img4.webp">
         </div>
     </div>
 </div>

output/pages/home.html

@@ -66,11 +66,35 @@
             <div class="words-col-wrapper">
                 <h2 class="h2-title">Ending poverty lies in building communities</h2>
                 <p class="row-2-words">Through Community Inclusion Currencies people have a way to exchange goods and services and incubate projects and businesses, without relying on scarce national currency and volatile markets.</p>
-                <a href="../pages/how-it-works.html" class="butt-style">how it works</a>
+                <a href="../pages/how-it-works.html" class="butt-style">How it works</a>
             </div>
         </div>
         <div class="col-lg-6 col-md-12 col-sm-12">
-            <img class="img-fluid" src="../theme/images/home-imgs/home-img2.webp">
+            <img class="img-fluid style-img" src="../theme/images/home-imgs/home-img2.webp">
+        </div>
+    </div>
+    <div class="row row-margin">
+        <div class="col-lg-6 col-md-12 col-sm-12">
+            <img class="img-fluid style-img" src="../theme/images/home-imgs/home-img3.webp">
+        </div>
+        <div class="col-lg-6 col-md-12 col-sm-12">
+            <div class="words-col-wrapper">
+                <h2 class="h2-title">We envision prospering economies built by thriving communities</h2>
+                <p class="row-2-words">Grassroots Economics is a non-profit foundation that has been seeking to empower marginalized communities to take charge of their own livelihoods and economic future since 2010.</p>
+                <a href="../pages/about-us.html" class="butt-style">About us</a>
+            </div>
+        </div>
+    </div>
+    <div class="row row-margin">
+        <div class="col-lg-6 col-md-12 col-sm-12">
+            <div class="words-col-wrapper">
+                <h2 class="h2-title">Get involved</h2>
+                <p class="row-2-words">Communities should be afforded the same privileges as nations and be empowered to develop their own prospering economies with the stability of their own currencies.</p>
+                <a href="../pages/get-involved.html" class="butt-style">Support us</a>
+            </div>
+        </div>
+        <div class="col-lg-6 col-md-12 col-md-12">
+            <img class="img-fluid style-img" src="../theme/images/home-imgs/home-img4.webp">
         </div>
     </div>
 </div>

output/theme/css/home-styles.css

@@ -1,10 +1,11 @@
 .row-one-words{
     text-align: center;
     font-size: 40px;
+    padding-top: 50px;
 }
-.row-one-img{
+/*.row-one-img{*/
-    padding: 20px;
+/*    padding: 20px;*/
-}
+/*}*/
 .height-row{
     height: 80%;
 }
@@ -16,8 +17,9 @@
 
 }
 .wrapper-col{
-    margin-top: 100px;
+    /*margin-top: 100px;*/
-    margin-left: 150px;
+    /*margin-left: 150px;*/
+    margin: auto;
     border-style: solid;
     border-color: #ffffff;
     box-sizing: border-box;
@@ -28,22 +30,54 @@
     box-sizing: border-box;
     margin: auto;
     border-style: solid;
-    border-color: #0040D0;
+    border-color: #ffffff;
-    max-height: 600px;
+    max-height: 800px;
     max-width: 400px;
 }
 .h2-title{
-    padding-top: 30px;
+    padding-top: 100px;
     font-size: 30px;
+    font-weight: bold;
     text-align: center;
 }
 .row-2-words{
+    padding-top: 40px;
     font-size: 20px;
     text-align: center;
+    padding-bottom: 30px;
 }
 .row-margin{
-    margin-bottom: 50px;
+    margin-bottom: 70px;
 }
+.style-img{
+    width: 100%;
+}
+.butt-style{
+    background: #ffffff;
+    border: 2px solid black;
+    color: black;
+    display: block;
+    padding: 15px 10px;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    width: 180px;
+    border-radius: 25px;
+    margin: auto;
+}
+.butt-style:hover{
+    background-color: #3E3F45;
+    color: #ffffff;
+}
+/*.words-col-wrapper a{*/
+/*    text-decoration: none;*/
+/*    color: black;*/
+/*    border-color: black;*/
+/*    border-width: 2px;*/
+/*    padding: 20px 10px;*/
+/*    border-radius: 2px;*/
+
+/*}*/
 @media only screen and (max-width: 480px){
     .img-style{
         padding-left: 20px;
@@ -52,6 +86,7 @@
         max-width: 400px;
     }
     .row-one-words{
+        padding-top: 10px;
         font-size: 30px;
     }
     .wrapper-col{
@@ -60,4 +95,17 @@
         max-height: 400px;
         /*border-color: #ff4c85;*/
     }
+    .row-2-words{
+        padding-top: 20px;
+        padding-bottom: 10px;
+    }
+    .row-margin{
+        margin-bottom: 10px;
+    }
+    .h2-title{
+        padding-top: 20px;
+    }
+    .style-img{
+        padding-top: 20px;
+    }
 }

output/theme/css/home-styles.css~

@@ -6,7 +6,7 @@
     padding: 20px;
 }
 .height-row{
-    height: 60%;
+    height: 80%;
 }
 .img-style{
     padding-left: 180px;
@@ -28,18 +28,54 @@
     box-sizing: border-box;
     margin: auto;
     border-style: solid;
-    border-color: #0040D0;
+    border-color: #ffffff;
-    max-height: 500px;
+    max-height: 800px;
     max-width: 400px;
 }
 .h2-title{
+    padding-top: 100px;
     font-size: 30px;
+    font-weight: bold;
     text-align: center;
 }
 .row-2-words{
+    padding-top: 40px;
     font-size: 20px;
     text-align: center;
+    padding-bottom: 30px;
 }
+.row-margin{
+    margin-bottom: 70px;
+}
+.style-img{
+    width: 100%;
+}
+.butt-style{
+    background: #ffffff;
+    border: 2px solid black;
+    color: black;
+    display: block;
+    padding: 15px 10px;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    width: 180px;
+    border-radius: 25px;
+    margin: auto;
+}
+.butt-style:hover{
+    background-color: #3E3F45;
+    color: #ffffff;
+}
+/*.words-col-wrapper a{*/
+/*    text-decoration: none;*/
+/*    color: black;*/
+/*    border-color: black;*/
+/*    border-width: 2px;*/
+/*    padding: 20px 10px;*/
+/*    border-radius: 2px;*/
+
+/*}*/
 @media only screen and (max-width: 480px){
     .img-style{
         padding-left: 20px;
@@ -48,6 +84,7 @@
         max-width: 400px;
     }
     .row-one-words{
+        padding-top: 10px;
         font-size: 30px;
     }
     .wrapper-col{
@@ -56,4 +93,16 @@
         max-height: 400px;
         /*border-color: #ff4c85;*/
     }
+    .row-2-words{
+        padding-bottom: 10px;
+    }
+    /*.row-margin{*/
+    /*    margin-bottom: 1px;*/
+    /*}*/
+    .h2-title{
+        padding-top: 20px;
+    }
+    .style-img{
+        padding-top: 20px;
+    }
 }