Steckbrief-Vorlage

[The Law]

vielen lieben Dank für die Vorlage von brain.death aus dem Storming Gates!

<style type="text/css">.zia_ttpink_box {width: 580px; height: 650px; position: relative; margin: auto; display: flex; font-family: 'Signika Negative', sans-serif; gap: 0px; border-left: 5px solid #ead5d5;} .zia_ttpink_boxleft {width: 260px; background-color: #754536;} .zia_ttpink_boxright { width: 380px; background-color: #F2F2F2;} .zia_ttpink_title { padding: 20px 5px 5px 5px; font-size: 40px; font-family: 'Abril Fatface', cursive; color: #F2F2F2; text-align: center; line-height: 30px; } .zia_ttpink_2ndtitle { padding: 60px 5px 5px 5px; font-size: 30px; font-family: 'Abril Fatface', cursive; color: #ebe0d5; text-align: center; line-height: 30px; } .zia_ttpink_bild { outline: 1px solid #ebe0d5; padding: 10px; margin: 30px 0px 0px 30px;} .zia_ttpink_infos { margin-top: 20px; } .zia_ttpink_fact {margin: 1px 1px 0px 0px; width: 187px; text-align: right; padding: 4px 10px 4px 4px; line-height: 18px; text-transform: lowercase; background-color: #ebe0d5; font-size: 10px; font-style: italic; letter-spacing: 0pt; position: relative; color: #685454; border-right: 3px solid #F2F2F2; transition: all 0.3s ease-in;} .zia_ttpink_fact:hover {width: 210px; transition: all 0.3s ease-in;} .zia_ttpink_text { padding: 20px; color: #685454; letter-spacing: 0.7pt; line-height: 20px; font-size: 10px; text-align: justify; overflow: auto; height: 590px; } .zia_ttpink_boxright ::-webkit-scrollbar{width:5px; } .zia_ttpink_boxright ::-webkit-scrollbar-track{background:#eab88a; } .zia_ttpink_boxright ::-webkit-scrollbar-thumb{background:#685454;} .zia_ttpink_boxright ::-webkit-scrollbar-thumb:hover{background:#685454;}</style>

Charakter-
name

Alter;

Geburtstag;

Herkunft;

Zugehörigkeit;

Avatar;

Spielername

Lebenslauf:

Text
Text
Text

Code:

<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Signika+Negative:wght@300&display=swap" rel="stylesheet">
<style type="text/css">.zia_ttpink_box {width: 580px; height: 650px; position: relative; margin: auto;  display: flex; font-family: 'Signika Negative', sans-serif; gap: 0px; border-left: 5px solid #ead5d5;} .zia_ttpink_boxleft {width: 260px; background-color: #754536;} .zia_ttpink_boxright { width: 380px; background-color: #F2F2F2;} .zia_ttpink_title { padding: 20px 5px 5px 5px; font-size: 40px; font-family: 'Abril Fatface', cursive; color: #F2F2F2; text-align: center; line-height: 30px; } .zia_ttpink_2ndtitle { padding: 60px 5px 5px 5px; font-size: 30px; font-family: 'Abril Fatface', cursive; color: #ebe0d5; text-align: center; line-height: 30px; } .zia_ttpink_bild { outline: 1px solid #ebe0d5; padding: 10px; margin: 30px 0px 0px 30px;} .zia_ttpink_infos { margin-top: 20px; } .zia_ttpink_fact {margin: 1px 1px 0px 0px; width: 187px; text-align: right; padding: 4px 10px 4px 4px; line-height: 18px; text-transform: lowercase; background-color: #ebe0d5;  font-size: 10px; font-style: italic; letter-spacing: 0pt; position: relative; color: #685454; border-right: 3px solid #F2F2F2; transition: all 0.3s ease-in;} .zia_ttpink_fact:hover {width: 210px; transition: all 0.3s ease-in;} .zia_ttpink_text {  padding: 20px; color: #685454; letter-spacing: 0.7pt; line-height: 20px; font-size: 10px; text-align: justify; overflow: auto; height: 590px;  } .zia_ttpink_boxright ::-webkit-scrollbar{width:5px; } .zia_ttpink_boxright ::-webkit-scrollbar-track{background:#eab88a; } .zia_ttpink_boxright ::-webkit-scrollbar-thumb{background:#685454;} .zia_ttpink_boxright ::-webkit-scrollbar-thumb:hover{background:#685454;}</style>

<div class="zia_ttpink_box">
<div class="zia_ttpink_boxleft">
    <div class="zia_ttpink_title">Charaktername</div>
    <img src="https://abload.de/img/uuvvuef8v6klt5ju7.jpg" class="zia_ttpink_bild">
    <div class="zia_ttpink_infos">
    <div class="zia_ttpink_fact">Alter;</div>
    <div class="zia_ttpink_fact">Geburtstag;</div>
    <div class="zia_ttpink_fact">Herkunft;</div>
    <div class="zia_ttpink_fact">Zugehörigkeit;</div>
    <div class="zia_ttpink_fact">Avatar;</div>
    </div>
    <div class="zia_ttpink_2ndtitle">Spielername</div></div>
<div class="zia_ttpink_boxright"><div class="zia_ttpink_text">
Lebenslauf:

Text
Text
Text
</div></div></div>