самый лучший проект

Объявление

♦ ♦ ♦
остался один шаг за порог, и эдинбург увлечет тебя в свои объятия. ты готов? если да - решайся, шагни. отныне тебе, и вообще абсолютно всем без исключения, здесь всегда рады. окна нашего дома наконец загорелись огоньком жизни, тем теплом, которое обычно манит заблудившихся путников. наши двери открыты, крепкие чаи для каждого заварены, а задушевные разговоры припасены в немереных количествах. это то, что ты ищешь? тогда ты точно попал, куда надо.

♦ ♦ ♦





. . . . . .
блаблабла
блаблабла



♦ ♦ ♦
эпизод от сэта и софи;
we might not know why, but tonight we're beautiful now

♦ ♦ ♦
лис и рик
♦ ♦ ♦
пост от ли:
так же безволен перед тобой, как и ту сотню световых лет на кухне, что тогда еще была наша, и так же покорен порывам твоим. это страшно, люси. если бы ты сама до конца осознавала эту власть - тоже бы сказала, что это страшно. надо мной кроме твоего взгляда не властно лезвие ни одного ножа /q. все верно. все так. безрассудный, неузнаваемый линкольн эверетт все так же безоружен против люси флойд. некоторые вещи не меняются.» читать дальше



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

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


Вы здесь » самый лучший проект » Code » красота html


красота html

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

1

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Noto+Serif|Rokkitt:700' rel='stylesheet' type='text/css'>
<style type="text/css">
.toptrig { width: 0; height: 0; border-top: 450px solid #AB0936; border-left: 450px solid transparent; position: absolute; top: -2px; left:-2px; -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
.bottomtrig { width: 0; height: 0; border-bottom: 450px solid #1F1C19; border-right: 450px solid transparent; position: absolute; top:-2px; left: -2px;  -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#trigcont {width:448px; height:448px; overflow:hidden; -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; position: relative;}
#trigcont:hover .toptrig { position: absolute; right:-452px; top:-450px;}
#trigcont:hover .bottomtrig {position: absolute; top:452; left:-450px;}
.icona { width:225px; height:225px;  border: 10px solid rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, .5); -webkit-background-clip: padding-box; background-clip: padding-box; background-image:url(http://placehold.it/225x225); position: absolute; top: 100px; left: 100px; -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#iconcont {width:451px; height:451px; overflow:hidden;}
#iconcont:hover .icona { opacity:0; }
#trigcont:hover .icona { opacity:0; }
#textbx { width:448px; height:448px; background-color:#AB0936; position: absolute; left: 0; top: 0; }
#txtbx {width:375px; height:375px; padding:10px; margin-top: 25px; text-align:justify; background-color:#fafafa; color:#191919;}
.txthead { color:#AB0936; font-family: rokkitt; font-size:48px; text-transform:uppercase; padding-top:5px; margin-top:-15px;}
.mrcr { margin-top:20px; }
.txtsub { color:#ccccc; font-family: georgia; font-size:9px; text-transform:uppercase; padding-top:7px; line-height:95%; width:325px; text-align:justify; font-style: normal;}
#txp { padding-top:103px; }
.mercpls {font-family:georgia; width:305px; height:130px; overflow:auto; text-align:justify; font-size:11px; line-height:97%; margin-top:3px; border-left: 10px solid #AB0936;padding:5px; background-color:#E1E1DF;}
.mercpls::-webkit-scrollbar { background: #191919; width: 10; }
.mercpls::-webkit-scrollbar-thumb { background: #AB0936; width: 10px }
.mercpls::-webkit-scrollbar-corner { background: #191919; }
</style>

<center>
<div id="iconcont">
<div id="trigcont">

<div id="textbx">
<div id="txtbx"><center>
<img src="http://placehold.it/350x200"><br>
<div class="txthead">VIRGINIA QUIRK</div>
<div class="txtsub">will you still love me when i'm no longer young and beautiful will you still love me when i've got nothing but my aching soul?</div>

<div class="mercpls">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></center><div>
</div>

<div class="toptrig"></div>
<div class="bottomtrig"></div></div>
<div class="icona"></div></div>

<a href="http://roux.jfbs.net/index.php?showuser=1">▲</a><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=37282">▲</a><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=9524">▲</a>

</center>

0

2

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Cutive+Mono|Cookie' rel='stylesheet' type='text/css'><style type="text/css">

#mcont { width: 500px; height: 500px; overflow:hidden; position: relative; background-color: #e7e7e7; border-bottom:10px solid #8D4A53;}

#mcont .imgone { width: 250px; height:500px; -webkit-transition: opacity 0.4s linear;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out; margin-right:250px; position: absolute; top: 0;}

#mcont .imgtwo { width: 250px; height:500px; -webkit-transition: opacity 0.4s linear;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out; bottom:0px; margin-left:250px; position: absolute;}

#mcont .mcontw { width: 460px; background-color:#e7e7e7; text-align:justify; font-family: calibri; padding-left:20px; padding-right:20px; height:500px; overflow: auto; padding-top:10px; opacity: 1; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;  }

#mtext { width:440px; height:460px; text-align:justify; padding:40px; background-color:#fcfcfc; overflow: auto;}
#titlesm { margin-left:-20px; text-align:center; font-family: 'Cookie', cursive; font-size:48px; line-height:80%;  color:#8D4A53; text-shadow: 1px 2px #cacaca; }
#mdeets { text-align:center; font-family: 'Cutive Mono', serif; font-size:11px; text-transform:uppercase; margin-top:-5px; padding-bottom: 5px; letter-spacing:-1px; color:#191919; }

#ftext { width:415px; margin-left:6px; color:#191919;}

#mcont:hover .mcontw { top: 0px; }
#mcont:hover .imgone { top: -500px; }
#mcont:hover .imgtwo {bottom: -500px;}
</style>

<center><div id="mcont">

<div class="imgone"><div style="width: 250px; height: 500px; background-image: url(http://i.imgur.com/nZijEOJ.png);"></div>

<center><div id="mtext"><div id="titlesm">imogen alina velaryon</div>
<div id="mdeets">- overly ambitious - prideful -</div>

<div style="width:425px; height:225px; background-image:url(http://placehold.it/425x250); border-top:2px solid #221529; border-bottom:2px solid #221529;"></div><br>

<div id="ftext">this is where your text is going to go! don't worry about it being too long because it'll scroll. you can add additional images if you wish or split the images up. please remember to keep the credit intact! this is where your text is going to go! don't worry about it being too long because it'll scroll. you can add additional images if you wish or split the images up. please remember to keep the credit intact! this is where your text is going to go! don't worry about it being too long because it'll scroll. you can add additional images if you wish or split the images up. please remember to keep the credit intact! this is where your text is going to go! don't worry about it being too long because it'll scroll. you can add additional images if you wish or split the images up. please remember to keep the credit intact! this is where your text is going to go! don't worry about it being too long because it'll scroll. you can add additional images if you wish or split the images up. please remember to keep the credit intact!<br><br>

don't forget to post your images in BOTH places for the slider.</div></div></div>

<div class="imgtwo"><div style="width: 250px; height: 500px; background-image: url(http://i.imgur.com/nZijEOJ.png); background-position: -250px 0px;"></div></div>

<div class="mcontw"></div>

<center><div id="mtext"><div id="titlesm">imogen alina velaryon</div>
<div id="mdeets">- overly ambitious - prideful -</div>

<div style="width:425px; height:225px; background-image:url(http://placehold.it/425x250); "></div><br>

<div id="ftext">this is where your text is going to go! don't worry about it being too long because it'll scroll. you can add additional images if you wish or split the images up. please remember to keep the credit intact! this is where your text is going to go! don't worry about it being too long because it'll scroll. you can add additional images if you wish or split the images up. please remember to keep the credit intact! this is where your text is going to go! don't worry about it being too long because it'll scroll. you can add additional images if you wish or split the images up. please remember to keep the credit intact! this is where your text is going to go! don't worry about it being too long because it'll scroll. you can add additional images if you wish or split the images up. please remember to keep the credit intact! this is where your text is going to go! don't worry about it being too long because it'll scroll. you can add additional images if you wish or split the images up. please remember to keep the credit intact!<br><br>

don't forget to post your images in BOTH places for the slider.</div></div>

</div>
<a href="http://shine.b1.jcink.com/index.php?showuser=207">▲</a><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=37282">▲</a><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=9289">▲</a><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=9524">▲</a>
</center>

0

3

Код:
<!--HTML--><link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/a2bf0lnhjxohs7r/stinglikeabee.css?dl=1">

<center>
   <div id="hp-parkinson" style="background-image: (http://sb.uploads.ru/347XU.png);">
       <div class="hp-potter">
           <div class="hp-weasley">At the end of the night maybe you’ll find love Fake chit chat ’bout the things they got & my stout reputation keeping it hot girl</div>
           <div class="hp-malfoy" style="line-height:100%; padding-bottom:6px;">f. last</div>
       </div>
       <div class="hp-greengrass">
           <div class="hp-nott">post text will go here.
           </div>
           <div class="hp-zabini">900 words . for name . a short note can go here</div>
       </div>
   </div>
   <div class="codesbymerc"><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=37282">THANKS</a><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=9289">MERC</a>
   </div>
</center>

0

4

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>
<center><div style="background-color:#f2d077; width:400px; border:25px solid #5c3d4d;"><div style="background-image:url(http://placehold.it/400x200px;); width:400px; height:200px;"></div><div style="font-family:six caps; font-size:29px; background-color:#5c3d4d; color:#f2d077; padding-left:8px; padding-right:8px; padding-top:15px; padding-bottom:15px; text-align:center; width:384px;">YOU'VE LEFT SOME HELL TO PAY</div>
<div style="padding-top:25px;"></div>
<center><div style="background-color:#fcfcfc; opacity:0.5; width:315px; padding:10px; line-height:92%; font-size:11px; font-family:georgia;  text-align:justify; opacity:1.0; color:#2b2b2b;">this is where you write your thread! this is going to get bigger as you keep on writing because this does not have fixed height attached to it. </div>
<div style="padding-top:25px;"></div></div>
<div stye="font-family:arial; font-size:7px; text-transform:uppercase; letter-spacing:-1px;"><a href="http://shine.b1.jcink.com/index.php?showuser=207">♥</a> & <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=9289">♥</a></div></center>

0

5

Код:
<!--HTML--><link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/bb2wd560axy4fn2/queenbee%20%281%29.css?dl=1">


<center><div class="lorde-back">
<div class="lorde-name">first last</div>
<div class="lorde-triangle"></div>
<div class="lorde-image" style="background-image:url((http://placehold.it/500x460));"></div>
<div class="lorde-inner">
<div class="lorde-title">you can call me queen bee</div>
<div class="lorde-subtitle">trait. trait. trait. trait.</div>
<div style="padding-top:5px;"></div><center>
<table><tr vAlign="top">
<td><div class="lorde-simb"><img src="http://placehold.it/100x100"></div></td>
<td><div style="padding-left:10px"></div><div class="lorde-simb"><img src="http://placehold.it/100x100"></div></td>
<td><div style="padding-left:10px"></div><div class="lorde-simb"><img src="http://placehold.it/100x100"></div></td></tr></table></center>

<center><div class="lorde-outer"><div style="padding-top:10px;"></div>
<div class="lorde-text">writing hereeeeeeeeeeeeeeee!!!!!1!
</div></div></center>

</div>
</div><div class="codesbymerc"><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=37282">THANKS</a><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=9289">MERC</a></div></center>

0

6

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<center>
<div style="width: 500px; padding: 10px; background-color: #F2F6E9;"><div style="width:500px; background-color:#748587; height:50px; color: #F0F6DC; font-family: satisfy; font-size: 38px; line-height: 160%;    text-shadow:
   -1px -1px 0 #748587,
   1px -1px 0 #748587,
   -1px 1px 0 #748587,
   1px 1px 0 #748587;  ">full character name</div>
<div style="width: 500px; height: 320px;">
<div style="width:5px; height: 15px;"></div>
<div style="position: relative; height: 305px; width: 255px; float: left;"><img src="http://placehold.it/250x300"></div>

<div style="position: relative; float: right;width: 225px; height: 290px;  border: 5px solid #B3A2B6;"></div></div>

<div style="width:5px; height: 15px;"></div>

<div style="width: 500px; height: 25px; background-color: #748587; color: #F2F6E9; font-family: Yanone Kaffeesatz; padding-top: 10px;font-size: 22px; border-bottom:10px solid #BCD4D0;">the personality</div>
<div style="padding:20px; width: 400px; text-align: justify; color: #000; font-family: georgia; font-size: 10px;"><div style="width:100%; height: 8px; background-color: #B3A2B6"></div> <div style="padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat scelerisque dui, eget laoreet erat pharetra vel. In rhoncus tortor sed ligula lobortis eu rutrum arcu feugiat. Nunc lacinia nulla nec mauris scelerisque ut elementum leo pretium. Etiam aliquam elementum augue a sodales. In imperdiet rhoncus augue a placerat. Suspendisse elementum dictum sapien, vel dapibus metus laoreet ut. In porttitor dolor id risus aliquam eu scelerisque velit ultricies. Mauris ac neque sagittis lectus tempor rhoncus. Mauris non tempus sem. Mauris interdum metus sed dui placerat viverra.

Nam tortor ante, tincidunt sit amet laoreet mollis, convallis sit amet tellus. Aenean non ipsum id nisl luctus iaculis vestibulum sed purus. Cras congue velit massa, id porttitor enim. Morbi mattis, sapien ut vulputate dictum, magna nibh tincidunt mauris, ac accumsan lectus nunc et velit. Nulla elementum pharetra urna, vel pretium justo tincidunt et. Maecenas diam arcu, pellentesque eu rhoncus ut, convallis ac nulla. Morbi viverra, tortor ullamcorper imperdiet placerat, odio magna ultricies urna, ac posuere sapien mauris in mi. Nulla auctor egestas condimentum. Donec commodo vestibulum nibh, at accumsan ipsum commodo id. Mauris mollis sem a lectus rhoncus in sagittis nunc euismod. Curabitur nec purus velit. Nunc pretium accumsan metus, in convallis metus luctus vel. Curabitur est augue, consectetur sed rutrum vitae, dapibus ut risus. Nunc pulvinar, lorem eu iaculis consequat, tortor mauris euismod ligula, a vestibulum ante augue at nisl. Integer vulputate blandit sapien nec rutrum. In ut massa et nunc cursus mattis et a nisl.

Proin feugiat congue mauris id consectetur. Cras eget lorem velit. Praesent fringilla dolor quis dolor pellentesque eu faucibus ipsum sollicitudin. Nunc egestas euismod ipsum, eget interdum erat pharetra et. Vestibulum ligula purus, dapibus ac commodo a, ultricies varius ante. Proin quis lorem mi, eget congue ante. Donec ut arcu magna. </div><div style="width:100%; height: 8px; background-color: #B3A2B6"></div> </div>
<div style="width: 500px; height: 25px; background-color: #748587; color: #F2F6E9; font-family: Yanone Kaffeesatz; padding-top: 10px;font-size: 22px; border-bottom:10px solid #BCD4D0;">the history</div>
<div style="padding:20px; width: 400px; text-align: justify; color: #000; font-family: georgia; font-size: 10px;"><div style="width:100%; height: 8px; background-color: #B3A2B6"></div><div style="padding: 10px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat scelerisque dui, eget laoreet erat pharetra vel. In rhoncus tortor sed ligula lobortis eu rutrum arcu feugiat. Nunc lacinia nulla nec mauris scelerisque ut elementum leo pretium. Etiam aliquam elementum augue a sodales. In imperdiet rhoncus augue a placerat. Suspendisse elementum dictum sapien, vel dapibus metus laoreet ut. In porttitor dolor id risus aliquam eu scelerisque velit ultricies. Mauris ac neque sagittis lectus tempor rhoncus. Mauris non tempus sem. Mauris interdum metus sed dui placerat viverra.

Nam tortor ante, tincidunt sit amet laoreet mollis, convallis sit amet tellus. Aenean non ipsum id nisl luctus iaculis vestibulum sed purus. Cras congue velit massa, id porttitor enim. Morbi mattis, sapien ut vulputate dictum, magna nibh tincidunt mauris, ac accumsan lectus nunc et velit. Nulla elementum pharetra urna, vel pretium justo tincidunt et. Maecenas diam arcu, pellentesque eu rhoncus ut, convallis ac nulla. Morbi viverra, tortor ullamcorper imperdiet placerat, odio magna ultricies urna, ac posuere sapien mauris in mi. Nulla auctor egestas condimentum. Donec commodo vestibulum nibh, at accumsan ipsum commodo id. Mauris mollis sem a lectus rhoncus in sagittis nunc euismod. Curabitur nec purus velit. Nunc pretium accumsan metus, in convallis metus luctus vel. Curabitur est augue, consectetur sed rutrum vitae, dapibus ut risus. Nunc pulvinar, lorem eu iaculis consequat, tortor mauris euismod ligula, a vestibulum ante augue at nisl. Integer vulputate blandit sapien nec rutrum. In ut massa et nunc cursus mattis et a nisl.

Proin feugiat congue mauris id consectetur. Cras eget lorem velit. Praesent fringilla dolor quis dolor pellentesque eu faucibus ipsum sollicitudin. Nunc egestas euismod ipsum, eget interdum erat pharetra et. Vestibulum ligula purus, dapibus ac commodo a, ultricies varius ante. Proin quis lorem mi, eget congue ante. Donec ut arcu magna. </div><div style="width:100%; height: 8px; background-color: #B3A2B6"></div> </div>
<div style="width: 500px; height: 25px; background-color: #748587; color: #F2F6E9; font-family: Yanone Kaffeesatz; padding-top: 10px;font-size: 22px; border-bottom:10px solid #BCD4D0;">behind the mask</div>
<div style="padding:20px; width: 400px; text-align: justify; color: #000; font-family: georgia; font-size: 10px;"><div style="width:100%; height: 8px; background-color: #B3A2B6"></div><div style="padding: 10px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat scelerisque dui, eget laoreet erat pharetra vel. In rhoncus tortor sed ligula lobortis eu rutrum arcu feugiat. Nunc lacinia nulla nec mauris scelerisque ut elementum leo pretium. Etiam aliquam elementum augue a sodales. In imperdiet rhoncus augue a placerat. Suspendisse elementum dictum sapien, vel dapibus metus laoreet ut. In porttitor dolor id risus aliquam eu scelerisque velit ultricies. Mauris ac neque sagittis lectus tempor rhoncus. Mauris non tempus sem. Mauris interdum metus sed dui placerat viverra.

Nam tortor ante, tincidunt sit amet laoreet mollis, convallis sit amet tellus. Aenean non ipsum id nisl luctus iaculis vestibulum sed purus. Cras congue velit massa, id porttitor enim. Morbi mattis, sapien ut vulputate dictum, magna nibh tincidunt mauris, ac accumsan lectus nunc et velit. Nulla elementum pharetra urna, vel pretium justo tincidunt et. Maecenas diam arcu, pellentesque eu rhoncus ut, convallis ac nulla. Morbi viverra, tortor ullamcorper imperdiet placerat, odio magna ultricies urna, ac posuere sapien mauris in mi. Nulla auctor egestas condimentum. Donec commodo vestibulum nibh, at accumsan ipsum commodo id. Mauris mollis sem a lectus rhoncus in sagittis nunc euismod. Curabitur nec purus velit. Nunc pretium accumsan metus, in convallis metus luctus vel. Curabitur est augue, consectetur sed rutrum vitae, dapibus ut risus. Nunc pulvinar, lorem eu iaculis consequat, tortor mauris euismod ligula, a vestibulum ante augue at nisl. Integer vulputate blandit sapien nec rutrum. In ut massa et nunc cursus mattis et a nisl.

Proin feugiat congue mauris id consectetur. Cras eget lorem velit. Praesent fringilla dolor quis dolor pellentesque eu faucibus ipsum sollicitudin. Nunc egestas euismod ipsum, eget interdum erat pharetra et. Vestibulum ligula purus, dapibus ac commodo a, ultricies varius ante. Proin quis lorem mi, eget congue ante. Donec ut arcu magna. </div><div style="width:100%; height: 8px; background-color: #B3A2B6"></div> </div>
</div>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5361">❤</a>

</center>

0

7

Код:
<!--HTML-->

<center> <link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC' rel='stylesheet' type='text/css'>

<style type="text/css">#killer {width: 400px; height: 460px; position: relative; overflow: hidden;}

#killer .yaas { -WEBKIT-TRANSITION: 2S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; position: absolute; right: 0px; bottom: 0px; width:400px; height: 460px;}

#killer:hover .yaas {-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; right: -400px;}</style>

<div id="killer"><div class="yaas">

<img src="http://i.imgur.com/2TnS7LD.png">

</div>

<div style="width: 280px; height:300px;background-color: #fff; padding: 60px; font-family: 'Playfair Display SC', serif; font-size:40px;color: #000;text-align:justify;"> Serial Killer

<div style="width:280px; height:300px;background-color: #fff; font-family: times new roman; font-size:10px; text-align: justify;overflow:auto;margin-top:30px;padding-right: 6px;line-height:12px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a risus sed ipsum consequat tincidunt nec sed odio. Suspendisse potenti. Vivamus suscipit malesuada mauris ornare molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac consequat nunc, sed euismod sem. Integer at consequat orci. Suspendisse mollis pulvinar ligula, a interdum sem ultrices nec. Maecenas eget lacus laoreet, elementum leo in, dictum metus. Ut a dolor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed justo ligula, aliquam eget pulvinar ut, tincidunt eu quam. In aliquet ligula sit amet quam dictum, non blandit enim elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<P>
Cras non gravida purus, a dignissim ante. Donec pulvinar ligula tortor, fermentum feugiat odio sodales luctus. Nam aliquet sollicitudin congue. Nam at dapibus urna. Integer id rhoncus risus, eu dapibus nulla. Donec id congue erat. Curabitur auctor ultricies nulla sit amet ullamcorper.
<P>
Maecenas dolor nulla, posuere ut ullamcorper nec, malesuada pellentesque ante. Proin scelerisque neque dui, non venenatis nisl suscipit quis. Sed sed tortor sollicitudin, ultricies enim non, rhoncus ligula. Duis sit amet interdum velit. Nulla volutpat commodo luctus. Quisque pharetra neque vel neque commodo scelerisque. Praesent consectetur, nisi nec tempus rutrum, massa nulla venenatis justo, non viverra mauris ante nec nisi. Praesent id laoreet orci. Vivamus lectus magna, adipiscing et auctor ut, vehicula sed urna. Aenean dictum urna feugiat elit adipiscing, vel feugiat sapien dictum.
</div></div>
<div style="width:360px;background-color: #fff; padding:20px;font-size:6px;">[url=http://z10.invisionfree.com/Shadowplay/index.php?showuser=9755]CR[/url]</div>

</center>

0

8

Код:
<!--HTML-->

]<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,900italic|Economica' rel='stylesheet' type='text/css'>

<style type="text/css">
.asf-bajancanadian {
   width:400px;
   height:400px;
   padding:25px;
   background-image:url(http://24.media.tumblr.com/2f7bc1f49f9ca0432c58b59683c692e3/tumblr_ms2gtpMEvD1r483yfo1_500.png);
   background-position: center bottom;
}
.asf-jerome {
   width: 350px;
   padding:25px;
   background-color:#A23838;
   margin-top:-50px;
   z-index:1;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
}
.asf-noochm {
   font-size:50px;
   font-style:italic;
   font-weight:bold;
   font-family:playfair display;
   color:#fcfcfc;
   line-height:100%;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
}
.asf-mitch {
   width:350px;
   padding:25px;
   overflow:auto;
   font-family:calibri;
   font-size:11px;
   line-height:99%;
   background-color:rgba(255, 255, 255, 0.8);
   background-color:rgb(255, 255, 255, 0.8);
   text-align:justify;
   height:0px;
   color:191919;
   opacity:0;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
}
.asf-bajancanadian:hover .asf-jerome {
   margin-top:0px;
}
.asf-bajancanadian:hover .asf-mitch {
   opacity:1;
   height:250px;
}
.mrc {
   font-family:calibri;
   font-size:9px;
   text-transform:uppercase;
   text-decoration:none;
}
.mrc a {
   text-decoration:none;
   color:#A23838;
}
</style>

<center>
   <div class="asf-bajancanadian">
       <div class="asf-mitch">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
       <div class="asf-jerome">
           <div class="asf-noochm">shadow + bone</div>
       </div>
   </div>
   <div class="mrc"><a href="http://roux.jfbs.net/index.php?showuser=1">xoxo</a>
   </div>
</center>

0

9

Код:
<!--HTML--><style type="text/css">
.dttcontainer { margin: 10px auto;  height: 355px; width: 480px; border: 20px solid #597199; overflow: hidden; }
.dttcontainer2 { margin: 10px auto; margin-top:-40px; height: 355px; width: 480px; border: 20px solid #db866f; overflow-x: auto;}
.dttcontainer3 { margin: 10px auto; margin-top:-40px; height: relative; width: 480px; border: 20px solid #db866f; overflow-x: auto;}
.dttname{  background-color: #030C22;  color: #A9B0B3;  text-align: center;  line-height: 100%;  padding: 10px 15px;  font-family: 'lobster', monospace;  font-size: 30px; vertical-align: middle;}
.dttname a{  font-size: 8px;  line-height: 100%;  vertical-align: middle;  color: #fff;  text-decoration: none;  letter-spacing: 2px;}
.dttdesc{  font-size: 8px;  line-height: 100%;  vertical-align: middle;  text-decoration: none;  letter-spacing: 2px;}
.dtttabs { margin: 0px auto;  position: relative;   width: 480px;  height:  355px;







background-image: url(ССЫЛКА НА ВАШЕ ИЗОБРАЖЕНИЕ 480х280);







 background-position: 0px 60px;}
.dtttab { float: left; }
.dtttab label {  display: block;  width: 160px;  height: 20px;  background: #eee;  margin-left: 0px;  position: relative;  left: 0px;  top: 280px; font-family: 'inconsolata', monospace;  font-size: 12px;  line-height: 20px;  text-align: center;  color: #828282;  letter-spacing: 2px;  z-index: 9999;  -webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -ms-transition: all 0.7s ease;  -o-transition: all 0.7s ease;  transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label { color: #fff; z-index: 2;}
.dtttab input[type=radio] { display: none;}
.dttcontent { position: absolute; top: 355px; bottom: 20px; left: 0px; right: 0px; opacity: 1;  z-index: 5;  -webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -ms-transition: all 0.7s ease;  -o-transition: all 0.7s ease;  transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label ~ .dttcontent { z-index: 1;  opacity: 1;  top: 55px;}
.dttactive{   width: 140px;  background-color: rgba(3,12,34,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%; overflow-x: auto;}
.dtttitle{  font-family: 'inconsolata', monospace;  font-size: 15px; border-bottom: 1px solid;  line-height: 100%;  padding-bottom: 2px;  margin-bottom: 5px;}
.dttcontent a{  color: #fff;  font-family: 'inconsolata', monospace;  text-decoration: none;}
.dttcomp{   width: 140px;  background-color: rgba(32,41,63,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%;  position: relative;  left: 160px;  top: 0px; overflow-x: auto;}
.dttother{   width: 140px;  background-color: rgba(64,71,73,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%;  position: relative;  left: 320px;  top: 0px; overflow-x: auto;}
</style><link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<div class="dttcontainer">
<div class="dtttabs"><div class="dtttab"><input type="radio" id="dtttab-1" name="dtttab-group-1" checked>  <label for="dtttab-1" style="background-color:#030C22;top:0px; width:480px;height: 55px; overflow:hidden;"><div class="dttname">







Name Surname, Age








</div> </label><div class="dttcontent">  
</div></div><div class="dtttab"><input type="radio" id="dtttab-2" name="dtttab-group-1">  <label for="dtttab-2" style="background-color:#313e5c;"><b>ЛИЧНОЕ ДОСЬЕ</b></label>
<div class="dttcontent">
 <div class="dttactive">
<div class="dtttitle">ЛИЧНОЕ ДОСЬЕ</div>







<b>ИМЯ НА РУССКОМ:</b><br>
Ваше имя на русском<br>
<b>ВОЗРАСТ, ДР:</b><br>
XX/XX/XXXX - XX лет<br>
<b>РОДНОЙ ГОРОД:</b><br>
Город, Страна<br>
<b>ВЛАДЕНИЕ ЯЗЫКАМИ:</b><br>
Английский, другие языки<br>
<b>ОРИЕНТАЦИЯ:</b><br>
Гетеро/Гомо/Би/Варианты<br>
<b>ЗАНЯТОСТЬ:</b><br>
Профессия/Учёба<br>






 </div></div></div><div class="dtttab"><input type="radio" id="dtttab-3" name="dtttab-group-1"><label for="dtttab-3" style="background-color:#85483e;"><b>РОДСТВЕННИКИ</b></label><div class="dttcontent">  <div class="dttcomp"><div class="dtttitle">РОДСТВЕННИКИ</div>







<b>ОТЕЦ:</b><br>
Имя отца, XX лет<br>
<b>МАТЬ:</b><br>
Имя матери, XX лет<br>
<b>БРАТЬЯ И СЁСТРЫ:</b><br>
Брат или сестра 1<br>
Брат или сестра 2<br>
Брат или сестра 3<br>
<b>ДРУГИЕ:</b><br>
Дяди или тетя<br>
Дедушка или бабушка<br>
Кто угодно важный для вашего персонажа<br>







 </div></div></div><div class="dtttab"><input type="radio" id="dtttab-4" name="dtttab-group-1"><label for="dtttab-4" style="background-color:#404749;"><b>ИМУЩЕСТВО</b></label><div class="dttcontent">  <div class="dttother"><div class="dtttitle">ИМУЩЕСТВО</div>







Перечисляем имущество в пользовании, владении или распоряжении начиная от квартир (в собственности или взятых внаём) заканчивая автомобилями и банковскими счетами.<br>







</div></div></div></div>
</div><div class="dttcontainer2">
<div style="width:451px; padding:10px; font-family: times new roman; font-size: 14px; line-height: 100%; text-align: justify;  background-color: #e5e3eb; position:relative;">
<table cellspacing="0" cellpadding="0"><tr><td>





<img src="ССЫЛКА НА ВАШЕ ИЗОБРАЖЕНИЕ 220х100" width= "220" height= "100"></a>





<td>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #313a51;">Связь с вами:</div>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #8590ab;">




СЮДА СВЯЗЬ БЕЗ КАПСА





</div><div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #596685;">Внешность:</div>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #4f535c;">





СЮДА ВНЕШНОСТЬ БЕЗ КАПСА






</div>
</td></tr></table>








Описание вашего персонажа










</div>



</div>
Пробный пост

Можно с другой ролевой

0

10

<!--HTML-->

Код:
<!--HTML-->
<style type="text/css">#yup {background-image: url(500X200 IMAGE HERE); height: 200px; width: 500px; overflow: hidden}.yupp {background-color: #000; height: 200px; width: 500px; position: relative}#yup .yupp {opacity: 0; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out}#yup:hover .yupp {opacity: 0.6; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out;}.yep {height: 90px; width: 90px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; border: 10px solid #FFE600; position: relative; background-image: url(100X100 IMAGE HERE); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; right: 110px}.yep:hover {transform: rotate(360deg); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s}#yup .yep {top: 50px; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out}#yup:hover .yep {top: -150px; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -o-transition-delay: 0.7s; -ms-transition-delay: 0.7s; transition-delay: 0.7s}.yeah {height: 110px; width: 200px; position: relative; background-image: url(http://i.imgur.com/GcflDg6.png); right: -80px; z-index: 99}#yup .yeah {top: -460px; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out}#yup:hover .yeah {top: -260px; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -o-transition-delay: 0.9s; -ms-transition-delay: 0.9s; transition-delay: 0.9s}.meh {width: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; -o-border-radius: 15px; background-color: #FFE55F; color: #fff; font-family: calibri; font-size: 8px; text-align: center; line-height: 15px; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out}.meh a {color: #fff; text-decoration: none}.meh:hover {background-color: #fff; color: #ffe55f; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out}.meh:hover a {color: #ffe55f; text-decoration: none}.whyy {height: 60px; overflow: auto; width: 140px; background-color: #fff; font-family: calibri; color: #4E4E4E; text-transform: uppercase; letter-spacing: 1px; font-size: 7.5px; line-height: 103%; text-align: center; padding: 10px}</style><center><div id="yup"><div class="yupp"></div><div class="yep"></div><div class="yeah"><div style="height: 15px"></div><table cellpadding="2px"><tr><div class="whyy">words go here. it scrolls. yay.</div></tr><tr><td><div class="meh"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908">I</a></div></td><td><div class="meh"><a href="LINK">II</a></div></td><td><div class="meh"><a href="LINK">III</a></div></td><td><div class="meh"><a href="LINK">IV</a></div></td><td><div class="meh"><a href="LINK">V</a></div></td><td><div class="meh"><a href="LINK">VI</a></div></td><td><div class="meh"><a href="LINK">VII</a></div></td></tr>
</table></div></div></center>

link code
CODE
<td><div class="meh"><a href="LINK">IV</a></div>
</td>

0

11

Код:
<!--HTML-->
<style>
.nickerback3 {width: 300px; height: 200px; background-color: #efefef; padding: 3.5px;}
.crawlaround3 {width: 290px; height: 195px; background-color:#8DA177;}
.nameplateflam3 {width: 302px; height: 30px; font-family: marvel; font-size: 25px; text-transform: lowercase; line-height: 32px; color: #000; text-align: center; background-color: #efefef; padding-left: 5px; font-style: italic;}
.flambody3 {width: 225px; height: 175; padding: 10px 30px 10px 40px; text-align: justify; font-family: times; font-size: 10px; text-transform: none; line-height: 12px; letter-spacing: 1px; overflow: auto; color: #eee;}
.flambuter3 {width: 218px; padding: 25px 45px 25px 45px; background-color: #8DA177; color: #fff; font-family: calibri; text-transform: uppercase; text-align: center; font-size: 8px; letter-spacing: 10px; font-weight: lighter; line-height: 100%;}
.dangerzone3 {font-family: calibri; text-transform: uppercase; text-align: center; font-size: 8px; letter-spacing: 2px; font-weight: lighter; line-height: 100%; position: relative; top: -103px; color: #000; text-decoration: none;}
.dangerzone3 a:link, .dangerzone3 a:visited,  .dangerzone3 a:active {font-family: calibri; text-transform: uppercase; text-align: center; font-size: 8px; font-weight: lighter; line-height: 100%; color: #000; text-decoration: none;}

</style>
<center><div class="nameplateflam3">
NAME & NAME
</div>
<div class="nickerback3"><div class="crawlaround3">

<div class="flambody3">

Write anything you want here! I love plotting so let me know what you have in mind! Also at the bottom theres a 100x100 icon you an put in the code of your character if you wish. <3 looking forward to plotting and writing with you!

</div>

</div></div>
<div class="flambuter3">
radioactive
</div>
<div style="width: 100px; height: 100px; border: #fff 2px solid; background:url(http://placehold.it/100x100); border-radius: 100%; position:relative; right: -147px; top: -80px"></div>
<div class="dangerzone3"><a href=http://z10.invisionfree.com/Shadowplay/index.php?showuser=10411>Scarey Kerri @ Shadowplay</a></div>
</center>

0

12

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

<style>

.nickerback {width: 400px; height: 400px; background-color: #efefef; padding: 3.5px;}
.crawlaround {width: 395px; height: 390px; background-color:#111;}
.taddertottrait {width: 243px; height: 25px; color: #111; line-height: 25px; font-family: calibri; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; text-align: center; font-weight: bold; background-color: #e2e2e2;}

.taddertottrait a:link, .taddertottrait a:visited,  .taddertottrait a:active {width: 243px; height: 25px; color: #111; line-height: 25px; font-family: calibri; text-transform: uppercase; font-size: 9px; letter-spacing: 2px; text-align: center; font-weight: bold; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out;transition-duration: 2s; -webkit-transition-duration: 2s;}
.taddertottrait:hover {width: 243px; height: 25px; color: #eee; line-height: 25px; font-family: calibri; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; text-align: center; font-weight: bold; background-color: #111; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out;transition-duration: 2s; -webkit-transition-duration: 2s;}
.taddertottrait a:hover {color: #eee; line-height: 25px; font-family: calibri; text-transform: uppercase; font-size: 9px; letter-spacing: 2px; text-align: center; font-weight: bold; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out;transition-duration: 2s; -webkit-transition-duration: 2s;}

.nameplateflam {width: 390px; height: 30px; font-family: marvel; font-size: 25px; text-transform: lowercase; line-height: 32px; color: #000000; text-align: center; background-color: #efefef; padding-left: 5px; font-style: italic;}
.flambody {width: 240px; height: 190px; padding: 20px 80px 15px 80px; text-align: justify; font-family: times; font-size: 10px; text-transform: none; line-height: 12px; letter-spacing: 1px; overflow: auto; color: #eee;}
.flambuter {width: 300px; padding: 25px 54px 25px 54px; background-color: #111; color: #fff; font-family: calibri; text-transform: uppercase; text-align: center; font-size: 8px; letter-spacing: 4px; font-weight: lighter; line-height: 100%;}
.dangerzone {font-family: calibri; text-transform: uppercase; text-align: center; font-size: 8px; letter-spacing: 2px; font-weight: lighter; line-height: 100%; position: relative; top: -105px; color: #000; text-decoration: none;}
.dangerzone a:link, .dangerzone a:visited,  .dangerzone a:active {font-family: calibri; text-transform: uppercase; text-align: center; font-size: 8px; font-weight: lighter; line-height: 100%; color: #000; text-decoration: none;}

</style>

<center><div class="nickerback"><div class="crawlaround">
<table cellpadding="0px" cellspacing="0px"><tr><td>

<td><div style="width: 150px; height: 133px; background-image: url(http://placehold.it/150x135);"></div></td>

<td><table cellpadding="0px" cellspacing="2px"><tr><td>
<div class="taddertottrait">TRAIT</div></td><tr>
<td><div class="taddertottrait">TRAIT</div></td><tr>
<td><div class="taddertottrait">TRAIT</div></td>
<tr>
<td><div class="taddertottrait"><a href='URL'>APPLICATION</a></div></td>
<tr>
<td><div class="taddertottrait"><a href='URL'>TRACKER</a></div></td>
</tr></table>

</tr></td></table>
<div class="nameplateflam">
FIRST LAST NAME
</div>

<div class="flambody">

Shipper/wanted information goes here!

</div>

</div></div>
<div class="flambuter">
waking up to ash and dust, I'm breathing in your chemicals.
</div>
<div style="width: 100px; height: 100px; border: #111 2px solid; background:url(http://placehold.it/100x100); border-radius: 100%; position:relative; right: -187px; top: -70px"></div>
<div class="dangerzone"><a href=http://z10.invisionfree.com/Shadowplay/index.php?showuser=10411>Scarey Kerri @ Shadowplay</a></div>
</center>

0

13

Код:
<!--HTML--><style type="text/css">
.kat-slideshow {
   position: relative;
   margin: 10px auto;
   width: 250px;
   height: 400px;
}
.kat-content {
   background: #BE7A36 url(https://placehold.it/250x400) repeat scroll 0 0;
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.kat-parallax-bg {
   background: url(https://placehold.it/250x400) repeat-x scroll 0 0;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.kat-slideshow input {
   position: absolute;
   bottom: 15px;
   left: 50%;
   width: 9px;
   height: 9px;
   z-index: 1001;
   cursor: pointer;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.kat-slideshow input + label {
   position: absolute;
   bottom: 15px;
   left: 50%;
   width: 6px;
   height: 6px;
   display: block;
   z-index: 1000;
   border: 3px solid #fff;
   border: 3px solid rgba(255, 255, 255, 0.9);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-transition: background-color linear 0.1s;
   -moz-transition: background-color linear 0.1s;
   -o-transition: background-color linear 0.1s;
   -ms-transition: background-color linear 0.1s;
   transition: background-color linear 0.1s;
}
.kat-slideshow input:checked + label {
   background-color: #fff;
   background-color: rgba(255, 255, 255, 0.9);
}
.kat-selector-1,
.button-label-1 {
   margin-left: -36px;
}
.kat-selector-2,
.button-label-2 {
   margin-left: -18px;
}
.kat-selector-3,
.button-label-3 {
   margin-left: 0px;
}
.kat-selector-4,
.button-label-4 {
   margin-left: 18px;
}
.kat-selector-5,
.button-label-5 {
   margin-left: 36px;
}
.kat-arrow {
   position: absolute;
   top: 50%;
   width: 28px;
   height: 38px;
   margin-top: -19px;
   display: none;
   opacity: 0.8;
   cursor: pointer;
   z-index: 1000;
   background: transparent url(http://i.imgur.com/eYUSsIS.png) no-repeat;
   -webkit-transition: opacity linear 0.3s;
   -moz-transition: opacity linear 0.3s;
   -o-transition: opacity linear 0.3s;
   -ms-transition: opacity linear 0.3s;
   transition: opacity linear 0.3s;
}
.kat-arrow:hover {
   opacity: 1;
}
.kat-arrow:active {
   margin-top: -18px;
}
.kat-selector-1:checked ~ .kat-arrow.kat-a2,
.kat-selector-2:checked ~ .kat-arrow.kat-a3,
.kat-selector-3:checked ~ .kat-arrow.kat-a4,
.kat-selector-4:checked ~ .kat-arrow.kat-a5 {
   right: 15px;
   display: block;
   background-position: top right;
}
.kat-selector-2:checked ~ .kat-arrow.kat-a1,
.kat-selector-3:checked ~ .kat-arrow.kat-a2,
.kat-selector-4:checked ~ .kat-arrow.kat-a3,
.kat-selector-5:checked ~ .kat-arrow.kat-a4 {
   left: 15px;
   display: block;
   background-position: top left;
}
.kat-slideshow input:checked ~ .kat-content {
   -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
   -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
   -o-transition: background-position linear 0.6s, background-color linear 0.8s;
   -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
   transition: background-position linear 0.6s, background-color linear 0.8s;
}
.kat-slideshow input:checked ~ .kat-content .kat-parallax-bg {
   -webkit-transition: background-position linear 0.7s;
   -moz-transition: background-position linear 0.7s;
   -o-transition: background-position linear 0.7s;
   -ms-transition: background-position linear 0.7s;
   transition: background-position linear 0.7s;
}
.kat-slider {
   position: relative;
   left: 0;
   width: 500%;
   height: 100%;
   list-style: none;
   margin: 0;
   padding: 0;
   -webkit-transition: left ease-in 0.8s;
   -moz-transition: left ease-in 0.8s;
   -o-transition: left ease-in 0.8s;
   -ms-transition: left ease-in 0.8s;
   transition: left ease-in 0.8s;
}
.kat-slider > li {
   height: 100%;
   padding: 0;
   width: 20%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   text-align: center;
   opacity: 0.4;
   -webkit-transition: opacity ease-in 0.4s 0.8s;
   -moz-transition: opacity ease-in 0.4s 0.8s;
   -o-transition: opacity ease-in 0.4s 0.8s;
   -ms-transition: opacity ease-in 0.4s 0.8s;
   transition: opacity ease-in 0.4s 0.8s;
}
.kat-slider > li img {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   display: block;
   margin: 0 auto;
   padding: 40px 0 50px 0;
   max-height: 100%;
   max-width: 100%;
}

input.kat-selector-1:checked ~ .kat-content .kat-slider {
 left: 0;
}

input.kat-selector-2:checked ~ .kat-content .kat-slider {
left: -100%;
}

input.kat-selector-3:checked ~ .kat-content .kat-slider {
left: -200%;
}

input.kat-selector-4:checked ~ .kat-content .kat-slider {
left: -300%;
}

input.kat-selector-5:checked ~ .kat-content .kat-slider {
 left: -400%;
}
input.kat-selector-1:checked ~ .kat-content .kat-slider > li:first-child,
input.kat-selector-2:checked ~ .kat-content .kat-slider > li:nth-child(2),
input.kat-selector-3:checked ~ .kat-content .kat-slider > li:nth-child(3),
input.kat-selector-4:checked ~ .kat-content .kat-slider > li:nth-child(4),
input.kat-selector-5:checked ~ .kat-content .kat-slider > li:nth-child(5) {
   opacity: 1;
}

</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<center>
<div class="kat-slideshow">
   <input id="button-1" type="radio" name="radio-set" class="kat-selector-1" checked="checked" />
   <label for="button-1" class="button-label-1"></label>
   <input id="button-2" type="radio" name="radio-set" class="kat-selector-2" />
   <label for="button-2" class="button-label-2"></label>
   <input id="button-3" type="radio" name="radio-set" class="kat-selector-3" />
   <label for="button-3" class="button-label-3"></label>
   <input id="button-4" type="radio" name="radio-set" class="kat-selector-4" />
   <label for="button-4" class="button-label-4"></label>
   <input id="button-5" type="radio" name="radio-set" class="kat-selector-5" />
   <label for="button-5" class="button-label-5"></label>
   <label for="button-1" class="kat-arrow kat-a1"></label>
   <label for="button-2" class="kat-arrow kat-a2"></label>
   <label for="button-3" class="kat-arrow kat-a3"></label>
   <label for="button-4" class="kat-arrow kat-a4"></label>
   <label for="button-5" class="kat-arrow kat-a5"></label>
   <div class="kat-content">
       <div class="kat-parallax-bg"></div>
       <ul class="kat-slider clearfix">
           <li>
              <div style="width: 250px; height:400px; margin: 0 auto;"><div style="font-family: oswald; font-size: 40px; color: #C5B1A5; text-shadow: #A1B685 2px 2px 0px; text-transform: uppercase; line-height: 100%">Gospel</div><div style="font-family: calibri; font-size: 8px; font-style: italic; text-transform: uppercase; letter-spacing: 5px; color: #988184; margin-top: -1px; margin-left: 3px;">If you love me let me go</div></div>
                 
          </li>
          <li>
              <div style="width:250px; height:400px; margin: 0 auto; background-color: rgba(255,255,255,0.6);"><div style="font-family: oswald; font-size: 40px; color: #C5B1A5; text-shadow: #A1B685 2px 2px 0px; text-transform: uppercase; line-height: 100%">Character Info</div><div style="font-family: calibri; font-size: 8px; font-style: italic; text-transform: uppercase; letter-spacing: 5px; color: #988184; margin-top: -1px; margin-left: 3px;">Nice subtitle here</div><Div style="font-family: calibri; font-size: 10px; text-transform: uppercase; letter-spacing: 5px; color: #988184; margin-top: -1px; margin-left: 3px;"><P></P><P></P>
All your character information goes here</div>
          </li>
          <li>
              <div style="width:250px; height:400px; margin: 0 auto; background-color: rgba(255,255,255,0.6);"><div style="font-family: oswald; font-size: 40px; color: #C5B1A5; text-shadow: #A1B685 2px 2px 0px; text-transform: uppercase; line-height: 100%">Post Area</div><div style="font-family: calibri; font-size: 8px; font-style: italic; text-transform: uppercase; letter-spacing: 5px; color: #988184; margin-top: -1px; margin-left: 3px;">Nice subtitle here</div><Div style="font-family: calibri; font-size: 10px; text-transform: uppercase; letter-spacing: 5px; color: #988184; margin-top: -1px; margin-left: 3px;"><P></P><P></P>
What ever you need to post, put here</div>
          </li>
          <li>
              <div style="width:250px; height:400px; margin: 0 auto; background-color: rgba(255,255,255,0.6);"><div style="font-family: oswald; font-size: 40px; color: #C5B1A5; text-shadow: #A1B685 2px 2px 0px; text-transform: uppercase; line-height: 100%">Another Post Area</div><div style="font-family: calibri; font-size: 8px; font-style: italic; text-transform: uppercase; letter-spacing: 5px; color: #988184; margin-top: -1px; margin-left: 3px;"><Div style="font-family: calibri; font-size: 10px; text-transform: uppercase; letter-spacing: 5px; color: #988184; margin-top: -1px; margin-left: 3px;"><P></P><P></P>
This slide can be used for anything.</div>What ever you want can go here.</div>
          </li>
          <li>
              <div style="width:250px; height:400px; margin: 0 auto; background-color: rgba(255,255,255,0.6);"><div style="font-family: oswald; font-size: 40px; color: #C5B1A5; text-shadow: #A1B685 2px 2px 0px; text-transform: uppercase; line-height: 100%">Credits</div><div style="font-family: calibri; font-size: 8px; font-style: italic; text-transform: uppercase; letter-spacing: 5px; color: #988184; margin-top: -1px; margin-left: 3px;"><Div style="font-family: calibri; font-size: 10px; text-transform: uppercase; letter-spacing: 5px; color: #988184; margin-top: -1px; margin-left: 3px;">Do not remove these</div>
<P></P><P></P>
My credits:
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=14500">*</a> <a href="http://ravenfall.jcink.net/index.php?showuser=29">*</a> <a href="http://wecode.jcink.net/index.php?showuser=728">*</a>
<P></P><P></P>
Credits for help:

Thunderstruck @Sp and

Merc</div>
          </li>
       </ul>
   </div>
</div>
</center>

0

14

Код:
 <!--HTML-->  <div class='postcolor'> <link href="http://fonts.googleapis.com/css?family=Contrail+One" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Damion' rel='stylesheet' type='text/css'>

<center>
<style type="text/css">
.of {position: relative; left: 120px; width: 300px; height: 500px;}
.tabs {  position: relative;    min-height: 350px; /* This part sucks */  clear: both;  margin: 25px 0;}
.tab {  float: left;}
.tab label {text-align: center;  background: #26272c;     margin-left: -1px;   position: relative;  left: 1px; }
.tab [type=radio] { display: none;   }
.content {position: absolute;  top: 20px;  left: 0;  background: white;  right: 0;  bottom: 0;  padding: 20px;  border-left: 15px solid #f87777; text-align: justify; font-family: arial; font-size: 9px; color: #26272c; border-right: 5px solid #41434b}
[type=radio]:checked ~ label {  background: #26272c;  color: #51d9d9;  z-index: 2;}
[type=radio]:checked ~ label ~ .content {  z-index: 10;}
.dh {width: 600px; height: 600px; background-image: url(http://i1297.photobucket.com/albums/ag21/India_Leex/ojos_zpsc6dbccfe.png);-webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 10px 6px -6px #777;
	        box-shadow: 0 10px 6px -6px #777; }
.bigt {font-family: 'Contrail One'; font-size: 20px; text-transform: uppercase; color: #26272c; text-align: center; letter-spacing: 3px; background-color: white; padding: 20px; position: relative; top: 30px; width: 300px; left: 120px; font-style: bold}
.smallt { font-family: 'damion'; font-size: 30px; text-align: right; color: #26272c; text-shadow: -1px -1px #95c6c6, 1px 1px #fda5a5}
.bigtt {font-family: calibri; font-size: 9px; text-transform: uppercase; background-color: white; color: #26272c; padding: 20px; position: relative; left: 120px; width: 300px; top: -150px; text-align: justify}

</style>

<div class="dh">
<div class="bigt"> i wish i'd been a teen idle</div>
<div class="of"><div class="tabs">
    <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">▲</label>
       
       <div class="content">
<div class="smallt">about</div>           
Hey! My name is India and I've started coding in November 2012, but only took it more seriously this year! I am 18 years old and I am currently a high school student. I will most probably study Dutch and Swedish (or one of those and English) at the University, so expect me to lala you in Dutch or Swedish lmao. <p>I like simple codes, and even if sometimes I kick myself trying shitty things that probably won't work, I try to keep myself simple so yeah. Don't expect anything too WOW. <p>
I love Marina and the Diamonds, she's my secret lover <s>shhhh</s>. I also freak out because of Ellie Goulding, Placebo and Lana del Rey <3 so expect to see these guys around here a lot. <p>
Also, Kaya Scodelario is my spirit animal, I'm not sure, she'll probably be here as well! xD<p>
I am delighted to take any requests if you find my codes <s>crappy</s> decent enough!
       </div> 
   </div>
    
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">▲</label>
       
       <div class="content">
<div class="smallt">threads</div>
▶<a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=50977">best regards from hell</a>  <br />
▶<a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=51017">the sky is dead</a><p><p>
<div class="smallt">shippers</div>
▶ <a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=50303&st=0#entry22416298">seventh sea</a> <p><p>
<div class="smallt">trackers</div>
▶ <a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=49099">glory and gore</a>
</div> 
   </div>
    
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">▲</label>
     
       <div class="content">
<div class="smallt">signature</div>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=51327">the say i'm a control freak</a><p><p>
<div class="smallt">misc</div>    
 ▶ <a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=49616"> application</a>
▶ <a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=49604&st=0#entry22406800"> newsletter</a> </div>   </div> 

   <div class="tab">
       <input type="radio" id="tab-4" name="tab-group-1">
       <label for="tab-4">▲</label>
       
       <div class="content">
<div class="smallt">skins</div>
▶ <a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=49960">fight for the blood</a> ▴ in between<br />
▶<a href=http://z13.invisionfree.com/royalships/index.php">  royal ships</a>▴ light - exclusively for my site, don't use
  </div> 
   </div>

   <div class="tab">
       <input type="radio" id="tab-5" name="tab-group-1">
       <label for="tab-5">▲</label>
       
       <div class="content">
<div class="smallt">archive </div>
none yet. HUSH     </div> 
   </div>
   <div class="tab">
       <input type="radio" id="tab-6" name="tab-group-1">
       <label for="tab-6">▲</label>
       
       <div class="content">
<div class="smallt">awards</div>
wohooo    
((coming))</div>
   </div>  
    
</div>
</div>
<div class="bigtt">
I wanna be a bottle blonde
I don’t know why but I feel conned
I wanna be an idle teen
I wish I hadn’t been so clean

I wanna stay inside all day
I want the world to go away
I want blood, guts and chocolate cake
I wanna be a real fake

Yeah I wish I’d been a, wish I’d been a teen, teen idle
Wish I’d been a prom queen fighting for the title
Instead of being sixteen and burning up a bible
Feeling super, super (super!) suicidal
The wasted years, the wasted youth
The pretty lies, the ugly truth
And the day has come where I have died
Only to find I’ve come alive</div>
</div>
</center>
  </div>

0

15

Код:
 <!--HTML--><div class='postcolor'> <link href="http://fonts.googleapis.com/css?family=Six+Caps" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Tulpen+One" rel="stylesheet" type="text/css">

<center><div style="width: 400px; background-color: #ffffff; border: 20px solid #ebe8de; ">

<div style="width: 98%; background: #c0d67d; font-family: Six Caps; font-size: 28px; margin-top: 5px; color: #a8364c; padding-top: 15px; padding-bottom: 10px;">I need a heartbeat<div style="font-family: Tulpen One; font-size: 16px; text-transform: uppercase; margin-top: 10px; letter-spacing: 2px;">· Ash · 20 · Coding Playground · </div></div>

<table cellspacing="3px"><tr><td-align: left;><div style="width: 120px; height: 80px; background: #eb5963; font-family: Six Caps; font-size: 28px; margin-top: 5px; color: #c0d67d; text-align: center; padding-top: 40px; line-height: 100%; margin-left: 5px; float: left;">threads!</div></td>

<td-align: right><div style="width: 246px; height: 100px; background: #e0eeb5; font-family: Calibri; font-size: 10px; margin-top: 5px; color: #a8364c; text-align: justify; padding: 10px;  margin-left: 5px; float: left; text-transform: uppercase; letter-spacing: 1px;"><a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=39074' target='_blank' rel='nofollow'>Jump on it</a> - <a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=32498' target='_blank' rel='nofollow'>Wanna Be Loved</a></div></td></tr>

<tr><td-align: right><div style="width: 246px; height: 100px; background: #f3dadc; font-family: Calibri; font-size: 10px; margin-top: 5px; color: #8aa240; text-align: justify; padding: 10px;  margin-left: 5px; float: left; text-transform: uppercase; letter-spacing: 1px;">link - link - link</div></td>

<td-align: left;><div style="width: 120px; height: 80px; background: #c0d67d; font-family: Six Caps; font-size: 28px; margin-top: 5px; color: #a8364c; text-align: center; padding-top: 40px; line-height: 100%; margin-left: 5px; float: left;">shipping!</div></td></tr>

<tr><td-align: left;><div style="width: 120px; height: 80px; background: #eb5963; font-family: Six Caps; font-size: 28px; margin-top: 5px; color: #c0d67d; text-align: center; padding-top: 40px; line-height: 100%; margin-left: 5px; float: left;">signatures!</div></td>

<td-align: right><div style="width: 246px; height: 100px; background: #e0eeb5; font-family: Calibri; font-size: 10px; margin-top: 5px; color: #a8364c; text-align: justify; padding: 10px;  margin-left: 5px; float: left; text-transform: uppercase; letter-spacing: 1px;"><a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=50744' target='_blank' rel='nofollow'>Follow Me Down</a> - <a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=50746' target='_blank' rel='nofollow'>Can't Haunt Me</a> </div></td></tr>

<tr><td-align: right><div style="width: 246px; height: 100px; background: #f3dadc; font-family: Calibri; font-size: 10px; margin-top: 5px; color: #8aa240; text-align: justify; padding: 10px;  margin-left: 5px; float: left; text-transform: uppercase; letter-spacing: 1px;"><a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=50747' target='_blank' rel='nofollow'>We Can't Stop</a></div></td>

<td-align: left;><div style="width: 120px; height: 80px; background: #c0d67d; font-family: Six Caps; font-size: 28px; margin-top: 5px; color: #a8364c; text-align: center; padding-top: 40px; line-height: 100%; margin-left: 5px; float: left;">foundation!</div></td></tr>

<tr><td-align: left;><div style="width: 120px; height: 80px; background: #eb5963; font-family: Six Caps; font-size: 28px; margin-top: 5px; color: #c0d67d; text-align: center; padding-top: 40px; line-height: 100%; margin-left: 5px; float: left; margin-bottom: 5px;">skins!</div></td>

<td-align: right><div style="width: 246px; height: 100px; background: #e0eeb5; font-family: Calibri; font-size: 10px; margin-top: 5px; color: #a8364c; text-align: justify; padding: 10px;  margin-left: 5px; float: left; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px;">link - link - link</div></td></tr>

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

0

16

Код:
 <!--HTML--><div class='postcolor'> <CENTER><link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>

<style type="text/css">#YAYO {width: 300px; height: 400px; position: relative; overflow: hidden;}

#YAYO .yaas { -WEBKIT-TRANSITION: 2S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; position: absolute; LEFT: 0px; bottom: 0px; width:300px; height: 400px;}

#YAYO:hover .yaas {-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; -MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; O-TRANSITION: 0.8S ALL EASE-IN-OUT; LEFT: -300px;}

.hero::-webkit-scrollbar {width: 5px; background: #ceeeeb}
.hero::-webkit-scrollbar-thumb {background:#fefcc7}
.hero::-webkit-scrollbar-corner {background:#ceeeeb}

</style>

<div id="YAYO"><div class="yaas">

<img src="http://i.imgur.com/8oZ9mmT.png">

</div>

<DIV STYLE="WIDTH: 200PX; HEIGHT: 300PX; BACKGROUND-COLOR: #FCFCFC; PADDING: 50PX; OVERFLOW:AUTO;"class="hero">

<DIV STYLE="font-family: 'Francois One', sans-serif; FONT-SIZE: 36PX; COLOR:#FFF; TEXT-SHADOW: #000 1PX 1PX 1PX;"> YAAAAAS</DIV>

<DIV STYLE="FONT-FAIMLY:TIMES NEW ROMAN; FONT-SIZE: 9PX; TEXT-ALIGN: JUSTIFY; WIDTH: 150PX; BACKGROUND-COLOR: #000; COLOR: #FFF; FONT-STYLE: ITALIC;PADDING:10PX;MARGIN-BOTTOM: 20PX;line-height: 90%; letter-spacing: 1px;">Hi there! My name is Debora but feel free to call me deb or debbie. i dun care. anywhoo i'm sort of new to coding. i've been doing it for a few months but i'm more of a simple person so you won't be seeing anything woah amazing!!22!! from me. sometimes i get frustrated and run back to graphics/photoshop. my first love. <s>sorry for the shit gallery code and gallery image.</s><333</DIV>

<DIV STYLE="FONT-FAMILY: TIMES NEW ROMAN; FONT-SIZE: 11PX; TEXT-ALIGN: LEFT;"> 

<DIV STYLE="BACKGROUND-COLOR: #000; FONT-FAMILY: TIMES NEW ROMAN; COLOR: #FFF; FONT-SIZE: 10PX;PADDING:2PX; TEXT-ALIGN: RIGHT;FONT-STYLE: ITALIC;FONT-VARIANT: SMALL-CAPS;">Shippers/Requests.</DIV>
<P>
<a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=44248&hl=' target='_blank' rel='nofollow'>cold blooded</a> ▲ <a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=43602&hl=' target='_blank' rel='nofollow'>instant crush</a> ▲ <a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=43655&view=findpost&p=22302977' target='_blank' rel='nofollow'>howlin' for you</a> ▲
<p>

<DIV STYLE="BACKGROUND-COLOR: #000; FONT-FAMILY: TIMES NEW ROMAN; COLOR: #FFF; FONT-SIZE: 10PX;PADDING:2PX; TEXT-ALIGN: RIGHT;FONT-STYLE: ITALIC;FONT-VARIANT: SMALL-CAPS;">Threads.</DIV>
<P>
<a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=50775&hl=' target='_blank' rel='nofollow'>serial killer</a> ▲ <a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=49644' target='_blank' rel='nofollow'>wicked lovely</a> ▲ <a href='http://shine.b1.jcink.com/index.php?showtopic=11467&hl=' target='_blank' rel='nofollow'>give me love</a> ▲ <a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=44069' target='_blank' rel='nofollow'>wicked games</a> ▲ <a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=43859' target='_blank' rel='nofollow'>eyes on fire</a> ▲ <a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=44070' target='_blank' rel='nofollow'>shake you off</a> ▲<a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=43860&st=0#entry22307023' target='_blank' rel='nofollow'>unknown</a> ▲
<p>
<DIV STYLE="BACKGROUND-COLOR: #000; FONT-FAMILY: TIMES NEW ROMAN; COLOR: #FFF; FONT-SIZE: 10PX;PADDING:2PX; TEXT-ALIGN: RIGHT;FONT-STYLE: ITALIC;FONT-VARIANT: SMALL-CAPS;">Instant Messaging.</DIV>
<P>
<a href='http://z10.invisionfree.com/Shadowplay/index.php?showtopic=50873&hl=' target='_blank' rel='nofollow'>short change hero</a> ▲
<p>
<DIV STYLE="BACKGROUND-COLOR: #000; FONT-FAMILY: TIMES NEW ROMAN; COLOR: #FFF; FONT-SIZE: 10PX;PADDING:2PX; TEXT-ALIGN: RIGHT;FONT-STYLE: ITALIC;FONT-VARIANT: SMALL-CAPS;">Others.</DIV>
<P>
AYYY YOO WORKING ON SOMETHING YAASS
<p>

</DIV>
</DIV>
</CENTER>  </div>

0

17

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

<div style="width: 200px;font-family: 'Monoton', cursive; color: #000; font-size: 40px;margin-bottom: 15px;">N A M E!</div>

<div style="width:200px; border: solid #f8f8f8 20px;outline: solid 1px #e6e6e6;">

<table>

<td><div style="width: 100px; height: 100px;"><img src="http://placehold.it/100"></div></td>

<td><div style="width: 72px; height: 80px; text-align: center; font-family: times; font-size: 8px;background-color: #b0b0b0;padding:10px;">

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="72px" height="79px"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#3b3b3b" /><param name="FlashVars" value="mp3= MP3 LINK GOES HERE!" /></object>

</div></td>

</table>

<div style="padding: 25px; width: 148px; background-color: #454545;color: #f8f8f8;font-family:times; font-size: 9px;line-height: 95%;text-align: justify;">
YOUR POST GOES HERE!!!!
</div>

<div style="width: 198px;font-size:7px; color: #888888;background-color: #454545;">[url=http://z10.invisionfree.com/Shadowplay/index.php?showuser=9755]CR[/url]</div>
</div>
</center>

0

18

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

<style type="text/css" >


.gou {opacity: 0.0;transition-duration: 0.8s;-moz-transition-duration: 0.8s;-webkit-transition-duration: 0.8s;-o-transition-duration: 0.8s;background: #fff; color: #565656; text-align: justify; width:200px; height: 350px;overflow: auto; padding: 30px;} 

.gou:hover { opacity: 1}
</style>

<div style=" width: 260px; margin-bottom: 10px; font-family: 'Megrim', cursive; font-size:40px; color: #7d7d7d;">wicked games</div>

<div style="width: 260px; padding: 20px; border: solid #bbbbbb 1px; background-color: #fff;">

<div style="width:260px; height: 410px; line-height: 90%; font-family: georgia; overflow: auto;background-color: #fff; font-size: 9px;text-align: justify; border: solid #bbbbbb 1px; background-image: url(YOUR 260X410 IMAGE GOES HERE~);">
<div class="gou">

YOUR AWESOME THREAD POST WHATEVER GOES HERE~

<div style="width:200px;  border-top: solid 1px #d2d2d2;text-align: justify;">

<blockquote>notes go here. whatever you have to say.</blockquote>
</div>
</div></div>

</div>
<div style="font-family: 'Megrim', cursive;font-size: 8px; color: #000; text-align: right;width: 280px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=9755">DEB</a></div>

</center>

0

19

Код:
<!--HTML-->
 <div class='postcolor'> <center>
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<div style="font-family: 'Luckiest Guy', cursive; font-size: 60px; color:#59E918; text-shadow: #FF42AD 3px 2px 1px;">RULES</div>

<div style="width: 150px; font-family;georgia;font-size: 9px; padding: 
35px;text-align:justify;background-color:#f8f8f8;line-height:90%; color:#000;border-bottom: solid 30px #000;">
<b>thread</b> template. the image dimensions are <b>150x265</b>. feel free to mess around with the colors or padding or whatever. just please don't take my credit off. the love placehold image i used is of <b>theo james</b>. make sure not to write too much on the notes. i think it'll overlap if it does and you'd have to fix all the dimensions. kay thnxs enjoy!</div></center><br /><br /><br /><center>

<link href='http://fonts.googleapis.com/css?family=Denk+One' rel='stylesheet' type='text/css'>

<style type="text/css">

.crow::-webkit-scrollbar {width: 5px; background: #000}
.crow::-webkit-scrollbar-thumb {background:C8D600}
.crow::-webkit-scrollbar-corner {background:#000}

</style><div class='postcolor'> <center>
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<div style="font-family: 'Luckiest Guy', cursive; font-size: 60px; color:#59E918; text-shadow: #FF42AD 3px 2px 1px;">RULES</div>

<div style="width: 150px; font-family;georgia;font-size: 9px; padding: 
35px;text-align:justify;background-color:#f8f8f8;line-height:90%; color:#000;border-bottom: solid 30px #000;">
<b>thread</b> template. the image dimensions are <b>150x265</b>. feel free to mess around with the colors or padding or whatever. just please don't take my credit off. the love placehold image i used is of <b>theo james</b>. make sure not to write too much on the notes. i think it'll overlap if it does and you'd have to fix all the dimensions. kay thnxs enjoy!</div></center><br /><br /><br /><center>

<link href='http://fonts.googleapis.com/css?family=Denk+One' rel='stylesheet' type='text/css'>

<style type="text/css">

.crow::-webkit-scrollbar {width: 5px; background: #000}
.crow::-webkit-scrollbar-thumb {background:C8D600}
.crow::-webkit-scrollbar-corner {background:#000}

</style>

<DIV STYLE="WIDTH: 325PX; font-family: 'Denk One', sans-serif; COLOR: #000;FONT-SIZE:40PX; MARGIN-BOTTOM:15PX;MARGIN-TOP: 15PX;">▲EYES ON FIRE▲</DIV>

<table><tr><td>
<div style="width: 175px; height: 225px; background-color:#C8D600; font-family: georgia; font-size: 9px; text-align: justify; color: #fff; padding: 20px; overflow: auto; line-height: 90%;" class="crow"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget neque sodales, posuere arcu ut, semper est. Curabitur nec congue velit. Aliquam vehicula orci diam, sit amet convallis dui rhoncus quis. Proin placerat dictum ullamcorper. Fusce commodo magna in velit rutrum luctus. Pellentesque pellentesque metus et eleifend placerat. Duis aliquet, lorem vitae ultricies rhoncus, ligula lorem ullamcorper odio, a semper orci est nec magna. Duis rhoncus elit vitae nulla vestibulum, et dapibus augue fermentum. Morbi metus orci, facilisis eu mi et, feugiat tincidunt leo. Praesent a mattis sem, vitae iaculis est.
 <P>
Cras pharetra mi at tellus facilisis, quis auctor justo lacinia. Proin ac vulputate arcu. Pellentesque sed posuere erat. Morbi mollis sed lacus fringilla volutpat. Proin a pretium odio. Nam lacinia tincidunt adipiscing. Maecenas tempor ut est non ullamcorper. Maecenas vel enim adipiscing, consequat purus non, euismod justo. Vivamus sem nulla, venenatis sit amet pretium in, dictum sit amet libero. Donec urna magna, egestas at tortor et, elementum lobortis ligula. Cras augue turpis, posuere at sem eu, adipiscing pulvinar sapien. Vivamus eget metus quis orci accumsan fringilla imperdiet vitae mi. Praesent bibendum, tellus ac porta tincidunt, odio risus sagittis justo, ut semper metus nisl pulvinar risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div></td>

<td><div style="width:150px; height: 265px; background-image: url(http://i.imgur.com/BXmnRqc.png);"></div></td></tr></table>

<div style="width:327px; height: 20px; background-color: #000; font-family: georgia; font-size: 9px; color: #c1c1c1; padding: 20px;"> notes/lyrics/words/outfit/whatever you want</div>
<div style="font-family: georgia; font-size: 8px; color: #000;width: 350px;text-align:right;"><a href='http://z10.invisionfree.com/Shadowplay/index.php?showuser=9755' target='_blank' rel='nofollow'>♥thanks deb@SP</a></div>

0

20

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Fjalla+One|Roboto+Condensed:700italic,400' rel='stylesheet' type='text/css'><center>
<style>
#tess {height: 350px; width: 460px; border: 10px solid #fcfcfc; position: relative; overflow: hidden}
.tess1 {height: 350px; width: 230px; position: absolute; background-image: url(http://41.media.tumblr.com/1fcd5121595ced8dda1f0a2a3fbea9b7/tumblr_mn5qptiZn21qcepcpo1_500.jpg); background-size: cover; z-index: 2}

#tess .tess1 {left: 0px; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s;}

#tess:hover .tess1 {left: 230px; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s;}

.tess1a {width: 230px; font-family: 'Fjalla One'; bottom: 175px; color: #fff; text-transform: uppercase; font-size: 33px; text-align: center; position: absolute}

.tess1a a {font-family: 'Fjalla One'; color: #fff; text-transform: uppercase; font-size: 33px; text-align: center;}


#tess .tess1a {bottom: 175px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s;  -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}

#tess:hover .tess1a {bottom: 60px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}


.tess1b {width: 146px; border: 2px solid #fcfcfc; position: absolute; left: 40px; height: 22px; line-height: 22px; color: #fff; font-family: Roboto Condensed; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; background-image: url(http://i.imgur.com/3YfB87B.png)}
.tess1b::first-letter {color: #FFB7D8}

.tess2 {height: 350px; width: 230px; position: absolute; left: 230px; background-image:url(http://i.imgur.com/h4GdAjR.png); }

#tess .tess1b {opacity: 0; -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s;}
#tess:hover .tess1b {opacity: 1; -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s; -webkit-transition-delay: 1.1s; }


.tess3 {height: 320px; width: 200px; padding: 8.5px; border: 8.5px solid transparent; background-image: url(http://i.imgur.com/qG4Q3og.png); position: absolute; font-family: 'roboto condensed'; color: #fff; text-align: justify; text-transform: uppercase; font-size: 10px; line-height: 10px; overflow: auto}

.tess3::-webkit-scrollbar {width: 1px}
.tess3::-webkit-scrollbar-thumb {background: #fff}
.tess3::-webkit-scrollbar-track {background: transparent}



</style>
<div id="tess">
<div class="tess1">
<div class="tess1a"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908"><font style="color: #FFB7D8">t</font>essellate</a></div>
<div class="tess1b" style="top: 95px">name/name</div>
<div class="tess1b" style="top: 135px">###</div>
<div class="tess1b" style="top: 175px">note </div>


</div>
<div class="tess3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consequat aliquam fermentum. Maecenas sollicitudin facilisis fermentum. Nulla eget accumsan urna. In sit amet egestas purus, laoreet rhoncus nunc. Donec eget lobortis eros. Sed orci orci, laoreet sed tincidunt et, tempus id urna. Proin id feugiat risus. Donec nec sollicitudin orci. Morbi vitae consequat nibh. Ut sit amet arcu imperdiet, molestie erat in, placerat dui. Curabitur faucibus elementum congue. Curabitur tristique pellentesque ligula eu mattis. Suspendisse aliquet erat mauris, et posuere enim ornare id. Cras malesuada sodales mollis.

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et justo neque. Integer lobortis, diam id volutpat bibendum, nibh ipsum pellentesque urna, ut feugiat urna eros a nisi. Phasellus hendrerit vitae diam id vulputate. Sed viverra eget felis in fermentum. Fusce vulputate, nibh non interdum scelerisque, leo augue tincidunt dolor, at dapibus est massa vel leo. Integer mattis purus nec lacus mattis, eget porttitor sapien maximus. Sed a mauris sit amet metus ultrices tincidunt. Duis semper tellus nec nisi lobortis, a tincidunt dui placerat.

<p>Ut tellus diam, blandit eu mauris in, hendrerit volutpat ligula. Vestibulum auctor arcu vel cursus varius. Aenean fringilla nisi sed ipsum scelerisque, ac interdum massa commodo. Morbi elementum congue quam, a luctus metus placerat eget. Pellentesque iaculis finibus velit vitae malesuada. Mauris et ultrices lorem, tempor convallis ante. Ut sagittis dui massa, ac congue tellus mollis id. Morbi aliquam ut ipsum non tempus. Aenean placerat nec tellus id mattis. Aliquam vitae ex ut ipsum ullamcorper dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas rhoncus orci odio, quis pretium quam pharetra sed. Nam nibh nulla, eleifend ut fringilla luctus, rhoncus eget nisi.

<p>Sed a volutpat velit. Praesent in massa lorem. Vivamus et pharetra mauris. Nulla convallis purus ac accumsan semper. Aliquam sed eros ornare, mattis dui et, vestibulum tortor. Vivamus ac pulvinar eros. Pellentesque tincidunt pulvinar consequat. In lacinia venenatis lacus. Suspendisse potenti. Etiam vel bibendum est. Proin sed semper turpis. Cras sit amet convallis quam, sit amet tincidunt arcu.

</div>

<div class="tess2"></div>

</div>
</center>

0

21

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<center>
<style>
#brucec {height: 450px; width: 350px; position: relative; overflow: hidden; }

.brucelbg {height: 225px; width: 350px; position: absolute; background-image: url(http://i.imgur.com/NuEAjhL.png); z-index: 2}
.brucelyrics1 {width: 350px; position: absolute; top: 100px; font-family: 'Fjalla One'; color: #03C000; font-size: 30px; text-transform: uppercase; font-style: italic; text-align: center}

.brucelyrics2 {background-color: transparent; color: #03C000; font-family: calibri; font-size: 8px; width: 250px; position: absolute; text-align: center; text-transform: uppercase; letter-spacing: 2px; left: 50px; top: 125px; font-style: italic; font-weight: 300; border: 1px solid #ABABAB}

#brucec .brucelbg {left: 0px; -webkit-transition: 0.6s linear; -moz-transition: 0.6s linear; -ms-transition: 0.6s linear; -o-transition: 0.6s linear; transition: 0.6s linear;}

#brucec:hover .brucelbg {left: -350px; -webkit-transition: 0.6s linear; -moz-transition: 0.6s linear; -ms-transition: 0.6s linear; -o-transition: 0.6s linear; transition: 0.6s linear;}

.brucepic1 {height: 225px; width: 350px; position: absolute; top: 225px; background-blend-mode: multiply; background-color: #00E339; background-image:url(350X225 IMG HERE); z-index: 1}

.brucepic2 {height: 225px; width: 350px; position: absolute; background-image: url(350 X 225 IMG HERE); background-blend-mode: multiply; background-color: #00E339}

.brucee {height: 225px; width: 350px; position: absolute}
.brucenotes {background-color: transparent; color: #EDEDED; font-family: calibri; font-size: 8px; width: 250px; position: absolute; text-align: center; text-transform: uppercase; letter-spacing: 2px; left: 50px; font-style: italic; font-weight: 300; border: 1px solid #EDEDED}

#brucec .brucee {transform: scale(1.3); opacity: 0; -webkit-transition: ease-in-out 0.7s; -moz-transition: ease-in-out 0.7s; -ms-transition: ease-in-out 0.7s; -o-transition: ease-in-out 0.7s; transition: ease-in-out 0.7s;}

#brucec:hover .brucee {transform: scale(1); opacity: 1; -webkit-transition: ease-in-out 0.7s; -moz-transition: ease-in-out 0.7s; -ms-transition: ease-in-out 0.7s; -o-transition: ease-in-out 0.7s; transition: ease-in-out 0.7s; -webkit-transition-delay: 0.8s}


.brucepost {height: 205px; width: 330px; background-color: #fff; border: solid 5px #fff; padding: 5px; font-family: calibri; line-height: 102%; text-align: justify; color: #505050; top: 225px; position: absolute; overflow-x: scroll; font-size: 10px; text-transform: lowercase}
.brucepost b {color: #00E339}
.brucepost::-webkit-scrollbar {width: 2px}
.brucepost::-webkit-scrollbar-thumb {background-color: #00E339}
#brucec .brucepic1{right: 0px; -webkit-transition: 0.6s linear; -moz-transition: 0.6s linear; -ms-transition: 0.6s linear; -o-transition: 0.6s linear; transition: 0.6s linear;}

#brucec:hover .brucepic1 {right: -350px; -webkit-transition: 0.6s linear; -moz-transition: 0.6s linear; -ms-transition: 0.6s linear; -o-transition: 0.6s linear; transition: 0.6s linear;}

</style>

<div id="brucec">
<div class="brucelbg">
<div class="brucelyrics1">hunger of the pine</div>
<div class="brucelyrics2">sleeplessly embracing you</div>
</div>
<div class="brucepic2"></div>
<div class="brucee">
<div class="brucenotes" style="top: 70px">TAGS HERE</b></div>
<div class="brucenotes" style="top: 95px">WORD COUNT</div>
<div class="brucenotes" style="top: 120px">WHATEVER U WANT</div>
</div>

<div class="brucepic1">
</div>
<div class="brucepost">
WORDS HERE. CHILL COS IT SCROLLS YAY

</div>

</div>
<div style="width: 350px; text-align: right; font-family: calibri; text-transform: uppercase; font-size: 8px"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908">holly at sp</a></div>
</center>

0

22

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<center>
 <div id="trc">
   <div class="trcimg"></div>
   <div class="trc1">filthy. rich. spoiled. rotten.</div>
   <div class="trc2"><div class="trc2a"></div>tags // ### // <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908">▽</a></div>
   <div class="trc3">The Riot Club is a 2014 British drama thriller film directed by Lone Scherfig and written by Laura Wade, based on Wade's 2010 play Posh. The film stars Max Irons, Sam Claflin and Douglas Booth. It is set among the Riot Club, a fictional all-male, exclusive dining club at Oxford University. When the play Posh premiered, the Riot Club was often described as a thinly veiled version of the real-life Bullingdon Club, although according to Wade it is entirely fictitious.<p>Alistair and Miles, both with aristocratic connections, start their first year at Oxford University. Though they are very different (Miles is down to earth and happy to have a girlfriend from a lower background, Lauren, whilst Alistair is a snob with aspirations to follow his uncle, a Tory MP), the common bond is that they both become members of the Riot Club, a long established elite drinking club priding itself on hedonism and the belief that money can buy anything. Alistair takes the club in more of a competitive way and ends up loathing Miles. Having been barred from most establishments in Oxford, they have their annual dinner at the function room in a country pub, where their rowdy behaviour angers other patrons though they reimburse Chris, the landlord. After hiring a prostitute who refuses to perform group oral sex, Alistair takes Miles' phone and texts Lauren without Miles knowing, whom they importune to Miles' horror. Getting progressively more drunk and ingesting drugs, they start to trash the room, and when Chris comes to complain, Alistair savagely assaults him, landing him in hospital. Though shocked, none of the others do anything to stop him except Miles, who rings for an ambulance. The boys are all arrested but believing that the club is more important than the individual, they agree not to give statements and go on to suggest that Miles, as the newest club member, should take the blame for the attack on Chris. Alistair's skin is then found underneath Chris' fingernails, meaning they can arrest and charge him. Miles' now-ex girlfriend refuses to talk to him, and Miles is approached by the new president of the Riot Club where he decides to leave the club.

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

<style>
#trc {
 height: 400px;
 width: 330px;
 position: relative;
 overflow: hidden
}

.trcimg {
 height: 400px;
 width: 330px;
 position: absolute;
 background-image: url(http://i.imgur.com/ssO189q.png);
}

#trc .trcimg {
 -webkit-transition-duration: 2s
}

#trc:hover .trcimg {
 -webkit-filter: blur(3px);
 -moz-filter: blur(3px);
 filter: blur(3px);
 -webkit-transition-duration: 2s;
 -moz-transition-duration: 2s;
 transition-duration: 2s;
}

.trc1 {
 height: 150px;
 width: 180px;
 position: absolute;
 text-align: left;
 top: 125px;
 left: 70px;
 border-left: 3px solid #fff;
 padding-left: 10px;
 font-family: arial black;
 font-size: 40px;
 text-transform: uppercase;
 letter-spacing: -2px;
 font-weight: 900;
 line-height: 30px;
 color: #F00074;
 -webkit-transition: 0.8s ease-in-out;
 -webkit-transition-delay: 1s
}

.trc2 {
 height: 40px;
 width: 310px;
 padding-left: 20px;
 background-color: rgba(240, 0, 116, 0.6);
 line-height: 40px;
 color: #fff;
 position: absolute;
 top: 40px;
 font-family: arial narrow, sans serif;
 font-size: 9px;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-style: italic;
 font-weight: 100;
 text-align: left;
 left: -330px;
 -webkit-transition: 1s linear;
 -moz-transition: 1s linear;
 transition: 1s linear;
}

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

.trc2a {
 height: 90px;
 width: 90px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 background-image: url(http://i.imgur.com/SzyOSTo.gif);
 position: absolute;
 z-index: 3;
 top: -25px;
 right: 40px;
 background-color: #F00074;
 background-blend-mode: multiply
}

.trc3 {
 height: 210px;
 width: 200px;
 padding: 10px;
 border: 10px solid #fff;
 background-color: #fff;
 position: absolute;
 left: 45px;
 top: 400px;
 overflow: auto;
 font-family: arial narrow;
 letter-spacing: 0.5px;
 line-height: 11px;
 font-size: 10px;
 text-align: justify;
 -webkit-transition: 1s linear;
 -moz-transition: 1s linear;
 transition: 1s linear;
}

.trc3::-webkit-scrollbar {
 width: 1px
}

.trc3::-webkit-scrollbar-thumb {
 background-color: #F00074
}

#trc:hover .trc1 {
 left: -210px;
 -webkit-transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
}

#trc:hover .trc2 {
 left: 0px;
 -webkit-transition: 1s linear;
 -moz-transition: 1s linear;
 transition: 1s linear;
 -webkit-transition-delay: 1s;
 -moz-transition-delay: 1s;
 transition-delay: 1s;
}

#trc:hover .trc3 {
 top: 110px;
 -webkit-transition-delay: 1s;
 -moz-transition-delay: 1s;
 transition-delay: 1s;
}</style>

0

23

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Aguafina+Script' rel='stylesheet' type='text/css'>
<center>
<div style="width: 250px; height: 550px; background: url(http://i.imgur.com/9tgbqOC.png); padding: 40px;">
<div style="Width: 235px; height: 530px; background: #fff; border: 3px double #b6add6; padding: 5px;">
<img src="235x160 IMAGE HERE!!!!!!!!!!" style="width: 235px; height: 160px;">
<div style="font-family: aguafina script; font-size: 35px; text-transform: lowercase; color: #9180cf; text-align: left; margin-top: -15px; margin-left: 3px;">i come alive</div>
<div style="width: 235px; height: 12px; background: #1e4da6; color: #fff; font-family: arial; text-transform: uppercase; letter-spacing: 4px; line-height: 14px; font-size: 7px;">when i'm falling down</div>
<div style="width: 180px; height: 320px; font-family: calibri; font-size: 10px; line-height: 9px; color: #040f48; text-align: justify; overflow: auto; margin-top: 27px;">



POST HERE



<p></div></div></div>
<div style="font-family: arial; text-transform: uppercase; letter-spacing: 4px; line-height: 11px; font-size: 7px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=148">little dove.</a></div>

0

24

Код:
<!--HTML--><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=Satisfy' rel='stylesheet' type='text/css'>
<center>
<img src="400X250 IMAGE HERE!!!!!!!!!!!!!!">

<div style="width: 450px; height: 470px; background-color: #0D1015; border-bottom: 5px solid #F39613;">

<div style="font-family: satisfy; font-size: 40px; color: #581013; text-shadow: #f39613 -1px 0px 0px; line-height: 1%;">there goes my hero</div>
<p>
<div style="width: 250px; font-family: calibri; font-size: 10px; color: #0D1015; background-color: #DEDFE3; text-transform: uppercase; letter-spacing: 5px;">watch him as he goes</div>
<div style="padding-top: 10px;"></div>
<div style="width: 310px; height: 315px; border-top: #1E222D 35px solid; border-bottom: #1E222D 35px solid; background-color: #DEDFE3; padding: 20px;">

<div style="width: 300px; height: 305px; background-color: #fff; padding: 5px;">
<div style="width: 290px; height: 295px; font-family: calibri; font-size: 10px; color: #0d1015; text-align: justify; line-height: 10px; overflow: auto;">

POST HERE!!!!!!!!! WILL SCROLL!!!!!!!

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

</div>

<div style="Width: 450px; height: 70px; background-color: #581013;">
<div style="padding-top: 27px;"></div>
<div style="width: 250px; font-family: calibri; font-size: 10px; color: #0D1015; background-color: #DEDFE3; text-transform: uppercase; letter-spacing: 5px;">000 | tag | outfit</div></div>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=148">&hearts;</a></center>

0

25

Код:
<!--HTML--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Scripts/simpleTabs.js"></script>
<link rel="stylesheet" type="text/css" href="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Threads/simpleTabs.css">
<link href='http://fonts.googleapis.com/css?family=Lora:700italic' rel='stylesheet' type='text/css'>
<div class="nicolestabs">


   <div class="ntab">
       <div class="ntablabel">start</div>

       <div class="ntabcontent nactive">
           <img src="http://placehold.it/300/fff/666" class="ntaboneimg" />
               
               <h2>content here content here</h2>
       </div>
   </div>


   <div class="ntab jpadding">
       <div class="ntablabel">post</div>

       <div class="ntabcontent">
           
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ultricies arcu. Duis a augue mollis, elementum urna non, lobortis ex. Praesent vel eros ut est auctor tincidunt. Curabitur vehicula placerat bibendum. Phasellus eu nibh a justo congue facilisis. Maecenas vulputate, lorem eu iaculis ultricies, quam purus volutpat mi, eget lobortis leo mauris ut nulla. Suspendisse ligula nisi, ullamcorper quis rhoncus eget, rhoncus ac ante. Nullam arcu lorem, condimentum in augue varius, maximus porttitor mauris. Nulla sit amet massa vel felis molestie facilisis id non risus. Quisque at ultrices leo. Donec pretium cursus mattis.
<p>
Sed ut felis metus. Pellentesque mollis ipsum eu diam dignissim, sit amet tristique quam convallis. In eget orci id nunc luctus imperdiet vel a nibh. Sed molestie dictum magna sed pharetra. Cras placerat augue ac lectus viverra ullamcorper. Nam quis diam erat. Aenean non imperdiet justo, vitae porta nulla. Sed in ex erat. Nam nibh ante, placerat ac tempus in, imperdiet nec felis. Mauris aliquam faucibus felis at efficitur.
<p>
Donec iaculis urna vitae diam pharetra aliquam. Nullam euismod nulla eu elit ornare, nec dignissim nisi pulvinar. Cras nec pellentesque mi. Proin quis libero est. Duis vehicula molestie mi, id eleifend felis viverra vel. Fusce ac quam eleifend, finibus magna quis, pulvinar massa. Pellentesque in aliquam leo. Vestibulum faucibus viverra felis in tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam faucibus nibh eget posuere vulputate. Mauris scelerisque eleifend arcu ac faucibus. Nunc nisl ligula, dictum ac ultricies ac, facilisis in erat. Etiam felis justo, dignissim sit amet sagittis sit amet, cursus vel turpis.
<p>
   Nam vulputate id justo a venenatis. In nunc nulla, porta a risus at, sollicitudin aliquet diam. Vestibulum pharetra velit lorem, vel condimentum felis auctor non. Ut ornare nibh et magna condimentum, in aliquet lacus congue. Vestibulum vulputate, ex vel viverra vehicula, nisi ligula elementum est, sed vehicula erat urna quis lectus. Duis vel mauris ac diam scelerisque blandit quis sit amet ipsum. Proin aliquet libero nec arcu elementum, ut euismod lacus rhoncus. Aliquam erat volutpat. Praesent nec dolor nisi. Mauris rutrum, ipsum ac pharetra ullamcorper, sem tortor porta dolor, eu faucibus mi nisi convallis felis. Duis fermentum sapien ut bibendum lobortis. Aliquam vitae eleifend magna. Quisque et iaculis nisi.
           
       </div>
   </div>


   <div class="ntab jpadding">
       <div class="ntablabel">tags</div>

       <div class="ntabcontent">
       
           <h3>tag</h3>
           here
           
           <h3>words</h3>
           ####
           
           <h3>notes</h3>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ultricies arcu.
           
       </div>
   </div>


       <div class="ntabcred"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=4829">& thx</a></div>
</div>

0

26

<!--HTML-->

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed:500' rel='stylesheet' type='text/css'>

<style>
.tealholder {
float: center;
width: 400px;
height: 261px;
background: url('http://i.imgur.com/LA60sRm.png'), repeat repeat center center;
padding: 8px;
position: relative;
border: 3px solid #777;
box-shadow: 0 0 1px #333;
}
.tealsubholdercontainer {
float: right;
width: 199px;
height: 155px;
padding: 3px 5px 5px 1px;
background: #303030;
overflow: hidden;
position: relative;
margin: 0 1px 7px 0;
border-left: 3px solid #386f72;
border-right: 3px solid #386f72;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.tealsubholdercontainer h3 {
color: #448789;
font-family: 'Lobster', cursive;
font-size: 25px;
text-align: center;
text-transform: none;
text-shadow: none;
margin: 7px 0 5px 0;
}
.tealsubholdercontainer h2 {
color: #666;
font-family: calibri;
font-size: 9px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0px;
margin: 0;
}
.tealsubholder {
width: 194px;
height: 119px;
color: #777;
font-family: calibri;
font-size: 10px;
text-align: left;
line-height: 11px;
background: transparent;
overflow-y: auto;
}
.tealsubholder::-webkit-scrollbar {
width: 5px;
}
.tealsubholder::-webkit-scrollbar-track {
margin: 5px;
border-radius: 0.2em;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
.tealsubholder::-webkit-scrollbar-thumb {
background: #5cb2ba;
border-radius: 0.2em;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.tealsubholder p {
color: #666;
font-family: calibri, serif;
font-size: 10px;
font-style: none;
text-align: left;
line-height: 10px;
background: transparent;
padding: 2px 0px 0px;
margin: 1px 2px 3px 5px;
position: relative;
}
.tealsubholder p:first-letter {
display: inline-block; 
float: left; 
color: #303030; 
font-family: georgia;
font-size: 20px;
text-shadow: 0 0 1px #6edae1;
background-color: #5cb2ba;
background-image: -webkit-linear-gradient(top, #5cb2ba, #448789);
background-image: -moz-linear-gradient(top, #5cb2ba, #448789);
background-image: -o-linear-gradient(top, #5cb2ba, #448789);
background-image: -ms-linear-gradient(top, #5cb2ba, #448789);
background-image: linear-gradient(top, #5cb2ba, #448789);
padding: 8px;
margin: 1px 5px 0 0px;
box-shadow: 0 0 1px #222;
}
.tealsubholder a {
color: #509ba0;
text-transform: uppercase;
text-decoration: none;
cursor: url(http://i.imgur.com/ffMehRc.png), auto;
transition: all 0.5s linear;
}
.tealsubholder a:hover {
color: #5cb2ba;
}
.tealleftmenu {
float: left;
width: 200px;
padding:0;
margin: 0 -5px 0 -10px;
}
.tealleftmenu li {
display: block;
width: 177px;
height: 40px;
background: #353535;
margin-bottom: 4px;
overflow: hidden;
position: relative;
border-left: 3px solid #386f72;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
}
.tealleftmenu li:last-child {
margin-bottom: 0px;
}
.tealleftmenu li a {
display: block;
width: 100%;
height: 100%;
color: #333;
text-align: left;
padding-left: 10px;
position: relative;
}
.tealleftmain {
color: #448789;
font-family: 'Cabin Condensed', sans-serif;
font-size: 11px;
text-transform: uppercase;
text-shadow: none;
margin: 10px 0 0 0;
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
}
.tealleftsub {
color: #666;
font-family: calibri;
font-size: 8px;
text-transform: uppercase;
margin: 0;
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear; 
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
}
.tealleftmenu li:hover {
background: #448789;
border-left: 3px solid #5cb2ba;
}
.tealleftmenu li:hover .tealleftmain {
opacity: 1;
color: #284e51;
-webkit-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
}
.tealleftmenu li:hover .tealleftsub {
opacity: 1;
color: #222;
-webkit-animation: moveFromBottom 300ms ease-in-out;
-ms-animation: moveFromBottom 300ms ease-in-out;
-moz-animation: moveFromBottom 300ms ease-in-out;
}
@-webkit-keyframes moveFromBottom {
from {
opacity: 0;
-webkit-transform: translateY(200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromBottom {
from {
opacity: 0;
-moz-transform: translateY(200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromBottom {
from {
opacity: 0;
-ms-transform: translateY(200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
@-webkit-keyframes moveFromTop {
from {
opacity: 0;
-webkit-transform: translateY(-200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromTop {
from {
opacity: 0;
-moz-transform: translateY(-200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromTop {
from {
opacity: 0;
-ms-transform: translateY(-200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
.tealinfoimage {
float: right;
width: 205px;
height: 84px;
text-align: center;
background: #303030 url('') no-repeat center center;
position: relative;
margin: 0 1px 0 0;
border: 3px solid #555;
overflow: hidden;
cursor: default;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.tealinfoimage .mask, .tealinfoimage .content {
top: 0;
left: 0;
width: 205px;
height: 84px;
position: absolute;
overflow: hidden;
}
.tealinfoimage-content .mask {
opacity: 1;
background-color: #303030;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transform: translateX(300px);
-webkit-transform: translateX(300px);
-ms-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
.tealinfoimage-content:hover .mask {
transform: translateX(0px);
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
}
.tealinfoimage img {
display: block;
position: relative;
}
.tealinfoimage-content img {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.tealinfoimage-content:hover img {
transform: translateX(-300px);
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
}
.tealinfoimage blockquote {
float: center;
width: 185px;
height: 60px;
color: #777;
font-family: calibri;
font-size: 10px;
text-align: left;
line-height: 10px;
background: #393939;
padding: 5px 5px 3px 5px;
margin: 5px 2px 1px 5px;
border-top: 3px solid #5cb2ba;
border-bottom: 3px solid #5cb2ba;
}
.tealinfoimage blockquote:first-letter {
float: left; 
display: inline-block; 
color: #303030; 
font-family: georgia;
font-size: 20px;
text-shadow: 0 0 1px #6edae1;
background-color: #5cb2ba;
background-image: -webkit-linear-gradient(top, #5cb2ba, #448789);
background-image: -moz-linear-gradient(top, #5cb2ba, #448789);
background-image: -o-linear-gradient(top, #5cb2ba, #448789);
background-image: -ms-linear-gradient(top, #5cb2ba, #448789);
background-image: linear-gradient(top, #5cb2ba, #448789);
padding: 8px;
margin: 1px 5px 0 0px;
box-shadow: 0 0 1px #222;
}
.tealinfoimage blockquote b {
color: #509ba0;
font-family: calibri;
font-size: 10px;
text-transform: uppercase;
line-height: 10px;
}
.tealinfoimage blockquote b:hover {
color: #5cb2ba;
}
.tealcodecred {
float: center; 
width: 420px; 
height: 20px; 
text-align: right;
background: transparent;
margin: 0 0 0;
position: relative;
}
.tealcodecred a {
color: #448789;
}
.tealcodecred a:hover {
color: #5cb2ba;
}
</style>

<center>
<div class="tealholder">
<ul class="tealleftmenu">
<li>
<a href="#">
<h2 class="tealleftmain">Hai thur, I'm a link</h2>
<h3 class="tealleftsub">And I'm a cute little subtitle</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="tealleftmain">Idk what to put here</h2>
<h3 class="tealleftsub">But you know what I mean</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="tealleftmain">So many links omg</h2>
<h3 class="tealleftsub">So little text to fill 'em with</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="tealleftmain">Links are great, right?</h2>
<h3 class="tealleftsub">They are pretty fabulous</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="tealleftmain">Links have it easy</h2>
<h3 class="tealleftsub">They just click, click, click</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="tealleftmain">Irdk what to write here</h2>
<h3 class="tealleftsub">Blah blah, yada yada</h3>
</a>
</li>
</ul>

<div class="tealsubholdercontainer">
<h3>A Touch of Color</h3>
<h2>To Brighten up this Darkness</h2>
<div class="tealsubholder">
<p>
Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>

<div class="tealinfoimage tealinfoimage-content">
<img src="http://i.imgur.com/QS6X2pj.gif" />
<div class="mask">
<blockquote>Text or tags or whatever you want really can go here blah blah, yada yada, so on so forth, etc etc, you get the idea.<br><br>
<b>#hashtags</b>, <b>#ohman</b></blockquote>
</div>
</div>
</div>

<div class="tealcodecred">
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=62186">• • •</a>
</div>
</center>

http://z10.invisionfree.com/Shadowplay/ … opic=62501

0

27

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed:500' rel='stylesheet' type='text/css'>

<style>
.purpleholder {
float: center;
width: 400px;
height: 261px;
background: url('http://i.imgur.com/LA60sRm.png'), repeat repeat center center;
padding: 8px;
position: relative;
border: 3px solid #777;
box-shadow: 0 0 1px #333;
}
.purplesubholdercontainer {
float: right;
width: 199px;
height: 155px;
padding: 3px 5px 5px 1px;
background: #303030;
overflow: hidden;
position: relative;
margin: 0 1px 7px 0;
border-left: 3px solid #5c3872;
border-right: 3px solid #5c3872;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.purplesubholdercontainer h3 {
color: #6e4489;
font-family: 'Lobster', cursive;
font-size: 25px;
text-align: center;
text-transform: none;
text-shadow: none;
margin: 7px 0 5px 0;
}
.purplesubholdercontainer h2 {
color: #666;
font-family: calibri;
font-size: 9px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0px;
margin: 0;
}
.purplesubholder {
width: 194px;
height: 119px;
color: #777;
font-family: calibri;
font-size: 10px;
text-align: left;
line-height: 11px;
background: transparent;
overflow-y: auto;
}
.purplesubholder::-webkit-scrollbar {
width: 5px;
}
.purplesubholder::-webkit-scrollbar-track {
margin: 5px;
border-radius: 0.2em;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
.purplesubholder::-webkit-scrollbar-thumb {
background: #935cba;
border-radius: 0.2em;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.purplesubholder p {
color: #666;
font-family: calibri, serif;
font-size: 10px;
font-style: none;
text-align: left;
line-height: 10px;
background: transparent;
padding: 2px 0px 0px;
margin: 1px 2px 3px 5px;
position: relative;
}
.purplesubholder p:first-letter {
display: inline-block; 
float: left; 
color: #303030; 
font-family: georgia;
font-size: 20px;
text-shadow: 0 0 1px #b76ee1;
background-color: #935cba;
background-image: -webkit-linear-gradient(top, #935cba, #6e4489);
background-image: -moz-linear-gradient(top, #935cba, #6e4489);
background-image: -o-linear-gradient(top, #935cba, #6e4489);
background-image: -ms-linear-gradient(top, #935cba, #6e4489);
background-image: linear-gradient(top, #935cba, #6e4489);
padding: 8px;
margin: 1px 5px 0 0px;
box-shadow: 0 0 1px #222;
}
.purplesubholder a {
color: #8150a0;
text-transform: uppercase;
text-decoration: none;
cursor: url(http://i.imgur.com/ffMehRc.png), auto;
transition: all 0.5s linear;
}
.purplesubholder a:hover {
color: #935cba;
}
.purpleleftmenu {
float: left;
width: 200px;
padding:0;
margin: 0 -5px 0 -10px;
}
.purpleleftmenu li {
display: block;
width: 177px;
height: 40px;
background: #353535;
margin-bottom: 4px;
overflow: hidden;
position: relative;
border-left: 3px solid #5c3872;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
}
.purpleleftmenu li:last-child {
margin-bottom: 0px;
}
.purpleleftmenu li a {
display: block;
width: 100%;
height: 100%;
color: #333;
text-align: left;
padding-left: 10px;
position: relative;
}
.purpleleftmain {
color: #6e4489;
font-family: 'Cabin Condensed', sans-serif;
font-size: 11px;
text-transform: uppercase;
text-shadow: none;
margin: 10px 0 0 0;
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
}
.purpleleftsub {
color: #666;
font-family: calibri;
font-size: 8px;
text-transform: uppercase;
margin: 0;
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear; 
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
}
.purpleleftmenu li:hover {
background: #6e4489;
border-left: 3px solid #935cba;
}
.purpleleftmenu li:hover .purpleleftmain {
opacity: 1;
color: #402851;
-webkit-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
}
.purpleleftmenu li:hover .purpleleftsub {
opacity: 1;
color: #222;
-webkit-animation: moveFromBottom 300ms ease-in-out;
-ms-animation: moveFromBottom 300ms ease-in-out;
-moz-animation: moveFromBottom 300ms ease-in-out;
}
@-webkit-keyframes moveFromBottom {
from {
opacity: 0;
-webkit-transform: translateY(200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromBottom {
from {
opacity: 0;
-moz-transform: translateY(200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromBottom {
from {
opacity: 0;
-ms-transform: translateY(200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
@-webkit-keyframes moveFromTop {
from {
opacity: 0;
-webkit-transform: translateY(-200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromTop {
from {
opacity: 0;
-moz-transform: translateY(-200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromTop {
from {
opacity: 0;
-ms-transform: translateY(-200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
.purpleinfoimage {
float: right;
width: 205px;
height: 84px;
text-align: center;
background: #303030 url('') no-repeat center center;
position: relative;
margin: 0 1px 0 0;
border: 3px solid #555;
overflow: hidden;
cursor: default;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.purpleinfoimage .mask, .purpleinfoimage .content {
top: 0;
left: 0;
width: 205px;
height: 84px;
position: absolute;
overflow: hidden;
}
.purpleinfoimage-content .mask {
opacity: 1;
background-color: #303030;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transform: translateX(300px);
-webkit-transform: translateX(300px);
-ms-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
.purpleinfoimage-content:hover .mask {
transform: translateX(0px);
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
}
.purpleinfoimage img {
display: block;
position: relative;
}
.purpleinfoimage-content img {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.purpleinfoimage-content:hover img {
transform: translateX(-300px);
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
}
.purpleinfoimage blockquote {
float: center;
width: 185px;
height: 60px;
color: #777;
font-family: calibri;
font-size: 10px;
text-align: left;
line-height: 10px;
background: #393939;
padding: 5px 5px 3px 5px;
margin: 5px 2px 1px 5px;
border-top: 3px solid #935cba;
border-bottom: 3px solid #935cba;
}
.purpleinfoimage blockquote:first-letter {
float: left; 
display: inline-block; 
color: #303030; 
font-family: georgia;
font-size: 20px;
text-shadow: 0 0 1px #b76ee1;
background-color: #935cba;
background-image: -webkit-linear-gradient(top, #935cba, #6e4489);
background-image: -moz-linear-gradient(top, #935cba, #6e4489);
background-image: -o-linear-gradient(top, #935cba, #6e4489);
background-image: -ms-linear-gradient(top, #935cba, #6e4489);
background-image: linear-gradient(top, #935cba, #6e4489);
padding: 8px;
margin: 1px 5px 0 0px;
box-shadow: 0 0 1px #222;
}
.purpleinfoimage blockquote b {
color: #8150a0;
font-family: calibri;
font-size: 10px;
text-transform: uppercase;
line-height: 10px;
}
.purpleinfoimage blockquote b:hover {
color: #935cba;
}
.purplecodecred {
float: center; 
width: 420px; 
height: 20px; 
text-align: right;
background: transparent;
margin: 0 0 0;
position: relative;
}
.purplecodecred a {
color: #6e4489;
}
.purplecodecred a:hover {
color: #935cba;
}
</style>

<center>
<div class="purpleholder">
<ul class="purpleleftmenu">
<li>
<a href="#">
<h2 class="purpleleftmain">Hai thur, I'm a link</h2>
<h3 class="purpleleftsub">And I'm a cute little subtitle</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="purpleleftmain">Idk what to put here</h2>
<h3 class="purpleleftsub">But you know what I mean</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="purpleleftmain">So many links omg</h2>
<h3 class="purpleleftsub">So little text to fill 'em with</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="purpleleftmain">Links are great, right?</h2>
<h3 class="purpleleftsub">They are pretty fabulous</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="purpleleftmain">Links have it easy</h2>
<h3 class="purpleleftsub">They just click, click, click</h3>
</a>
</li>

<li>
<a href="#">
<h2 class="purpleleftmain">Irdk what to write here</h2>
<h3 class="purpleleftsub">Blah blah, yada yada</h3>
</a>
</li>
</ul>

<div class="purplesubholdercontainer">
<h3>A Touch of Color</h3>
<h2>To Brighten up this Darkness</h2>
<div class="purplesubholder">
<p>
Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>

<div class="purpleinfoimage purpleinfoimage-content">
<img src="http://i.imgur.com/QS6X2pj.gif" />
<div class="mask">
<blockquote>Text or tags or whatever you want really can go here blah blah, yada yada, so on so forth, etc etc, you get the idea.<br><br>
<b>#hashtags</b>, <b>#ohman</b></blockquote>
</div>
</div>
</div>

<div class="purplecodecred">
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=62186">• • •</a>
</div>
</center>

0

28

Код:
<!--HTML--><link rel="stylesheet" type="text/css" href="http://accicodes.b1.jcink.com/uploads/accicodes/arabella.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Oswald' rel='stylesheet' type='text/css'>
<center>
 <div id="arabella">
   <div class="arat">tags // <font style="color: #5694F7">outfit</font> // <font style="color: #F7566C">short note</div>
   <div class="ara2"><img src="200X430 IMG HERE. ANY IMAGE SIZE WILL STRETCH/RESIZE TO FIT THOUGH" style="height: 200px; width: 430px"></div>
   <div class="ara1">
     <div class="ara1a">YOUR POST GOES HERE. IT SCROLLS YAY.

</div><div class="ara1b"><img src="200 X 215 IMG HERE. ANY SIZE WILL RESIZE/STRETCH TO FIT THOUGH" style="height: 200px; width: 215px"></div>
   </div>
   <div class="aral">   
   <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908"><div class="aral1"><img src="http://i.imgur.com/Kbc2OUA.gif" style="height: 70px; width: 70px;"></div></a>
   <div class="arall">Just might have tapped into your mind and soul

</div>
     <h1>arabella</h1>
   </div>
   </div>
 </div>
</center>

0

29

Код:
<!--HTML-->
<style type="text/css">
.pheromones { width: 400px; height: 250px; opacity: 0; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; }
.pheromones:hover { width: 400px; height: 250px; opacity: .9; }
.pheromoness::-webkit-scrollbar { width: 5px; height: 5px; }
.pheromoness::-webkit-scrollbar-track { background-color: #fff; }
.pheromoness::-webkit-scrollbar-thumb { background-color: #222; }
</style>

<center><div style="width: 450px; padding: 20px; background-color: #fafafa;border: 3px double #f0f0f0;"><div style="width: 450px; font-family: arial, sans-serif; font-size: 72px; text-transform: uppercase; text-align: center; color: #222; line-height: 100%; letter-spacing: -10px;">pheromones</div><div style="width: 450px; background-color: #222; color: #fff; font-size: 7px; text-align: center; padding-top: 5px; padding-bottom: 5px; line-height: 100%; margin-top: -45px; text-transform: uppercase; letter-spacing: 4px; word-spacing: 2px; font-family: arial, sans-serif;">i'm just falling for your</div><div style="height: 20px;"></div><div style="width: 400px; height: 250px; background-image: url(http://placehold.it/400x250); border-right: 25px solid #222; border-left: 25px solid #222;"><div class="pheromones"><div style="height: 10px;"></div><div style="width: 358px; height: 208px; border: 1px solid #fff; padding: 10px;"><div style="width: 338px; height: 188px; padding: 10px; background-color: #fff; font-family: arial, sans-serif; font-size: 10px; text-align: justify; line-height: 100%; color: #222;"><div style="width: 333px; height: 188px; padding-right: 5px; overflow: auto; line-height: 100%;" class="pheromoness">

thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here thread goes here v

</div></div></div></div></div></div><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=3722" style="font-family: arial, serif; text-transform: uppercase; line-height: 100%; letter-spacing: 1px; color: #222; font-size: 6px; text-align: center">&copy; darren criss</a></center>

0

30

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'><center><div style="width: 455px; color: 334455; font-family: playfair display; font-size: 50px; margin-bottom: 17px; font-style: italic;">saviours and saints ,</div><div style="width: 450px; text-transform: uppercase; color: 121212; font-size: 7.5px; font-family: arial; letter-spacing: 10px;">-- devils and heathens alike --</div><table cellsapcing=0><td><div style="width: 160px; height: 290px; background-image: url(160 X 290 IMAGE HEEERRREEEE); border-left: 40px solid #334455;"></div></td>

<td><div style="margin-left: -4px; border-right: 40px solid #334455; width: 250px; height: 290px; background-color: eeeedd;"><center><BR><BR><div style="width: 180px; padding: 10px; background-color: fff; height: 220px;"><div style="padding-right: 10px; padding-left: 5px; font-family: tahoma; color: 121212; font-size: 9.5px; line-height: 90%; text-align: justify; overflow: auto; height: 220px;">

post here.

</div></div></center></div></td></table><div style="width: 430px; font-family: arial; text-align: justify; letter-spacing: 2px; text-transform: uppercase; font-size: 7px;">

### , tagged , notes 

, <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=3417">&hearts; lauz</a></div></center>

0


Вы здесь » самый лучший проект » Code » красота html


Рейтинг форумов | Создать форум бесплатно