Added speaker's section

index.html

@@ -60,7 +60,29 @@ <h3 class="sectionSubheader">The below describes the major domains under which y
             </div>
         </div>
     </section>
-    <!-- FAQ SECTION -->
+    <!--speakers spot-->
+    <section class="section">
+      <h1 class="sectionHeader">SPEAKER'S SECTION</h1>
+      <div class="speakerCards">
+        <div class="speakerCard">
+          <img src="spk1.jpg" alt="" class="speakerImg">
+          <h2 class="speakerhead">Aditya A B</h2>
+          <p class="speakerdesc">info about them</p>
+        </div>
+        <div class="speakerCard">
+          <img src="spk2.jpg" alt="" class="speakerImg">
+          <h2 class="speakerhead">Sita A B</h2>
+          <p class="speakerdesc">info about them</p>
+        </div>
+        <div class="speakerCard">
+          <img src="spk3.jpg" alt="" class="speakerImg">
+          <h2 class="speakerhead">ABDUL A B</h2>
+          <p class="speakerdesc">info about them</p>
+        </div>
+
+      </div>
+    </section>
+    FAQ SECTION
     <div class="container-fixed">
         <h1 id="top">Frequently Asked Questions</h1>
     </div>
@@ -164,5 +186,6 @@ <h1 id="top">Frequently Asked Questions</h1>
             } 
         }, 1000);
     </script>
+
 </body>
 </html>

style.css

@@ -9,12 +9,14 @@
 html{
     margin: 0;
     padding: 0;
-    color: var(--white);
+    color: var(--white) !important;
+    overflow-x: hidden;
 }
 
 body {
     background-color: var(--black);
     font-family: 'Poppins', sans-serif;
+
 }
 
 .sectionHeader{
@@ -154,4 +156,29 @@ body {
 }
 .FAQ-S{
     text-align: center;
-}
+}
+/*SPEAKER*/
+.speakerCard{
+    padding: 20px;
+    width: fit-content;
+
+
+}
+.speakerCard .speakerImg
+{
+    border-radius: 20px;
+}
+.speakerCards{
+    text-align: center;
+    margin: auto;
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+}
+@media (max-width: 420px) 
+{
+    .speakerCards{
+        flex-direction: column;
+
+    }
+  }