+- Schattenharz (https://theballadofthebanshee.de/Schattenharz)
+-- Forum: Charaktere (https://theballadofthebanshee.de/Schattenharz/forumdisplay.php?fid=4)
+--- Forum: Gesuche (https://theballadofthebanshee.de/Schattenharz/forumdisplay.php?fid=14)
+--- Thema: Code-Vorlage (/showthread.php?tid=48)
Code-Vorlage - Hexenrat - 04.10.2020
Die Benutzung dieser Vorlage ist natürlich freigestellt. Danke an Merleadhara für das Bereitstellen des Codes!
Die Bilder haben die Größe von 150x150 px. Diese Größe sollte beibehalten werden, damit der Code auch richtig angezeigt wird.
Vergleichsweise unauffällig ein Gesuchstitel
Vergleichsweise unauffällig ein Gesuchsuntertitel
Vorname Nachname
Untertitel / gesuchter Charakter
Fakt
Fakt
Fakt
Hier hast du Platz um deine Gedanken zu dem gesuchten Charakter loszuwerden. Die Zeichenzahl in diesem Bereich ist nicht begrenzt, so dass du hier aus den Vollen schöpfen kannst.
Vorname Nachname
Untertitel / suchender Charakter
Hier hast du die Möglichkeit, um Deinen Char ausführlich vorzustellen, wobei hier auch die Zeichenzahl völlig unerheblich ist.
Fakt
Fakt
Fakt
Informationen
Anschluss - Änderungen - Mitspieler
Hier kommen zusätzliche Infos hinein. Hast du Wünsche an den zukünftigen Spieler? Wie aktiv bist du und wieviel Zeichen schreibst du durchschnittlich? Gibt es außer deinem hier beschriebenen Charakter noch andere Charaktere als Anschluss?
Der Code zum kopieren:
Code:
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans|Merriweather:300" rel="stylesheet" type="text/css">
<style type="text/css">#tm2body { background: #dcdad9; padding: 50px 15px 15px 15px; width: 500px; box-sizing: border-box; border-bottom: solid 15px #c6c3be; font-family: 'Merriweather Sans', sans-serif; line-height: normal; margin: 0 auto; } /*
*/ #tm2h1 { color: #3F1F25; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; font-family: 'Merriweather', serif; text-align: center; } /*
*/ #tm2h2 { color: #75514e; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; margin-bottom: 40px; text-align: center; } /*
*/ .tm2h3 { color: #75514E; text-transform: lowercase; font-size: 35px; letter-spacing: -1px; text-align: right; font-family: 'Merriweather', serif; } /*
*/ .tm2h3 span, .tm2h5 span { font-style: italic; color: #A48E89; } /*
*/ .tm2h4 { color: #3F1F25; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; margin: -5px 0px 5px 0px; text-align: right; } /*
*/ .tm2flex { display: flex; align-items: center; } */
*/ .tm2left { width: 160px; box-sizing: border-box; } /*
*/ .tm2img { background: #c6c3be; padding: 5px; height: 150px; } /*
*/ .tm2facts { background: #c6c3be; color: #3F1F25; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; margin: 5px 0px; font-family: 'Merriweather', serif; text-align: right; display: flex; align-items: center; } /*
*/ .tm2fact { width: 85%; box-sizing: border-box; } /*
*/ .tm2icon { padding: 5px; width: 15%; box-sizing: border-box; color: #75514E; } /*
*/ .tm2right { width: 310px; box-sizing: border-box; color: #222; font-size: 11px; line-height: 17px; text-align: justify; padding: 10px 0px 10px 10px; } /*
*/ .tm2right2 { width: 310px; box-sizing: border-box; color: #222; font-size: 11px; line-height: 17px; text-align: justify; padding: 10px 10px 10px 0px; } /*
*/ .tm2p { padding-right: 10px; height: 220px; overflow: auto; } /*
*/ .tm2p::-webkit-scrollbar { width: 5px; background: #A48E89; } /*
*/ .tm2p::-webkit-scrollbar-thumb { background: #75514E; } /*
*/ .tm2p::-webkit-scrollbar-track-piece { background: #A48E89; } /*
*/ .tm2h5 { color: #75514E; text-transform: lowercase; font-size: 35px; letter-spacing: -1px; font-family: 'Merriweather', serif; } /*
*/ .tm2h6 { color: #3F1F25; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; margin: -5px 0px 5px 0px; } /*
*/ .tm2p2 { color: #222; font-size: 11px; line-height: 17px; text-align: justify; }</style>
<div id="tm2body"><div id="tm2h1">
Vergleichsweise unauffällig ein Gesuchstitel
</div><div id="tm2h2">
Vergleichsweise unauffällig ein Gesuchsuntertitel
</div><div class="tm2h3">
<span>Vorname</span> Nachname
</div><div class="tm2h4">
Untertitel / gesuchter Charakter
</div><div class="tm2flex"><div class="tm2left"><div class="tm2img">
<img src="https://abload.de/img/platzhalterbildzbkcx.jpg"></div>
<div class="tm2facts"><div class="tm2fact">Fakt</div><div class="tm2icon"><span class="fas fa-birthday-cake"></span></div></div>
<div class="tm2facts"><div class="tm2fact">Fakt</div><div class="tm2icon"><span class="fas fa-crown"></span></div></div>
<div class="tm2facts"><div class="tm2fact">Fakt</div><div class="tm2icon"><span class="fas fa-heartbeat"></span></div></div>
</div><div class="tm2right"><div class="tm2p">
Hier hast du Platz um deine Gedanken zu dem gesuchten Charakter loszuwerden. Die Zeichenzahl in diesem Bereich ist nicht begrenzt, so dass du hier aus den Vollen schöpfen kannst.
</div></div></div>
<div class="tm2h3">
<span>Vorname</span> Nachname
</div><div class="tm2h4">
Untertitel / suchender Charakter
</div><div class="tm2flex"><div class="tm2right2"><div class="tm2p">
Hier hast du die Möglichkeit, um Deinen Char ausführlich vorzustellen, wobei hier auch die Zeichenzahl völlig unerheblich ist.
</div></div><div class="tm2left"><div class="tm2img">
<img src="https://abload.de/img/platzhalterbildzbkcx.jpg"></div>
<div class="tm2facts"><div class="tm2fact">Fakt</div><div class="tm2icon"><span class="fas fa-birthday-cake"></span></div></div>
<div class="tm2facts"><div class="tm2fact">Fakt</div><div class="tm2icon"><span class="fas fa-crown"></span></div></div>
<div class="tm2facts"><div class="tm2fact">Fakt</div><div class="tm2icon"><span class="fas fa-heartbeat"></span></div></div>
</div></div>
<div class="tm2h5">
<span>Info</span>rmationen
</div><div class="tm2h6">
Anschluss - Änderungen - Mitspieler
</div><div class="tm2p2">
Hier kommen zusätzliche Infos hinein. Hast du Wünsche an den zukünftigen Spieler? Wie aktiv bist du und wieviel Zeichen schreibst du durchschnittlich? Gibt es außer deinem hier beschriebenen Charakter noch andere Charaktere als Anschluss?
</div></div>