тест кода

Код:

<!--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: #3881b8;
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: #3881b8;
letter-spacing: 3px;
word-spacing: 3px;
margin-bottom: 5px;
padding: 0px 40px;
}

#gesuch b {
color: #3881b8;
font-weight: bold;
letter-spacing: 1px;
}

#gesuch i {
color: #3881b8;
font-style: italic;
letter-spacing: 1px;
}

#gesuch u {
color: #3881b8;
letter-spacing: 1px;
 text-decoration: underline #3881b8;
}

#gesuch s {
color: #3881b8;
letter-spacing: 1px;
text-decoration: line-through #3881b8;
opacity: 0.6;
}

#gesuch span {
background:url('http://funkyimg.com/i/2eZD6.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: #3881b8; /* IE */
background-color: #3881b8; 
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: #3881b8;
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/2eZD6.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/2eZD6.png');
color: #fff;
text-align: left;
}


/* ABSCHNITT 1: DER SUCHENDE */

#suchender { 
width: 250px; 
height: 150px;   
background: url('http://funkyimg.com/i/2eZCL.png'); /* Kleines Bild */
background-repeat: no-repeat; 
position: relative; 
overflow: hidden;
margin: 0px auto;
border-top: solid 3px #3881b8;
border-bottom: solid 3px #3881b8;
}

#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/2eZD6.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/2eZD6.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/2eZD6.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/2eZD6.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 10px/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>@bakerstreet</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>4500$<br>
РЕМОНТ КОМНАТЫ: 1500$</div></div>
<div class="stichpunkt2"><div class="stext1"><b>ЖИЛЬЦОВ: </b>11<br>
СВОБОДНЫХ МЕСТ: 1</div></div>
<div class="stichpunkt3"><div class="stext1"><b>ДО ЦЕЛИ ОСТАЛОСЬ: </b>150$</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>
</td>
</tr></tbody></table>
<table width="100%" cellspacing="5" cellpadding="0"><tbody><tr>
<td>
<div class="suchender-text">
<span>&nbsp&nbsp почему тебе нужно к нам</span>
<br><br>
<p>Наш крутой председатель, которого мы зовем просто вова путин, говорит, что благодаря революционной технологии, которая высвобождает генетическую память, Каллум Линч переживает приключения своего предка Агилара в Испании XV столетия. Заполучив невероятные знания.</p>
<span>&nbsp&nbsp повестка дня</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="http://funkyimg.com/i/2eZP4.png" title="кафе в двух шагах от подъезда"> 
<img src="http://funkyimg.com/i/2eZP5.png" title="курьер легко доставит пиццу прямо к двери"> 
<img src="http://funkyimg.com/i/2eZP6.png" title="соседские дети – настоящие ангелочки"> 
<img src="http://funkyimg.com/i/2eZP7.png" title="парковка, с которой справится даже блондинка"> 
<img src="http://funkyimg.com/i/2eZP8.png" title="в спорт-зал можно и пешком"> 
<img src="http://funkyimg.com/i/2eZP9.png" title="бдящий вахтер"> 
<img src="http://funkyimg.com/i/2eZPa.png" title="отличная звукоизоляция"> 
<img src="http://funkyimg.com/i/2eZPb.png" title="котейкам здесь рады"> 
<img src="http://funkyimg.com/i/2eZPc.png" title="зачем мне в мексику, если и здесь хорошо?"> 
<img src="http://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> 
<img src="http://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> 
<img src="http://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> 
<img src="http://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> 
<img src="http://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> 
<img src="http://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> 
<img src="http://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> 
<img src="http://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> 
<img src="http://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> 
<img src="http://forumstatic.ru/files/0017/b2/6a/74823.png" title=""> 
<img src="http://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>

Код:

<!--HTML--><div style="width: 520px; margin: 0 auto;"><div class="boxreadme2">
	<div class="rm_head">
    // thank you note <span class="fa fa-heart fa-lg"></span><br>
	</div>
	<div class="rm_content">
     <p><titel>@<a id="mention_23" href="member.php?action=profile&amp;uid=23">Keira</a> //</titel> Hallo Michi, danke für den lieben Kommentar <span style="font-size: xx-small;">(:</span></p>
	</div>
	<div class="rm_credits"></div>
</div>
<div class="boxreadme2">
	<div class="rm_head">
    // update #02 <span class="fa fa-asterisk fa-lg"></span><br>
	</div>
	<div class="rm_content">
     Heute wird es etwas umfangreicher, da sich wieder einige Sachen angesammelt haben.. zunächst aber, habe ich die allgemeine Vorschauübersicht gelöscht, weil es mir zu anstrengend wurde, das immer zu aktualisieren <span style="font-size: xx-small;">xD</span> Nun gibt's einfach alles im ersten Beitrag und in den einzelnen Updates gibt's dann die Vorschauen.<br>
     Für das 1. Geburtstagspack des Forums habe ich Farbpaletten erstellt und ein paar Google Fonts zusammen gesucht und weil die irgendwie auf meinem Rechner verstauben, habe ich nun eine neue Kategorie, in der all das rein kommt.. vielleicht mag sich ja mal jemand daran bedienen, um was Schönes damit anzustellen <span style="font-size: xx-small;">:) [Macht euch lautstark bemerkbar, falls das passiert, damit ich's mir ansehen kann.. ich bin ja gar nicht neugierig!]<br>
     Ansonsten gibt's noch einen Contestcode, der's nicht in die Umfrage  geschafft hat, drei neue "Templates to go" [u.a. <a href="http://storming-gates.de/showthread.php?tid=12077&amp;pid=89014#pid89014" target="_blank">"sour cherry"</a> &amp; <a href="http://storming-gates.de/showthread.php?tid=12197&amp;pid=89835#pid89835" target="_blank">"there ain\'t no rest for the wicked"</a>, die ich hier schon gezeigt hatte].. und zwei neue Awards.</span><br>
	</div>
	<div class="rm_credits"></div>
</div>
	<div style="clear: both;"></div>
</div>

noway

Меню навигации

Пользовательские ссылки

Информация о пользователе

тест кода

Сообщений 1 страница 2 из 2

Поделиться12016-08-04 19:36:33

Поделиться22016-08-05 17:54:01