Code:
<link href="https://fonts.googleapis.com/css?family=Arimo:400,700" rel="stylesheet">
<center>
<div class="gesuch">
<div class="titel">I am a catchy title</div>
<div class="subtitle">
<center>they say everything happens for a reason<br>
<br>
• London 1850 • Dark Urban Fantasy • L3S3V3 • Blacklist </center>
</div>
<div class="kurzinfos">SUCHENDER
<hr class="style1">
• Name • Beruf • Alter • Wesen • Avatar
</div>
<table style= "width:600px; background: #ded9d4;">
<tr>
<td class="avatarrechts">
<img src="https://placehold.jp/150x200.png" alt="Avatar Suchender">
</td>
<td>
<div class="text2">Erzähle hier etwas über den Suchenden:
Wer ist wer und wie sieht seine Beziehung zum Gesuchten aus. Wie soll sich die Beziehung entwickeln?</div>
</td>
</tr>
</table>
<div class="kurzinfos">GESUCHTER
<hr class="style1">
• Name • Beruf • Alter • Wesen • Avatar
</div>
<table style= "width:600px; background: #ded9d4;">
<tr>
<td>
<div class="text3">Erzähle hier etwas über den Gesuchten: Wer ist er und wie steht er mit dem Suchenden in Beziehung? Gibt es sonst irgendetwas wichtiges zu wissen? Gibt es weiteren Anschluss? Gibt es ein Ziel, auf welches zugespielt werden soll. </div>
</td>
<td class="avatarlinks">
<img src="https://placehold.jp/150x200.png" alt="Avatar Gesuchter">
</td>
</tr>
</table>
<div class="kurzinfos">Nice to know</div>
<div class="text1" style="padding: 5px 7px 5px 8px; box-sizing: initial;">
Ich bin ein Informationstext. Hier kannst du Infos weitere Infos über den gewünschten Inplay-Verlauf unterbringen oder die gewünschte Beziehung. Ist alles in Stein gemeißelt oder sind Dinge verhandelbar. Was wünscht du dir von deinem Postpartner? Postfrequenz/- länge, Erreichbarkeit per Discord etc.
</div>
<div class="footer">
<a href="https://ofmonstersandman.de/index.php" class="forum" target="_blank">• zum Forum</a> <a href="Link-Ziel" class="forum">• zum Gesuch</a>
</div>
</div>
</center>
<style type="text/css">
*/ .gesuch { margin: 0 auto; width: 600px; line-height: 150%; font-size: 13px; font-family: "Arimo"; background: #ded9d4;} /*
*/ .titel { text-align: center; padding: 25px 0px 0px 0px; background: #7f6a5a; color: #fbf8f5; font-size: 28px; text-transform: lowercase; width: 600px} /*
*/.subtitle { text-align: justify; 0px 0px 15px 0px; background: #7f6a5a; color: #fbf8f5; width: 600px; height: 60px; margin-top: -10px;} /*
*/.text1 { text-align: justify; /*padding: 5px 7px 5px 8px;*/ background: #ded9d4; color: black; font-family: "Arimo"; max-width: 585px; min-width: 585px; font-size: 13px; line-height: 150%;}/*
*/hr.style1 { border-top: 1px solid #fbf8f5; width: 580px;}/*
*/.avatarlinks { text-align: justify; padding: 5px 5px 5px 5px;}/*
*/.text3 { text-align: justify; color: black; vertical-align: top; padding-left: 5px; padding-right: 10px; overflow-y: auto; height: 200px; font-family: "Arimo";}/*
*/.avatarrechts { text-align: justify; padding: 5px 10px 5px 5px;}/*
*/.text2 { text-align: justify; color: black; vertical-align: top; padding-left: 5px; padding-right: 3px; overflow-y: auto; height: 200px; font-family: "Arimo";}/*
*/ .kurzinfos { text-align: center; padding: 5px 0px 5px 0px; background: #5a4a3c; color: #fbf8f5; font-size: 14px; font-family: "Arimo"; width: 600px;} /*
*/.footer { text-align: center; padding-top: 10px; background: #7f6a5a; color: #fbf8f5; font-size: 14px; text-transform: lowercase; width: 600px; height:55px; margin-top: 0px;}/*
*/*{ scrollbar-color: #7f6a5a #5a4a3c; scrollbar-width: thin;}/*
*/::-webkit-scrollbar { width: 5px;}/*
*/::-webkit-scrollbar-track { background-color: #7f6a5a;}/*
*/::-webkit-scrollbar-thumb { background-color: #5a4a3c;}/*
*/a.forum:link { color: #fbf8f5; text-decoration: none; text-transform:lowercase}/*
*/a.forum:visited { color: #fbf8f5;}/*
*/a.forum:hover { color: #fbf8f5; text-decoration: underline;}/*
*/a.forum:focus { color: #fbf8f5;}/*
*/a.forum:active { color: #fbf8f5;}
//// credit: Alba
</style>