Vorlage Einzelgesuch

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><style type="text/css"> /*

*/ #spaceback { box-sizing: border-box; width: 500px; padding: 5px; margin: auto; background-image: url('http://7-themes.com/data_images/out/3/6778239-blue-space.jpg'); } /*

*/ .bigtitel { font-family: 'Oswald'; font-size: 20px; text-transform: uppercase; color: #e0e0e0; letter-spacing: 2px; text-align: center; magin-top: 10px; } /*

*/ .unterlyric { font-family: 'Calibri', 'Arial'; font-size: 9px; text-transform: uppercase; color: #e0e0e0; letter-spacing: 2px; text-align: center; line-height: 0.5em; } /*

*/ .textboxi { box-sizing: border-box; width: 480px; padding: 5px; margin: auto; background-color: rgba(26, 35, 59, 0.86); font-family: 'Calibri', 'Arial'; font-size: 10px; color: #e0e0e0; height: 100px; overflow: auto; margin-top: 10px; } /*

*/ #gesuchbildchen1 { background-image: url('http://placehold.it/100x100'); width: 100px; height: 100px; margin:auto; border-radius: 100%; margin-top: 10px; } /*

*/ #gesuchbildchen2 { background-image: url('http://placehold.it/100x100'); width: 100px; height: 100px; margin:auto; border-radius: 100%; margin-top: 10px; } /*

*/ #suchender01 { font-family: 'Oswald'; font-size: 15px; text-transform: uppercase; color: #e0e0e0; letter-spacing: 2px; text-align: center; } /*

*/ .infoboxis01 { box-sizing: border-box; width: 210px; height: 15px; margin: auto; font-family: 'Calibri', 'Arial'; font-size: 11px; text-transform: uppercase; text-align: center; background-color: rgba(26, 35, 59, 0.86); color: #e0e0e0; margin-top: 5px; } /*

*/ #credit { box-sizing: border-box; width: 480px; padding: 3px; margin: auto; background-color: rgba(26, 35, 59, 0.86); height: 15px; font-family: 'Calibri', 'Arial'; font-size: 8px; text-transform: uppercase; text-align: center; color: #e0e0e0; margin-top: 5px; letter-spacing: 2px; } /*

*/ a:link, a:visited, a:active, a:hover { color: #e0e0e0; } /*
</style>

<div id="spaceback"><div class="bigtitel">Name des Gesuchs</div><div class="unterlyric">A sky full of stars</div>
    <div class="textboxi">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <table style="width: 100%; margin: auto" cellpadding="5"><tr>
    <td valign="middle" align="center"><center><div id="gesuchbildchen1"></div></center></td>
    <td valign="middle" align="center"><div id="suchender01">Name des Suchenden</div>
    <div class="infoboxis01">Alter</div>
    <div class="infoboxis01">Beruf</div>
    <div class="infoboxis01">Wohnort</div>
    <div class="infoboxis01">Avatar</div></td>
    </tr></table>
    <div class="textboxi">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
   
    <table style="width: 100%; margin: auto" cellpadding="5"><tr>
    <td valign="middle" align="center"><div id="suchender01">Name des Suchenden</div>
    <div class="infoboxis01">Alter</div>
    <div class="infoboxis01">Beruf</div>
    <div class="infoboxis01">Wohnort</div>
    <div class="infoboxis01">Avatar</div></td>
    <td valign="middle" align="center"><div id="gesuchbildchen2"></div></td>
    </tr></table>
    <div class="textboxi">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
   
    <div class="bigtitel">Das Dazwischen</div><div class="unterlyric">A sky full of stars</div>
    <div class="textboxi">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
   
    <div class="bigtitel">Das Danach</div><div class="unterlyric">A sky full of stars</div>
    <div class="textboxi">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
   
    <div id="credit">code by <a href="http://storming-gates.de/member.php?action=profile&uid=153">v.c</a></div>
</div>