Код:
<!--HTML--><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="https://fonts.googleapis.com/css?family=Poppins:400,700|Source+Sans+Pro|Vidaloka" rel="stylesheet"> <style type="text/css"> /* BASIS */ #gesuch { width: 570px; /* Breite des Codes */ background:url('http://serienportal.de/blanko/codes/bilder/white.png'); /* Hintergrundbild des Codes, hier weiß-gestreift */ margin: 10px 0px; color: #151515; /* Schriftfarbe, die nicht in den einzelnen Containern bereits definiert ist */ } #gesuch .ueberschrift { font: italic bold 29px/120% 'Bebas Neue', sans-serif; /* Ueberschrift der Abschnitte */ text-transform: uppercase; text-align: center; text-shadow: 1px 1px 0px #ffffff; color: #713493; letter-spacing: 1px; margin-top: 5px; padding: 0px 10px; } #gesuch .untertitel { font: normal 8px/99% 'calibri', sans-serif; /* Untertitel der Abschnitte */ text-transform: uppercase; text-align: center; color: #713493; letter-spacing: 3px; word-spacing: 3px; margin-bottom: 5px; padding: 0px 40px; } #gesuch b { color: #713493; font-weight: bold; letter-spacing: 1px; } #gesuch i { color: #713493; font-style: italic; letter-spacing: 1px; } #gesuch u { color: #713493; letter-spacing: 1px; text-decoration: underline #713493; } #gesuch s { color: #713493; letter-spacing: 1px; text-decoration: line-through #713493; opacity: 0.6; } #gesuch span { background:url('http://funkyimg.com/i/2f7Ff.png'); font: bold 10px/90% 'Source Sans Pro', sans-serif; /* Ueberschrift im Textabschnitt */ color: #fff; text-transform: uppercase; letter-spacing: 1px; padding: 1px 3px 1px 5px; margin: 0px 10px 0px -10px; opacity: 0.9; } #gesuch hr { color: #713493; /* IE */ background-color: #713493; height: 2px; opacity: 0.8; border: none; } /* Alle Links im Gesuch */ #gesuch a:link, #gesuch a:visited, #gesuch a:active { text-decoration: underline; font: bold 12px/120% 'Source Sans Pro', sans-serif; color: #713493; text-transform: uppercase; letter-spacing: 1px; padding: 0px 2px 1px 2px; margin: 0px; opacity: 0.9; } #gesuch a:hover { text-decoration: underline; text-transform: lowercase; } /* Kopftei */ #gesuch .gesuch-header { padding: 20px 35px 5px 35px; background:url('http://funkyimg.com/i/2f7Ff.png'); color: #fff; text-align: right; } #gesuch h1 { font: bold 30px/90% 'Poppins', sans-serif; color: #fff; text-transform: uppercase; } #gesuch h2 { font: normal 8px/90% 'Source Sans Pro', sans-serif; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-top: -20px; } /* Fussteil */ #gesuch .gesuch-footer { padding: 20px 35px -60px 35px; background:url('http://funkyimg.com/i/2f7Ff.png'); color: #fff; text-align: left; } /* ABSCHNITT 1: DER SUCHENDE */ #suchender { width: 250px; height: 150px; background: url('http://funkyimg.com/i/2f7Fh.png'); /* Kleines Bild */ background-repeat: no-repeat; position: relative; overflow: hidden; margin: 0px auto; border-top: solid 3px #713493; border-bottom: solid 3px #713493; } #suchender b { color: #ffffff; font-weight: 900; } #suchender i { color: #ffffff; } #suchender u { color: #ffffff; } /* Stichpunkte Textdefinition Hover-Bild klein */ #suchender .stext1 { color: #fff; font: normal 10px/110% 'Cuprum', sans-serif; letter-spacing: 1px; text-transform: uppercase; float: left; /* links */ margin: 20px 20px 20px 20px; } #suchender .stext2 { color: #fff; font: normal 8px/110% 'Source Sans Pro', sans-serif; letter-spacing: 1px; text-transform: uppercase; float: right; /* rechts */ margin: 20px 20px 20px 20px; } /* Stichpunkte Hover Bild klein */ #suchender .stichpunkt1 { background:url('http://funkyimg.com/i/2f7Ff.png'); width: 250px; height: 50px; position: absolute; top: 0px; left: -280px; opacity: 0.9; -webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s; } #suchender .stichpunkt2 { background:url('http://funkyimg.com/i/2f7Ff.png'); width: 250px; height: 50px; position: absolute; top: 50px; left: 280px; opacity: 0.9; -webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s; } #suchender .stichpunkt3 { background:url('http://funkyimg.com/i/2f7Ff.png'); width: 250px; height: 50px; position: absolute; top: 100px; left: -280px; opacity: 0.9; -webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s; } #suchender:hover .stichpunkt1, #suchender:hover .stichpunkt2,#suchender:hover .stichpunkt3 { position: absolute; left: 0px; } /* Stichpunkte rechts vom Bild */ .punkt { width: 120px; background:url('http://funkyimg.com/i/2f7Ff.png'); color: #fff; font: normal 8px/110% 'Source Sans Pro', sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; margin: 1px; padding: 5px 2px; display: inline-block; opacity: 0.9; } /* Schrifttext Suchender */ .suchender-text { text-align: justify; font: normal 11px/120% 'Cuprum', sans-serif; color: #133855; text-transform: uppercase; margin: 10px 20px 25px 15px; -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; -webkit-column-gap: 20px; /* Chrome, Safari, Opera */ -moz-column-gap: 20px; /* Firefox */ column-gap: 20px; } </head> </style> <script type="text/javascript">$(document).ready(function() {$('a, img').tipsy({fade: true, gravity: 'n'}); });</script> </head><body><center><div id="gesuch"> <div class="gesuch-header"><h1>@DOWNTOWN</h1> <h2>Und ich bin ein Untertitel</h2></div> <div class="ueberschrift">Безобразно богатые плачут в мерседесах</div> <div class="untertitel"><b>район: Даунтаун • • • контенгент: элита </b><br><br> Я ни в коем случае не говорю, что я зажрался<br> Просто подвиньте эту сосиску к моему рту… </div> <table width="100%" cellspacing="5" cellpadding="0"><tbody><tr> <td> <div id="suchender"> <div class="stichpunkt1"><div class="stext1"><b>ЦЕНА ОБЪЕКТА: </b>0$<br> РЕМОНТ КОМНАТЫ: 1500$</div></div> <div class="stichpunkt2"><div class="stext1"><b>ЖИЛЬЦОВ: </b>0<br> СВОБОДНЫХ МЕСТ: 10</div></div> <div class="stichpunkt3"><div class="stext1"><b>ДО ЦЕЛИ ОСТАЛОСЬ: </b>1500$</div></div> </div> </td> <td valign="middle"> <div id="suchender-text"><div class="punkt">имя</div> <div class="punkt">имя</div><div class="punkt">имя</div> <div class="punkt">имя</div><div class="punkt">имя</div> <div class="punkt">имя</div><div class="punkt">имя</div> <div class="punkt">имя</div><div class="punkt">имя</div> <div class="punkt">имя</div><div class="punkt">имя</div> <div class="punkt">имя</div><div class="punkt">имя</div> <div class="punkt">имя</div><div class="punkt">председатель</div> </div> </td> </tr></tbody></table> <table width="100%" cellspacing="5" cellpadding="0"><tbody><tr> <td> <div class="suchender-text"> <span>   почему тебе нужно к нам</span> <br><br> <p>Где еще могут расположиться хозяева жизни, если не в самом центре? Даунтаун хоть и отличается расслабленной атмосферой, но не замолкает никогда. Днем вы дорогих костюмах решаете свои важные вопросы, а вечером бесчисленные клубы, бары и концертные залы пренадлежат кому? Да-да, именно вам.</p> <span>   повестка дня</span> <br><br> <p>04/08 Пускай кто-нибудь другой говорит о том, что счастье не в деньгах… мы поговорим об обратном. А если серьезно, то нам надо немного поднажать и наконец разобраться с этими чертовыми пробками. Свои источники в мэрии нашептали, что зелененькие, попавшие в нужные руки, могут творить чудеса. </p> </div> </td> <td valign="middle"> <div style="overflow-x: auto; width: auto; height: 186px; border-top: solid 3px #; border-bottom: solid 2px #; background-color: #; box-shadow: 0 0 10px # inset; letter-spacing: 0px; font-size: 10px; text-transform: uppercase; text-align: center; font-family: Verdana; border-radius: 30px 5px; padding-top: 5px;"> <div id="suchender-text"> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> <img src="https://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> </div> </div> </td> </tr></tbody></table> <div class="gesuch-footer"><h1></h1> <h2>это футер</h2> </div></center></body>