Code fuer das Objekt "HTML Code" im Programm WebSite X5, um Accordion-FAQ zu erstellen

----------- HTML-Code -----------

<details>
  <summary>Frage 1: Lorem Ipsum</summary>
  <div class="content">
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!
    </p>
    <img src="https://findelinks.de/go-blogseite/images/large-2306471.jpg" alt="">
    <p>
      Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.
    </p>
  </div>
</details>

<details>
  <summary>Frage 2: Ucimus iure officia quos possimus</summary>
  <div class="content">
    <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum
    </p>
  
 <a href="./images/coffee-2306471_1920.jpg" onclick ="return x5engine.imShowBox({ media:[{type: 'iframe', url: './images/coffee-2306471_1920.jpg', width: 1920, height: 1080, description: ''}]}, 0, this);"><img src="./images/coffee-2306471_1920.jpg" title="" alt="" width="360" height="240" />
 </a>

    <p>
      Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.
    </p>
  </div>
</details>

<details>
  <summary>Frage 3: Possimus cimus iure officia quos</summary>
  <div class="content">
<div class="container">
      <div class="image123">
      <a href="./images/cosmos-3711568_1920.jpg" onclick ="return x5engine.imShowBox({ media:[{type: 'iframe', url: './images/cosmos-3711568_1920.jpg', width: 1920, height: 1080, description: ''}]}, 0, this);"><img src="./images/cosmos-3711568_1920.jpg" title="" alt="" width="250" height="170" /> </a>
      </div>
      <div class="text">
        <h1>This is a beautiful picture.</h1>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      </div>
    </div>
</div>
</details>

<details>
  <summary>Frage 4: Officia quos possimus iure</summary>
  <div class="content">

<div class="container">
      
      <div class="text">
        <h1>Das ist eine Liste:</h1>
        <br>
        ● Lorem<br>
        ● Ipsum<br>
        ● Officia<br>
        ● Possimus<br>
        ● Accusam<br>
        <br>Lorem ipsum dolor sit amet.
      </div>
      <div class="image123">
      <a href="./images/cosmos-3711568_1920.jpg" onclick ="return x5engine.imShowBox({ media:[{type: 'iframe', url: './images/cosmos-3711568_1920.jpg', width: 1920, height: 1080, description: ''}]}, 0, this);"><img src="./images/cosmos-3711568_1920.jpg" title="" alt="" width="250" height="170" /> </a>
      </div
      
    </div>
</div>
</details>

----------- CSS-Code (Fuer den Tab "Erweitert") -----------

/* # The Rotating Marker # */
details summary::-webkit-details-marker { display: none; }
summary::before {
  font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
  content: "▶";
  position: absolute;
  top: 1rem;
  left: 0.8rem;
  transform: rotate(0);
  transform-origin: center;
  transition: 0.2s transform ease;
}
details[open] > summary:before {
  transform: rotate(90deg);
  transition: 0.45s transform ease;
}

/* # The Sliding Summary # */
details { overflow: hidden; }
details summary {
  position: relative;
  z-index: 10;
}
@keyframes details-show {
  from {
    margin-bottom: -80%;
    opacity: 0;
    transform: translateY(-100%);
  }
}
details > *:not(summary) {
  animation: details-show 500ms ease-in-out;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  color: transparent;
  overflow: hidden;
}
details[open] > *:not(summary) { color: inherit; }

/* # Style 2 # */
details.style2 summary::before {
  content: "×";
  color: #FFF;
  font-size: 2rem;
  line-height: 1rem;
  transform: rotate(-45deg);
  top: 1.2rem;
  left: 0.5rem;
}
details[open].style2 > summary:before {
  transform: rotate(90deg);
  color: #F00 !important;
  transition: color ease 2s, transform ease 1s;
}

/* # Style 3 # */
details.style3 summary::before {
  content: "›";
  font-size: 2.5rem;
  line-height: 1rem;
  top: 1.3rem;
  left: 0rem;
  margin: -0.5rem -0.5rem 0 0.5rem;
  transform-origin: bottom center;
  transition: margin linear 0.05s;
}
details.style3:hover > summary:before {
  color: #FFF;
}
details[open].style3 > summary:before {
  left: 0rem;
  color: #CCC;
  transform: rotate(90deg);
  margin-left: 0.4rem;
  transition: color ease 2s, transform ease 1s, margin ease 1s;
}
@supports (-webkit-touch-callout: none) {
  details.style3 summary::before { top: 1.6rem; }
  details[open].style3 > summary:before { top: 1.3rem; transition: all 0.8s; }
}

/* # Style 4 # */
details.style4 summary {
  padding-right: 2.2rem;
  padding-left: 1rem;
}
details.style4 summary::before {
  content: "×";
  color: #FFF;
  font-size: 2rem;
  line-height: 1rem;
  transform: rotate(-45deg);
  top: 1.2rem;
  left: unset;
  right: 0.6rem;
}
details[open].style4 > summary:before {
  transform: rotate(90deg);
  color: #F00 !important;
  transition: color ease 2s, transform ease 1s;
}

/* # Style 5 # */
details.style5 summary {
  padding-right: 2.2rem;
  padding-left: 1rem;
}
details.style5 summary::before {
  content: "🙈";
  font-size: 1.5rem;
  top: 0.5rem;
  left: unset;
  right: 0.5rem;
  transform: rotate(0);
}
details.style5:hover > summary::before {
  content: "🙊";
}
details[open].style5 > summary::before {
  content: "🐵";
  transform: rotate(0deg);
}
details[open].style5 > summary:hover::before {
  content: "🙉";
}
details .monkey-see { display: inline; }
details .monkey-hide { display: none; }
details[open] .monkey-see { display: none; }
details[open] .monkey-hide { display: inline; }

/* # Style 6 # */
details.style6 summary {
  padding-right: 2.2rem;
  padding-left: 1rem;
}
details.style6 summary::before {
  content: "❔";
  font-size: 1.5rem;
  top: 0.5rem;
  left: unset;
  right: 0.5rem;
  transform: rotate(0);
}
details.style6:hover > summary:before {
  content: "👁️‍🗨️";
}
details[open].style6 > summary:before {
  content: "❌";
  transform: rotate(0deg);
}

/* # Style 7 # */
details.style7 summary {
  padding-left: 3rem;
}
details[open].style7 summary,
details.style7:hover summary {
  background: #000;
  color: #CCC;
}
details[open].style7 summary strong,
details.style7:hover summary strong {
  color: #FDCE4C;
}
details.style7:hover summary strong { color: #ffdf87; }
details.style7 summary::before {
  content: "🌑";
  font-size: 1.5rem;
  top: 0.5rem;
  left: 0.5rem;
  transform: rotate(0);
}
details.style7:hover > summary::before {
  content: "🌕";
}
details[open].style7 > summary::before {
  content: "🌕";
  transform: rotate(0deg);
}
details[open].style7 > summary:hover::before {
  content: "🌕";
}
details .moon-new { display: inline; }
details .moon-full { display: none; }
details[open] .moon-new { display: none; }
details[open] .moon-full { display: inline; }
details.style7 .content { background: #DDD; }

/* # Just Some Pretty Styles # */
body { font-family: "Open Sans", sans-serif; padding-bottom: 400px; }
img { max-width: 100%; }
p { margin: 0; padding-bottom: 10px; }
p:last-child { padding: 0; }
details {
  max-width: 500px;
  box-sizing: border-box;
  margin-top: 5px;
  background: transparent;
}
summary {
  border: 4px solid transparent;
  outline: none;
  padding: 1rem;
  display: block;
  background: orange;
  color: black;
  border-radius: 15px;
  padding-left: 2.2rem;
  position: relative;
  cursor: pointer;
}
details[open] summary,
summary:hover {
  color: #FFCA28;
  background: #444;
}
summary:hover strong,
details[open] summary strong,
summary:hover::before,
details[open] summary::before {
  color: #FFA128;
}
.content {
  padding: 10px;
  border: 2px solid #888;
  border-radius: 10px;
  border-top: none;
}

/* Externer CSS-Code für Bild und Text nebeneinander */
.container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 column-gap: 5px;
}

.img123 {
  width: 350px;
}

.text {
  text-align: left;
  font-size: 15px;
}