Steckbriefvorlage

Bitte diese Vorlage nutzen:

Code:

<center><div class="ash-steckbrief">
<div class="ash-head">
  <img src="LINK ZUM BILD (am besten Breitbild)">
</div>

  <input type="radio" name="tab" id="tab1" checked>
  <div class="tabs" style="background: none;">
    <label for="tab1" style="color: var(--gray);"><i class="fa-solid fa-id-card"></i>Wer bist du</label>
  </div>

  <div class="content">
    <!-- TAB 1 -->
    <div class="tab-content tab1">
      <div class="info-grid">
        <div class="key">Vollständiger Name</div><div class="value">AUSFÜLLEN</div>
        <div class="key">Geburtstag + Alter</div><div class="value">AUSFÜLLEN</div>
        <div class="key">Herkunft</div><div class="value">AUSFÜLLEN</div>
        <div class="key">Augenfarbe</div><div class="value">AUSFÜLLEN</div>
        <div class="key">Haarfarbe</div><div class="value">AUSFÜLLEN</div>
        <div class="key">Größe</div><div class="value">AUSFÜLLEN</div>
        <div class="key">Tattoos oder Piercings</div><div class="value">AUSFÜLLEN</div>
        <div class="key">Rasse</div><div class="value">AUSFÜLLEN</div>
        <div class="key">sexuelle Orientierung</div><div class="value">AUSFÜLLEN</div>
      </div>

      <div class="likes">
        <div>
          <h4><i class="fa-solid fa- bolt"></i> Stärken</h4>
          <ul>
            <li>Stärke</li>
            <li>Stärke</li>
            <li>Stärke</li>
            <li>Stärke</li>
            <li>Stärke</li>
          </ul>
        </div>
        <div>
          <h4><i class="fa-solid fa- bolt"></i> Schwächen</h4>
          <ul>
            <li>Schwäche</li>
            <li>Schwäche</li>
            <li>Schwäche</li>
            <li>Schwäche</li>
            <li>Schwäche</li>
          </ul>
        </div>
      </div>

      <div class="likes">
        <div>
          <h4><i class="fa-solid fa- bolt"></i> sexuelle Vorlieben</h4>
          <ul>
            <li>AUSFÜLLEN</li>
            <li>AUSFÜLLEN</li>
            <li>AUSFÜLLEN</li>
            <li>AUSFÜLLEN</li>
            <li>AUSFÜLLEN</li>
          </ul>
        </div>
        <div>
          <h4><i class="fa-solid fa- bolt"></i> sexuelle Abneigungen</h4>
          <ul>
            <li>AUSFÜLLEN</li>
            <li>AUSFÜLLEN</li>
            <li>AUSFÜLLEN</li>
            <li>AUSFÜLLEN</li>
            <li>AUSFÜLLEN</li>
          </ul>
        </div>
      </div>

      <div class="geschichte-container">
        <div class="geschichte-titel">
          <div class="key" style="grid-column: 1 / -1; text-align: center; font-size: 1.1em; padding: 6px;">
            GESCHICHTE
          </div>
        </div>
        <div class="geschichte-text">
          AUSFÜLLEN
        </div>
      </div>
    </div>
  </div>
</div></center>