<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Comfortaa|Cinzel+Decorative" rel="stylesheet">
<style type="text/css">/* 
Überschrift */ .relaheadline { text-align: center; font-family: 'Indie Flower'; font-size: 40px; }/*  
Unterschrift */ .relasubline { text-align: center; font-family: 'Comfortaa'; font-size: 11px; margin-top: -15px; }/*
Textblöcke */ .relawriting { text-align: justify; height: 136px; font-family: 'Comfortaa'; font-size: 11px; overflow-y: scroll; overflow-x: hidden; margin-top: 10px; box-sizing: border-box; padding: 0px 5px 0px 5px; }/* 
 
*/ a {text-decoration: none; font-weight: normal!important; }</style>
<center><div class="relaheadline">I want something just like this</div>
<div class="relasubline">And clearly I don't see myself upon that list
But she said where'd you wanna go?
How much you wanna risk?
I'm not looking for somebody with some superhuman gifts
Some superhero, some fairytale bliss
Just something I can turn to, somebody I can kiss</div>
 
<div style="width: 600px"><div class="relawriting">HIER KANN EIN SPRUCH ODER SCHLUSSWORTE REIN ODER WAS IHR HALT NOCH LOS WERDEN WOLLT</div></div>
 
<style type="text/css"> .rela1 { margin: 10px; width: 507px; height: 260px; }/* 
Charaktername1 */ .rela1 .relachar { text-align: center; font-family: 'Indie Flower'; font-size: 40px; color: #041230; margin-top: -0px; }/* 
Bild1 */ .rela1 .relapic { float: left; width: 200px; height: 250px; }/* 
*/ .rela1 .relablock { float: right; width: 300px; height: 250px;  }/* 
Kästchen dunkel1 */ .rela1 .relasubdark { text-align: center; width: 145px; height: 18px; overflow: hidden; background-color: #041230; margin: 2px; color: #dedede; font-family: 'Comfortaa'; font-size: 11px; display: inline-block; }/* 
Kästchen hell1 */ .rela1 .relasublight { text-align: center; width: 145px; height: 18px; overflow: hidden; background-color: #0B446D; margin: 2px; color: #dedede; font-family: 'Comfortaa'; font-size: 11px; display: inline-block; }</style>
<div class="rela1">
<div class="relapic"><img src="HIER KOMMT DER LINK VOM BILD REIN 200 x 250 OHNE IMG ODER RAHMEN" style="border: 2px solid #041230"></div>
<div class="relablock">
<div class="relachar">WATCHER</div></a><div class="relasubdark">EUER NAME</div><div class="relasublight">MÄRCHENFIGUR</div>
<div class="relasublight">ALTER</div><div class="relasubdark">AVATARPERSON</div>
<div class="relawriting">EURE GESCHICHTE HIER REIN</div></div></div>
<style type="text/css"> .rela2 { margin: 10px; width: 504px; height: 260px; }/* 
Charaktername2 */ .rela2 .relachar { text-align: center; font-family: 'Indie Flower'; font-size: 40px; color: #3A2A05; margin-top: -0px; }/* 
Bild2 */ .rela2 .relapic { float: right; width: 200px; height: 250px; }/* 
*/ .rela2 .relablock { float: left; width: 300px; height: 250px; }/* 
Kästchen dunkel2 */ .rela2 .relasubdark { text-align: center; width: 145px; height: 18px; overflow: hidden; background-color: #3A2A05; margin: 2px; color: #dedede; font-family: 'Comfortaa'; font-size: 11px; display: inline-block; }/* 
Kästchenhell2 */ .rela2 .relasublight { text-align: center; width: 145px; height: 18px; overflow: hidden; background-color: #927940; margin: 2px; color: #dedede; font-family: 'Comfortaa'; font-size: 11px; display: inline-block; }</style>
<div class="rela2">
<div class="relapic"><img src="HIER KOMMT DER LINK VOM BILD REIN 200 x 250 OHNE IMG ODER RAHMEN" style="border: 2px solid #3A2A05"></div>
<div class="relablock">
<div class="relachar">Player</div></a><div class="relasubdark">NAME</div><div class="relasublight">MÄRCHENFIGUR</div>
<div class="relasublight">ALTER</div><div class="relasubdark">AVATARPERSON</div>
<div class="relawriting">HIER KOMMT EURE GESCHICHTE HEREIN</div></div></div></center>