Steckbriefvorlage für das Profil

[Der Phönix]

Hallo zusammen,

den folgenden Steckbrief könnt ihr für das HTML-basierte Steckbrief-Profilfeld benutzen, sofern ihr keine eigene Vorlage nutzen oder einen ganz eigenen Code schreiben wollt. Der Steckbrief wurde nach dieser Vorlage angepasst.
Da der Code fehlerfrei ist, ist bei Anzeigefehlern davon auszugehen, dass bei eurer Bearbeitung des Codes etwas schiefgelaufen ist. Überprüft in diesem Fall also zunächst eure eigens vorgenommenen Änderungen. Wir verpflichten uns nicht, für das Ausfüllen der Vorlage Support zu leisten. Bei Problemen kann die Community aber natürlich gerne im Discord-Server um Hilfe gebeten werden.

Code:

<style type="text/css"> :root {     --darkbg:;     --linkcolor: #5f3e43;     --fontcolor1:#798681;     --tableheadcolor: #171e20;     --maincolor1: #5f3e43; }           #wsteckbriefwrapper{ text-align: left; width: 500px; height: auto; background: var(--tableheadcolor); color: var(--fontcolor1); font-family: sans-serif;     }     .wsteckbriefname{font-size: 2.0vw; padding: 5px; background: var(--maincolor1);font-family: 'Playfair Display', serif; text-align: center;}     .wsteckbriefbild{text-align: left; margin: 5px; border: 2px solid var(--linkcolor)}     .wsteckiflex{display: flex; justify-content: space-between;}     .wsteckisf{margin: 5px;}     .wsteckishofa{font-size: 20px; background: var(--maincolor1); padding: 2px 5px; margin: 8px 0px;width: 253px;}     .wsteckiquote {text-align: center; margin: 5px 0px; font-size: 25px; background: var(--linkcolor);}          .wsteckilongtext{height: 200px; overflow-y: scroll; padding: 5px; text-align: justify; border: 1px solid var(--linkcolor);}          .wsteckilongtext::-webkit-scrollbar{display: none; margin-bottom: 5px;}          .wsteckilongtitle{text-align: center; font-size: 30px;}                   #wsteckispecsbar{display: flex; margin-left: 20px; margin-top: 10px;} #strengths{float: left;margin-left: 5px; width: 275px; border-right: #ffffff 1px solid; height: 150px; overflow-y: hidden;} #weaknesses{float: right; margin-right: 5px; width: 265px;text-align: right; height: 150px; overflow-y: hidden;} .powertools{text-align: center; margin-bottom: 10px; font-size: 20px; font-weight: bolder;}     .wspecscontent::-webkit-scrollbar{display: none;}     .wspecscontent{height: 100px; overflow-y: scroll;}     .wsteckigrading{height: 80px; overflow-y: scroll; font-size: 20px; padding: 5px; text-align: center;} .wsteckigrading::-webkit-scrollbar{display: none;}     .wsteckigradeitem{margin-bottom: 5px; background-color: var(--linkcolor); padding: 5px;}     .wsteckishorttext{height: 100px; overflow-y: scroll; padding: 5px; text-align: justify; border: 1px solid var(--linkcolor);margin-bottom: 10px;} .wsteckishorttext::-webkit-scrollbar{display: none;} </style>

<center>
<div id="wsteckbriefwrapper">
    <div class="wsteckbriefname">Vorname Nachname
    </div>
<div class="wsteckiflex">
    <img class="wsteckbriefbild" src="https://abload.de/img/200lnchz.gif" width="200px" alt="avatarbild">
<div class="wsteckisf">
    <div class="wsteckishofa">Geburtsdatum
    </div>    
    <div class="wsteckishofa">Blutstatus
    </div>
    <div class="wsteckishofa">Beruf
    </div>    
</div>
</div>

<div class="wsteckiquote">"Zitat/Spruch"</div>

<br><div class="wsteckilongtitle">Überschrift 1
    </div>
    <div class="wsteckilongtext">Text hier einfügen.
    </div>

<br><div class="wsteckilongtitle">Überschrift 2
    </div>
        <div class="wsteckilongtext">Text hier einfügen.
        </div>

<br><div class="wsteckilongtitle">Überschrift 3
    </div>
        <div class="wsteckilongtext">Text hier einfügen.
        </div>
<br>

<div id="wsteckispecsbar">
<div id="strengths"><div class="powertools"><br> Stärken</div><div class="wspecscontent">
Stärke 1 <br>
Stärke 2 <br>
Stärke 3 <br>
Stärke 4 <br>
Stärke 5 <br>
Stärke 6 </div>
</div>

<div id="weaknesses"><div class="powertools"><br> Schwächen</div> <div class="wspecscontent">
Schwäche 1 <br>
Schwäche 2 <br>
Schwäche 3 <br>
Schwäche 4 <br>
Schwäche 5 <br>
Schwäche 6 </div>
</div>
</div>

<div style="height:20px;"></div>
<div id="wsteckispecsbar">
<div id="strengths"><div class="powertools"><br> Vorlieben</div><div class="wspecscontent">
Vorliebe 1 <br>
Vorliebe 2 <br>
Vorliebe 3 <br>
Vorliebe 4 <br>
Vorliebe 5 <br>
Vorliebe 6 </div>
</div>

<div id="weaknesses"><div class="powertools"><br> Abneigungen</div> <div class="wspecscontent">
Abneigung 1 <br>
Abneigung 2 <br>
Abneigung 3 <br>
Abneigung 4 <br>
Abneigung 5 <br>
Abneigung 6 </div>
</div>
</div>
        </div></center>