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">Nice to know</div>
<div class="text1" style="padding: 5px 7px 5px 8px; box-sizing: initial;">
Ich bin ein Informationstext. Hier kannst du Infos über die gesuchte Gruppe unterbringen. Wie sehen die Beziehungen der einzelnen Gruppenmitglieder untereinander aus und welcher Anschluss nach außen ist gegeben. Soll es vielleicht einen Plot geben? Ist alles in Stein gemeißelt oder doch eher flexibel?
</div>
<div class="kurzinfos">GESUCHTER #1
<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 Gesuchter">
</td>
<td>
<div class="text2">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 drauf zugespielt werden soll. </div>
</td>
</tr>
</table>
<div class="kurzinfos">GESUCHTER #2
<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 drauf zugespielt werden soll. </div>
</td>
<td class="avatarlinks">
<img src="https://placehold.jp/150x200.png" alt="Avatar Gesuchter">
</td>
</tr>
</table>
<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>Um weitere Personen hinzu zu fügen, immer abwechselnd die beiden unten stehenden Codeschnipsel vor
Code:
<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>Teil mit Avatar links:
Code:
<div class="kurzinfos">GESUCHTER #1
<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 Gesuchter">
</td>
<td>
<div class="text2">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 drauf zugespielt werden soll. </div>
</td>
</tr>
</table>Teil mit Avatar rechts:
Code:
<div class="kurzinfos">GESUCHTER #2
<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 drauf zugespielt werden soll. </div>
</td>
<td class="avatarlinks">
<img src="https://placehold.jp/150x200.png" alt="Avatar Gesuchter">
</td>
</tr>
</table>