Benutzer:Nöth: Unterschied zwischen den Versionen

Aus Stadtsprachen
Wechseln zu:Navigation, Suche
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<html>
<html>
  <style>
<style>
    .image_holder {
/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
 
:root {
  --accent-color: #a876aa;
}
 
body {
  font-family: "Poppins", sans-serif;
  background-color: #eee;
  color: #444;
}
 
h1 {
  margin: 50px 0 30px;
  text-align: center;
  color: var(--accent-color);
}
 
.faq-container {
  max-width: 600px;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
 
.faq {
  box-sizing: border-box;
  background: transparent;
  padding: 30px;
   position: relative;
   position: relative;
   background-color: #333;
   overflow: hidden;
   color: #fff;
}
   height: 25%;
 
   width: 25%;
.faq:not(:first-child) {
   border: 1px solid #ddd;
  border-top: 1px solid #e6e6e6;
}
 
.faq-title {
  margin: 0 35px 0 0;
}
 
.faq-text {
  margin: 30px 0 0;
   display: none;
   line-height: 1.5rem;
}
 
.faq.active {
   background-color: #f8f8f8;
   box-shadow: inset 4px 0px 0px 0px var(--accent-color);
}
 
.faq.active .faq-title {
  color: var(--accent-color);
}
}


.bg_image {
.faq.active .faq-text {
  width: 100%;
   display: block;
   display: block;
}
}
#overlay {
 
   background-color: #000;
.faq-toggle {
   opacity: 0.51;
   background-color: transparent;
   width: 100%;
   border: 1px solid #e6e6e6;
   height: 100%;
   color: inherit;
  position: absolute;
   border-radius: 50%;
  left: 0;
   cursor: pointer;
  top: 0;
}
.foreground_text_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
   height: 100%;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
  font-size: 16px;
  padding-top: 3px;
  position: absolute;
  top: 30px;
  right: 30px;
  height: 30px;
  width: 30px;
  transition: 0.3s ease;
}
.faq-toggle:focus {
  outline: none;
}
}
.foreground_text {
 
   font-size: 30px;
.faq.active .faq-toggle {
   padding: 40px;
   transform: rotate(180deg);
  background-color: var(--accent-color);
  border-color: var(--accent-color);
   color: #fff;
}
}
  </style>
</style>
   <div class="image_holder">
<!--=============== FONT AWESOME ===============-->
     <div class="bg_image_container">
<h1>Frequently Asked Questions</h1>
       <img src="https://kallimachos.de/stadtsprachen/images/stadtsprachen/5/5e/Sprachhandlungen1.jpg" alt="" class="bg_image img-cta">
<div class="faq-container">
   <div class="faq">
     <h3 class="faq-title">
       Lorem ipsum dolor sit amet.
    </h3>
    <p class="faq-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod nobis, repellat neque non dicta
      fugiat veritatis sit delectus perspiciatis quis?</p>
    <button class="faq-toggle">
      <i class="fas fa-angle-down"></i>
    </button>
   </div>
   </div>
   <div id="overlay"></div>
 
     <div class="foreground_text_container">
   <div class="faq active">
       <div class="foreground_text">SPRACHHANDLUNGEN</div>
    <h3 class="faq-title">
  </div>
      Lorem ipsum dolor sit amet.
    </h3>
    <p class="faq-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod nobis, repellat neque non dicta
      fugiat veritatis sit delectus perspiciatis quis?</p>
    <button class="faq-toggle">
      <i class="fas fa-angle-down"></i>
    </button>
  </div>
 
  <div class="faq">
    <h3 class="faq-title">
      Lorem ipsum dolor sit amet.
    </h3>
    <p class="faq-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod nobis, repellat neque non dicta
      fugiat veritatis sit delectus perspiciatis quis?</p>
     <button class="faq-toggle">
      <i class="fas fa-angle-down"></i>
    </button>
  </div>
 
  <div class="faq">
    <h3 class="faq-title">
      Lorem ipsum dolor sit amet.
    </h3>
    <p class="faq-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod nobis, repellat neque non dicta
       fugiat veritatis sit delectus perspiciatis quis?</p>
    <button class="faq-toggle">
      <i class="fas fa-angle-down"></i>
    </button>
  </div>
 
  <div class="faq">
    <h3 class="faq-title">
      Lorem ipsum dolor sit amet.
    </h3>
    <p class="faq-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod nobis, repellat neque non dicta
      fugiat veritatis sit delectus perspiciatis quis?</p>
    <button class="faq-toggle">
      <i class="fas fa-angle-down"></i>
    </button>
   </div>
   </div>
</div>
</html>
</html>

Version vom 2. November 2023, 09:36 Uhr

Frequently Asked Questions

Lorem ipsum dolor sit amet.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod nobis, repellat neque non dicta fugiat veritatis sit delectus perspiciatis quis?

Lorem ipsum dolor sit amet.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod nobis, repellat neque non dicta fugiat veritatis sit delectus perspiciatis quis?

Lorem ipsum dolor sit amet.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod nobis, repellat neque non dicta fugiat veritatis sit delectus perspiciatis quis?

Lorem ipsum dolor sit amet.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod nobis, repellat neque non dicta fugiat veritatis sit delectus perspiciatis quis?

Lorem ipsum dolor sit amet.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod nobis, repellat neque non dicta fugiat veritatis sit delectus perspiciatis quis?

Abgerufen von „https://stadtsprachen.kallimachos.de/index.php?title=Benutzer:Nöth&oldid=9720“
Diese Seite wurde zuletzt am 2. November 2023 um 09:36 Uhr bearbeitet.
Impressum / Datenschutz