Photo grid for meet-team complete

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

@@ -89,7 +89,7 @@
     background-color: #ffffff;
 }
 .carousel-inner{
-   margin-bottom: 50px;
+   margin-bottom: 100px;
 }
 .row-carousel{
     margin-left: 100px;
@@ -125,12 +125,56 @@
     font-weight: bold;
     padding-top: 10px;
 }
-/*.col-carousel-left{*/
+/*.mx-6{*/
-/*    padding-left: 100px;*/
+/*    margin-left: 20rem !important;*/
-/*}*/
+/*    margin-right: 20rem  !important;*/
-/*.carousel-indicators-round{*/
-/*     width: 14px;*/
-/*     height: 14px;*/
-/*     border: 2px solid black;*/
-/*     border-radius: 100%;*/
 /*}*/
+.grid-color-wrap{
+    background-color: #EFF0F0;
+}
+.grid-wrapper{
+    margin-left: 500px;
+    margin-right: 500px;
+}
+.first-row{
+    padding-top: 50px;
+}
+.meet-title{
+    text-align: center;
+    padding-bottom: 40px;
+}
+.meet-title h2{
+    font-weight: bold;
+}
+.big-line-between{
+    padding-top: 10px;
+    /*padding-bottom: 20px;*/
+    width: 50px;
+    border-bottom: 4px solid black;
+    margin: auto;
+}
+.circle-img{
+    padding-top: 10px;
+    border-radius: 50%;
+}
+.grid-img-text{
+    padding-top: 20px;
+    /*padding-left: 40px;*/
+}
+.name{
+    font-size: 20px;
+}
+
+@media only screen and (max-width: 480px){
+    .grid-wrapper{
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+}
+
+@media (min-width: 600px) and (max-width: 1024px){
+    .grid-wrapper{
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+}

ge-theme/templates/about-us.html

@@ -221,6 +221,147 @@
         <span class="visually-hidden">Next</span>
     </button>
 </div>
-
+<div class="youtube-padding">
+    <div class="iframe-container">
+        <iframe width="1202" height="676" src="https://www.youtube.com/embed/ojFPrVvpraU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+</div>
+<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>
+            <div class="big-line-between"></div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img1.webp">
+            <div class="grid-img-text">
+                <p class="name">Shaila</p>
+                <p class="position">Director</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img2.webp">
+            <div class="grid-img-text">
+                <p class="name">Will Ruddick</p>
+                <p class="position">Founder</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img3.webp">
+            <div class="grid-img-text">
+                <p class="name">Caroline Dama</p>
+                <p class="position">Advisor</p>
+            </div>
+        </div>
+    </div>
+    <div class="row d-flex justify-content-center text-center grid-wrapper">
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img4.webp">
+            <div class="grid-img-text">
+                <p class="name">Sylvia Karanja</p>
+                <p class="position">Data Quality Engineer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img5.webp">
+            <div class="grid-img-text">
+                <p class="name">Damaris Njoroge</p>
+                <p class="position">Program Coordinator</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img6.webp">
+            <div class="grid-img-text">
+                <p class="name">Amina Godana</p>
+                <p class="position">Support Engineer</p>
+            </div>
+        </div>
+    </div>
+    <div class="row d-flex justify-content-center text-center grid-wrapper">
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img7.webp">
+            <div class="grid-img-text">
+                <p class="name">Louis Holbrook</p>
+                <p class="position">Senior Software Developer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img8.webp">
+            <div class="grid-img-text">
+                <p class="name">Spencer Ofwiti</p>
+                <p class="position">Software Engineer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img9.webp">
+            <div class="grid-img-text">
+                <p class="name">Philip Wafula</p>
+                <p class="position">Software Developer</p>
+            </div>
+        </div>
+    </div>
+    <div class="row d-flex justify-content-center text-center grid-wrapper">
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img10.webp">
+            <div class="grid-img-text">
+                <p class="name">Joyce Kamauk</p>
+                <p class="position">Support Engineer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img11.webp">
+            <div class="grid-img-text">
+                <p class="name">Isavary Khabuqwi</p>
+                <p class="position">Communications Engineer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img12.webp">
+            <div class="grid-img-text">
+                <p class="name">Emmanuel Mbui </p>
+                <p class="position">Support Engineer</p>
+            </div>
+        </div>
+    </div>
+    <div class="row d-flex justify-content-center text-center grid-wrapper">
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img13.webp">
+            <div class="grid-img-text">
+                <p class="name">Fransisca (Mami) Achieng</p>
+                <p class="position">Field Support Engineer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img14.webp">
+            <div class="grid-img-text">
+                <p class="name">Fennie Wang</p>
+                <p class="position">Legal Counsel</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img15.webp">
+            <div class="grid-img-text">
+                <p class="name">Janet Treezer </p>
+                <p class="position">Support Engineer</p>
+            </div>
+        </div>
+    </div>
+    <div class="row d-flex justify-content-center text-center grid-wrapper">
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img16.webp">
+            <div class="grid-img-text">
+                <p class="name">Grace Rachmany</p>
+                <p class="position">Advisor</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="{{SITEURL}}/theme/images/aboutus-imgs/grid-img18.webp">
+            <div class="grid-img-text">
+                <p class="name">Gustav Stromfelt</p>
+                <p class="position">Advisor</p>
+            </div>
+        </div>
+    </div>
+</div>
 
 {% endblock %}

output/pages/about-us.html

@@ -282,7 +282,148 @@
         <span class="visually-hidden">Next</span>
     </button>
 </div>
-
+<div class="youtube-padding">
+    <div class="iframe-container">
+        <iframe width="1202" height="676" src="https://www.youtube.com/embed/ojFPrVvpraU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+</div>
+<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>
+            <div class="big-line-between"></div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img1.webp">
+            <div class="grid-img-text">
+                <p class="name">Shaila</p>
+                <p class="position">Director</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img2.webp">
+            <div class="grid-img-text">
+                <p class="name">Will Ruddick</p>
+                <p class="position">Founder</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img3.webp">
+            <div class="grid-img-text">
+                <p class="name">Caroline Dama</p>
+                <p class="position">Advisor</p>
+            </div>
+        </div>
+    </div>
+    <div class="row d-flex justify-content-center text-center grid-wrapper">
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img4.webp">
+            <div class="grid-img-text">
+                <p class="name">Sylvia Karanja</p>
+                <p class="position">Data Quality Engineer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img5.webp">
+            <div class="grid-img-text">
+                <p class="name">Damaris Njoroge</p>
+                <p class="position">Program Coordinator</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img6.webp">
+            <div class="grid-img-text">
+                <p class="name">Amina Godana</p>
+                <p class="position">Support Engineer</p>
+            </div>
+        </div>
+    </div>
+    <div class="row d-flex justify-content-center text-center grid-wrapper">
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img7.webp">
+            <div class="grid-img-text">
+                <p class="name">Louis Holbrook</p>
+                <p class="position">Senior Software Developer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img8.webp">
+            <div class="grid-img-text">
+                <p class="name">Spencer Ofwiti</p>
+                <p class="position">Software Engineer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img9.webp">
+            <div class="grid-img-text">
+                <p class="name">Philip Wafula</p>
+                <p class="position">Software Developer</p>
+            </div>
+        </div>
+    </div>
+    <div class="row d-flex justify-content-center text-center grid-wrapper">
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img10.webp">
+            <div class="grid-img-text">
+                <p class="name">Joyce Kamauk</p>
+                <p class="position">Support Engineer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img11.webp">
+            <div class="grid-img-text">
+                <p class="name">Isavary Khabuqwi</p>
+                <p class="position">Communications Engineer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img12.webp">
+            <div class="grid-img-text">
+                <p class="name">Emmanuel Mbui </p>
+                <p class="position">Support Engineer</p>
+            </div>
+        </div>
+    </div>
+    <div class="row d-flex justify-content-center text-center grid-wrapper">
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img13.webp">
+            <div class="grid-img-text">
+                <p class="name">Fransisca (Mami) Achieng</p>
+                <p class="position">Field Support Engineer</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img14.webp">
+            <div class="grid-img-text">
+                <p class="name">Fennie Wang</p>
+                <p class="position">Legal Counsel</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img15.webp">
+            <div class="grid-img-text">
+                <p class="name">Janet Treezer </p>
+                <p class="position">Support Engineer</p>
+            </div>
+        </div>
+    </div>
+    <div class="row d-flex justify-content-center text-center grid-wrapper">
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img16.webp">
+            <div class="grid-img-text">
+                <p class="name">Grace Rachmany</p>
+                <p class="position">Advisor</p>
+            </div>
+        </div>
+        <div class="col-lg-4 col-md-4 col-sm-12">
+            <img class="img-fluid circle-img" src="../theme/images/aboutus-imgs/grid-img18.webp">
+            <div class="grid-img-text">
+                <p class="name">Gustav Stromfelt</p>
+                <p class="position">Advisor</p>
+            </div>
+        </div>
+    </div>
+</div>
 
 <div class="row">
     <div class="col-lg-12 base-footer">

output/theme/css/about-us.css

@@ -89,7 +89,7 @@
     background-color: #ffffff;
 }
 .carousel-inner{
-   margin-bottom: 50px;
+   margin-bottom: 100px;
 }
 .row-carousel{
     margin-left: 100px;
@@ -125,12 +125,56 @@
     font-weight: bold;
     padding-top: 10px;
 }
-/*.col-carousel-left{*/
+/*.mx-6{*/
-/*    padding-left: 100px;*/
+/*    margin-left: 20rem !important;*/
-/*}*/
+/*    margin-right: 20rem  !important;*/
-/*.carousel-indicators-round{*/
-/*     width: 14px;*/
-/*     height: 14px;*/
-/*     border: 2px solid black;*/
-/*     border-radius: 100%;*/
 /*}*/
+.grid-color-wrap{
+    background-color: #EFF0F0;
+}
+.grid-wrapper{
+    margin-left: 500px;
+    margin-right: 500px;
+}
+.first-row{
+    padding-top: 50px;
+}
+.meet-title{
+    text-align: center;
+    padding-bottom: 40px;
+}
+.meet-title h2{
+    font-weight: bold;
+}
+.big-line-between{
+    padding-top: 10px;
+    /*padding-bottom: 20px;*/
+    width: 50px;
+    border-bottom: 4px solid black;
+    margin: auto;
+}
+.circle-img{
+    padding-top: 10px;
+    border-radius: 50%;
+}
+.grid-img-text{
+    padding-top: 20px;
+    /*padding-left: 40px;*/
+}
+.name{
+    font-size: 20px;
+}
+
+@media only screen and (max-width: 480px){
+    .grid-wrapper{
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+}
+
+@media (min-width: 600px) and (max-width: 1024px){
+    .grid-wrapper{
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+}

output/theme/css/about-us.css~

@@ -89,7 +89,7 @@
     background-color: #ffffff;
 }
 .carousel-inner{
-   margin-bottom: 50px;
+   margin-bottom: 100px;
 }
 .row-carousel{
     margin-left: 100px;
@@ -105,14 +105,34 @@
     padding-bottom: 20px;
 }
 .pesa-items{
-    padding-top: 100px;
+    padding-top: 150px;
 }
-/*.col-carousel-left{*/
+.pesa {
-/*    padding-left: 100px;*/
+    font-size: 20px;
-/*}*/
+    font-weight: bold;
-/*.carousel-indicators-round{*/
+    padding-bottom: 10px;
-/*     width: 14px;*/
+}
-/*     height: 14px;*/
+.cert-link{
-/*     border: 2px solid black;*/
+    text-decoration: none;
-/*     border-radius: 100%;*/
+}
+.line-between{
+    padding-top: 10px;
+    /*padding-bottom: 10px;*/
+    width: 50px;
+    border-bottom: 2px solid black;
+}
+.carousel-titles{
+    font-weight: bold;
+    padding-top: 10px;
+}
+.mx-6{
+    margin-left: 20rem !important;
+    margin-right: 20rem  !important;
+}
+/*.grid-wrapper{*/
+/*    margin-left: 400px;*/
+/*    margin-right: 400px;*/
 /*}*/
+.first-row{
+    padding-top: 20px;
+}