added moderators and footer

Author: namangupta1399

index.html

@@ -175,7 +175,7 @@ <h4 class="text-secondary">Chryz-Hub Website</h4>
       </div> -->
     </section>
 
-    <section id="video-section" class="py-5 mx-5">
+    <section id="video-section" class="py-5 my-5">
       <div class="container">
         <div class="row">
           <div class="col-12 col-lg-6">
@@ -199,6 +199,113 @@ <h4 class="text-secondary">Chryz-Hub Website</h4>
         </div>
       </div>
     </section>
+
+    <section id="moderators" class="py-4 mt-5">
+      <div class="container">
+        <h2 class="text-center fw-bold my-5 heading">Our Moderators</h2>
+        <div class="row g-5">
+          <div class="col-12 col-lg-6">
+            <div class="moderator">
+              <img src="./src/assets/images/moderator-sample.jpg" alt="moderator image" class="moderator-img">
+              <div class="moderator_details">
+                <h5 class="fw-bold moderator_name">Olanrewaju Alaba</h5>
+                <p class="mb-0">Open-Source Enthusiast</p>
+                <ul class="moderator_content">
+                  <li>Developer</li>
+                  <li>Technical writer/blogger</li>
+                  <li>Aspiring Data scientist</li>
+                </ul>
+                <div class="social-profiles">
+                  <a href="#" class="github-profile">
+                    <i class="fab fa-github"></i>
+                  </a>
+                  <a href="#" class="website-link">
+                    <i class="fas fa-link"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-lg-6">
+            <div class="moderator">
+              <img src="./src/assets/images/moderator-sample.jpg" alt="moderator image" class="moderator-img">
+              <div class="moderator_details">
+                <h5 class="fw-bold moderator_name">Olanrewaju Alaba</h5>
+                <p class="mb-0">Open-Source Enthusiast</p>
+                <ul class="moderator_content">
+                  <li>Developer</li>
+                  <li>Technical writer/blogger</li>
+                  <li>Aspiring Data scientist</li>
+                </ul>
+                <div class="social-profiles">
+                  <a href="#" class="github-profile">
+                    <i class="fab fa-github"></i>
+                  </a>
+                  <a href="#" class="website-link">
+                    <i class="fas fa-link"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-lg-6">
+            <div class="moderator">
+              <img src="./src/assets/images/moderator-sample.jpg" alt="moderator image" class="moderator-img">
+              <div class="moderator_details">
+                <h5 class="fw-bold moderator_name">Olanrewaju Alaba</h5>
+                <p class="mb-0">Open-Source Enthusiast</p>
+                <ul class="moderator_content">
+                  <li>Developer</li>
+                  <li>Technical writer/blogger</li>
+                  <li>Aspiring Data scientist</li>
+                </ul>
+                <div class="social-profiles">
+                  <a href="#" class="github-profile">
+                    <i class="fab fa-github"></i>
+                  </a>
+                  <a href="#" class="website-link">
+                    <i class="fas fa-link"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-lg-6">
+            <div class="moderator">
+              <img src="./src/assets/images/moderator-sample.jpg" alt="moderator image" class="moderator-img">
+              <div class="moderator_details">
+                <h5 class="fw-bold moderator_name">Olanrewaju Alaba</h5>
+                <p class="mb-0">Open-Source Enthusiast</p>
+                <ul class="moderator_content">
+                  <li>Developer</li>
+                  <li>Technical writer/blogger</li>
+                  <li>Aspiring Data scientist</li>
+                </ul>
+                <div class="social-profiles">
+                  <a href="#" class="github-profile">
+                    <i class="fab fa-github"></i>
+                  </a>
+                  <a href="#" class="website-link">
+                    <i class="fas fa-link"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-center my-4">
+          <a href="#" class="text-white">View more</a>
+        </div>
+      </div>
+    </section>
+
+    <footer class="footer">
+      <div class="container">
+        <h4 class="copyright-text text-center py-5">
+          Copyright &copy; Chyrz-hub
+        </h4>
+      </div>
+    </footer>
     <!-- JAVASCRIPT -->
     <script src="./src/assets/javascript/script.js"></script>
 </body>

src/assets/css/styles.css

@@ -304,4 +304,64 @@ nav ul li a:focus {
   width: 80%;
   height: 100%;
   margin: 0 auto;
+}
+
+/* Video section ends */
+
+/* Moderators section */
+#moderators {
+  background-color: var(--darkBackground);
+}
+
+#moderators .heading {
+  color: #F4F4F480;
+}
+
+.moderator {
+  height: 100%;
+}
+
+.moderator .moderator-img {
+  display: block;
+  border-radius: 100px;
+  float: left;
+  shape-outside: circle(50%);
+  width: 200px;
+  height: 200px;
+  margin-right: 2rem;
+}
+
+.moderator .moderator_name {
+  color: inherit;
+}
+
+/* .moderator .moderator_content {
+  list-style: disc;
+} */
+
+.moderator .moderator_details {
+  color: #f4f4f4;
+  line-height: 2rem;
+}
+
+.moderator .social-profiles > a:link {
+  display: inline-block;
+}
+
+.moderator .social-profiles i {
+  color: #f4f4f4;
+  font-size: 24px;
+}
+
+.moderator .social-profiles > *:not(:last-child) {
+  margin-right: 1.5rem;
+}
+
+/* Footer starts */
+.footer {
+  background-color: var(--footerDarkBg);
+}
+
+.footer .copyright-text {
+  color: var(--mainBackground);
 }