add FAQ section

css/common.css

@@ -701,4 +701,61 @@ footer a:is(:focus, .active, .active:hover) {
 
 footer a:is(.active) {
   text-decoration-color: var(--white);
-}
+}
+
+.cc-faq {
+ margin-block: 3rem 6rem;
+}
+
+.cc-faq h2 {
+  text-align: center;
+}
+
+.cc-faq ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.cc-faq a {
+  display: inline-flex;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.cc-faq li {
+  width: 100%;
+}
+
+.cc-faq li {
+  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);
+ cursor: pointer;
+}
+
+.cc-faq p {
+ margin-block-start: 0.5rem;
+ margin-block-end: 0;
+ display: none;
+}
+
+.cc-faq p.active {
+  display: block;
+ }
+
+@media only screen and (min-width: 768px) {
+  .cc-faq li {
+    width: 100%;
+    align-self: flex-start;
+    text-align: start;
+  }
+}

index.html

@@ -125,6 +125,64 @@ <h2>Location</h2>
       </div>
     </section>
 
+    <!-- <section>
+      <div class="cc-faq">
+        <div>
+          <h2>FAQ</h2>
+          <ul>
+         
+            <li>
+              <h3 onclick="toggleAnswer(event)">How big is the event?</h3>
+              <p>
+                There will be ~400 people on site in St. Leon-Rot. The number of people attending online is hard to predict.
+              </p>
+            </li>
+  
+            <li>
+              <h3 onclick="toggleAnswer(event)">Livestreams: do I need to register?</h3>
+              <p>
+                No 😁. All streams will be publicly accessible. We'll put up the URLs everywhere (including this site) as soon as the streams are live.
+              </p>
+            </li>
+  
+            <li>
+              <h3 onclick="toggleAnswer(event)">Will there be food and drinks on-site?</h3>
+              <p>
+                Yes 😋. And plenty, including coffee and vegetarian options. All free. Also for the evening event.<br>
+                In case you have special dietary requirements (such as gluten- or lactose intolerance), let us know <a href="mailto:[email protected]">via e-mail</a> and we'll work something out.
+              </p>
+            </li>
+  
+            <li>
+              <h3 onclick="toggleAnswer(event)">What's happening on the pre-conference evening on Mon, June 3?</h3>
+              <p>
+                There's an unofficial evening event happening on Monday, June 3, prior to the three <a href="https://code-connect.dev">Code Connect</a> events - <br><em>all</em> Code Connect participants are invited, from re>≡CAP, UI5con and ABAPconf.<br>
+                We'll meet at the cozy Spanish-stlye restaurant <a href="https://maps.app.goo.gl/Y6n4umHXctbBH7JV9">&raquo;La Tortuga&laquo; in Walldorf</a> - there'll be no agenda or seating order, we'll just get together for food, drinks, tech- & non-tech talk and being merry.<br>
+                Doors open a 7pm (19:00 CEST) and we have the location to ourselves.<br>
+                Food is flat €17 for an all-in Tapas 🥗🍤🧆🍖 buffet that includes vegetarian tapas; drinks are separate and to be paid individually.<br>
+                Note that you'll be asked to pay the flat €17 at the door (credit cards accepted) where you'll also get a bracelet indicating you're with the cool Code Connect people 😎
+              </p>
+            </li>
+  
+            <li>
+              <h3 onclick="toggleAnswer(event)">WLAN on-site?</h3>
+              <p>Yes. SSID and access code(s) will be provided upon check-in and in the conference app.</p>
+            </li>
+  
+            <li>
+              <h3 onclick="toggleAnswer(event)">I'm off after the event. Any place to park my bags/luggage?</h3>
+              <p>Yes. There'll be a locked room available to park bags/luggage in. Just ask at the registration desk.</p>
+            </li>
+  
+            <li>
+              <h3 onclick="toggleAnswer(event)">Is there a dress code?</h3>
+              <p>Please. No. You wear what you're comfy in. So will the org team.</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section> -->
+
     <section class="cc-sponsors">
       <h2>Our sponsors</h2>
       <div class="cc-logo-container">
@@ -156,3 +214,9 @@ <h2>Our sponsors</h2>
 </body>
 
 </html>
+
+<script>
+  function toggleAnswer(e) {
+    var nextElement = e.target.nextElementSibling.classList.toggle("active");
+  }
+</script>