feat: add stories section

assets/css/main.css

@@ -1624,27 +1624,15 @@ div.owl-controls,
 
 ----------------------------------------------------------------------------- */
 .news-bg-1 {
-  background-image: url(../img/latest-news/news-bg-1.jpg);
+  background-image: url(../img/strories/story-1.jpg);
 }
 
 .news-bg-2 {
-  background-image: url(../img/latest-news/news-bg-2.jpg);
+  background-image: url(../img/strories/story-2.jpg);
 }
 
 .news-bg-3 {
-  background-image: url(../img/latest-news/news-bg-3.jpg);
-}
-
-.news-bg-4 {
-  background-image: url(../img/latest-news/news-bg-4.jpg);
-}
-
-.news-bg-5 {
-  background-image: url(../img/latest-news/news-bg-5.jpg);
-}
-
-.news-bg-6 {
-  background-image: url(../img/latest-news/news-bg-6.jpg);
+  background-image: url(../img/strories/story-3.jpg);
 }
 
 .latest-news-bg {
@@ -1688,7 +1676,7 @@ p.excerpt {
 }
 
 .latest-news a.boxed-btn {
-  margin-top: 80px;
+  margin-top: 30px;
 }
 
 .news-text-box {
@@ -2132,7 +2120,7 @@ a.video-play-btn {
 .abt-section {
   padding-top: 50px;
   padding-bottom: 50px;
-  background-color: #e2e2e2;
+  background-color: #f3f3f3;
 }
 
 .abt-section .abt-text {
@@ -2823,3 +2811,24 @@ table.order-details tbody td {
   vertical-align: middle;
   width: 100%;
 }
+
+a.video-play-btn-1 {
+  position: absolute;
+  background-color: #b0009c;
+  color: #ffffff;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  line-height: 52px;
+  border-radius: 50%;
+  font-size: 20px;
+  padding-left: 5px;
+  display: block;
+  z-index: 2;
+  top: 25%;
+  margin-top: -45px;
+  -webkit-box-shadow: 0 0 20px #adadad;
+  box-shadow: 0 0 20px #adadad;
+  left: 50%;
+  margin-left: -45px;
+}

index.html

@@ -196,6 +196,88 @@ <h2>Watch <span class="orange-text">Mellidai Mettu</span></h2>
   </div>
   <!-- end Mellidai Mettu section -->
 
+  <!-- stories -->
+  <div class="latest-news pt-80 pb-80">
+    <div class="container">
+
+      <div class="row">
+        <div class="col-lg-8 offset-lg-2 text-center">
+          <div class="section-title">
+            <h3>Our<span class="orange-text"> Stories</span></h3>
+            <p>We are here to make our dreams transform into thoughts, and thoughts result in action.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-lg-4 col-md-6">
+          <div class="single-latest-news">
+            <a>
+              <div class="latest-news-bg news-bg-1"> <a target="_blank"
+                  href="https://www.youtube.com/watch?v=CSgXtRJv-Us" class="video-play-btn-1 popup-youtube"><i
+                    class="fas fa-play"></i></a></div>
+            </a>
+            <div class="news-text-box">
+              <h3><a>Hands on Trainings for them in STEAM</a></h3>
+
+              <p class="excerpt">We provide a challenged based working experience for local women to cater for the tech
+                industries in the country.</p>
+              <a target="_blank" href="https://www.youtube.com/playlist?list=PLdoNFLk3g0PAl3E3dw-Q5W_b3Q4DiSZ34"
+                class="read-more-btn">view more <i class="fas fa-angle-right"></i></a>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-4 col-md-6">
+          <div class="single-latest-news">
+            <a>
+              <div class="latest-news-bg news-bg-2"><a>
+                  <div class="latest-news-bg news-bg-2"> <a target="_blank"
+                      href="https://www.youtube.com/watch?v=hYQ0YpwnJJ0" class="video-play-btn-1 popup-youtube"><i
+                        class="fas fa-play"></i></a></div>
+                </a></div>
+            </a>
+            <div class="news-text-box">
+              <h3><a>Bootcamps for women by women</a></h3>
+
+              <p class="excerpt">We conduct bootcamps with the purpose of preparing the female trainees for a
+                gender-balanced society.</p>
+              <a target="_blank" href="https://www.youtube.com/playlist?list=PLdoNFLk3g0PAl3E3dw-Q5W_b3Q4DiSZ34"
+                class="read-more-btn">view more <i class="fas fa-angle-right"></i></a>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-4 col-md-6 offset-md-3 offset-lg-0">
+          <div class="single-latest-news">
+            <a>
+              <div class="latest-news-bg news-bg-3"><a>
+                  <div class="latest-news-bg news-bg-3"> <a target="_blank"
+                      href="https://www.youtube.com/watch?v=3OiInHE9XA0" class="video-play-btn-1 popup-youtube"><i
+                        class="fas fa-play"></i></a></div>
+                </a></div>
+            </a>
+            <div class="news-text-box">
+              <h3><a>Startup Incubation Programme</a></h3>
+
+              <p class="excerpt">We join as the incubator to incubate the social innovation ideas balancing
+                their social mission and business venture.
+              </p>
+              <a target="_blank" href="https://www.youtube.com/playlist?list=PLdoNFLk3g0PAl3E3dw-Q5W_b3Q4DiSZ34"
+                class="read-more-btn">view more <i class="fas fa-angle-right"></i></a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-12 text-center">
+          <a target="_blank" href="https://www.youtube.com/playlist?list=PLdoNFLk3g0PAl3E3dw-Q5W_b3Q4DiSZ34"
+            class="boxed-btn">More
+            Stories</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- end stories -->
+
 
   <!-- team section -->
   <div class="mt-15 pt-10 pb-10 team-section" id="team">