Внимание! Мы ведем работы по подготовке Лиса к выходу в свет. Приносим извинения за временные неудобства.



RED FOX

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » RED FOX » Все о html и css » Хтмл в постах


Хтмл в постах

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

1

- - - - - - - - - - - -
ХТМЛ
- - - - - - - - - - - -

You need my help
Если историю нельзя замолчать – её обезвреживают.

В данном разделе Вы можете выложить хтмл код, который окажется полезным для других участников. Убедительная просьба выражать свою благодарность исключительно повышением репутации участника, вопросы задаются либо в теме помощи, либо владельцу кода в лс. Иначе Ваш комментарий будет удален.

But you could help me?
Изучая минувшее, можно предугадать будущее.


ИНСТРУКЦИЯ К ПРИМЕНЕНИЮ

1. Прежде, чем использовать html в постах, установите в html-низ вот этот код:

<script type="text/javascript">
function Transform_Code_Box_in_HTML(aX){
var TemLnk=aX.replace(/^(.*viewtopic\.php\?id=\d*).*$/ig,"$1");
var PstId=aX.replace(/^.*viewtopic\.php\?id=.*(#p\d+)$/ig,"$1");
var L=document.URL.replace(TemLnk,'');
if(L!=document.URL&&(L.slice(0,1)).search(/\d/ig)==-1 ){
L=$("div.topic "+PstId);
if(L.length==1){
var Lhtm=L.find(".post-content .code-box:first .scrollbox pre").text();
L.find(".post-content .code-box:first").replaceWith(Lhtm)
}}}
function Demo_HTML(Ts){var Ll=Ts.parents(".htmldemo").find(".code-box .scrollbox pre").text();
Ts.parents(".htmldemo").after('<div class="demHtml">'+Ll+'</div>');Ts.replaceWith(DemoButt0);
}
$(document).ready(function() {
$("#pun-viewtopic .post .code-box").each(function(){
if($(this).text().indexOf('<!--HTML-->')!=-1){
$(this).wrap('<div class="htmldemo"></div>')
$(this).replaceWith($('.htmldemo').text().split('<!--HTML-->')[1]);
}
});
});
</script>

2. Затем отправляйте Ваш html код в любой пост и он заработает, но не забывайте, что нужно перед ним написать <!--HTML--> и все вместе заключить в тег кода [*code][*/code], только, естественно, без звездочек.

+5

2

Код:
<!--HTML--><div class="httz"><div class="httzbox"><div class="httztop">

<div class="httzimageborder"><div class="httzimage" style="background-image:url(http://i44.tinypic.com/9u2q2g.gif);"></div></div>

<div class="httzbiglyr">

hallelujah up for ransom

</div><div class="httzsmalllyr">

cash value for hashtag anthems

</div></div>


<div class="httzbody"><div class="scroll">


Post goes here. <b>Bold looks like this.</b> <i>Italics look like this.</i> Only the first letter of the entire post is big like that, not of each paragraph. To make it not scroll, change the class="scroll" above to "noscroll". , posuere malesuada imperdiet scelerisque, malesuada et ligula. Quisque malesuada diam quis auctor accumsan. Duis in tempus turpis. Suspendisse egestas vitae ipsum non pretium. Nulla suscipit nulla id scelerisque elementum. Aenean ut hendrerit magna. Morbi nec bibendum turpis, et consectetur quam.
Ut dapibus tortor ac purus feugiat auctor. Nullam dapibus efficitur dolor, et vehicula leo faucibus quis. Ut ac turpis est. Curabitur vestibulum luctus blandit. Integer molestie, odio vel congue euismod, lectus leo volutpat lorem, vestibulum ultrices lorem erat vel libero. Nulla eleifend volutpat rhoncus. Praesent finibus sapien id consectetur finibus. Vivamus dictum at augue ut tempus. Quisque tincidunt dictum augue sed fringilla. Fusce consequat sapien semper elit consequat, sed commodo risus placerat. Maecenas id rutrum ante. Vestibulum varius sollicitudin semper.

Maecenas aliquet at tellus ac congue. Phasellus semper tincidunt neque. Integer vitae augue et nibh feugiat commodo. Aenean ligula justo, tempor in arcu in, tempor ullamcorper lectus. Donec nisl dolor, scelerisque eget magna sit amet, imperdiet commodo neque. Duis dictum nulla enim, et viverra nisi eleifend quis. Quisque rutrum sapien at ullamcorper ullamcorper. Maecenas cursus ultricies ex, vel cursus metus tempor eu. Donec mattis eget massa vitae finibus. Suspendisse hendrerit ipsum ipsum, vitae facilisis neque suscipit non. Aliquam vitae enim vitae nunc dapibus facilisis. Nunc nisi quam, egestas quis semper ut, hendrerit quis mauris. Donec malesuada justo dolor, quis vestibulum felis volutpat vitae.

Ut rhoncus eros porta, condimentum quam eget, pharetra neque. Proin at quam et nisl efficitur congue. Morbi pretium imperdiet massa. Suspendisse pellentesque mi odio, non maximus mi fermentum et. Sed finibus vestibulum purus ut euismod. Maecenas at lacinia neque. Nunc tempus, mauris in vehicula porta, nulla lacus mollis sapien, in ultricies turpis sapien ut tellus. Vivamus tincidunt nisl eget orci sagittis lobortis. Phasellus ac ultrices libero, vitae maximus turpis. Duis cursus urna nisl, quis semper erat fermentum ac. Vestibulum malesuada pulvinar velit a porta. Aliquam varius libero in velit convallis mollis. Etiam mattis nulla in enim pretium, non porttitor mauris lobortis. Suspendisse fermentum at sapien vel venenatis. Nulla facilisi. Nam ornare scelerisque odio, ac vulputate magna faucibus vel.


</div></div>



<div class="httznotes">



</div></div></div>

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One|Patua+One|Francois+One);
.httz a { color: #05B8CC; }
.httz a:hover { color: #B0B0B0 }
.httzbox { width: 400px; background-color: #fff; }
.httztop { background: -webkit-linear-gradient(#05B8CC 65%, #fff); background: -o-linear-gradient(#05B8CC 65%, #fff); background: -moz-linear-gradient(#05B8CC 65%, #fff); background: linear-gradient(#05B8CC 65%, #fff); padding: 10px; height: 114px; }
.httzimageborder { width: 100px; height: 100px; padding: 5px; border-radius: 100%; border: 2px solid rgba(255,255,255,0.3); float: left; }
.httzimage { border-radius: 100%; background-size: 100%; width: 100px; height: 100px; position: relative; }
.httzbiglyr { font-size: 25px; font-family: patua one; text-transform: lowercase; font-weight: 300; letter-spacing: -2px; color: rgb(255,255,255); text-align: center; padding-top: 50px; position: relative; line-height: 50% }
.httzsmalllyr { font-size: 13px; font-family: pathway gothic one; text-transform: uppercase; font-weight: 300; color: rgba(255,255,255,0.8); text-align: right; margin-top: 4px; margin-right: 30px; position: relative; line-height: 100% }
.httzbody { padding: 20px 30px 30px 30px; }
.httzbody ::-webkit-scrollbar { width: 5px; } .httzbody ::-webkit-scrollbar-track { background-color: #000; width: 1px; border: 2px solid #fff; } .httzbody ::-webkit-scrollbar-thumb { background-color:#05B8CC; }
.httzbody::first-letter { font-size: 40px; line-height: 20px; font-family: pathway gothic one; font-weight: bold; color: #05B8CC; padding: 10px; text-shadow: 1px 1px #fff, 2px 2px #000; float: left; position: relative; }
.httzbody .scroll { text-align: justify; height: 250px; overflow: auto; padding-right: 5px; font-family: calibri, sans serif; font-size: 11px; line-height: 100%; color: #000; }
.httzbody .noscroll { text-align: justify; font-family: calibri, sans serif; font-size: 11px; line-height: 100%; color: #000; }
.httzbody b { color: #05B8CC; font-family: francois one; font-size: 12px; line-height: 11px; font-weight: normal; }
.httzbody i { color: #05B8CC }
.httznotes { font-family: pathway gothic one; font-size: 10px; letter-spacing: 0.5px; line-height: 100%; text-transform: uppercase; background-color: #05B8CC; padding: 10px; color: rgba(255,255,255,0.9); }
.httznotes span::before { content: "#" }
.httznotes span { padding: 0px 2px }
.httzcredit { width: 400px; text-align: right; margin-right: 30px; line-height: 100%; font-family: pathway gothic one; font-style: italic; text-transform: uppercase; color: grey; }
.httzcredit a { letter-spacing: -6px; font-size: 15px; font-style: normal; }
</style>

*за код спасибо некоему captain a-sparrow (ANANAS)

Код:
<div class="httz"><div class="httzbox"><div class="httztop">

<div class="httzimageborder"><div class="httzimage" style="background-image:url(ССЫЛКА НА ИЗОБРАЖЕНИЕ);"></div></div>

<div class="httzbiglyr">

НАДПИСЬ ПЕРВАЯ В СИНЕМ ОКНЕ

</div><div class="httzsmalllyr">

НАДПИСЬ ВТОРАЯ В СИНЕМ ОКНЕ

</div></div>


<div class="httzbody"><div class="scroll">


ЗДЕСЬ ВАШ ПОСТ

</div></div>



<div class="httznotes">



</div></div></div>

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One|Patua+One|Francois+One);
.httz a { color: #05B8CC; }
.httz a:hover { color: #B0B0B0 }
.httzbox { width: 400px; background-color: #fff; }
.httztop { background: -webkit-linear-gradient(#05B8CC 65%, #fff); background: -o-linear-gradient(#05B8CC 65%, #fff); background: -moz-linear-gradient(#05B8CC 65%, #fff); background: linear-gradient(#05B8CC 65%, #fff); padding: 10px; height: 114px; }
.httzimageborder { width: 100px; height: 100px; padding: 5px; border-radius: 100%; border: 2px solid rgba(255,255,255,0.3); float: left; }
.httzimage { border-radius: 100%; background-size: 100%; width: 100px; height: 100px; position: relative; }
.httzbiglyr { font-size: 25px; font-family: patua one; text-transform: lowercase; font-weight: 300; letter-spacing: -2px; color: rgb(255,255,255); text-align: center; padding-top: 50px; position: relative; line-height: 50% }
.httzsmalllyr { font-size: 13px; font-family: pathway gothic one; text-transform: uppercase; font-weight: 300; color: rgba(255,255,255,0.8); text-align: right; margin-top: 4px; margin-right: 30px; position: relative; line-height: 100% }
.httzbody { padding: 20px 30px 30px 30px; }
.httzbody ::-webkit-scrollbar { width: 5px; } .httzbody ::-webkit-scrollbar-track { background-color: #000; width: 1px; border: 2px solid #fff; } .httzbody ::-webkit-scrollbar-thumb { background-color:#05B8CC; }
.httzbody::first-letter { font-size: 40px; line-height: 20px; font-family: pathway gothic one; font-weight: bold; color: #05B8CC; padding: 10px; text-shadow: 1px 1px #fff, 2px 2px #000; float: left; position: relative; }
.httzbody .scroll { text-align: justify; height: 250px; overflow: auto; padding-right: 5px; font-family: calibri, sans serif; font-size: 11px; line-height: 100%; color: #000; }
.httzbody .noscroll { text-align: justify; font-family: calibri, sans serif; font-size: 11px; line-height: 100%; color: #000; }
.httzbody b { color: #05B8CC; font-family: francois one; font-size: 12px; line-height: 11px; font-weight: normal; }
.httzbody i { color: #05B8CC }
.httznotes { font-family: pathway gothic one; font-size: 10px; letter-spacing: 0.5px; line-height: 100%; text-transform: uppercase; background-color: #05B8CC; padding: 10px; color: rgba(255,255,255,0.9); }
.httznotes span::before { content: "#" }
.httznotes span { padding: 0px 2px }
.httzcredit { width: 400px; text-align: right; margin-right: 30px; line-height: 100%; font-family: pathway gothic one; font-style: italic; text-transform: uppercase; color: grey; }
.httzcredit a { letter-spacing: -6px; font-size: 15px; font-style: normal; }
</style>

0

3

Код:
<!--HTML--><style type="text/css" > 

.bts1 {  opacity: 0; width: 100px; height: 100px; transition-duration: 0.5s;  -moz-transition-duration: 0.5s;  -webkit-transition-duration: 0.5s;  -o-transition-duration: 0.5s; }
.bts1:hover { opacity: 1; }
.bts2 { width: 80px; background-color: #fff; padding: 6px; font-family: calibri; letter-spacing: 2px;  font-size: 6px; text-align: center; line-height: 100%; color: #000; border-bottom: solid 1px #b5b994;  position: relative; top: 110px; margin: 5px; margin-left: 5px; text-transform: uppercase;}
.bts22 { width: 80px; background-color: #fff; padding: 6px; font-family: calibri; letter-spacing: 2px;  font-size: 6px; text-align: justify; line-height: 100%; color: #000; border-bottom: solid 1px #b5b994; position: relative; top: 110px; margin: 5px; margin-left: 5px; text-transform: uppercase;}
.btstitle1 { width: 350px; height: 50px; background-color: #000; }
.btstitle2 { text-align: right; letter-spacing: 5px; text-transform: uppercase; font-family: calibri; font-size: 6px; color: #fff; position: relative; top: 20px; margin-right: 20px; }
.btsimg1 { position: absolute; margin-top: 10px; margin-left: 0px;width: 125px; height: 125px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background-color: #fff; z-index: 1; }
.btsimg2 { position: absolute; margin-top: 23px; margin-left: 13px;width: 100px; height: 100px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background: url(http://media1.fanparty.ru/fanclubs/mila-kunis/gallery/1324682_mila_kunis_medium.gif) no-repeat; z-index: 1; }
.whyb { width: 200px; height: 300px; overflow: auto; font-family: arial; font-size: 8px; letter-spacing: 0px; text-transform: none; text-align: justify; line-height: 11px; border-left: solid 1px #eef5fb; padding-left: 60px; padding-right: 10px; }
.whyb b { font-size: 12px; font-style: italic; color: #000; font-family: times; }
.whyb::-webkit-scrollbar {width: 1px;}
.whyb::-webkit-scrollbar-track { background: #fff; }
.whyb::-webkit-scrollbar-thumb { background: #000; }
.streetcred {  text-align: center; font-size: 10px; }

</style>

<div style="margin: auto;width: 350px; background-color: #fff; box-shadow: 1px 1px 10px #000; padding: 10px; height: 400px;"><div class="btstitle1"><div class="btstitle2">& WHERE HAVE YOU BEEN</div><div class="btsimg1"></div><div class="btsimg2"><div class="bts1">
<div class="bts2">ТЕКСТ</div>
<div class="bts2">ТЕКСТ</div>
<div class="bts22">ТЕКСТ</div></div></div>
<div style="position: relative; margin-left: 60px;top: 55px; padding: 10px;"><div class="whyb">

Those narrow straits of Sunda divide Sumatra from Java; and standing midway in that vast rampart of islands, buttressed by that bold green promontory, known to seamen as Java Head; they not a little correspond to the central gateway opening into some vast walled empire: and considering the inexhaustible wealth of spices, and silks, and jewels, and gold, and ivory, with which the thousand islands of that oriental sea are enriched, it seems a significant provision of nature, that such treasures, by the very formation of the land, should at least bear the appearance, however ineffectual, of being guarded from the all-grasping western world. The shores of the Straits of Sunda are unsupplied with those domineering fortresses which guard the entrances to the Mediterranean, the Baltic, and the Propontis. Unlike the Danes, these Orientals do not demand the obsequious homage of lowered top-sails from the endless procession of ships before the wind, which for centuries past, by night and by day, have passed between the islands of Sumatra and Java, freighted with the costliest cargoes of the east. But while they freely waive a ceremonial like this, they do by no means renounce their claim to more solid tribute.
Time out of mind the piratical proas of the Malays, lurking among the low shaded coves and islets of Sumatra, have sallied out upon the vessels sailing through the straits, fiercely demanding tribute at the point of their spears. Though by the repeated bloody chastisements they have received at the hands of European cruisers, the audacity of these corsairs has of late been somewhat repressed; yet, even at the present day, we occasionally hear of English and American vessels, which, in those waters, have been remorselessly boarded and pillaged.

With a fair, fresh wind, the Pequod was now drawing nigh to these straits; Ahab purposing to pass through them into the Javan sea, and thence, cruising northwards, over waters known to be frequented here and there by the Sperm Whale, sweep inshore by the Philippine Islands, and gain the far coast of Japan, in time for the great whaling season there. By these means, the circumnavigating Pequod would sweep almost all the known Sperm Whale cruising grounds of the world, previous to descending upon the Line in the Pacific; where Ahab, though everywhere else foiled in his pursuit, firmly counted upon giving battle to Moby Dick, in the sea he was most known to frequent; and at a season when he might most reasonably be presumed to be haunting it.

But how now? in this zoned quest, does Ahab touch no land? does his crew drink air? Surely, he will stop for water. Nay. For a long time, now, the circus-running sun has raced within his fiery ring, and needs no sustenance but what's in himself. So Ahab. Mark this, too, in the whaler. While other hulls are loaded down with alien stuff, to be transferred to foreign wharves; the world-wandering whale-ship carries no cargo but herself and crew, their weapons and their wants. She has a whole lake's contents bottled in her ample hold. She is ballasted with utilities; not altogether with unusable pig-lead and kentledge. She carries years' water in her. Clear old prime Nantucket water; which, when three years afloat, the Nantucketer, in the Pacific, prefers to drink before the brackish fluid, but yesterday rafted off in casks, from the Peruvian or Indian streams. Hence it is, that, while other ships may have gone to China from New York, and back again, touching at a score of ports, the whale-ship, in all that interval, may not have sighted one grain of soil; her crew having seen no man but floating seamen like themselves. So that did you carry them the news that another flood had come; they would only answer; "Well, boys, here's the ark!"

</p>

</div></div></div></div></div>

*за код спасибо некоему volta.(oliver sykes)

Код:
<style type="text/css" > 

.bts1 {  opacity: 0; width: 100px; height: 100px; transition-duration: 0.5s;  -moz-transition-duration: 0.5s;  -webkit-transition-duration: 0.5s;  -o-transition-duration: 0.5s; }
.bts1:hover { opacity: 1; }
.bts2 { width: 80px; background-color: #fff; padding: 6px; font-family: calibri; letter-spacing: 2px;  font-size: 6px; text-align: center; line-height: 100%; color: #000; border-bottom: solid 1px #b5b994;  position: relative; top: 110px; margin: 5px; margin-left: 5px; text-transform: uppercase;}
.bts22 { width: 80px; background-color: #fff; padding: 6px; font-family: calibri; letter-spacing: 2px;  font-size: 6px; text-align: justify; line-height: 100%; color: #000; border-bottom: solid 1px #b5b994; position: relative; top: 110px; margin: 5px; margin-left: 5px; text-transform: uppercase;}
.btstitle1 { width: 350px; height: 50px; background-color: #000; }
.btstitle2 { text-align: right; letter-spacing: 5px; text-transform: uppercase; font-family: calibri; font-size: 6px; color: #fff; position: relative; top: 20px; margin-right: 20px; }
.btsimg1 { position: absolute; margin-top: 10px; margin-left: 0px;width: 125px; height: 125px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background-color: #fff; z-index: 1; }
.btsimg2 { position: absolute; margin-top: 23px; margin-left: 13px;width: 100px; height: 100px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background: url(ССЫЛКА НА КАРТИНКУ РАЗМЕРОМ 100 НА 100) no-repeat; z-index: 1; }
.whyb { width: 200px; height: 300px; overflow: auto; font-family: arial; font-size: 8px; letter-spacing: 0px; text-transform: none; text-align: justify; line-height: 11px; border-left: solid 1px #eef5fb; padding-left: 60px; padding-right: 10px; }
.whyb b { font-size: 12px; font-style: italic; color: #000; font-family: times; }
.whyb::-webkit-scrollbar {width: 1px;}
.whyb::-webkit-scrollbar-track { background: #fff; }
.whyb::-webkit-scrollbar-thumb { background: #000; }
.streetcred {  text-align: center; font-size: 10px; }

</style>

<div style="margin: auto;width: 350px; background-color: #fff; box-shadow: 1px 1px 10px #000; padding: 10px; height: 400px;"><div class="btstitle1"><div class="btstitle2">& WHERE HAVE YOU BEEN</div><div class="btsimg1"></div><div class="btsimg2"><div class="bts1">
<div class="bts2">ТЕКСТ</div>
<div class="bts2">ТЕКСТ</div>
<div class="bts22">ТЕКСТ</div></div></div>
<div style="position: relative; margin-left: 60px;top: 55px; padding: 10px;"><div class="whyb">

ВАШ ПОСТ ЗДЕСЬ

</p>

</div></div></div></div></div>

0

4

Код:
<!--HTML--><link href="http://fonts.googleapis.com/css?family=Seaweed+Script" rel="stylesheet" type="text/css"><style type="text/css">
.ames-dw-post { width: 400px; height: 500px;  padding: 15px; position: relative; background-color: #1a1a1a; color: #ccc; font-family: calibri; line-height: 100%;  }
.ames-dw-post-img { width: 400px; position: absolute; top: 15px; left: 15px; }
.ames-dw-post-info { padding: 5px; position: relative; bottom: -180px; z-index: 1; background-color: #151515;  color: #ffffff; font-size: 8px; line-height: 100%; text-align: center; text-transform: uppercase; letter-spacing: 1px; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; }
.ames-dw-post-info:after { content: ''; position: absolute; top: -18px; left: 20px; z-index: 1; display: block; border-style: solid; border-width: 0px 20px 18px; border-color: #151515 transparent; }
.ames-dw-post-info:hover { bottom: -154px; }
.ames-dw-lyrics { width: 400px; padding-top: 20px; position: absolute; top: 195px; z-index: 2; background-color: #1A1A1A; font-size: 7.5px; text-align: center; text-transform: uppercase; letter-spacing: 2px; border-top: 4px solid #B43192; }
.ames-dw-lyrics b { display: block; color: #B43192; font-family: seaweed script; font-size: 20px; line-height: 50%; text-transform: lowercase; letter-spacing: 0px; font-weight: normal; }
.ames-dw-post-content { padding: 15px 13px 15px 15px; position: absolute; bottom: 15px; left: 15px; background-color: #151515; }
.ames-dw-post-pad { width: 365px; height: 230px; padding-right: 6px; overflow: auto; font-size: 11px; line-height: 90%; text-align: justify; }
.ames-dw-post-pad b, .ames-dw-post-info b { color: #B43192; }
.ames-dw-post-pad:first-letter { float: left; font-family: seaweed script; font-size: 30px; margin: 8px 8px 0 4px; color: #B43192; line-height: 60%; }
.ames-dw-post-pad::-webkit-scrollbar-thumb { background-color: #B43192; }
.tcred { text-transform: uppercase; text-align: right; width: 400px; }
.tcred a {font-family: calibri; font-size: 8px; letter-spacing: 1px; }
</style>
<center>
<div class="ames-dw-post">
<img src="http://placehold.it/400x185" class="ames-dw-post-img">
<div class="ames-dw-post-info">ТЕКСТ ТЕКСТ ТЕКСТ</div>
<div class="ames-dw-lyrics"><b>I will be quiet you won't even know I'm here.</b>
You won't suspect a thing, you won't see me in the mirror.</div>
<div class="ames-dw-post-content"><div class="ames-dw-post-pad">

 I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? 

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. 


<br><br>
<b>Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</b>

</div></div>
</div></center>

*за код спасибо некоему tempest.(AMES)

Код:
<link href="http://fonts.googleapis.com/css?family=Seaweed+Script" rel="stylesheet" type="text/css"><style type="text/css">
.ames-dw-post { width: 400px; height: 500px;  padding: 15px; position: relative; background-color: #1a1a1a; color: #ccc; font-family: calibri; line-height: 100%;  }
.ames-dw-post-img { width: 400px; position: absolute; top: 15px; left: 15px; }
.ames-dw-post-info { padding: 5px; position: relative; bottom: -180px; z-index: 1; background-color: #151515;  color: #ffffff; font-size: 8px; line-height: 100%; text-align: center; text-transform: uppercase; letter-spacing: 1px; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; }
.ames-dw-post-info:after { content: ''; position: absolute; top: -18px; left: 20px; z-index: 1; display: block; border-style: solid; border-width: 0px 20px 18px; border-color: #151515 transparent; }
.ames-dw-post-info:hover { bottom: -154px; }
.ames-dw-lyrics { width: 400px; padding-top: 20px; position: absolute; top: 195px; z-index: 2; background-color: #1A1A1A; font-size: 7.5px; text-align: center; text-transform: uppercase; letter-spacing: 2px; border-top: 4px solid #B43192; }
.ames-dw-lyrics b { display: block; color: #B43192; font-family: seaweed script; font-size: 20px; line-height: 50%; text-transform: lowercase; letter-spacing: 0px; font-weight: normal; }
.ames-dw-post-content { padding: 15px 13px 15px 15px; position: absolute; bottom: 15px; left: 15px; background-color: #151515; }
.ames-dw-post-pad { width: 365px; height: 230px; padding-right: 6px; overflow: auto; font-size: 11px; line-height: 90%; text-align: justify; }
.ames-dw-post-pad b, .ames-dw-post-info b { color: #B43192; }
.ames-dw-post-pad:first-letter { float: left; font-family: seaweed script; font-size: 30px; margin: 8px 8px 0 4px; color: #B43192; line-height: 60%; }
.ames-dw-post-pad::-webkit-scrollbar-thumb { background-color: #B43192; }
.tcred { text-transform: uppercase; text-align: right; width: 400px; }
.tcred a {font-family: calibri; font-size: 8px; letter-spacing: 1px; }
</style>
<center>
<div class="ames-dw-post">
<img src="КАРТИНКА РАЗМЕРОМ 400 НА 185" class="ames-dw-post-img">
<div class="ames-dw-post-info">ТЕКСТ ТЕКСТ ТЕКСТ</div>
<div class="ames-dw-lyrics"><b>I will be quiet you won't even know I'm here.</b>
You won't suspect a thing, you won't see me in the mirror.</div>
<div class="ames-dw-post-content"><div class="ames-dw-post-pad">

ВАШ ПОСТ ЗДЕСЬ


<br><br>
<b>ЦВЕТНОЙ ТЕКСТ ЗДЕСЬ</b>

</div></div>
</div></center>

0

5

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Fjalla+One|Miniver|Montserrat|Old+Standard+TT:400italic|PT+Sans+Narrow' rel='stylesheet' type='text/css'><style type="text/css">
#jinxthree { position: relative; width: 350px; padding: 25px; background: #fefefe; }
#jinxthree .titleone { width: 350px; color: #936663; font: 26px/100% miniver; letter-spacing: -1px; text-transform: lowercase; margin-top: 10px; }
#jinxthree .titletwo { width: 300px; color: #2e382f; font: 10px/125% montserrat; text-transform: uppercase; text-align: justify; margin-top: 5px; }
#jinxthree .titletwo a { color: #2d382f; text-decoration: none; }
#jinxthree .text { width: 300px; height: 200px; padding: 25px; background: #e4d7d6; color: #2e382f; font: 12px/15px pt sans narrow; text-align: justify; letter-spacing: 1px; overflow: auto; }
#jinxthree .text::-webkit-scrollbar { width: 10px; background: transparent; }
#jinxthree .text::-webkit-scrollbar-thumb { background: #B78C89; }
a.credit { position: relative; left: 125px; color: #888; font: 8px arial; text-align: right; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; }

</style><center><div id="jinxthree"><img src="http://33.media.tumblr.com/3c83c0cf8b3a602cc7d5739ca4f5eec0/tumblr_n5fbt3dWld1s0okduo2_250.gif" style="width: 160px; height: 160px; padding: 10px; border-radius: 100%; border: solid 1px #936663; margin-top: -10px;">
<div class="titleone">text text text text</div>
<div class="titletwo">ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ</div><p><div class="text">

Lorem ipsum dolor sit amet, ei tota fierent consequuntur nam, falli ignota labitur cum cu. Amet omittam te vel, veri facilisis eum at. Noster convenire scribentur ad vim, mea te bonorum facilisi. An decore repudiare vel, in omnis altera reprimique sed. Saepe facilis atomorum id vim, solet ridens accumsan vel ei. Quo cu odio summo theophrastus, ius at noluisse epicurei. Eu purto quidam posidonium ius. An solum vocibus nec. Omnes noluisse vulputate id nec, nam ex idque pericula ullamcorper, vis id nobis interesset. Verterem euripidis vituperatoribus est at. Qui eu audire blandit forensibus, vis eros indoctum ocurreret at. Case rationibus interesset no per, ei aeterno maiorum per.
Lorem ipsum dolor sit amet, ei tota fierent consequuntur nam, falli ignota labitur cum cu. Amet omittam te vel, veri facilisis eum at. Noster convenire scribentur ad vim, mea te bonorum facilisi. An decore repudiare vel, in omnis altera reprimique sed. Saepe facilis atomorum id vim, solet ridens accumsan vel ei. Quo cu odio summo theophrastus, ius at noluisse epicurei. Eu purto quidam posidonium ius. An solum vocibus nec. Omnes noluisse vulputate id nec, nam ex idque pericula ullamcorper, vis id nobis interesset. Verterem euripidis vituperatoribus est at. Qui eu audire blandit forensibus, vis eros indoctum ocurreret at. Case rationibus interesset no per, ei aeterno maiorum per.

</div></div></center>

*за код спасибо некоему  JINX

Код:
<link href='http://fonts.googleapis.com/css?family=Fjalla+One|Miniver|Montserrat|Old+Standard+TT:400italic|PT+Sans+Narrow' rel='stylesheet' type='text/css'><style type="text/css">
#jinxthree { position: relative; width: 350px; padding: 25px; background: #fefefe; }
#jinxthree .titleone { width: 350px; color: #936663; font: 26px/100% miniver; letter-spacing: -1px; text-transform: lowercase; margin-top: 10px; }
#jinxthree .titletwo { width: 300px; color: #2e382f; font: 10px/125% montserrat; text-transform: uppercase; text-align: justify; margin-top: 5px; }
#jinxthree .titletwo a { color: #2d382f; text-decoration: none; }
#jinxthree .text { width: 300px; height: 200px; padding: 25px; background: #e4d7d6; color: #2e382f; font: 12px/15px pt sans narrow; text-align: justify; letter-spacing: 1px; overflow: auto; }
#jinxthree .text::-webkit-scrollbar { width: 10px; background: transparent; }
#jinxthree .text::-webkit-scrollbar-thumb { background: #B78C89; }
a.credit { position: relative; left: 125px; color: #888; font: 8px arial; text-align: right; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; }

</style><center><div id="jinxthree"><img src="ССЫЛКА НА КАРТИНКУ 160 НА 160" style="width: 160px; height: 160px; padding: 10px; border-radius: 100%; border: solid 1px #936663; margin-top: -10px;">
<div class="titleone">text text text text</div>
<div class="titletwo">ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ</div><p><div class="text">

ВАШ ПОСТ ЗДЕСЬ

</div></div></center>

0

6

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

<center><div class="b-facepad">
<section class="facetabl">
<div><input id="ac-22" name="accordion-1" type="radio" checked/>
<label for="ac-22"><div class="b-fctitle">CLAIMED</div></label><article class="ac-face"><div class="b-fcpad"><table cellpadding="0" cellspacing="0"><TR><td>
<div class="b-smttl"> THE LADIES </div>
<div class="b-face01">

<br><a href="LINK">name listed however you please</a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>
<br><br>
</div></td>
<td>
<div class="b-smttl"> THE GENTS </div>
<div class="b-face02">


<br><a href="LINK">name listed however you please</a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>

<br><br>
</div></td></TR></table></div></article></div><div>
<input id="ac-21" name="accordion-1" type="radio" />
<article class="ac-face"><div class="b-fcpad"><table cellpadding="0" cellspacing="0"><TR><td>
<div class="b-smttl"> requested </div>
<div class="b-face03">



<br> <a href="LINK TO ADVERT">celeb name </a>
<br>- for member - 

<br> <a href="LINK TO ADVERT">celeb name </a>
<br>- for member - 




</div></td>
<td>
<div class="b-smttl"> reserved </div>
<div class="b-face03">

<br> <a href="LINK TO PROFILE">celeb name </a>
<br>- for member, 3 days - 


</div></td></TR></table></div></article><label for="ac-21"><div class="b-fctitle">PENDING</div></label></div> 
<br>
<div><input id="ac-23" name="accordion-1" type="checkbox" />
<label for="ac-23"><div class="b-fctitle" style="font-size: 18px; padding: 20px 30px 20px 30px;">CODES</div></label><article class="ac-code"><div class="b-fcpad" style="height: 200px; padding: 0px; border: 10px solid #fff; overflow: auto;">

<div class="b-smtitle2"> to claim </div>
[**CODE]<br><a href="LINK TO PROFILE">celeb last, first</a>[/CODE**]
<br><br>

<div class="b-smtitle2"> to reserve </div>
[**CODE]<a href="LINK TO ACCOUNT">last, first name </a>
<br>- name, 3 days -[/CODE**]
<br><br>

<div class="b-smtitle2"> to request </div>
[**CODE]<br> <a href="lLINK TO WANT AD">celeb last, celeb first</a>
<br>- for member name - [/CODE**]
<br>
</div></article></div>
</section>

</div></center>





<style type="text/css"> 
.facetabl label{ position: relative; z-index: 20; display: block; cursor: pointer; color: black; }
.facetabl label:hover{ background: #fff; }
.facetabl input:checked + label,.facetabl input:checked + label:hover{ background: #fff;}
.facetabl label:hover:after,.facetabl input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; }
.facetabl input:checked + label:hover:after{}
.facetabl input{ display: none; }

.facetabl article{ background: fff; margin: -0px; overflow: hidden; height: 0px; position: relative; z-index: 10;
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; transition: height 0.5s ease-in-out, box-shadow 0.6s linear; }

.facetabl input:checked ~ article{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; transition: height 0.5s ease-in-out, box-shadow 0.1s linear; }
.facetabl article p{ font-family: courier new; color: black; font-size: 14px; padding: 0px; }

.facetabl input:checked ~ article.ac-face{ height: 290px; } 
.facetabl input:checked ~ article.ac-code{ height: 220px; }



.b-facepad { background: #f8f8f8; width: 430px; padding: 10px; margin-top: 10px;}
.b-fctitle { background: #000; width: 370px; height: 10px; padding: 30px 30px 30px 30px; color: #fff; font-family: oswald; text-transform: uppercase; font-size: 20px; letter-spacing: 2px; }
.b-fctitle:hover { background: #323232; }

.b-face01 { width:160px; height:220px; padding-left: 30px; overflow:auto; text-align: left; line-height:120%; overflow: auto; trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase; padding-top: -5px; }
.b-face02 { width:160px; height:220px; padding-left: 30px; overflow:auto; text-align: left; line-height:120%; overflow: auto; trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase;   }
.b-face03 { width:190px; height:220px; overflow:auto; text-align: center; line-height:120%; overflow: auto; font-family: trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase;   }

.b-fcpad { width: 380px; height: 280px; padding: 0px 10px; background-color: #fff; border-top: 15px solid #fff;  overflow:auto;  }
.b-fcpad ::-webkit-scrollbar { background:#eaeaea; width: 3px; }
.b-fcpad ::-webkit-scrollbar-thumb { background: #800000; width: 3px; }
.b-fcpad ::-webkit-scrollbar-track { background:#eaeaea}


.b-smttl { width: 170px; height: 30px; font-family: 'oswald'; text-transform: uppercase; font-size: 20px; color: #000; border-bottom: 5px solid #800000; line-height: 100%; text-align: center; padding-left: 10px; } 

.b-smtitle2 { width: 380px;  font-family: oswald;  text-transform: uppercase; font-size: 15px; color: #000; text-align: center; letter-spacing: 2px; padding-top: 10px; } 

.b-face01 a:link, .b-face01 a:active, .b-face01 a:visited {
text-transform: uppercase;
color: #a50e18; }
.b-face02 a:link, .b-face02 a:active, .b-face02 a:visited {
text-transform: uppercase;
color: #0e75a5; }
.b-face03 a:link, .b-face03 a:active, .b-face03 a:visited {
text-transform: uppercase;
color: #a5670e; }

</style>

*за код спасибо некоему dizzy bee

Код:
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

<center><div class="b-facepad">
<section class="facetabl">
<div><input id="ac-22" name="accordion-1" type="radio" checked/>
<label for="ac-22"><div class="b-fctitle">CLAIMED</div></label><article class="ac-face"><div class="b-fcpad"><table cellpadding="0" cellspacing="0"><TR><td>
<div class="b-smttl"> THE LADIES </div>
<div class="b-face01">

<br><a href="LINK">name listed however you please</a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>
<br><br>
</div></td>
<td>
<div class="b-smttl"> THE GENTS </div>
<div class="b-face02">


<br><a href="LINK">name listed however you please</a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>
<br><a href="LINK">celeb name </a>

<br><br>
</div></td></TR></table></div></article></div><div>
<input id="ac-21" name="accordion-1" type="radio" />
<article class="ac-face"><div class="b-fcpad"><table cellpadding="0" cellspacing="0"><TR><td>
<div class="b-smttl"> requested </div>
<div class="b-face03">



<br> <a href="LINK TO ADVERT">celeb name </a>
<br>- for member - 

<br> <a href="LINK TO ADVERT">celeb name </a>
<br>- for member - 




</div></td>
<td>
<div class="b-smttl"> reserved </div>
<div class="b-face03">

<br> <a href="LINK TO PROFILE">celeb name </a>
<br>- for member, 3 days - 


</div></td></TR></table></div></article><label for="ac-21"><div class="b-fctitle">PENDING</div></label></div> 
<br>
<div><input id="ac-23" name="accordion-1" type="checkbox" />
<label for="ac-23"><div class="b-fctitle" style="font-size: 18px; padding: 20px 30px 20px 30px;">CODES</div></label><article class="ac-code"><div class="b-fcpad" style="height: 200px; padding: 0px; border: 10px solid #fff; overflow: auto;">

<div class="b-smtitle2"> to claim </div>
[**CODE]<br><a href="LINK TO PROFILE">celeb last, first</a>[/CODE**]
<br><br>

<div class="b-smtitle2"> to reserve </div>
[**CODE]<a href="LINK TO ACCOUNT">last, first name </a>
<br>- name, 3 days -[/CODE**]
<br><br>

<div class="b-smtitle2"> to request </div>
[**CODE]<br> <a href="lLINK TO WANT AD">celeb last, celeb first</a>
<br>- for member name - [/CODE**]
<br>
</div></article></div>
</section>

</div><div style="padding-left: 380px; font-family: trebuchet ms; font-size: 8px;">
<a href="http://shine.b1.jcink.com/index.php?showuser=3621">❥ bee</a></div></center>





<style type="text/css"> 
.facetabl label{ position: relative; z-index: 20; display: block; cursor: pointer; color: black; }
.facetabl label:hover{ background: #fff; }
.facetabl input:checked + label,.facetabl input:checked + label:hover{ background: #fff;}
.facetabl label:hover:after,.facetabl input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; }
.facetabl input:checked + label:hover:after{}
.facetabl input{ display: none; }

.facetabl article{ background: fff; margin: -0px; overflow: hidden; height: 0px; position: relative; z-index: 10;
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; transition: height 0.5s ease-in-out, box-shadow 0.6s linear; }

.facetabl input:checked ~ article{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; transition: height 0.5s ease-in-out, box-shadow 0.1s linear; }
.facetabl article p{ font-family: courier new; color: black; font-size: 14px; padding: 0px; }

.facetabl input:checked ~ article.ac-face{ height: 290px; } 
.facetabl input:checked ~ article.ac-code{ height: 220px; }



.b-facepad { background: #f8f8f8; width: 430px; padding: 10px; margin-top: 10px;}
.b-fctitle { background: #000; width: 370px; height: 10px; padding: 30px 30px 30px 30px; color: #fff; font-family: oswald; text-transform: uppercase; font-size: 20px; letter-spacing: 2px; }
.b-fctitle:hover { background: #323232; }

.b-face01 { width:160px; height:220px; padding-left: 30px; overflow:auto; text-align: left; line-height:120%; overflow: auto; trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase; padding-top: -5px; }
.b-face02 { width:160px; height:220px; padding-left: 30px; overflow:auto; text-align: left; line-height:120%; overflow: auto; trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase;   }
.b-face03 { width:190px; height:220px; overflow:auto; text-align: center; line-height:120%; overflow: auto; font-family: trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase;   }

.b-fcpad { width: 380px; height: 280px; padding: 0px 10px; background-color: #fff; border-top: 15px solid #fff;  overflow:auto;  }
.b-fcpad ::-webkit-scrollbar { background:#eaeaea; width: 3px; }
.b-fcpad ::-webkit-scrollbar-thumb { background: #800000; width: 3px; }
.b-fcpad ::-webkit-scrollbar-track { background:#eaeaea}


.b-smttl { width: 170px; height: 30px; font-family: 'oswald'; text-transform: uppercase; font-size: 20px; color: #000; border-bottom: 5px solid #800000; line-height: 100%; text-align: center; padding-left: 10px; } 

.b-smtitle2 { width: 380px;  font-family: oswald;  text-transform: uppercase; font-size: 15px; color: #000; text-align: center; letter-spacing: 2px; padding-top: 10px; } 

.b-face01 a:link, .b-face01 a:active, .b-face01 a:visited {
text-transform: uppercase;
color: #a50e18; }
.b-face02 a:link, .b-face02 a:active, .b-face02 a:visited {
text-transform: uppercase;
color: #0e75a5; }
.b-face03 a:link, .b-face03 a:active, .b-face03 a:visited {
text-transform: uppercase;
color: #a5670e; }

</style>

+1

7

Код:
<!--HTML--><center>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<div style="width: 320px; background-color: #F9F9F9; border: 20px solid #424B5C; overflow: extend;"> <br>

<br>
<div style="width: 300px; font-family: open sans condensed; font-size: 20px; line-height: 80%; text-transform: uppercase;">come morning light, you and i'll be</div>
<div style="width: 300px; font-family: lobster; font-size: 50px; line-height: 85%; color: A6AEBB;">safe and sound</div>
<div style="width: 300px; border-top: 1px dotted #000;"></div> <br>
<div style="width: 295px; font-family: trebuchet ms; font-size: 10px; line-height: 100%; text-align: left; padding-bottom: 10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in elit justo, id placerat nisl. Fusce pellentesque pretium est ut dignissim. Praesent mi neque, eleifend vel congue in, auctor vitae massa. Curabitur at turpis nibh. Nam bibendum nisi ac magna accumsan facilisis. Nullam pulvinar, tellus a facilisis volutpat, risus turpis fringilla dolor, at consectetur leo ligula vitae neque. Aliquam erat volutpat. Cras magna est, dignissim vel consequat vel, tristique blandit neque. Nunc vel fringilla velit. Maecenas volutpat malesuada lacus, ultricies tincidunt nunc accumsan auctor. Donec fringilla metus ultrices ligula luctus rhoncus. Suspendisse porta, tortor et fringilla malesuada, mi sem tincidunt urna, a scelerisque felis velit vehicula dui. Etiam quis erat sapien. Donec quam dui, aliquet id elementum in, porta eu metus.
<br> <br>
Quisque cursus ullamcorper nisi, sed lacinia mi sagittis non. Phasellus rhoncus sollicitudin hendrerit. Aenean lorem erat, sodales eu lacinia pellentesque, dapibus volutpat mauris. Etiam non augue non libero tincidunt consectetur. Vestibulum id dolor enim, vitae volutpat eros. In malesuada aliquam velit id mattis. Vestibulum mauris tellus, mattis iaculis condimentum vel, tempor pulvinar enim. Mauris rutrum ipsum eget massa cursus tempus. Donec fermentum metus nec quam hendrerit ac blandit nunc eleifend. Curabitur vel euismod risus. Pellentesque eu luctus risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eu venenatis magna. Nulla facilisi. Mauris interdum elementum libero eget vestibulum. Duis quis augue felis, eget facilisis ligula.
</div>
</div>
</center>

*за код спасибо некоему GINA

Код:
<center>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<div style="width: 320px; background-color: #F9F9F9; border: 20px solid #424B5C; overflow: extend;"> <br>

<br>
<div style="width: 300px; font-family: open sans condensed; font-size: 20px; line-height: 80%; text-transform: uppercase;">НАДПИСЬ</div>
<div style="width: 300px; font-family: lobster; font-size: 50px; line-height: 85%; color: A6AEBB;">НАДПИСЬ</div>
<div style="width: 300px; border-top: 1px dotted #000;"></div> <br>
<div style="width: 295px; font-family: trebuchet ms; font-size: 10px; line-height: 100%; text-align: left; padding-bottom: 10px;">
ВАШ ПОСТ
<br> <br>
ВАШ ПОСТ
</div>
</div>
</center>
Код:
<!--HTML--><center>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<div style="width: 320px; background-color: #F9F9F9; border: 20px solid #424B5C; overflow: extend;"> <br>
<div style="background-image: url(http://media.tumblr.com/tumblr_ly6a67flYO1r0j9iv.gif); background-color: #000; height: 195px; width: 287px; padding: 5px;"></div>
<div style="width: 217px; height: 10px; background-color: E4DAD8; border-left: 80px solid #1F1919;"></div>

<br>
<div style="width: 300px; font-family: open sans condensed; font-size: 20px; line-height: 80%; text-transform: uppercase;">come morning light, you and i'll be</div>
<div style="width: 300px; font-family: lobster; font-size: 50px; line-height: 85%; color: A6AEBB;">safe and sound</div>
<div style="width: 300px; border-top: 1px dotted #000;"></div> <br>
<div style="width: 295px; font-family: trebuchet ms; font-size: 10px; line-height: 100%; text-align: left; padding-bottom: 10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in elit justo, id placerat nisl. Fusce pellentesque pretium est ut dignissim. Praesent mi neque, eleifend vel congue in, auctor vitae massa. Curabitur at turpis nibh. Nam bibendum nisi ac magna accumsan facilisis. Nullam pulvinar, tellus a facilisis volutpat, risus turpis fringilla dolor, at consectetur leo ligula vitae neque. Aliquam erat volutpat. Cras magna est, dignissim vel consequat vel, tristique blandit neque. Nunc vel fringilla velit. Maecenas volutpat malesuada lacus, ultricies tincidunt nunc accumsan auctor. Donec fringilla metus ultrices ligula luctus rhoncus. Suspendisse porta, tortor et fringilla malesuada, mi sem tincidunt urna, a scelerisque felis velit vehicula dui. Etiam quis erat sapien. Donec quam dui, aliquet id elementum in, porta eu metus.
<br> <br>
Quisque cursus ullamcorper nisi, sed lacinia mi sagittis non. Phasellus rhoncus sollicitudin hendrerit. Aenean lorem erat, sodales eu lacinia pellentesque, dapibus volutpat mauris. Etiam non augue non libero tincidunt consectetur. Vestibulum id dolor enim, vitae volutpat eros. In malesuada aliquam velit id mattis. Vestibulum mauris tellus, mattis iaculis condimentum vel, tempor pulvinar enim. Mauris rutrum ipsum eget massa cursus tempus. Donec fermentum metus nec quam hendrerit ac blandit nunc eleifend. Curabitur vel euismod risus. Pellentesque eu luctus risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eu venenatis magna. Nulla facilisi. Mauris interdum elementum libero eget vestibulum. Duis quis augue felis, eget facilisis ligula.
</div>
</div>
</center>
Код:
<center>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<div style="width: 320px; background-color: #F9F9F9; border: 20px solid #424B5C; overflow: extend;"> <br>
<div style="background-image: url(КАРТИНКА); background-color: #000; height: 195px; width: 287px; padding: 5px;"></div>
<div style="width: 217px; height: 10px; background-color: E4DAD8; border-left: 80px solid #1F1919;"></div>

<br>
<div style="width: 300px; font-family: open sans condensed; font-size: 20px; line-height: 80%; text-transform: uppercase;">ТЕКСТ</div>
<div style="width: 300px; font-family: lobster; font-size: 50px; line-height: 85%; color: A6AEBB;">ТЕКСТ</div>
<div style="width: 300px; border-top: 1px dotted #000;"></div> <br>
<div style="width: 295px; font-family: trebuchet ms; font-size: 10px; line-height: 100%; text-align: left; padding-bottom: 10px;">
ВАШПОСТ ЗДЕСЬ
<br> <br>
ВАШ ПОСТ ЗДЕСЬ
</div>
</div>
</center>

0

8

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'><center><div style="padding: 40px; background-color: #C41F1F; width: 300px;"><div style="background-color: white;"><div style="padding: 30px; border-bottom: 1px dotted #000000; background-color: #9CA5C4; color: #000000; font-family: codystar; text-transform: uppercase; font-size: 30px;">

site title

</div><div style="padding: 10px; border-top: 1px dotted #121212; border-bottom: 1px dotted #121212;"><div style="width: 200px; padding: 20px; border-top: 1px dotted #7a1f20; border-bottom: 1px dotted #7a1f20; font-family: georgia; font-style: italic; color: 121212; font-size: 9px; line-height: 95%; text-align: justify;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit nibh tortor. Nam et lorem vitae nunc dapibus sodales ut non quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed turpis lectus, viverra ut varius vitae, congue sit amet justo. Mauris sagittis, sapien eget lobortis dignissim, felis sapien pulvinar nunc, et elementum est tortor sed augue. Nam augue odio, gravida at volutpat non, faucibus a ipsum. Phasellus vel fringilla magna. Proin vestibulum lobortis mi, semper suscipit eros congue vel. Vestibulum et neque sit amet nunc posuere rhoncus. Praesent scelerisque ligula sed nulla molestie sollicitudin. Aliquam vel semper ipsum. Etiam tristique neque nec enim tempor suscipit. Phasellus porta condimentum ligula, ut malesuada ligula pulvinar condimentum. Nunc vulputate libero vel elit malesuada quis interdum diam commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit nibh tortor. Nam et lorem vitae nunc dapibus sodales ut non quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed turpis lectus, viverra ut varius vitae, congue sit amet justo. Mauris sagittis, sapien eget lobortis dignissim, felis sapien pulvinar nunc, et elementum est tortor sed augue. Nam augue odio, gravida at volutpat non, faucibus a ipsum. Phasellus vel fringilla magna. Proin vestibulum lobortis mi, semper suscipit eros congue vel. Vestibulum et neque sit amet nunc posuere rhoncus. Praesent scelerisque ligula sed nulla molestie sollicitudin. Aliquam vel semper ipsum. Etiam tristique neque nec enim tempor suscipit. Phasellus porta condimentum ligula, ut malesuada ligula pulvinar condimentum. Nunc vulputate libero vel elit malesuada quis interdum diam commodo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit nibh tortor. Nam et lorem vitae nunc dapibus sodales ut non quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed turpis lectus, viverra ut varius vitae, congue sit amet justo. Mauris sagittis, sapien eget lobortis dignissim, felis sapien pulvinar nunc, et elementum est tortor sed augue. Nam augue odio, gravida at volutpat non, faucibus a ipsum. Phasellus vel fringilla magna. Proin vestibulum lobortis mi, semper suscipit eros congue vel. Vestibulum et neque sit amet nunc posuere rhoncus. Praesent scelerisque ligula sed nulla molestie sollicitudin. Aliquam vel semper ipsum. Etiam tristique neque nec enim tempor suscipit. Phasellus porta condimentum ligula, ut malesuada ligula pulvinar condimentum. Nunc vulputate libero vel elit malesuada quis interdum diam commodo.

</div></div></div></div></center>

*за код спасибо LUAZ

Код:
<link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'><center><div style="padding: 40px; background-color: #C41F1F; width: 300px;"><div style="background-color: white;"><div style="padding: 30px; border-bottom: 1px dotted #000000; background-color: #9CA5C4; color: #000000; font-family: codystar; text-transform: uppercase; font-size: 30px;">

НАЗВАНИЕ

</div><div style="padding: 10px; border-top: 1px dotted #121212; border-bottom: 1px dotted #121212;"><div style="width: 200px; padding: 20px; border-top: 1px dotted #7a1f20; border-bottom: 1px dotted #7a1f20; font-family: georgia; font-style: italic; color: 121212; font-size: 9px; line-height: 95%; text-align: justify;">

ВАШ ПОСТ

</div></div></div></div></center>

0

9

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'><style type="text/css">.tttri {width: 0px; height: 0px; border-style: solid; border-width: 0 165px 40px 165px; border-color: transparent transparent #887394 transparent; margin-top: 15px;}</style><center><div style="width: 330px; background-color: #EBEBEB;">
<div style="padding: 20px 20px 25px 20px; background-color: #887394; color: #f7f7f7; font-family: six caps; font-size: 50px; letter-spacing: 2px;">

the rules

</div><div style="width: 250px; padding: 10px; background-color: #F7F7F7; font-family: calibri, sans-serif; font-size: 9.5px; text-align: justify; line-height: 90%; color: #8C8C8C;"><BR>

<span style="font-family: six caps; font-size: 35px; color: #887394;">number one</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec eros vel nisi sagittis egestas in sed eros. Nullam diam metus, ullamcorper sit amet accumsan in, porta vitae metus. Donec mauris risus, dictum quis aliquam a, pulvinar sed lorem. In hac habitasse platea dictumst. Nulla eget leo velit, vitae congue eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque odio enim, vulputate ac iaculis faucibus, cursus vitae diam. Aliquam erat volutpat. Donec adipiscing sollicitudin nisi quis convallis. Nulla facilisi. Nunc risus odio, consequat a ullamcorper at, sollicitudin eget est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 

<BR><BR><p><span style="font-family: six caps; font-size: 35px; color: #887394;">number two</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec eros vel nisi sagittis egestas in sed eros. Nullam diam metus, ullamcorper sit amet accumsan in, porta vitae metus. Donec mauris risus, dictum quis aliquam a, pulvinar sed lorem. In hac habitasse platea dictumst. Nulla eget leo velit, vitae congue eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque odio enim, vulputate ac iaculis faucibus, cursus vitae diam. Aliquam erat volutpat. Donec adipiscing sollicitudin nisi quis convallis. Nulla facilisi. Nunc risus odio, consequat a ullamcorper at, sollicitudin eget est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 

<BR><BR><p><span style="font-family: six caps; font-size: 35px; color: #887394;">number three</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec eros vel nisi sagittis egestas in sed eros. Nullam diam metus, ullamcorper sit amet accumsan in, porta vitae metus. Donec mauris risus, dictum quis aliquam a, pulvinar sed lorem. In hac habitasse platea dictumst. Nulla eget leo velit, vitae congue eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque odio enim, vulputate ac iaculis faucibus, cursus vitae diam. Aliquam erat volutpat. Donec adipiscing sollicitudin nisi quis convallis. Nulla facilisi. Nunc risus odio, consequat a ullamcorper at, sollicitudin eget est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 

</div><div class="tttri"></div></div></center>

*спасибо за код LAUZ

Код:
<link href='http://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'><style type="text/css">.tttri {width: 0px; height: 0px; border-style: solid; border-width: 0 165px 40px 165px; border-color: transparent transparent #887394 transparent; margin-top: 15px;}</style><center><div style="width: 330px; background-color: #EBEBEB;">
<div style="padding: 20px 20px 25px 20px; background-color: #887394; color: #f7f7f7; font-family: six caps; font-size: 50px; letter-spacing: 2px;">

НАЗВАНИЕ

</div><div style="width: 250px; padding: 10px; background-color: #F7F7F7; font-family: calibri, sans-serif; font-size: 9.5px; text-align: justify; line-height: 90%; color: #8C8C8C;"><BR>

<span style="font-family: six caps; font-size: 35px; color: #887394;">number one</span> ВАШ ПОСТ

<BR><BR><p><span style="font-family: six caps; font-size: 35px; color: #887394;">number two</span> ВАШ ПОСТ

<BR><BR><p><span style="font-family: six caps; font-size: 35px; color: #887394;">number three</span>ВАШ ПОСТ

</div><div class="tttri"></div></div></center>

0

10

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'><center><div style="background-color: #d9d2cc; width: 300px; padding: 20px; box-shadow: 1px 1px 5px #cccccc;"><div style="padding: 10px; background-color: #f0ebeb; border-top: 10px solid #5c5655; border-bottom: 20px solid #646c62; text-align: justify; font-family: arial; letter-spacing: 1px; color: #5c5655; font-size: 9.5px; line-height: 90%;"><div style="font-family: great vibes; text-align: center; padding-top: 50px; padding-bottom: 50px; font-size: 110px; color: #646c62; text-shadow: 2px 2px 0px #f7f7f7;">

the plot

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nisl sem, eu fringilla risus. Ut sapien erat, rutrum sed sagittis vitae, cursus consequat turpis. Suspendisse sed vehicula tellus. Aliquam rhoncus neque nec ligula viverra convallis. Phasellus elementum turpis vel enim ultrices nec bibendum urna tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum, lacus nec dapibus vulputate, sapien justo tempor tortor, sed ultricies sapien purus et diam. Fusce ac metus id magna dignissim condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nunc augue, semper sed placerat vitae, dictum at nibh. Donec cursus venenatis odio, eu dignissim nisi pulvinar nec. Maecenas mattis pharetra magna, in elementum sapien sodales eget. Sed imperdiet ipsum quis erat mattis ut auctor diam molestie. Quisque nec arcu quis massa ultrices faucibus id ut dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nisl sem, eu fringilla risus. Ut sapien erat, rutrum sed sagittis vitae, cursus consequat turpis. Suspendisse sed vehicula tellus. Aliquam rhoncus neque nec ligula viverra convallis. Phasellus elementum turpis vel enim ultrices nec bibendum urna tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum, lacus nec dapibus vulputate, sapien justo tempor tortor, sed ultricies sapien purus et diam. Fusce ac metus id magna dignissim condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nunc augue, semper sed placerat vitae, dictum at nibh. Donec cursus venenatis odio, eu dignissim nisi pulvinar nec. Maecenas mattis pharetra magna, in elementum sapien sodales eget. Sed imperdiet ipsum quis erat mattis ut auctor diam molestie. Quisque nec arcu quis massa ultrices faucibus id ut dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nisl sem, eu fringilla risus. Ut sapien erat, rutrum sed sagittis vitae, cursus consequat turpis. Suspendisse sed vehicula tellus. Aliquam rhoncus neque nec ligula viverra convallis. Phasellus elementum turpis vel enim ultrices nec bibendum urna tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum, lacus nec dapibus vulputate, sapien justo tempor tortor, sed ultricies sapien purus et diam. Fusce ac metus id magna dignissim condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nunc augue, semper sed placerat vitae, dictum at nibh. Donec cursus venenatis odio, eu dignissim nisi pulvinar nec. Maecenas mattis pharetra magna, in elementum sapien sodales eget. Sed imperdiet ipsum quis erat mattis ut auctor diam molestie. Quisque nec arcu quis massa ultrices faucibus id ut dolor.

</div></div></center>

*за код спасибо LAUZ

Код:
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'><center><div style="background-color: #d9d2cc; width: 300px; padding: 20px; box-shadow: 1px 1px 5px #cccccc;"><div style="padding: 10px; background-color: #f0ebeb; border-top: 10px solid #5c5655; border-bottom: 20px solid #646c62; text-align: justify; font-family: arial; letter-spacing: 1px; color: #5c5655; font-size: 9.5px; line-height: 90%;"><div style="font-family: great vibes; text-align: center; padding-top: 50px; padding-bottom: 50px; font-size: 110px; color: #646c62; text-shadow: 2px 2px 0px #f7f7f7;">

the plot

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nisl sem, eu fringilla risus. Ut sapien erat, rutrum sed sagittis vitae, cursus consequat turpis. Suspendisse sed vehicula tellus. Aliquam rhoncus neque nec ligula viverra convallis. Phasellus elementum turpis vel enim ultrices nec bibendum urna tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum, lacus nec dapibus vulputate, sapien justo tempor tortor, sed ultricies sapien purus et diam. Fusce ac metus id magna dignissim condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nunc augue, semper sed placerat vitae, dictum at nibh. Donec cursus venenatis odio, eu dignissim nisi pulvinar nec. Maecenas mattis pharetra magna, in elementum sapien sodales eget. Sed imperdiet ipsum quis erat mattis ut auctor diam molestie. Quisque nec arcu quis massa ultrices faucibus id ut dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nisl sem, eu fringilla risus. Ut sapien erat, rutrum sed sagittis vitae, cursus consequat turpis. Suspendisse sed vehicula tellus. Aliquam rhoncus neque nec ligula viverra convallis. Phasellus elementum turpis vel enim ultrices nec bibendum urna tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum, lacus nec dapibus vulputate, sapien justo tempor tortor, sed ultricies sapien purus et diam. Fusce ac metus id magna dignissim condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nunc augue, semper sed placerat vitae, dictum at nibh. Donec cursus venenatis odio, eu dignissim nisi pulvinar nec. Maecenas mattis pharetra magna, in elementum sapien sodales eget. Sed imperdiet ipsum quis erat mattis ut auctor diam molestie. Quisque nec arcu quis massa ultrices faucibus id ut dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nisl sem, eu fringilla risus. Ut sapien erat, rutrum sed sagittis vitae, cursus consequat turpis. Suspendisse sed vehicula tellus. Aliquam rhoncus neque nec ligula viverra convallis. Phasellus elementum turpis vel enim ultrices nec bibendum urna tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum, lacus nec dapibus vulputate, sapien justo tempor tortor, sed ultricies sapien purus et diam. Fusce ac metus id magna dignissim condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nunc augue, semper sed placerat vitae, dictum at nibh. Donec cursus venenatis odio, eu dignissim nisi pulvinar nec. Maecenas mattis pharetra magna, in elementum sapien sodales eget. Sed imperdiet ipsum quis erat mattis ut auctor diam molestie. Quisque nec arcu quis massa ultrices faucibus id ut dolor.

</div></div></center>

0

11

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Aguafina+Script' rel='stylesheet' type='text/css'><center><div style="width: 350px; padding: 0px 60px 0px 60px; background-image: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3446/3446723.png);"><div style="padding: 30px; background-color: #FCFDFF; border: 3px double #A6AEC1;"><div style="font-family: aguafina script; color: #EDEDF2; text-shadow: 1px 1px 0px #6C788E, 2px 2px 0px #EDEDF2, 3px 3px 0px #CFD5E1; font-size: 70px; text-transform: lowercase; margin-top: 40px; margin-bottom: 15px;">

title here

</div><div style="font-family: advent pro; text-transform: uppercase; font-size: 10px; border-bottom: 1px solid #6C788E; color: #6C788E;">

sub-title here

</div><div style="height: 1px; border-bottom: 2px solid #6C788E;"></div><div style="font-family: tahoma; color: #6C788E; font-size: 10px; line-height: 90%; text-align: justify; padding: 10px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis adipiscing lorem placerat bibendum. Nam aliquam accumsan dui nec porttitor. Aliquam sem diam, varius eget aliquam eu, pretium vitae velit. Morbi accumsan facilisis mi at fermentum. Aliquam tempus dapibus sem, in faucibus erat fermentum quis. In hac habitasse platea dictumst. Pellentesque pretium metus quis nibh iaculis hendrerit. Donec in purus vitae sem facilisis faucibus. In hac habitasse platea dictumst. In vestibulum lacus turpis, vel ultricies risus molestie sit amet. Suspendisse risus metus, commodo ut pulvinar ac, elementum nec massa. Proin pellentesque lectus id luctus pharetra. Ut porta condimentum ligula. Fusce dui est, euismod id massa porta, laoreet consectetur metus. Integer eget turpis interdum lectus bibendum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eleifend hendrerit risus. Donec eleifend urna non pharetra tincidunt. Sed consectetur velit ac nunc molestie adipiscing. Integer non lectus sit amet elit laoreet pretium. Curabitur accumsan mi mi, quis facilisis leo interdum vitae. Nulla euismod tellus non erat elementum auctor. Sed ac lorem sed libero blandit condimentum. Duis tincidunt accumsan velit vel mollis. Cras sit amet sem tincidunt, volutpat sapien in, commodo magna. Praesent eget vehicula quam. Proin sed felis nec nunc iaculis tempor vel at turpis.


</div><div style="height: 1px; border-bottom: 2px solid #6C788E;"></div><div style="border-bottom: 1px solid #6C788E; height: 1px;"></div></div></div></center>

*за код спасибо LAUZ

Код:
<link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Aguafina+Script' rel='stylesheet' type='text/css'><center><div style="width: 350px; padding: 0px 60px 0px 60px; background-image: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3446/3446723.png);"><div style="padding: 30px; background-color: #FCFDFF; border: 3px double #A6AEC1;"><div style="font-family: aguafina script; color: #EDEDF2; text-shadow: 1px 1px 0px #6C788E, 2px 2px 0px #EDEDF2, 3px 3px 0px #CFD5E1; font-size: 70px; text-transform: lowercase; margin-top: 40px; margin-bottom: 15px;">

НАЗВАНИЕ

</div><div style="font-family: advent pro; text-transform: uppercase; font-size: 10px; border-bottom: 1px solid #6C788E; color: #6C788E;">

ЦИТАТА

</div><div style="height: 1px; border-bottom: 2px solid #6C788E;"></div><div style="font-family: tahoma; color: #6C788E; font-size: 10px; line-height: 90%; text-align: justify; padding: 10px;">

ВАШ ПОСТ


</div><div style="height: 1px; border-bottom: 2px solid #6C788E;"></div><div style="border-bottom: 1px solid #6C788E; height: 1px;"></div></div></div></center>

0

12

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'><style type='text/css'>
.somacont { position:relative; width:400px; height:600px; -webkit-box-shadow: 1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; -moz-box-shadow:1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; box-shadow:1px 1px 5px 0px#eee, -1px -1px 5px 0px #eee; }
.somablock { position:absolute; width:200px; height:300px; overflow:hidden; }
.wordcontainers { position:absolute; top:0px; left:0px; width:200px; height:290px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somablock:hover .wordcontainers { -ms-transform: scale(2,4); -webkit-transform: scale(2,4); transform: scale(2,4); opacity:0; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somainfo { position:absolute; top:-300px; width:200px; height:300px; background-color:#fff; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somablock:hover .somainfo { top:0px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somatitles { position:absolute; width:150px; top:130px; left:25px; color:#f1ede3; text-align:center; text-transform:uppercase; font-family:yanone kaffeesatz; font-weight:700; font-size:18px; letter-spacing:2px; line-height:18px; padding-bottom:10px; border-bottom:1px solid #f1ede3; }
.somaidk { position:absolute; width:100px; top:169px; left:50px; color:#f1ede3; text-align:center; text-transform:lowercase; font-family:garamond; font-style:italic; font-size:12px; line-height:100%; letter-spacing:1px; }
.somaimageblock { width:200px; height:60px; overflow:hidden; }
.somawordsha { width:180px; height:208px; padding:10px; overflow:auto; text-align:justify; font-size:10px; font-family:times; color:#222; line-height:100%; }
</style><center>
<div class='somacont'>

<div class='somablock' style='top:0px; left:0px; background-color:#d5b0b1;'><div class='wordcontainers'><div class='somatitles'>

RELATIONSHIP

</div><div class='somaidk'>

face claim, ##, first last

</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #d5b0b1;'>

<img src='http://placehold.it/200x60/d5b0b1/333' width='200px;'>

</div><div class='somawordsha'>

words

</div></div></div>



<div class='somablock' style='top:0px; left:200px; background-color:#a09ea4;'><div class='wordcontainers'><div class='somatitles'>

RELATIONSHIP

</div><div class='somaidk'>

face claim, ##, first last

</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #a09ea4;'>

<img src='http://placehold.it/200x60/a09ea4/333' width='200px;'>

</div><div class='somawordsha'>

words

</div></div></div>




<div class='somablock' style='top:300px; left:0px; background-color:#aecabb;'><div class='wordcontainers'><div class='somatitles'>

RELATIONSHIP

</div><div class='somaidk'>

face claim, ##, first last

</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #aecabb;'>

<img src='http://placehold.it/200x60/aecabb/333' width='200px;'>

</div><div class='somawordsha'>

words

</div></div></div>



<div class='somablock' style='top:300px; left:200px; background-color:#a4c2bc;'><div class='wordcontainers'><div class='somatitles'>

RELATIONSHIP

</div><div class='somaidk'>

face claim, ##, first last

</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #a4c2bc;'>

<img src='http://placehold.it/200x60/a4c2bc/333' width='200px;'>

</div><div class='somawordsha'>

words

</div></div></div>


</div></center>

*за код спасибо LOUIS

Код:
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'><style type='text/css'>
.somacont { position:relative; width:400px; height:600px; -webkit-box-shadow: 1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; -moz-box-shadow:1px 1px 5px 0px #eee, -1px -1px 5px 0px #eee; box-shadow:1px 1px 5px 0px#eee, -1px -1px 5px 0px #eee; }
.somablock { position:absolute; width:200px; height:300px; overflow:hidden; }
.wordcontainers { position:absolute; top:0px; left:0px; width:200px; height:290px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somablock:hover .wordcontainers { -ms-transform: scale(2,4); -webkit-transform: scale(2,4); transform: scale(2,4); opacity:0; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somainfo { position:absolute; top:-300px; width:200px; height:300px; background-color:#fff; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somablock:hover .somainfo { top:0px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.somatitles { position:absolute; width:150px; top:130px; left:25px; color:#f1ede3; text-align:center; text-transform:uppercase; font-family:yanone kaffeesatz; font-weight:700; font-size:18px; letter-spacing:2px; line-height:18px; padding-bottom:10px; border-bottom:1px solid #f1ede3; }
.somaidk { position:absolute; width:100px; top:169px; left:50px; color:#f1ede3; text-align:center; text-transform:lowercase; font-family:garamond; font-style:italic; font-size:12px; line-height:100%; letter-spacing:1px; }
.somaimageblock { width:200px; height:60px; overflow:hidden; }
.somawordsha { width:180px; height:208px; padding:10px; overflow:auto; text-align:justify; font-size:10px; font-family:times; color:#222; line-height:100%; }
</style><center>
<div class='somacont'>

<div class='somablock' style='top:0px; left:0px; background-color:#d5b0b1;'><div class='wordcontainers'><div class='somatitles'>

RELATIONSHIP

</div><div class='somaidk'>

face claim, ##, first last

</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #d5b0b1;'>

<img src='http://placehold.it/200x60/d5b0b1/333' width='200px;'>

</div><div class='somawordsha'>

words

</div></div></div>



<div class='somablock' style='top:0px; left:200px; background-color:#a09ea4;'><div class='wordcontainers'><div class='somatitles'>

RELATIONSHIP

</div><div class='somaidk'>

face claim, ##, first last

</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #a09ea4;'>

<img src='http://placehold.it/200x60/a09ea4/333' width='200px;'>

</div><div class='somawordsha'>

words

</div></div></div>




<div class='somablock' style='top:300px; left:0px; background-color:#aecabb;'><div class='wordcontainers'><div class='somatitles'>

RELATIONSHIP

</div><div class='somaidk'>

face claim, ##, first last

</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #aecabb;'>

<img src='http://placehold.it/200x60/aecabb/333' width='200px;'>

</div><div class='somawordsha'>

words

</div></div></div>



<div class='somablock' style='top:300px; left:200px; background-color:#a4c2bc;'><div class='wordcontainers'><div class='somatitles'>

RELATIONSHIP

</div><div class='somaidk'>

face claim, ##, first last

</div></div><div class='somainfo'><div class='somaimageblock' style='border-bottom:3px solid #a4c2bc;'>

<img src='http://placehold.it/200x60/a4c2bc/333' width='200px;'>

</div><div class='somawordsha'>

words

</div></div></div>


</div></center>

0

13

Код:
<!--HTML--><center>
<style>
#likeyou { width: 400px; height: 290px; position: relative; overflow: hidden; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; border-bottom: 10px solid #473d3d;}
#likeyou:hover { width: 400px; height: 480px; position: relative; overflow: hidden; }
#likeyou .wannabe { -webkit-transition: 2s all ease-in-out; -moz-transition: 2s all ease-in-out; o-transition: 2s all ease-in-out; position: absolute; left: 0px; top: 0px; right: 0px; width: 400px; height: 300px; position: relative; z-index: 2;  }
#likeyou .wannabeloved { -webkit-transition: 2s all ease-in-out; -moz-transition: 2s all ease-in-out; o-transition: 2s all ease-in-out; position: absolute; left: 0px; top: 0px; width: 400px; height: 290px; }
#likeyou:hover .wannabeloved { -webkit-transition: 0.9s all ease-in-out; -moz-transition: 0.9s all ease-in-out; o-transition: 0.9s all ease-in-out; top: 290px; }
.sokissme { width: 340px; height: 130px; padding: 0px 10px 0px; 10px; border: 20px solid #f8f5f3; border-top: 30px solid #f8f5f3; border-bottom: 30px solid #f8f5f3; background-color: #f8f5f3; color: #252525; font-family: arial; font-size: 10px; line-height: 150%; text-align: justify; overflow: auto; }
.sokissme::-webkit-scrollbar { width: 5px; }
.sokissme::-webkit-scrollbar-track { background-color: #efe5e4; }
.sokissme::-webkit-scrollbar-thumb { background-color: #473d3d; }
.edsheeranlove { width: 200px; height; 200px; border-radius: 500%; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; -webkit-perspective: 2000; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin:0% 0%; -webkit-transform-origin:0% 0%; -ms-transform-origin:0% 0%;}
.boomdida { width: 150px; height: 120px; background-color: #f8f5f3; padding: 0px 10px 0px 10px; border: 10px solid #f8f5f3; overflow: auto; text-align: justify; border-top: 20px solid #f8f5f3;border-bottom: 20px solid #f8f5f3; font-family: arial; font-size: 10px;  color: #252525; line-height: 150%; }
.boomdida::-webkit-scrollbar { width: 5px; }
.boomdida::-webkit-scrollbar-track { background-color: #efe5e4; }
.boomdida::-webkit-scrollbar-thumb { background-color: #473d3d; }
#likeyou:hover .edsheeranlove { width: 200px; height; 200px; border-radius: 500%; transform: rotateX(360deg); -webkit-transform: rotateX(360deg); -ms-transform: rotateX(360deg); }
.whywouldyounot { width: 200px; height: 200px; border-radius: 500%; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; opacity: 0; position: relative; background-color: #f8f5f3; }
#likeyou:hover .whywouldyounot { opacity: 1; }
</style>

<div id="likeyou"><div class="wannabe">

<div class="wannabeloved">
<div class="sokissme">

WORDS AND STUFF HERE

</div></div>

<div style="width: 400px; height: 10px; background-color: #473d3d; position: relative;"></div><div style="width: 400px; height: 150px; background: url(http://oi40.tinypic.com/mlo9sj.jpg); position: relative;"></div><div style="width: 400px; height: 130px; background-color: #e36b6b; position: relative;">

<div class="edsheeranlove"><div style="width: 200px; height: 200px; border-radius: 500%; background: url(http://savepic.org/3837918.gif);position: relative; top: -100px;"><div class="whywouldyounot"><div style="width: 150px; height: 45px;"></div>
<div style="width: 120px; padding: 2px; border: 1px solid #50565e; opacity: 1;">
<div style="width: 120px; height: 25px; background-color: #ffbaba; font-family: open sans condensed; color:473d3d; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; line-height: 200%;">first last</div>
<div style="width: 150px; height: 2px;"></div>
<div style="width: 120px; height: 25px; background-color: #ffbaba; font-family: open sans condensed; color:473d3d; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; line-height: 200%;">age in letters</div>
<div style="width: 150px; height: 2px;"></div>
<div style="width: 120px; height: 25px; background-color: #ffbaba; font-family: open sans condensed; color:473d3d; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; line-height: 200%;">trait here</div>
<div style="width: 150px; height: 2px;"></div>
<div style="width: 120px; height: 25px; background-color: #ffbaba; font-family: open sans condensed; color:473d3d; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; line-height: 200%;">member group</div>
</div></div></div></div>

</div></div>

</div>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<center>

*за код спасибо lauren  jauregui.

Код:
<center>
<style>
#likeyou { width: 400px; height: 290px; position: relative; overflow: hidden; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; border-bottom: 10px solid #473d3d;}
#likeyou:hover { width: 400px; height: 480px; position: relative; overflow: hidden; }
#likeyou .wannabe { -webkit-transition: 2s all ease-in-out; -moz-transition: 2s all ease-in-out; o-transition: 2s all ease-in-out; position: absolute; left: 0px; top: 0px; right: 0px; width: 400px; height: 300px; position: relative; z-index: 2;  }
#likeyou .wannabeloved { -webkit-transition: 2s all ease-in-out; -moz-transition: 2s all ease-in-out; o-transition: 2s all ease-in-out; position: absolute; left: 0px; top: 0px; width: 400px; height: 290px; }
#likeyou:hover .wannabeloved { -webkit-transition: 0.9s all ease-in-out; -moz-transition: 0.9s all ease-in-out; o-transition: 0.9s all ease-in-out; top: 290px; }
.sokissme { width: 340px; height: 130px; padding: 0px 10px 0px; 10px; border: 20px solid #f8f5f3; border-top: 30px solid #f8f5f3; border-bottom: 30px solid #f8f5f3; background-color: #f8f5f3; color: #252525; font-family: arial; font-size: 10px; line-height: 150%; text-align: justify; overflow: auto; }
.sokissme::-webkit-scrollbar { width: 5px; }
.sokissme::-webkit-scrollbar-track { background-color: #efe5e4; }
.sokissme::-webkit-scrollbar-thumb { background-color: #473d3d; }
.edsheeranlove { width: 200px; height; 200px; border-radius: 500%; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; -webkit-perspective: 2000; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin:0% 0%; -webkit-transform-origin:0% 0%; -ms-transform-origin:0% 0%;}
.boomdida { width: 150px; height: 120px; background-color: #f8f5f3; padding: 0px 10px 0px 10px; border: 10px solid #f8f5f3; overflow: auto; text-align: justify; border-top: 20px solid #f8f5f3;border-bottom: 20px solid #f8f5f3; font-family: arial; font-size: 10px;  color: #252525; line-height: 150%; }
.boomdida::-webkit-scrollbar { width: 5px; }
.boomdida::-webkit-scrollbar-track { background-color: #efe5e4; }
.boomdida::-webkit-scrollbar-thumb { background-color: #473d3d; }
#likeyou:hover .edsheeranlove { width: 200px; height; 200px; border-radius: 500%; transform: rotateX(360deg); -webkit-transform: rotateX(360deg); -ms-transform: rotateX(360deg); }
.whywouldyounot { width: 200px; height: 200px; border-radius: 500%; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; opacity: 0; position: relative; background-color: #f8f5f3; }
#likeyou:hover .whywouldyounot { opacity: 1; }
</style>

<div id="likeyou"><div class="wannabe">

<div class="wannabeloved">
<div class="sokissme">

WORDS AND STUFF HERE

</div></div>

<div style="width: 400px; height: 10px; background-color: #473d3d; position: relative;"></div><div style="width: 400px; height: 150px; background: url(http://oi40.tinypic.com/mlo9sj.jpg); position: relative;"></div><div style="width: 400px; height: 130px; background-color: #e36b6b; position: relative;">

<div class="edsheeranlove"><div style="width: 200px; height: 200px; border-radius: 500%; background: url(ССЫЛКА НА ВАШУ КАРТИНКУ 200 НА 200);position: relative; top: -100px;"><div class="whywouldyounot"><div style="width: 150px; height: 45px;"></div>
<div style="width: 120px; padding: 2px; border: 1px solid #50565e; opacity: 1;">
<div style="width: 120px; height: 25px; background-color: #ffbaba; font-family: open sans condensed; color:473d3d; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; line-height: 200%;">first last</div>
<div style="width: 150px; height: 2px;"></div>
<div style="width: 120px; height: 25px; background-color: #ffbaba; font-family: open sans condensed; color:473d3d; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; line-height: 200%;">age in letters</div>
<div style="width: 150px; height: 2px;"></div>
<div style="width: 120px; height: 25px; background-color: #ffbaba; font-family: open sans condensed; color:473d3d; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; line-height: 200%;">trait here</div>
<div style="width: 150px; height: 2px;"></div>
<div style="width: 120px; height: 25px; background-color: #ffbaba; font-family: open sans condensed; color:473d3d; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; line-height: 200%;">member group</div>
</div></div></div></div>

</div></div>

</div>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<center>

0

14

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Geo' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Strait' rel='stylesheet' type='text/css'><center>

<div style="width: 350px; padding: 20px; background: #efe0c6; border: 20px solid #6d544f ">

<div style="padding-top: 5px; padding-bottom: 5px; background: #cc9c88; color: #b24f54; margin-top: 2px; margin-bottom: 2px; text-align:center; line-height: 100%; text-transform: uppercase; font-size: 14px; word-spacing: 5px; letter-spacing: 0px; font-family: geo;">I think I've lost control </div>

<img src="http://i.imgur.com/g112MaA.png" width="350"/>

<div style="padding: 50px; font-family: strait; line-height: 95%; color: #555; font-size: 10px; text-align:justify">

Vestibulum auctor luctus lacus, quis rhoncus neque mattis id. Nunc pharetra, mi eu rutrum pellentesque, nulla sem semper justo, quis mollis urna velit feugiat lacus. In nisi sapien, commodo ornare fermentum id, elementum a nunc. Proin ultrices facilisis leo, lacinia ultricies dolor lobortis in. Maecenas non tellus sed metus mattis tempor ut ac turpis. Donec quam mi, malesuada eu facilisis sit amet, commodo quis urna. Morbi facilisis aliquam libero vitae accumsan. In ac diam sit amet risus ultrices vestibulum. Pellentesque lobortis ligula sit amet justo tristique vel tempor sapien commodo. Proin vitae leo nisi.

</div>

<div style="padding-top: 5px; padding-bottom: 5px; background: #cc9c88; color: #b24f54; margin-top: 2px; text-align:center; line-height: 100%; text-transform: uppercase; font-size: 14px; word-spacing: 5px; letter-spacing: 0px; font-family: geo;">please don't hold me back </div>

</div>
</center>

* за код спасибо clary fray.

Код:
<link href='http://fonts.googleapis.com/css?family=Geo' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Strait' rel='stylesheet' type='text/css'><center>

<div style="width: 350px; padding: 20px; background: #efe0c6; border: 20px solid #6d544f ">

<div style="padding-top: 5px; padding-bottom: 5px; background: #cc9c88; color: #b24f54; margin-top: 2px; margin-bottom: 2px; text-align:center; line-height: 100%; text-transform: uppercase; font-size: 14px; word-spacing: 5px; letter-spacing: 0px; font-family: geo;">I think I've lost control </div>

<img src="http://i.imgur.com/g112MaA.png" width="350"/>

<div style="padding: 50px; font-family: strait; line-height: 95%; color: #555; font-size: 10px; text-align:justify">

Vestibulum auctor luctus lacus, quis rhoncus neque mattis id. Nunc pharetra, mi eu rutrum pellentesque, nulla sem semper justo, quis mollis urna velit feugiat lacus. In nisi sapien, commodo ornare fermentum id, elementum a nunc. Proin ultrices facilisis leo, lacinia ultricies dolor lobortis in. Maecenas non tellus sed metus mattis tempor ut ac turpis. Donec quam mi, malesuada eu facilisis sit amet, commodo quis urna. Morbi facilisis aliquam libero vitae accumsan. In ac diam sit amet risus ultrices vestibulum. Pellentesque lobortis ligula sit amet justo tristique vel tempor sapien commodo. Proin vitae leo nisi.

</div>

<div style="padding-top: 5px; padding-bottom: 5px; background: #cc9c88; color: #b24f54; margin-top: 2px; text-align:center; line-height: 100%; text-transform: uppercase; font-size: 14px; word-spacing: 5px; letter-spacing: 0px; font-family: geo;">please don't hold me back </div>

</div>
</center>

0

15

Код:
<!--HTML--><center>
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

 <div id="praatt">
   <div class="prattpic">
<div class="prattquote"> It was <font style="color: #00babd">one time</font>, man</div>
</div>

   <div class="prattfo">
     <div class="prattfo1"><img src="http://24.media.tumblr.com/6a29047add4ba39d1e498ef975b84e5d/tumblr_n189oxYLoO1r3nwdio1_250.gif" style="height: 100px; width: 100px"></div>
     <div class="prattfo2">hey look words go here yay. also it scrolls because holly and chris are just that cool idk. don't cha just love chris though like i loved him when he was all chubby and adorable in parks and rec and now look at him - he's grown so much as an actor
       and now he's in FREAKING JURASSIC WORLD and also omg he was in guardians of the galaxy and like i love my avengers but THIS FILM IS THE BEST MARVEL ONE AND NOBODY CAN STOP ME THINKING THAT</div>
     <div class="prattfolink" style="background-color: #0094cf; top: 25px; left: 285px"><a href="ссылка"><i class="fa fa-plane"></i></a></div>
     <div class="prattfolink" style="background-color: #0094cf; top: 25px; left: 315px"><a href=""><i class="fa fa-music"></i>
</a></div>
     <div class="prattfolink" style="background-color: #0094cf; top: 25px; left: 345px"><a href=""><i class="fa fa-puzzle-piece"></i></a></div>
     <div class="prattfolink" style="background-color: #00babd; top: 55px; left: 285px"><a href=""><i class="fa fa-trophy"></i>
</a></div>
     <div class="prattfolink" style="background-color: #00babd; top: 55px; left: 315px"><a href=""><i class="fa fa-paper-plane-o"></i></a></div>
     <div class="prattfolink" style="background-color: #00babd; top: 55px; left: 345px"><a href=""><i class="fa fa-anchor"></i>
</a></div>
     <div class="prattfolink" style="background-color: #00ebb8; top: 85px; left: 285px"><a href=""><i class="fa fa-bell"></i>
</a></div>
     <div class="prattfolink" style="background-color: #00ebb8; top: 85px; left: 315px"><a href=""><i class="fa fa-bolt"></i>
</a></div>
     <div class="prattfolink" style="background-color: #00ebb8; top: 85px; left: 345px"><a href=""><i class="fa fa-diamond"></i>
</a></div>


   </div>
 </div>
</center>

<style>
@keyframes pratt {
 0% {
   background-color: #0094cf;
 }
 25% {
   background-color: #00babd;
 }
 50% {
   background-color: #00ebb8;
 }
 75% {
   background-color: #9aedc1;
 }
 100% {
   background-color: #0094cf;
 }
}

#praatt {
 height: 200px;
 width: 450px;
 border: 1px solid #000;
 position: relative;
 overflow: hidden
}

.prattpic {
 height: 200px;
 width: 450px;
 position: absolute;
 background-image: url('http://i.imgur.com/McQynQZ.jpg');
 background-blend-mode: multiply;
 animation: pratt 10s infinite;
}

.prattfo {
 height: 130px;
 width: 380px;
 position: absolute;
 left: 35px;
 top: 35px;
 background-image: url(http://i.imgur.com/jZus0Qw.png)
}

.prattfo1 {
 position: absolute;
 height: 100px;
 width: 100px;
 -webkit-filter: grayscale(100%);
 top: 15px;
 left: 15px;
}

.prattfo2 {
 height: 88px;
 width: 138px;
 background-color: #fff;
 border: 5px solid #fff;
 padding: 1px;
 position: absolute;
 top: 15px;
 left: 130px;
 overflow: auto;
 font-family: calibri;
 font-size: 8.5px;
 line-height: 97%;
 letter-spacing: 0.5px;
 text-transform: uppercase;
 color: #0094cf;
 text-align: justify
}

.prattfo2::-webkit-scrollbar {width: 0px}

.prattfolink {-webkit-border-radius: 50%;color: #fff; font-size: 10px; position: absolute; width: 25px; height: 25px; line-height: 25px}

.prattfolink a {color: #fff; text-decoration: none}

.prattquote {width: 400px; left: 25px; height: 20px; line-height: 20px; font-family: calibri; font-size: 9px; letter-spacing: 3px; color: #000; text-transform: uppercase; font-style: italic; background-color: #fff; position: absolute}
#praatt .prattquote {top: 150px; -webkit-transition: ease-in-out 0.4s; -webkit-transition-delay: 0.6s}
#praatt:hover .prattquote {top: 201px; -webkit-transition: ease-in-out 0.4s}

#praatt .prattfo {
 transform: scale(3);
 opacity: 0;
 -webkit-transition: ease-in-out 0.5s
}

#praatt:hover .prattfo {
 transform: scale(1);
 opacity: 1;
 -webkit-transition: ease-in-out 0.5s
}
</style>

*за код спасибо acciaccatura

Код:
<center>
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

 <div id="praatt">
   <div class="prattpic">
<div class="prattquote"> It was <font style="color: #00babd">one time</font>, man</div>
</div>

   <div class="prattfo">
     <div class="prattfo1"><img src="http://24.media.tumblr.com/6a29047add4ba39d1e498ef975b84e5d/tumblr_n189oxYLoO1r3nwdio1_250.gif" style="height: 100px; width: 100px"></div>
     <div class="prattfo2">hey look words go here yay. also it scrolls because holly and chris are just that cool idk. don't cha just love chris though like i loved him when he was all chubby and adorable in parks and rec and now look at him - he's grown so much as an actor
       and now he's in FREAKING JURASSIC WORLD and also omg he was in guardians of the galaxy and like i love my avengers but THIS FILM IS THE BEST MARVEL ONE AND NOBODY CAN STOP ME THINKING THAT</div>
     <div class="prattfolink" style="background-color: #0094cf; top: 25px; left: 285px"><a href="ссылка"><i class="fa fa-plane"></i></a></div>
     <div class="prattfolink" style="background-color: #0094cf; top: 25px; left: 315px"><a href=""><i class="fa fa-music"></i>
</a></div>
     <div class="prattfolink" style="background-color: #0094cf; top: 25px; left: 345px"><a href=""><i class="fa fa-puzzle-piece"></i></a></div>
     <div class="prattfolink" style="background-color: #00babd; top: 55px; left: 285px"><a href=""><i class="fa fa-trophy"></i>
</a></div>
     <div class="prattfolink" style="background-color: #00babd; top: 55px; left: 315px"><a href=""><i class="fa fa-paper-plane-o"></i></a></div>
     <div class="prattfolink" style="background-color: #00babd; top: 55px; left: 345px"><a href=""><i class="fa fa-anchor"></i>
</a></div>
     <div class="prattfolink" style="background-color: #00ebb8; top: 85px; left: 285px"><a href=""><i class="fa fa-bell"></i>
</a></div>
     <div class="prattfolink" style="background-color: #00ebb8; top: 85px; left: 315px"><a href=""><i class="fa fa-bolt"></i>
</a></div>
     <div class="prattfolink" style="background-color: #00ebb8; top: 85px; left: 345px"><a href=""><i class="fa fa-diamond"></i>
</a></div>


   </div>
 </div>
</center>

<style>
@keyframes pratt {
 0% {
   background-color: #0094cf;
 }
 25% {
   background-color: #00babd;
 }
 50% {
   background-color: #00ebb8;
 }
 75% {
   background-color: #9aedc1;
 }
 100% {
   background-color: #0094cf;
 }
}

#praatt {
 height: 200px;
 width: 450px;
 border: 1px solid #000;
 position: relative;
 overflow: hidden
}

.prattpic {
 height: 200px;
 width: 450px;
 position: absolute;
 background-image: url('http://i.imgur.com/McQynQZ.jpg');
 background-blend-mode: multiply;
 animation: pratt 10s infinite;
}

.prattfo {
 height: 130px;
 width: 380px;
 position: absolute;
 left: 35px;
 top: 35px;
 background-image: url(http://i.imgur.com/jZus0Qw.png)
}

.prattfo1 {
 position: absolute;
 height: 100px;
 width: 100px;
 -webkit-filter: grayscale(100%);
 top: 15px;
 left: 15px;
}

.prattfo2 {
 height: 88px;
 width: 138px;
 background-color: #fff;
 border: 5px solid #fff;
 padding: 1px;
 position: absolute;
 top: 15px;
 left: 130px;
 overflow: auto;
 font-family: calibri;
 font-size: 8.5px;
 line-height: 97%;
 letter-spacing: 0.5px;
 text-transform: uppercase;
 color: #0094cf;
 text-align: justify
}

.prattfo2::-webkit-scrollbar {width: 0px}

.prattfolink {-webkit-border-radius: 50%;color: #fff; font-size: 10px; position: absolute; width: 25px; height: 25px; line-height: 25px}

.prattfolink a {color: #fff; text-decoration: none}

.prattquote {width: 400px; left: 25px; height: 20px; line-height: 20px; font-family: calibri; font-size: 9px; letter-spacing: 3px; color: #000; text-transform: uppercase; font-style: italic; background-color: #fff; position: absolute}
#praatt .prattquote {top: 150px; -webkit-transition: ease-in-out 0.4s; -webkit-transition-delay: 0.6s}
#praatt:hover .prattquote {top: 201px; -webkit-transition: ease-in-out 0.4s}

#praatt .prattfo {
 transform: scale(3);
 opacity: 0;
 -webkit-transition: ease-in-out 0.5s
}

#praatt:hover .prattfo {
 transform: scale(1);
 opacity: 1;
 -webkit-transition: ease-in-out 0.5s
}
</style>

0

16

Код:
<!--HTML--><center><link href='http://fonts.googleapis.com/css?family=Poppins:500,700' rel='stylesheet' type='text/css'>
<style>#triangle-topleft { width: 0; height: 0; border-top: 150px solid #80a6bf; border-right: 150px solid transparent; position: relative; left: -80px; top: 0px;}#triangle-bottomright { width: 0; height: 0; border-bottom: 150px solid #80a6bf; border-left: 150px solid transparent; position: relative; top: -225px; right: -80px; margin-bottom: 150px;}.infocin {text-align: right; font-family: calibri; font-size: 8px; overflow: hidden; line-height: 100%; letter-spacing: 1px; text-transform: uppercase; color: #000;}.infocin b {color: #80a6bf; font-weight: bold;}.cinderella {width: 215px; height: 191px; padding-right: 5px; overflow: auto; text-align: justify; font-family: calibri; font-size: 11px; line-height: 100%; letter-spacing: 0px; color: #000; }.cinderella b {color: #80a6bf; font-family: poppins; font-weight: 500; font-size: 11px;}.cinderella::-webkit-scrollbar {width: 4px;}.cinderella::-webkit-scrollbar-track {background-color: #ebebeb;}.cinderella::-webkit-scrollbar-thumb {background-color: #80a6bf; border-top: 1px solid #fff; border-bottom: 1px solid #fff;} .cinderella p:first-letter {font-family: poppins; font-weight: 700; color: #80a6bf; margin: 10px; float: left; font-size: 40px; text-transform: uppercase;}.cinderella:first-letter {font-family: poppins; font-weight: 700; color: #80a6bf; margin: 10px; float: left; font-size: 40px; text-transform: uppercase;}</style><div style="width: 310px; height: 400px; background: url(http://subtlepatterns.com/patterns/cross_scratches.png);"><div id="triangle-topleft"></div><div style="width: 250px; height: 90px; position: relative; top: -120px; right: 0px;">

<div style="width: 70px; height: 70px; border: 10px solid #fff; background: url(http://www.sunhome.ru/UsersGallery/Cards/prazdnik_den_zemli_kartinka.jpg); background-size: cover; float: left;"></div>

<div style="width: 150px; height: 85px; padding-top: 5px; text-align: right; font-family: poppins; font-size: 30px; text-transform: uppercase; font-weight: 700; color: #80a6bf; line-height: 90%; float: right;">hold fast to kindness</div></div><div style="width: 225px; height: 191px; background: #fff; position: relative; top: -110px; right: 0px; z-index: 3; padding: 12px;"><div class="cinderella">

POST GOES HERE

</div></div><div style="width: 240px; height: 9px; padding: 5px; background: #fff; position: relative; top: -100px; right: 0px; z-index: 3;"><div class="infocin">FOR <b>WHO'S IT FOR?</b> // SHORT NOTES</div></div>

<div id="triangle-bottomright"></div></div></center>

*за код спасибо what katy did

Код:
<center><link href='http://fonts.googleapis.com/css?family=Poppins:500,700' rel='stylesheet' type='text/css'>
<style>#triangle-topleft { width: 0; height: 0; border-top: 150px solid #80a6bf; border-right: 150px solid transparent; position: relative; left: -80px; top: 0px;}#triangle-bottomright { width: 0; height: 0; border-bottom: 150px solid #80a6bf; border-left: 150px solid transparent; position: relative; top: -225px; right: -80px; margin-bottom: 150px;}.infocin {text-align: right; font-family: calibri; font-size: 8px; overflow: hidden; line-height: 100%; letter-spacing: 1px; text-transform: uppercase; color: #000;}.infocin b {color: #80a6bf; font-weight: bold;}.cinderella {width: 215px; height: 191px; padding-right: 5px; overflow: auto; text-align: justify; font-family: calibri; font-size: 11px; line-height: 100%; letter-spacing: 0px; color: #000; }.cinderella b {color: #80a6bf; font-family: poppins; font-weight: 500; font-size: 11px;}.cinderella::-webkit-scrollbar {width: 4px;}.cinderella::-webkit-scrollbar-track {background-color: #ebebeb;}.cinderella::-webkit-scrollbar-thumb {background-color: #80a6bf; border-top: 1px solid #fff; border-bottom: 1px solid #fff;} .cinderella p:first-letter {font-family: poppins; font-weight: 700; color: #80a6bf; margin: 10px; float: left; font-size: 40px; text-transform: uppercase;}.cinderella:first-letter {font-family: poppins; font-weight: 700; color: #80a6bf; margin: 10px; float: left; font-size: 40px; text-transform: uppercase;}</style><div style="width: 310px; height: 400px; background: url(http://subtlepatterns.com/patterns/cross_scratches.png);"><div id="triangle-topleft"></div><div style="width: 250px; height: 90px; position: relative; top: -120px; right: 0px;">

<div style="width: 70px; height: 70px; border: 10px solid #fff; background: url(SQUARE IMAGE GOES HERE); background-size: cover; float: left;"></div>

<div style="width: 150px; height: 85px; padding-top: 5px; text-align: right; font-family: poppins; font-size: 30px; text-transform: uppercase; font-weight: 700; color: #80a6bf; line-height: 90%; float: right;">hold fast to kindness</div></div><div style="width: 225px; height: 191px; background: #fff; position: relative; top: -110px; right: 0px; z-index: 3; padding: 12px;"><div class="cinderella">

POST GOES HERE

</div></div><div style="width: 240px; height: 9px; padding: 5px; background: #fff; position: relative; top: -100px; right: 0px; z-index: 3;"><div class="infocin">FOR <b>WHO'S IT FOR?</b> // SHORT NOTES</div></div>

<div id="triangle-bottomright"></div></div></center>

0

17

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'><style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200); 
.laststraw { background-color: #efefef; width: 300px; text-align: justify; padding: 20px; border-top: 5px solid #000; border-bottom: 20px solid #000; font: 9px droid sans; color: #000; line-height: 90%; }
.laststraw img {-webkit-filter: grayscale(1);  -moz-filter: grayscale(1);  -o-filter: grayscale(1); width: 300px; }
</style><center><div class="laststraw"><img src="http://24.media.tumblr.com/1421e86ba60748155aee1abe755fbc5c/tumblr_mfpwbu2o9b1s1omx6o8_250.gif"><div style="font: 39px yanone kaffeesatz; line-height: 100%; letter-spacing: -2px; text-align: center;">WE'RE ALL SOLDIERS TONIGHT</div>
<div style="font: 8px calibri;line-height: 90%; color: #444444; text-transform: uppercase; margin-left: 30px; margin-right: 30px; letter-spacing: 2px;">
baby i'm living louder dreaming longer tonight and baby i'm fighting harder and loving stronger tonight because we're all just kids who grew up way too fast <font style="color: transparent">skdgnskdndflhkldsfjg</font></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.
<br><br>
Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.
<br><br>
Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.
<br><br>
Fusce auctor, metus eu ultricies vulputate, sapien nibh faucibus ligula, eget sollicitudin augue risus et dolor. Aenean pellentesque, tortor in cursus mattis, ante diam malesuada ligula, ac vestibulum neque turpis ut enim. Cras ornare. Proin ac nisi. Praesent laoreet ante tempor urna. In imperdiet. Nam ut metus et orci fermentum nonummy. Cras vel nunc. Donec feugiat neque eget purus. Quisque rhoncus. Phasellus tempus massa aliquet urna. Integer fringilla quam eget dolor. Curabitur mattis. Aliquam ac lacus. In congue, odio ut tristique adipiscing, diam leo fermentum ipsum, nec sollicitudin dui quam et tortor. Proin id neque ac pede egestas lacinia. Curabitur non odio.

</div></center>

* за код спасибо lucky charms

Код:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'><style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200); 
.laststraw { background-color: #efefef; width: 300px; text-align: justify; padding: 20px; border-top: 5px solid #000; border-bottom: 20px solid #000; font: 9px droid sans; color: #000; line-height: 90%; }
.laststraw img {-webkit-filter: grayscale(1);  -moz-filter: grayscale(1);  -o-filter: grayscale(1); width: 300px; }
</style><center><div class="laststraw"><img src="http://24.media.tumblr.com/1421e86ba60748155aee1abe755fbc5c/tumblr_mfpwbu2o9b1s1omx6o8_250.gif"><div style="font: 39px yanone kaffeesatz; line-height: 100%; letter-spacing: -2px; text-align: center;">WE'RE ALL SOLDIERS TONIGHT</div>
<div style="font: 8px calibri;line-height: 90%; color: #444444; text-transform: uppercase; margin-left: 30px; margin-right: 30px; letter-spacing: 2px;">
baby i'm living louder dreaming longer tonight and baby i'm fighting harder and loving stronger tonight because we're all just kids who grew up way too fast <font style="color: transparent">skdgnskdndflhkldsfjg</font></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.
<br><br>
Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium.
<br><br>
Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.
<br><br>
Fusce auctor, metus eu ultricies vulputate, sapien nibh faucibus ligula, eget sollicitudin augue risus et dolor. Aenean pellentesque, tortor in cursus mattis, ante diam malesuada ligula, ac vestibulum neque turpis ut enim. Cras ornare. Proin ac nisi. Praesent laoreet ante tempor urna. In imperdiet. Nam ut metus et orci fermentum nonummy. Cras vel nunc. Donec feugiat neque eget purus. Quisque rhoncus. Phasellus tempus massa aliquet urna. Integer fringilla quam eget dolor. Curabitur mattis. Aliquam ac lacus. In congue, odio ut tristique adipiscing, diam leo fermentum ipsum, nec sollicitudin dui quam et tortor. Proin id neque ac pede egestas lacinia. Curabitur non odio.

</div></center>

0


Вы здесь » RED FOX » Все о html и css » Хтмл в постах


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC