add FAQ section

Author: InnaAtanasova

css/common.css

@@ -701,4 +701,63 @@ footer a:is(:focus, .active, .active:hover) {
 
 footer a:is(.active) {
   text-decoration-color: var(--white);
-}
+}
+
+.cc-faq {
+  padding-inline: 2rem;
+}
+
+.cc-faq h2 {
+  text-align: center;
+}
+
+.cc-faq ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.cc-faq li {
+  width: 100%;
+}
+
+.cc-faq li:nth-child(even) {
+  align-self: center;
+  text-align: center;
+}
+
+.cc-faq li:nth-child(odd) {
+  align-self: center;
+  text-align: center;
+}
+
+.cc-faq h3 {
+ font-size: var(--type-0);
+ padding-block: 0;
+ margin-block: 2rem 0;
+ color: var(--code-connect-color);
+}
+
+.cc-faq p {
+ margin-block-start: 0.5rem;
+ margin-block-end: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .cc-faq li {
+    width: 70%;
+  }
+
+  .cc-faq li:nth-child(even) {
+    align-self: flex-end;
+    text-align: end;
+  }
+
+  .cc-faq li:nth-child(odd) {
+    align-self: flex-start;
+    text-align: start;
+  }
+  
+}

index.html

@@ -125,6 +125,34 @@ <h2>Location</h2>
       </div>
     </section>
 
+    <!-- <section>
+      <div class="cc-faq">
+        <div>
+          <h2>FAQ</h2>
+          <ul>
+            <li>
+              <h3>Frequently Asked Question?</h3>
+              <p>Answer. Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis
+                ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed
+                fermentum risus. Phasellus venenatis ultricies dignissim.</p>
+            </li>
+            <li>
+              <h3>Frequently Asked Question?</h3>
+              <p>Answer. Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis
+                ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed
+                fermentum risus. Phasellus venenatis ultricies dignissim.</p>
+            </li>
+            <li>
+              <h3>Frequently Asked Question?</h3>
+              <p>Answer. Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis
+                ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed
+                fermentum risus. Phasellus venenatis ultricies dignissim.</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section> -->
+
     <section class="cc-sponsors">
       <h2>Our sponsors</h2>
       <div class="cc-logo-container">