Code:
<div class="gesuch">
<table class="gesuchinhalt">
<tr><td colspan="2">
<div style="position:relative;">
<img src="HINTERGRUNDBILD" class="gesuchheaderbild">
</div>
<div class="gesuchheaderschrift">ÜBERSCHRIFT</div>
<div class="gesuchwappen">
<img src="WAPPEN" style="object-fit:cover;width:80px; height:80px; border-radius:50%;">
</div>
<div class="gesuchuebersicht">
GESUCHSÜBERSICHT TEXT HIER BITTE
</div>
<div class="gesuchbigtext">
<span style="">Gesuche</span>
</div>
<table cellspacing="10">
<tr><td colspan="2" style="text-align:center;">
<span style="font-weight:bold;color:#404D4F;">VORNAME NACHNAME</span>
ALTER, STAND | BERUF | <i>AVATAR</i>
<hr>
</td></tr>
<tr>
<td valign="top" style="padding-bottom:50px;height:200px;width:50px;">
<img src="GESUCHSBILD 200x100" style="height:100px;width:200px;object-fit:cover;">
</td>
<td valign="top" style="text-align:justify;padding-bottom:50px;height:200px;width:50px;">
<div class="gesuchtext"><i>FREI, VERGEBEN, RESERVIERT -</i> GESUCHSTEXT HIER
</div>
</td>
</tr>
<tr><td colspan="2" style="text-align:center;">
<span style="font-weight: bold;color:#404D4F;">VORNAME NACHNAME</span>
ALTER, STAND | BERUF | <i>AVATAR</i>
<hr>
</td></tr>
<tr><td valign="top" style="text-align:justify;padding:bottom:50px;height:200px;width:50px;">
<div class="gesuchtext"><i>FREI, VERGEBEN, RESERVIERT - </i> GESUCHSTEXT HIER
</div>
</td>
<td valign="top" style="height:200px;width:50px;">
<img src="GESUCHSBILD 200x100" style="height:100px;width:200px;object-fit:cover;">
</td></tr>
</table>
<div class="gesuchuebersicht">
ABSCHLIEßENDER TEXT
</div>
<hr>
</td></tr></table></div>Dieser Code funktioniert auch im SG, ist aber ein bisschen unübersichtlicher:
Code:
<link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;1,400&display=swap" rel="stylesheet">
<div style="background:#ebebeb;color:#000;font-family:'Red Hat Display';display:flex;margin:auto;width:500px;">
<table style="position: relative;width:100%; margin:0; padding: 0px;">
<tr><td colspan="2">
<div style="position:relative;">
<img src="HINTERGRUNDBILD" style="object-fit:cover;width:100%;height:240px;text-align:center;">
</div>
<div style="position:absolute;top:100px;width:100%;font-family:'Alex Brush'; font-size:42px; text-align:center;">ÜBERSCHRIFT</div>
<div style="position:absolute;top:200px;left:42%;border:'2px solid black';border-radius:50%;width:100px;height:100px;">
<img src="WAPPEN" style="object-fit:cover;width:80px; height:80px; border-radius:50%;">
</div>
<div style="padding:10px;padding-top:50px;text-align:justify;font-size:12px;">
GESUCHSÜBERSICHT TEXT HIER BITTE
</div>
<div style="text-align:center; padding:10px;font-weight:bold;font-size:36px; font-family: 'Alex Brush' ">
<span style="">Gesuche</span>
</div>
<table cellspacing="10">
<tr><td colspan="2" style="text-align:center;">
<span style="font-weight:bold;color:#404D4F;">VORNAME NACHNAME</span>
ALTER, STAND | BERUF | <i>AVATAR</i>
<hr>
</td></tr>
<tr>
<td valign="top" style="padding-bottom:50px;height:200px;">
<img src="GESUCHSBILD 200x100" style="height:100px;width:200px;object-fit:cover;">
</td>
<td valign="top" style="text-align:justify;padding-bottom:50px;height:200px;">
<div style="overflow-y: scroll;padding-right:10px;height:200px;font-size:12px"><i>FREI, VERGEBEN, RESERVIERT -</i> GESUCHSTEXT HIER
</div>
</td>
</tr>
<tr><td colspan="2" style="text-align:center;">
<span style="font-weight: bold;color:#404D4F;">VORNAME NACHNAME</span>
ALTER, STAND | BERUF | <i>AVATAR</i>
<hr>
</td></tr>
<tr><td valign="top" style="text-align:justify;padding-bottom:50px;height:200px;width:50%>
<div style="overflow-y: scroll; padding-right:10px;height:200px;font-size:12px"><i>FREI, VERGEBEN, RESERVIERT - </i> GESUCHSTEXT HIER
</div>
</td>
<td valign="top" style="height:200px;width:50%;">
<img src="GESUCHSBILD 200x100" style="height:100px;width:200px;object-fit:cover;">
</td></tr>
</table>
<div style="padding:10px;text-align:justify;font-size:12px;">
ABSCHLIEßENDER TEXT
</div>
<hr>
</td>
</tr>
<tr style="text-align:center; padding:10px;padding-bottom:50px;" >
<td style="padding-bottom:30px;width:50%;">
<a href="GESUCHSLINK" style="color:#808080;text-decoration:none;">Zum Gesuch</a>
</td>
<td style="padding-bottom:30px;width:50%;">
<a href="https://facingthestorm.de" style="color:#808080;text-decoration:none;">Zum Forum</a>
</td>
</tr>
</table>
</div>