change about.md to html file

Author: mihrab34

_includes/about.html

@@ -0,0 +1,11 @@
+<div id="about">
+  <div class="p-3">
+    <h1>Mission</h1>
+    <p>Bridging the digital divide, promoting entrepreneurship, and fostering a thriving Open Source ecosystem in Africa</p>
+  </div>
+  <div class="p-3">
+    <h1>Vision</h1>
+    <p>To create a future where open source software is embraced and accessible across Africa, integrating African languages and cultures. We envision a continent where open source drives local innovation, bridges digital gaps, and fosters sustainable development. 
+        We empower Africans to shape their digital future and contribute to the global open source community through collaboration and inclusive participation.</p>
+  </div>
+</div>

_includes/header.html

@@ -7,9 +7,9 @@
       </div>
 
       <ul class="nav justify-content-end">
-        <li class="nav-item"><a href="/about/" class="nav-link">About</a></li>
-        <li class="nav-item"><a href="#" class="nav-link">Programs</a></li>
-        <li class="nav-item"><a href="#" class="nav-link">Code of Conduct</a></li>
+        <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
+        <li class="nav-item"><a href="#programs" class="nav-link">Programs</a></li>
+        <!-- <li class="nav-item"><a href="#" class="nav-link">Code of Conduct</a></li> -->
         <li class="nav-item"><a href="https://mesrenyamedogbe.hashnode.dev/" class="nav-link" target="_blank">Blog</a></li>
       </ul>
     </div>

_includes/home.html

@@ -0,0 +1 @@
+<section></section>

_includes/programs.html

@@ -29,12 +29,13 @@ <h1>{{ site.overview }}</h1>
         </div>
     </header>
 
-    <section>
-      <div class="container">
-        <div class="d-flex justify-content-end">
+    <section class="container">
+     {% include about.html %}
+     {% include programs.html %}
+      
+        <div class="d-flex flex-column justify-content-around align-items-center ">
           <div class="col-lg-10 col-12 content djc-default">{{content}}</div>
         </div>
-      </div>
     </section>
 
     {% include footer.html %}

_layouts/default.html

@@ -1,4 +1,16 @@
 /* Custom Stylesheet */
+
+body {
+    font-family: "Noto Sans", sans-serif;
+        scroll-snap-type: y mandatory;
+        overflow-y: scroll;
+}
+
+#about {
+    scroll-snap-align: start;
+    /* Add other styles as needed */
+}
+
 .navbar {
     background-color: black;
 }
@@ -27,7 +39,7 @@
 @keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}
 
 .header-text h1 {
-    font-size: 1.5rem;
+    font-size: 1.7rem;
 }
 .logo {
     padding: 0.5rem 1rem;