56%

fyfd

Объявление

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

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


Вы здесь » fyfd » обсуждалка » html


html

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

1

[html]<style type="text/css">
.btitle { width: 300px; font-family: 'Roboto Condensed', sans-serif; font-size: 40px; text-transform: uppercase; line-height: 100%; letter-spacing: 1px; font-weight: lighter; text-align: center; border-bottom: 2px solid #222; color: #222 }
.bsite { width: 300px; font-family: arial; font-size: 8px; text-transform: uppercase; line-height: 100%; text-align: center; letter-spacing: 6px; color: #222; padding-top: 5px; }
.bgender { width: 230px; font-family: 'Roboto Condensed', sans-serif; font-size: 20px; text-transform: uppercase; line-height: 100%; letter-spacing: 1px; font-weight: lighter; text-align: center; border-bottom: 1px solid #222; color: #222; padding-bottom: 2px; }
.btext1 a { width: 255px; font-family: arial; font-size: 8px; text-transform: uppercase; line-height: 100%; text-align: center; letter-spacing: 3px; color: #222; }
.btext1 { width: 260px; padding: 20px; background-color: #fcfcfc; color: #333; line-height: 100%; text-align: justify; font-family: arial; font-size: 9px; height: 100px; }
.btext2 { width: 260px; padding: 20px; background-color: #fcfcfc; color: #333; line-height: 100%; text-align: justify; font-family: arial; font-size: 9px; }
.bapps::-webkit-scrollbar { width: 5px; background-color: transparent; }
.bapps::-webkit-scrollbar-track { background-color: transparent; }
.bapps::-webkit-scrollbar-thumb { background-color: #f1f1f1 }
</style>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'>

<center><div style="width: 300px; padding: 20px; background-color: #fafafa"><div class="btitle">face claim</div>

<div class="bsite">site name</div>

<div style="height: 20px"></div><div class="btext2">

this is really simple. post in code, reserves last two days and it's not mandatory to post your requested faces here either, it's just nice for guests to see who is really wanted and stuff like that. remember that it is your profile url, not app! yeah, pretty sure you know the rules anyway.

</div><div style="height: 20px"></div><div class="bgender">male</div><div style="height: 20px"></div><div class="btext1"><div style="width: 255px; height: 100px; padding-right: 5px; overflow: auto;" class="bapps">

<a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last

</div></div><div style="height: 20px"></div><div class="bgender">female</div><div style="height: 20px"></div><div class="btext1"><div style="width: 255px; height: 100px; padding-right: 5px; overflow: auto;" class="bapps">

<a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last
<br><a href="">first last</a> portrays character first last

</div></div><div style="height: 20px"></div><div class="bgender">reservations</div><div style="height: 20px"></div><div class="btext1"><div style="width: 255px; height: 100px; padding-right: 5px; overflow: auto;" class="bapps">

first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm
<br>first last | alias | dd/mm

</div></div><div style="height: 20px"></div><div class="bgender">the codes</div><div style="height: 20px"></div><div class="btext2"><div style="width: 260px">[CODE]<br><a href="">first last</a> portrays character first last[/C**ODE]</div><div style="height: 20px"></div><div style="width: 260px">[CODE]<br>first last | alias | dd/mm[/C**ODE]</div></div></div><a href="http://candylandcouture.b1.jcink.com/index.php?showuser=27" 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>[/html]

0

2

[html]<style type="text/css">
.box-y { width:270px; }
.boxy { width:250px; padding:20px; background:#ffffff; color:#000000; font-family: Trebuchet MS; font-size:10px; text-align:justify; }
.boxytop img { width:290px; }
.boxytext { width:230px; max-height:230px; overflow-y: auto; padding:10px; background:#e1e1e1; color:#444444; }
.boxytext::-webkit-scrollbar { width: 5px; height: 5px; }
.boxytext::-webkit-scrollbar-track { width: 1px; background: #ffffff; }
.boxytext::-webkit-scrollbar-thumb { background: #9ac6c9; }
.boxybot { width:250px; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px; background:#9ac6c9; color:#f8f8f8; font-family: Trebuchet MS; font-size:9px; text-align:center; }
.boxycred { color:#9ac6c9; font-family: Trebuchet MS; font-size:7px; text-align:right; text-transform:uppercase; }
.boxycred a { color:#9ac6c9; }
</style>

<div align="center">
<div class="box-y">
<div class="boxytop"><img src="http://placehold.it/290x120"/></div>
<div class="boxy"><div class="boxytext">
Lorem ipsum 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.<br /><br />

Lorem ipsum 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.<br /><br />

Lorem ipsum 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.
</div></div>
<div class="boxybot">
<img src="http://i.imgur.com/Z4YA9uN.png"/> words &nbsp;&nbsp;&nbsp;&nbsp; <img src="http://i.imgur.com/KaxRZMl.png"/> tags &nbsp;&nbsp;&nbsp;&nbsp; <img src="http://i.imgur.com/ld0x6za.png"/> notes
</div>
<div class="boxycred">© ana of <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=439">shadowplay</a> & <a href="http://athousandfireflies.jcink.net/index.php?showuser=15">atf</a></div>
</div>
</div>[/html]

0

3

[html]<div id="badau01">

<div class="badau02" style="background-image: url(http://placehold.it/400x80)">

<input type="checkbox" id="toggle-1"><label for="toggle-1" class="bbjam02"></label><div class="bbjam01">
<h1>

firstname

</h1><h2>

lastname

</h2><div class="bbjam03">

<img src="http://placehold.it/100">

<div class="bbboo01"><b>active</b>

<a href="/">thread name</a>
<a href="/">another</a>
<a href="/">how about a ridiculously long ass name</a>
<a href="/">shorty short</a>

<b>dead</b>

<a href="/">keep on keeping on</a>
<a href="/">fucking names</a>
<a href="/">shorty short</a>

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

<div class="badau02" style="background-image: url(http://placehold.it/400x80);">

<input type="checkbox" id="toggle-2"><label for="toggle-2" class="bbjam02"></label><div class="bbjam01"><h1>

firstname

</h1><h2>

lastname

</h2><div class="bbjam03"><img src="http://i.imgur.com/x71FbsE.gif"><div class="bbboo01"><b>active</b>

<a href="/">thread name</a>
<a href="/">another</a>

<b>dead</b>

<a href="/">keep on keeping on</a>
<a href="/">fucking names</a>
<a href="/">shorty short</a>

</div></div></div></div><div class="nahcred33"><a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3189">▼</a></div></div>

<link href="https://fonts.googleapis.com/css?family=Amiko:600|Arvo" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<style>
#badau01 { position: relative; width: 400px; padding: 2px 6px; background: #fefefe; border: 1px solid #D8D8D8; margin: 10px auto; }.badau02 { margin: 4px 0; overflow: hidden; position: relative; width: 400px; height: 80px; background-image: url(http://placehold.it/400x80); background-color: #C4D5ED; background-blend-mode: multiply; }.badau02 i { color: red; font-size: 30px; }.bbjam01 { transition: 1s; width: 400px; height: 80px; position: absolute; top: 0; right: -240px; background: #C4D5ED; }.bbjam01 h1 { z-index: 2; color: #576F7C; padding-bottom: 0; margin: 14px 0 0 20px; display: block; width: 120px; height: 25px; text-align: center; font: 19px/1.5 arvo; text-transform: uppercase; }.bbjam01:after { width: 20px; height: 2px; display: block; background: white; content: ""; position: absolute; top: 42px; left: 70px; }.bbjam01 h2 { color: #576F7C; margin: 0 0 0 20px; display: block; width: 120px; height: 12px; font: 600 8px/100% amiko; padding-top: 12px; text-transform: uppercase; letter-spacing: 1px; text-align: center; }.bbjam02 { border: 2px solid #C4D5ED; z-index: 3; transition: 1s; width: 36px; height: 40px; background: #C4D5ED; position: absolute; top: 19px; right: 138px; border-radius: 50%; cursor: crosshair; text-align: center; font: 30px/1.5 awesome; color: white; padding-right: 4px; }.bbjam03 { width: 200px; height: 80px; background: white; position: absolute; top: 0; right: -60px; transition: 1s; }.bbjam03:before, .bbjam03::before { width: 0; height: 0; border-right: 60px solid white; border-top: 80px solid transparent; content: ""; display: block;  position: absolute; top: 0; left: -60px; }.bbjam03 img { width: 50px; border-radius: 50%; position: absolute; top: 10px; left: -50px; border: 3px solid white; }.bbboo01 { width: 170px; height: 50px; position: absolute; top: 10px; right: 10px; background: white; overflow: auto; border: 5px solid white; text-align: center; }.bbboo01 b { display: block; width: 80px; padding: 0 0 2px 6px; color: #576F7C; font: 400 10px/100% arvo !important; text-transform: uppercase !important; letter-spacing: 1px; margin: 4px; border-bottom: 1px solid #576F7C; text-align: left; }.bbboo01 b:first-letter { border-bottom: 2px solid #576F7C; padding: 2px 0; }.bbboo01 a { display: inline-block; background: #C4D5ED; font: 600 8px/1 amiko; min-height: 8px; text-transform: uppercase; padding: 4px; margin: 1px 0; color: white; text-decoration: none; }#badau01 input[type=checkbox] { display: none; }#badau01 input[type=checkbox]:checked ~ .bbjam01 { right: 0; transition: 1s; }#badau01 input[type=checkbox]:checked ~ .bbjam02 { transform: rotate(450deg) scale(.5); right: -10px; top: -10px; transition: 1s; background: white; color: #C4D5ED; border-color: white;  }#badau01 input[type=checkbox]:checked ~ .bbjam01 .bbjam03 { right: 0; transition: 1.2s; }.nahcred33 { width: 400px; text-align: right; font: 10px/100% calibri; position: absolute; bottom: 5px; left: 5px; }.nahcred33 a { color: #576F7C; text-decoration: none; }@font-face { src: url('http://symmetry.b1.jcink.com/uploads/symmetry/fontawesome_webfont.ttf'); font-family: awesome; }.bbboo01::-webkit-scrollbar { width: 3px; }.bbboo01::-webkit-scrollbar-track { background: white; }.bbboo01::-webkit-scrollbar-thumb { background: #C4D5ED; }</style>[/html]

0

4

[html]<center><link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald:700' rel='stylesheet' type='text/css'>
<style>
#ccphone {background-color:#fff; width:270px; height:470px; overflow:hidden; border-radius:20px; border:solid #eee 1px; position:relative;}

.ccspeaker {background-color:#cccccc; width:30px; height:4px; border-radius:2px; position:relative; top:10px;}

.ccmic {background-color:#transparent; width:30px; height:30px; border-radius:100%; border:solid #cccccc 1px; position:relative; top:30px;}

.ccphone1{background-color:#eee; width:230px; height:390px; border-radius:20px; position:relative; top:20px;}

.ccim {background-image:url('http://placehold.it/50'); width:50px; height:50px; border:solid #fff 5px; border-radius:100%;}

.ccfrom {width: 0;
height: 0;
border-style: solid;
border-width: 12.5px 0 12.5px 20px;
border-color: transparent transparent transparent #fff; position:relative; right:5px;}

.ccrec {width:120px; font-family:Oswald; font-weight:700; font-size:18px; color:#fff; text-shadow:1px 1px 1px #222; text-align:justify; line-height:100%;}

.cccont {border-radius:30px; background-color:#fff; width:180px; height:240px; position:relative; top:40px;}
.cctxt {width:140px; height:208px; font-family:Open Sans; font-size:9px; text-align:justify; line-height:100%; position:relative; top:15px; overflow:auto; padding-right:4px;}
.cctxt::-webkit-scrollbar {width:2px;}
.cctxt::-webkit-scrollbar-thumb {background-color:#eee;}

</style>

<div id="ccphone">
<div class="ccspeaker"></div>
<div class="ccphone1">
<table cellspacing="1" cellpadding="1" style="position:relative; top:20px;"><td><div class="ccim"></div></td><td><div class="ccfrom"></div></td> <td><div class="ccrec">CALLING NAME</div>
</td></tr></table>

<div style="width: 0; height: 0; border-style: solid; border-width: 0 12.5px 22px 12.5px; border-color: transparent transparent #ffffff transparent; position:relative; top:40px; left:45px;"></div>
<div class="cccont"><div class="cctxt">
phone call goes here!
</div></div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3620"><div class="ccmic"></div></a>
</div>
</center>[/html]

0

5

[html]<div class="fb-container">
<img src="http://i.imgur.com/b3v8vEm.jpg" style="max-width:100%;">
<div class="fb-cover"><img src="http://placehold.it/600x250" style="max-width:100%;"></div>
<div class="fb-avatar"><img src="http://placehold.it/150x150" style="max-width:100%;"></div>
<div class="fb-name">First Last</div>
<div class="fb-strip"><div class="fb-tabactive">Timeline</div><div class="fb-tabname">Photos<font color="89919c"> ###</font></div><div class="fb-tabname">Friends <font color="89919c">###</font></div></div>

<table width="600"><tbody><tr><td><div class="fb-infocontain">

<div class="fb-about">About</div>
<div class="fb-info">
<div class="fb-infosep">Occupation at <font color="3B5998">Business</font></div>
<div class="fb-infosep">Studies at <font color="3B5998">School Name</font></div>
<div class="fb-infosep">Lives in <font color="3B5998">City, State</font></div>
<div class="fb-infosep">From <font color="3B5998">City, State</font></div>
<div class="fb-infosep">Relationship Status with <font color="3B5998">First Last</font></div>
</div>

<div class="fb-friend">Friends</div>
<div class="fb-info2">
<a href="http://"><img src="http://placehold.it/80x80" style="max-width:100%;"></a>
<a href="http://"><img src="http://placehold.it/80x80" style="max-width:100%;"></a>
<a href="http://"><img src="http://placehold.it/80x80" style="max-width:100%;"></a>
<a href="http://"><img src="http://placehold.it/80x80" style="max-width:100%;"></a>
<a href="http://"><img src="http://placehold.it/80x80" style="max-width:100%;"></a>
</div>

<div class="fb-photo">Photos</div>
<div class="fb-info3">
<img src="http://placehold.it/120x120" style="max-width:100%;">
<img src="http://placehold.it/120x120" style="max-width:100%;">
<img src="http://placehold.it/120x120" style="max-width:100%;">
<img src="http://placehold.it/120x120" style="max-width:100%;">
<img src="http://placehold.it/120x120" style="max-width:100%;">
</div>

</div></td><td><div class="fb-postcontain">

<div class="fb-user">
<img src="http://placehold.it/50x50" style="max-width:100%;">
First Last
<div class="fb-date">Month Day</div></div>
<div class="fb-post">

http://adoxography.boards.net/thread/24 … network-v2
<br>
Nulla mauris lectus, euismod at ligula vitae, porta dapibus sem. Suspendisse at adipiscing lectus. Integer a posuere dui. Aliquam sed ipsum nibh. Cras ac vulputate nulla. Donec quis pulvinar velit, eget vulputate lacus. Vestibulum ullamcorper purus a lectus semper, ultrices tempor neque auctor. Maecenas ut hendrerit nisl, eu fringilla dolor.<br><br>

Vestibulum pellentesque rutrum quam, non posuere sapien. Morbi eu massa at enim aliquet pretium ac quis diam. Ut rutrum et lacus fringilla molestie. Fusce hendrerit malesuada sapien ut blandit. Fusce lacinia fringilla sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet semper elit, eu tempor diam. Donec vel dolor non enim consequat accumsan et vel tellus. Maecenas est risus, tincidunt in nibh a, viverra tempor dolor.

</div><div class="fb-feedback">Like · Comment · Share</div>

<div class="fb-user">
<img src="http://placehold.it/50x50" style="max-width:100%;">
First Last
<div class="fb-date">Month Day</div></div>
<div class="fb-post">

Post blah blah!
<br><br>
<img src="http://placehold.it/300x300" style="max-width:100%;">

</div><div class="fb-feedback">Like · Comment · Share</div>

<div class="fb-user">
<img src="http://placehold.it/50x50" style="max-width:100%;">
First Last
<div class="fb-date">Month Day</div></div>
<div class="fb-post">

Lorem Ipsum dolor sit amet!

</div><div class="fb-feedback">Like · Comment · Share</div>

</div></td></tr></tbody></table>
</div><div align="center"><div style="width:600px;text-align:right;font-size:11px;"> <a href="http://adoxography.boards.net/user/56">♥</a><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=53865">♥</a><a href="http://candylandcouture.b1.jcink.com/index.php?showuser=2308">♥</a><a href="http://shine.b1.jcink.com/index.php?showuser=8576">♥</a></div></div>

<style type="text/css">
.fb-container {width:600px;background-color:#E9EAED;font:12px Tahoma;color:#000;margin: 0 auto;position:relative;}
.fb-cover img {width:600px;height:250px;margin-top:-2px;}
.fb-avatar img {width:150px;height:150px;border:5px solid #FFFFFF;position:relative;top:-130px;left:35px;z-index:2;-moz-box-shadow: 0px 0px 1px 1.7px rgba(0, 0, 0, .17);-webkit-box-shadow: 0px 0px 1px 1.7px rgba(0, 0, 0, .17);box-shadow: 0px 0px 1px 1.7px rgba(0, 0, 0, .17);}
.fb-name {width:400px;font: 24px 'Helvetica Neue';font-weight:bold;color:#FFFFFF;text-shadow:0 0 3px rgba(0,0,0,.8);position:relative;top:-200px;left:205px;}
.fb-strip {width:393px;height:30px;padding:10px 0px 10px 205px;background-color:#FFFFFF;font:14px 'Lucida Grande';color:#89919c;font-weight:bold;position:relative;top:-192px;border-right:1px solid #E9EAED;border-left:1px solid #E9EAED;border-bottom:1px solid #E9EAED;}
.fb-tabname {display:inline-block;padding:5px 10px;height:30px;color:#3B5998;}
.fb-tabactive {display:inline-block;padding:5px 10px;height:30px;color:#37404e;}
.fb-tabactive:after {content: '';position: absolute;border-style: solid;border-width: 0 8px 10px;border-color: #E9EAED transparent;display: block;bottom: 0px;left: 240px;}
.fb-container table td{vertical-align:top;}

.fb-infocontain {width:280px;position:relative;top:-185px;left:8px;margin-bottom:-175px;}
.fb-about {width:230px;background-color:#F6F7F8;padding:9px 10px;color:#37404E;font:11px 'Lucida Grande';font-weight:bold;position:relative;top:0;z-index:1;border-radius:3px 3px 0px 0px;}
.fb-info {width:230px;height:auto;border-radius:0px 0px 3px 3px;background-color:#FFF;padding:10px;text-align:left;color:#707070;position:relative;top:0px;}
.fb-info a {font:12px Tahoma;color:#3b5998;}
.fb-infosep {font:11px Tahoma;font-weight:bold;color:#6a7480;padding:10px 5px;border-bottom:1px solid #E9EAED;}

.fb-friend {width:230px;background-color:#F6F7F8;padding:9px 10px;color:#37404E;font:11px 'Lucida Grande';font-weight:bold;position:relative;top:0px;z-index:1;border-radius:3px 3px 0px 0px;margin-top:10px;}
.fb-info2 {width:247px;height:auto;border-radius:0px 0px 3px 3px;background-color:#FFF;padding:1.5px 0px 1.5px 3px;text-align:left;color:#707070;}
.fb-info2 img {width:77px;height:77px;margin:1.5px 1px 1.5px 1px;}
.fb-info2 a {font:12px Tahoma;color:#3b5998;}

.fb-photo {width:230px;background-color:#F6F7F8;padding:9px 10px;color:#37404E;font:11px 'Lucida Grande';font-weight:bold;position:relative;top:0px;z-index:1;border-radius:3px 3px 0px 0px;margin-top:10px;}
.fb-info3 {width:244px;height:auto;border-radius:0px 0px 3px 3px;background-color:#FFF;padding:1.5px 1.5px 2px 4px;text-align:left;color:#707070;}
.fb-info3 img {width:116px;height:116px;margin:1.5px 1.5px 1.5px 1.5px;}
.fb-info3 a {font:12px Tahoma;color:#3b5998;}

.fb-postcontain {width:320px;overflow:hidden;position:relative;top:-185px;left:-16px;margin-bottom:-185px;}
.fb-post {width:295px;height:auto;background-color:#FFF;padding:10px;text-align:justify!important;font:11px Tahoma;color:#000;text-align:left;margin:0px auto;}
.fb-post a {color:#3b5998!important;font:11px Tahoma!important;display:block;}
.fb-user {width:250px;padding:12px 0px 15px 65px;border-radius:3px 3px 0px 0px;background-color:#FFF;text-align:left;font:13px Tahoma;color:#3b5998;font-weight:bold;position:relative;margin:0px auto;}
.fb-date {font:10px Tahoma;color:#898F9C;}
.fb-user img {position:absolute;top:5px;left:5px;border-radius:3px;}
.fb-post img {width:300px;}
.fb-feedback {width:295px;background-color:#FAFBFB;color:#3B5998;line-height:14px;font:11px Tahoma;padding:8px 10px;height:12px;border-radius:0px 0px 3px 3px;margin:0px auto 10px auto;}
</style>[/html]

0

6

[html]<style type="text/css">
.merc_chirp {
width: 500px;
margin: 25px auto;
-webkit-box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
-moz-box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}

.merc_chirp2 {
width: 460px;
padding: 20px;
background-color: #23afbb;
color: #fff;
text-align: center;
font-family: open sans condensed;
font-size: 14px;
}
.merc_chirp3 {
width: 500px;
margin: auto;
height: 200px;
background-image:url(http://placehold.it/500x200);
position: relative;
z-index: 2;
}
.merc_chirp4 {
width: 500px;
overflow: hidden;
background-color: #dcdcdc;
}
.merc_chirp5 {
width: 160px;
padding: 10px;
background-color: #fbfbfb;
margin-left: 10px;
margin-top: -1px;
position: relative;
}
.merc_chirp6 {
width: 265px;
padding: 10px;
background-color: #fbfbfb;
margin-left: 10px;
margin-top: -1px;
padding-bottom: 30px;
}
.merc_chirp7 {
width: 100px;
height: 100px;
box-shadow: inset 0 0 0 7px rgba(255,255,255,.8);
background-image:url(http://placehold.it/100x100);
margin-left: 50px;
z-index: 4;
top: 150px;
position: relative;
}
.merc_chirp8 {
font-family: open sans;
font-size: 9px;
text-align: justify;
padding: 10px;
color: #191919;
line-height: 115%;
padding-top: 50px;
}
.merc_chirp8 h1 {
font-size: 11px;
letter-spacing: 1px;
color: #23afbb;
}
.merc_chirp9 {
padding: 10px;
font-family: open sans;
font-size: 10px;
text-align: center;
padding-top: 5px;
width: 65px;
float: left;
background-color: #fbfbfb;
}
.merc_chirp9 h1 {
float: left;
font-size: 10px;
margin-top: 0px;
margin-right: 2px;
color: #23afbb;
}
.merc_chirp10 {
width: 65px;
height: 65px;
background-image:url(http://placehold.it/65x65);
}
.merc_chirp11 {
width: 200px;
margin: auto;
}

/*** CHEEP ***/
.merc_cheep {
width: 260px;
padding: 20px;
background-color: #dcdcdc;
margin: 25px auto;
-webkit-box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
-moz-box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}

.merc_cheep2 {
padding: 10px;
background-color: #fbfbfb;
padding-top: 15px;
}
.merc_cheep3 {
padding-top: 3px;
}
.merc_cheep4 {
font-family: open sans;
font-size: 9px;
text-align: justify;
padding: 10px;
color: #525252;
line-height: 95%;
}
.merc_cheep4 h1 {
font-size: 11px;
letter-spacing: 1px;
color: #23afbb;
margin-top: 8px;
margin-bottom: 5px;
}
.merc_cheep5 {
width: 50px;
height: 50px;
background-image:url(http://placehold.it/50x50);
float: left;
margin-right: 10px;
margin-top: -10px;
}
.merc_cheep6 {
font-family: open sans;
font-size: 12px;
text-align: justify;
padding: 20px;
color: #191919;
line-height: 95%;
}
.merc_cheep7 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
background-color: #fbfbfb;
text-align: center;
word-spacing: 100px;
}
.merc_cred { text-align: center; font-family: calibri; font-size: 7px; text-transform: uppercase;  }
</style>
<div class="merc_chirp">
<div class="merc_chirp2"><img src="http://i.imgur.com/xhd6gvE.png"> Twitter</div>
<div class="merc_chirp3" style="background-image:url(http://placehold.it/500x200);">
<div class="merc_chirp7" style="background-image:url(http://placehold.it/100x100);"></div>
       </div>
<div class="merc_chirp4"><table><tr valign="top"><td>
<div class="merc_chirp5">
<div class="merc_chirp8">
   <h1>@username</h1>
   this is your description.
</div>
</div></td><td>
<div class="merc_chirp6">
<div class="merc_chirp9"><h1>100</h1> Following<br /></div>
<div class="merc_chirp9"><h1>100</h1> Followers<br /></div>
<div class="merc_chirp9"><h1>100</h1> Favorites<br /></div>

<div class="merc_chirp11">
   <table><tr valign="top">
    <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td>
    <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td>
    <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td></tr><tr valign="top">
    <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td>
    <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td>
    <td><div class="merc_chirp10"><img src="http://placehold.it/65x65" width="65"></div></td>
   </tr></table>
</div>
</div></td></tr></table>
</div>
</div><div class="merc_cred"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=9289">merc</a></div>[/html]

0

7

[html]<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<style type="text/css">
.yt_container { width:500px; overflow:hidden; margin:auto; background-color:#f5f5f5; }
.yt_logo { padding:20px; background-color:#fff; font-family:oswald; text-transform:none; letter-spacing:2px; text-align:center; }
.yt_logo span { font-family:oswald; font-size:14px; text-transform:uppercase; color:#000; }
.yt_banner { width:500px; height:250px; background-image:url(http://placehold.it/500x250); }
.yt_av { height:100px; width:100px; overflow:hidden; margin-left:20px; background-image:url(http://placehold.it/100x100); }
.yt_bar { padding:15px; background-color:#fff;  }
.yt_name { font-family:oswald; font-size:25px; width:300px; color:#000;}
.yt_subs { width:171px; background-image:url(http://i.imgur.com/AXkuVSL.png); height:29px;}
.yt_subz { padding-top:6px; padding-left:108px; font-family:open sans condensed; font-size:15px; color:#191919; }
.yt_mt { width:460px; background-color:#fff; margin-top:3px; padding:20px; }
.yt_vid { width:300px; height:169; background-image:url(http://placehold.it/300x160); }
.yt_info { width:160px; text-align:left; overflow:hidden; padding-left:10px; font-family:open sans condensed; font-size:11px; height:169px; line-height:110%; letter-spacing:1px; word-spacing:2px;}
.yt_info h1 { color:#816099; font-family:oswald; font-size:15px; margin-top:1px;  }
.yt_info span { color:#816099; font-family:open sans condensed; font-size:13px; }
.yt_info h2 { font-family:calibri; font-size:8px; text-transform:uppercase; color:#cccccc; letter-spacing:1px;  margin-top:-6px; margin-left:2px; }
.creds { font-family:calibri; font-size:7px; text-transform:uppercase; letter-spacing:1px;  margin-auto; text-align:right; width:475px;}
.creds a { color:#cc
</style>

<div class="yt_container">
<div class="yt_logo"><img src="http://i.imgur.com/s4c2bqk.png" height="25" /> youTube<img src="http://i.imgur.com/ZIUPZ5B.png" height="25" style="margin-left:200px;" /> <span>YTNAME</span></div>
<div class="yt_banner"><div class="yt_av"></div></div>
<div class="yt_bar"><table><tr><td>
<div class="yt_name">Username <img src="http://i.imgur.com/ejlqVvS.png" /></div>
</td><td>
<div class="yt_subs"><div class="yt_subz">SUBNUMBER ###</div></div>
</td></tr></table></div>

<div class="yt_mt">
<table><tr><td>
<div class="yt_vid"><img src="http://i.imgur.com/uZRg2X3.png" /></div>
</td><td>
<div class="yt_info">
<h1>VIDEO TITLE</h1>
<h2>### views - # Days Ago</h2>
VIDEO DESCRIPTION!!!<br /><br />
<span>READ MORE (keep / delete)</span>
</div>
</td></tr></table>
</div>

</div>
<center><div class="creds"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=9289">© MERC</a></div></center>[/html]

0

8

[html]<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
#linkz a {
height: 20px;
width: 20px;
padding: 1.3px;
font-family: calibri;
text-transform: uppercase;
color: #2f334e;
background-color: #46a4b5;
display: inline-block;
line-height: 20px;
font-size: 10px;
text-align: center;
text-decoration: none;
}

#linkz a:hover {
background: #69d1ce;
}

#ava img {
width: 100px;
height; 100px;
background-color: #405b52;
border: 5px solid #7a9472;
padding: 10px;
margin-top: 10px;
}

h1 {
font-family: 'Lobster', cursive;
color: #7a9472;
font-size: 30px;
line-height: 1px;
}

h2 {
font-family: calibri;
font-size: 10px;
text-transform: uppercase;
line-height: 1px;
margin-top: -4px;
letter-spacing: 5px;
color: #405b52;
text-align: center;
}

.info::-webkit-scrollbar { width: 5px; background: #ccc!important; }
.info::-webkit-scrollbar-thumb { background: #46a4b5; }

.info::first-letter { width: 20px height: 20px; padding: 10px; margin: 1px; background: #46a4b5; color: #69d1ce; font-family: georgia; font-weight: bolder; font-size: 25px; text-align: center; text-transform: uppercase; line-height: 20px; float: left; margin-top: 4px; margin-right: 10px; margin-bottom: 1px; box-shadow: 0px 0px 4px #b5b5b5; }
</style>

<center>
<div style="width: 490px; height: 183px; position: relative; background: #ccc;">
<div style="width: 130px; height: 162px; background: none; float: right; margin-right: 10px; margin-top: 10px;">
<div id="linkz">
<a href="#" title="LINKNAME">I</a>
<a href="#" title="LINKNAME">II</a>
<a href="#" title="LINKNAME">III</a>
<a href="#" title="LINKNAME">IV</a>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=7482" title="credit">V</a>
</div>

<div id="ava">
<img src="http://i.imgur.com/DIOJZlt.gif">
</div>
</div>

<div style="width: 330px; height: 162px; background: #e0e0e0; float: left; margin-left: 10px; margin-top: 10px;">
<h1>shut up & dance with me!</h1>
<h2>This woman is my destiny</h2>
<div class="info" style="width: 300px; height: 100px; background: none; overflow: auto; padding: 5px; font-family: calibri; font-size: 12px; line-height: 11px; text-align: justify;">
Gluten-free Intelligentsia trust fund 90's single-origin coffee, letterpress plaid bespoke wolf. PBR keffiyeh locavore, street art drinking vinegar Intelligentsia lomo mustache whatever. High Life Pinterest keffiyeh McSweeney's, flannel Godard viral dreamcatcher. Drinking vinegar readymade messenger bag pork belly, Marfa street art 8-bit. Chambray Pinterest taxidermy, stumptown actually banh mi jean shorts cornhole sartorial 90's lumbersexual. Bespoke umami lomo forage gentrify Portland, drinking vinegar Pinterest disrupt 90's post-ironic keytar semiotics Etsy. DIY Bushwick messenger bag, yr Pitchfork vegan small batch.
<p>
Small batch Brooklyn vinyl locavore, quinoa ugh skateboard mlkshk. Retro viral pop-up, fap hella single-origin coffee narwhal Carles PBR locavore tousled Portland. Pitchfork food truck mixtape, squid meditation McSweeney's swag 90's occupy Pinterest. Bicycle rights twee kogi, tilde cornhole tote bag Brooklyn mixtape bitters. Keytar Schlitz Intelligentsia occupy tofu, tousled blog. Flannel ethical letterpress, asymmetrical iPhone food truck Blue Bottle mustache raw denim. PBR&B meggings Blue Bottle organic.
</div>
</div>

</div>
</center>[/html]

0

9

[html]<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<center>
<style>
#eileen {height: 180px; width: 380px; position: relative}
.eileenbg {height: 150px; width: 350px; position: absolute; top: 30px;background-color: #ffbac3}
.eileenf1s {font-family: 'Montserrat'; color: #fa758e; font-size: 32px; position: absolute; text-transform: uppercase; top: -20px; font-weight: 700; left: 180px; }
.eileenf1s a {color: #fa758e; text-decoration: none; font-style: normal}
.eileenf1r {font-family: 'Montserrat'; color: #ff879d; font-size: 32px; position: absolute; text-transform: uppercase; top: 60px; font-weight: 700; left: 300px; transform: rotate(90deg)}
.eileenpic {height:100px; width:100px; -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  -o-border-radius: 50%; border-radius: 50%; background-image:url(http://placehold.it/100); border: 10px solid #fae9dc; position: absolute; top: 15px; left: 15px}
.eileenlink {height: 25px; width: 25px; line-height: 25px; border: 1px solid #fae9dc; color: #fae9dc; font-family: calibri; text-transform: uppercase; background-color: transparent; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; position: absolute}
.eileenlink a {color: #fae9dc; text-decoration: none; font-style: normal}
.eileenlink:hover {color: #ffbac3; background-color: #fae9dc; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; position: absolute}
.eileenlink:hover a {color: #ffbac3; text-decoration: none; font-style: normal}
.eileendesc {height: 80px; width: 188px; color: #fae9dc; position: absolute; top: 50px; left: 140px; font-family: calibri; font-style: italic; overflow: hidden; font-size: 9px; text-transform: uppercase; line-height: 95%; text-align: justify}
</style>

<div id="eileen">
<div class="eileenbg">
<div class="eileenf1s"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908">come on</a></div><div class="eileenf1r">eileen</div>
<div class="eileenpic"></div>
<div class="eileenlink" style="top: 15px; left: 140px"><a href="link">1</a></div>
<div class="eileenlink" style="top: 15px; left: 180px"><a href="link">2</a></div>
<div class="eileenlink" style="top: 15px; left: 220px"><a href="link">3</a></div>
<div class="eileenlink" style="top: 15px; left: 260px"><a href="link">4</a></div>
<div class="eileenlink" style="top: 15px; left: 300px"><a href="link">5</a></div>
<div class="eileendesc">words here. it doesn't scroll but i bet u could make it idk.
</div>

</div>
</div>
</center>[/html]

0

10

[html]<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><center><div style="width: 350px; padding: 30px; background-color: white; border-top: 20px solid #220033; border-bottom: 20px solid #220033;"><div style="padding: 7px; background-color: #220033; border-right: 50px solid #881133; margin-bottom: 5px;"></div>

<img src="350 X WHATEVER IMAGE HEEERRREEE" width="350"></img>

<div style="padding: 7px; background-color: #220033; border-left: 50px solid #881133; margin-top: 5px; margin-bottom: 10px;"></div><BR><div style="width: 280px; padding: 10px; font-family: arial; color: #121212; font-size: 10px; line-height: 90%; text-align: justify; border-left: 1px dotted #121212; border-right: 1px dotted #121212;">

post heeerrreee

</div><BR><BR><div style="width: 350px; font-family: arial; color: #121212; font-size: 7px; letter-spacing: 12px; text-transform: uppercase; margin-bottom: 23px;">

this is how to be a

</div><div style="font-family: oswald; color: #881133; font-size: 60px; text-transform: uppercase; text-shadow: 1px 1px #fff, 3px 1px #121212;">

HEARTBREAKER

</div><div style="width: 300px; font-family: times; color: #121212; font-size: 11px; text-transform: lowercase; font-style: italic; margin-top: 27px;">

### * tagged * notes go here. notes go here. notes go here. notes go here. notes go here. notes go here. notes go here. notes go here. notes go here.

</div></div><div style="width: 400px; font-family: arial; letter-spacing: 2px; text-align: right; text-transform: uppercase; font-size: 7px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=3417">&hearts; lauz</a></div></center>[/html]

0

11

[html]<link rel="stylesheet" type="text/css" href="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Threads/Centuries.css">

<style type="text/css">

.j8image {
  background-image: url(URL HERE) !important;
}

</style>

<div id="j8container"><div class="j8border">
    <h1> come on & let me in </h1>
  <h2> bruises on your thighs like my fingerprints  </h2>

<div class="j8image"></div></div><div class="j8trianglewhite"></div><div class="j8speech"><div class="j8speech2">

your content here!

</div></div><div class="j8border2"><div class="j8triangleblack"></div><h3>words and notes and things</h3></div><div style="width: 290px; margin: 0 auto; font-size: 15px; text-align: right; line-height: 70%;"><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=26371">•</a><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=4829">•</a><a href="http://wecode.jcink.net/index.php?showuser=268">•</a></div></div>[/html]

0

12

[html]<center><div style="width: 430px; border: 4px solid #FFB51F; background: #f2f2f2 url(http://colourlovers.com.s3.amazonaws.co … 8/8576.png);">
<div style="width: 400px; padding: 15px;"><div style="background: #ffffff; width: 400px; border: 1px dotted #D4C1B2;">
<div style="width: 400px; height: 300px; background: #f2f2f2 url(400X300IMAGEHERE);"></div>
<div style="font-family: courier new; font-size: 8px; line-height: 6px; padding-left: 4px; padding-right: 4px; padding-top: 2px; letter-spacing: 1px; text-transform: uppercase; width: 400px; padding-bottom: 6px; text-align: justify; color: #a1a1a1; width: 392px;">

SMALLLYRICSHERE

</div><div style="font-family: georgia; text-transform: lowercase; text-shadow: #a1a1a1 1px 0px 1px; font-style: italic; font-size: 48px; letter-spacing: -3px; color: #FFB51F; padding-bottom: 4px;">

LARGELYRICSHERE

</div><div style="font-family: arial; font-size: 9.5px; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 10px; color: #a1a1a1; line-height: 8px; text-align: justify;">

POSTGOESHERE

</div><div style="font-family: courier new; font-size: 9px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 10px; color: #a1a1a1;">template by eliza @ shadowplay</div>
</div></div></div></center>[/html]

0

13

[html]<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<center>
<div id="swim">
   <div class="swimtitle">
     <div class="swimtitlef">All hell is breaking loose
</div></div>
         <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908"><div class="swimp2" style="background-image:url(240 X 165 IMG HERE)"></div></a>
   <div class="swimtag">
     <div class="swimtagg" style="top: 37px">tags</div>
     <div class="swimtagg" style="top: 70px">0000</div>
     <div class="swimtagg" style="top: 103px">note</div>
   </div>

   <div class="swimp1" style="background-image: url(480 X 165 IMG HERE)">
   </div>
   <div class="swimpost">POST HERE. IT WILL SCROLL

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

<style>
@keyframes hell {
0% {
   opacity: 1;
}
50% {
   opacity: 0.5;
}
100% {
   opacity: 1;
}
}

@-webkit-keyframes hell {
0% {
   opacity: 1;
}
50% {
   opacity: 0.5;
}
100% {
   opacity: 1;
}
}

@-moz-keyframes hell {
0% {
   opacity: 1;
}
50% {
   opacity: 0.5;
}
100% {
   opacity: 1;
}
}

#swim {
height: 330px;
width: 480px;
position: relative;
border: 10px solid #fff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
overflow: hidden
}

.swimtitle {
height: 165px;
width: 480px;
position: absolute;
background-color: #050f36;
}

.swimtitlef {
height: 165px;
width: 480px;
line-height: 165px;
position: absolute;
color: #fff;
font-family: 'montserrat';
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
-moz-animation: hell 3s infinite ease-in-out;
-webkit-animation: hell 3s infinite ease-in-out;
animation: hell 3s infinite ease-in-out;
}

.swimp1 {
height: 165px;
width: 480px;
position: absolute;
top: 165px;
background-color: #fa971e;
background-blend-mode: multiply;
z-index: 2
}

.swimp2 {
height: 165px;
width: 240px;
background-color: #f75b08;
background-blend-mode: multiply;
position: absolute
}

.swimtag {
height: 165px;
width: 240px;
position: absolute;
left: 240px;
background-color: transparent
}

.swimtagg {
height: 20px;
width: 186px;
line-height: 20px;
font-family: montserrat;
text-transform: uppercase;
position: absolute;
left: 25px;
color: #fff;
letter-spacing: 2px;
border: 2px solid #fff;
font-size: 9px
}

.swimtagg::first-letter {
color: #fa971e
}

.swimpost {
height: 145px;
width: 460px;
padding: 5px;
border: 5px solid #fff;
position: absolute;
top: 165px;
background-color: #fff;
text-align: justify;
font-family: montserrat;
font-size: 9px;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 15px;
-moz-column-gap: 15px;
-webkit-column-gap: 15px;
overflow: auto;
line-height: 12px
}

.swimpost b {
font-size: 12px;
font-weight: 700;
font-style: italic;
color: #805c73;
letter-spacing: -1px
}

.swimpost::-webkit-scrollbar {
height: 2px
}

.swimpost::-webkit-scrollbar-thumb {
background-color: #805c73
}

#swim .swimtitlef {
transform: scale(1);
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
-webkit-transition-delay: 0.7s
}

#swim:hover .swimtitlef {
transform: scale(0);
opacity: 0;
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}

#swim .swimtitle {
left: 0px;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
transition: 0.5s linear;
}

#swim:hover .swimtitle {
left: 240px;
-webkit-transition: 0.5s linear;
-webkit-transition-delay: 0.7s;
-moz-transition: 0.5s linear;
-moz-transition-delay: 0.7s;
transition: 0.5s linear;
transition-delay: 0.7s;
}

#swim .swimp2 {
left: -240px;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
transition: 0.5s linear;
}

#swim:hover .swimp2 {
left: 0px;
-webkit-transition: 0.5s linear;
-webkit-transition-delay: 0.7s;
-moz-transition: 0.5s linear;
-moz-transition-delay: 0.7s;
transition: 0.5s linear;
transition-delay: 0.7s;
}

#swim .swimtag {
top: -240px;
-webkit-transition: linear 0.6s;
-moz-transition: linear 0.6s;
transition: linear 0.6s;
}

#swim:hover .swimtag {
top: 0px;
-webkit-transition-delay: 1.2s
}

#swim .swimp1 {
left: 0px;
-webkit-transition: 1s linear
}

#swim:hover .swimp1 {
left: -480px;
-webkit-transition: 1s linear
}
</style>[/html]

0

14

[html]<center>

<center><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>

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

<div style="font-family: 'Lobster', sans serif; font-size: 40px; line-height: 100%; color: #EA3D05; margin-bottom: -16px; text-shadow: 1px 0px #FFFFFF, 0px 1px #FFFFFF, -1px 0px #FFFFFF, 0px -1px #FFFFFF">i found your perfect replacement.</div>
<div style="width: 500px; height: 330px; color:#AA3806; background-color:#FEF0D6; font-family:'arial'; border-top: 15px solid #AA3806;  border-left: 1px dotted #AA3806;  border-bottom: 15px solid #AA3806; border-right: 1px dotted #AA3806; border-radius: 30px 30px 30px 30px; padding:10px;">

<table><tr><div style="width:500px;height:200px; color:#EA3D05; font-family:'georgia'; border-radius: 30px 30px 0px 0px; background: url(http://i272.photobucket.com/albums/jj19 … egsign.png);"></tr>

<tr>
<div style="border-top: 1px dotted #EA3D05;"></div>
<style> .woo { width: 480px; height: 100px; background: #FEF0D6; color: #000000; overflow: auto; font: 12px Anaheim; padding: 10px; text-align: justify; transition-duration: 0.8s;-moz-transition-duration: 0.8s;-webkit-transition-duration: 0.8s;-o-transition-duration: 0.8s; } .woo:hover { background: #FFFFFF;} </style> <div class="woo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Praesent lobortis felis consectetur tortor lacinia vitae mollis metus hendrerit. Etiam volutpat, est aliquam mollis tincidunt, turpis lacus malesuada eros, in semper quam augue ac massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Praesent lobortis felis consectetur tortor lacinia vitae mollis metus hendrerit. Etiam volutpat, est aliquam mollis tincidunt, turpis lacus malesuada eros, in semper quam augue ac massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Praesent lobortis felis consectetur tortor lacinia vitae mollis metus hendrerit. Etiam volutpat, est aliquam mollis tincidunt, turpis lacus malesuada eros, in semper quam augue ac massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum.<br></div></tr>
<div style="border-bottom: 1px dotted #EA3D05;"><br></div>
</table>

</div>

<div style="font-family: 'Lobster', sans serif; font-size: 12px; line-height: 100%; color: #000000; margin-bottom: -8px;">template made by iamnotalone @ <a href="http://z10.invisionfree.com/Shadowplay">shadowplay!</a></div>

</center>[/html]

0

15

[html]<center>
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
<style>
.sofetch { width: 350px; height: 401px;color: #000000; font: 11px trebuchet ms; text-align: justify; transition-duration: 0.8s;-moz-transition-duration: 0.8s;-webkit-transition-duration: 0.8s;-o-transition-duration: 0.8s; margin-top: 0px;}
.sofetch:hover { padding-left: 370px; }
.text {  background: #ffffff; width: 290px; color: #000000; font: 13px arial; text-transform: uppercase; padding: 10px; text-align: justify; margin-left: -350px; margin-top: -300px;}
.text:hover {}
</style>

<div style="width: 350px; overflow: hidden; background: #eeeeee; padding: 20px; border: 40px solid #1C1C1C;">

<table>
<tr>
<td>
<div style="font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 100; font-size: 26px; text-transform: uppercase; letter-spacing: 0px; background: #eeeeee; margin-left: -5px; margin-top: 340px; color: #333333; text-align: left; z-index: 1; position: absolute; padding: 5px; width: 362px;"><i>no more goodbyes. no more white lies.</i></div>

<div class="sofetch">
<div style="width: 344px; height: 421px; background: url('http://i.imgur.com/iQzBy.png');"></div>

<div class="text">
Tag: <br>
Words:  <br>
Wearing:  <br>
Notes:
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div style="border-left: 20px solid #f0b927; padding: 0px 0px 0px 3px;">
<div style="border-right: 20px solid #f0b927; padding: 0px 3px 0px 0px;">
<div style="background: #ffffff; border-left: 1px dotted #3C3B39; border-right: 1px dotted #3C3B39; color: #333333; padding: 10px 10px 10px 10px; text-align: justify; font: 12px trebuchet ms; line-height: 11pt;">

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. 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. 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></div>
</td>
</tr>
</table>
</div>
<div style="color: #999999; padding: 5px 0px 0px 0px; text-align: center; font: 10px trebuchet ms; line-height: 11pt; text-decoration: none;">
<i>template made by cody's a wizard @ <a href="http://shine.b1.jcink.com/index.php?&act=Profile&CODE=03&MID=529">SHINE</a>, <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=11054">SP</a> & <a href="http://forums.athousandfireflies.com/index.php?showuser=12443">ATF</a> !</i>
</div>
</center>[/html]

0

16

[html]<link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<style type="text/css">
.holdmeclose { width: 430px; height: 430px; padding: 20px; background-color: #f0f1f1;border: 10px solid #99B8B3; outline: 5px solid #18162E; }
</style>
<center>
<div class="holdmeclose">
<table width="430">
<tr>
<td width="215">
<center>
<div style="width: 200px; height: 100px;border: 3px solid #18162E;"><img src="http://placehold.it/200x100"></div>
<p>
<div style="width: 200px; font-family: lobster two; color: #99B8B3; font-size: 22px;line-height: 90%;">need to reply</div>
<div style="width: 200px; height: 10px; background-color: #F6CC42;"></div><p>
<div style="width: 200px; height: 100px; overflow: auto; color: #18162E;">THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br></div>
<p>
<div style="width: 200px; font-family: lobster two; color: #99B8B3; font-size: 22px;line-height: 90%;">have replied</div>
<div style="width: 200px; height: 10px; background-color: #F6CC42;"></div><p>
<div style="width: 200px; height: 100px; overflow: auto; color: #18162E;">THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br></div>
</center>
</td>
<td width="215">
<center>
<div style="width: 200px; height: 100px;border: 3px solid #18162E;"><img src="http://placehold.it/200x100"></div>
<p>
<div style="width: 200px; font-family: lobster two; color: #99B8B3; font-size: 22px;line-height: 90%;">notes/tech</div>
<div style="width: 200px; height: 10px; background-color: #F6CC42;"></div><p>
<div style="width: 200px; height: 100px; overflow: auto; color: #18162E;">THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br></div>
<p>
<div style="width: 200px; font-family: lobster two; color: #99B8B3; font-size: 22px;line-height: 90%;">completed</div>
<div style="width: 200px; height: 10px; background-color: #F6CC42;"></div><p>
<div style="width: 200px; height: 100px; overflow: auto; color: #18162E;">THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br>
THREAD HERE<br></div>
</center>
</td>
</tr>
</table>

</div><br>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5361">❤</a>

</center>[/html]

0

17

[html]<center>

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

<div style="font-family: 'Amatic SC', sans serif; font-size: 40px; line-height: 100%; color: #65727A; margin-bottom: -40px; letter-spacing: 6px;">one way mirror.</div>
<div style="width: 500px; height: 410px; color:#E6E8E3; background-color:#65727A; font-family:'arial'; border-top: 40px solid #E6E8E3;  border-left: 3px solid #E6E8E3;  border-bottom: 15px solid #E6E8E3; border-right: 3px solid #E6E8E3; border-radius: 70px 70px 0px 0px; padding:10px;">

<table>

<tr><br><div style="width:477px; height:156px; text-align: justify; overflow: auto; padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Praesent lobortis felis consectetur tortor lacinia vitae mollis metus hendrerit. Etiam volutpat, est aliquam mollis tincidunt, turpis lacus malesuada eros, in semper quam augue ac massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Praesent lobortis felis consectetur tortor lacinia vitae mollis metus hendrerit. Etiam volutpat, est aliquam mollis tincidunt, turpis lacus malesuada eros, in semper quam augue ac massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Praesent lobortis felis consectetur tortor lacinia vitae mollis metus hendrerit. Etiam volutpat, est aliquam mollis tincidunt, turpis lacus malesuada eros, in semper quam augue ac massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Praesent lobortis felis consectetur tortor lacinia vitae mollis metus hendrerit. Etiam volutpat, est aliquam mollis tincidunt, turpis lacus malesuada eros, in semper quam augue ac massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Praesent lobortis felis consectetur tortor lacinia vitae mollis metus hendrerit. Etiam volutpat, est aliquam mollis tincidunt, turpis lacus malesuada eros, in semper quam augue ac massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum. Praesent lobortis felis consectetur tortor lacinia vitae mollis metus hendrerit. Etiam volutpat, est aliquam mollis tincidunt, turpis lacus malesuada eros, in semper quam augue ac massa.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum fermentum interdum.

</div></tr>

<tr><div style="color: #BEC3BC; line-height: 170%;"><b>one way mirror, three wishes i refused to deliver.</b></div></tr>

<tr><style>
.hoi { background: #8F9A9C; color: #D7DACF; text-align: justify; width: 477px; height: 182px; transition-duration: 1.2s;-moz-transition-duration: 1.2s;-webkit-transition-duration: 1.2s;-o-transition-duration: 1.2s; opacity: 0.0; }
.hoi:hover { opacity: 1.0; }
</style>

<div style="width: 497px; height:202px; font-size: 12px; font-family: arial; background: url('http://i272.photobucket.com/albums/jj194/lapicturing/coding/elliecodingyey.png');">
<div class="hoi" style="text-align: center;padding: 10px; overflow: auto;"><br><br><br><br><br><b>tag:</b> tag here <br><b>words:</b> 000 <br><b>date:</b> 00/00/0000 </div></tr>

</table>

</div>

<div style="font-family: 'Lobster', sans serif; font-size: 12px; line-height: 100%; color: #000000; margin-bottom: -8px;">template made by iamnotalone @ <a href="http://z10.invisionfree.com/Shadowplay">shadowplay!</a></div>

</center>[/html]

0

18

[html]<link href='http://fonts.googleapis.com/css?family=Felipa' rel='stylesheet' type='text/css'>

<style type="text/css">

#fallout { width: 390px; padding: 10px; background-image: url('http://i41.tinypic.com/2hx653t.png'); border: #4B3B40 20px solid; }

.llamallama {
position: relative; 
width:350px;
height: 375px;
text-align: center;
background: #F2E7D7;
border: #00334E solid 10px;
padding: 5px;
}

.hippo {
float: left;
}

.hippo label {
background: #4B3B40;
margin-left: 5px;
padding: 5px;
position: relative;
left:140px;
top: 15px;
font-size: 5px;
color: #4B3B40;
}

.hippo [type=radio] {
display: none; 
}

.moose {
position: absolute;
width: 300px;
height: 300px;
top: 50px;
bottom: 0px;
left:20px;
right: 0px;
background: #F2E7D7;
color: #4B3B40;
padding: 10px;
border: 0px;
}

[type=radio]:checked ~ label {
background: #B985AC;
color: #B985AC;
z-index: 2;
}

[type=radio]:checked ~ label ~ .moose {
z-index: 1;
}

</style>

<center><div id="fallout"><div class="llamallama">

<div class="hippo">
<input type="radio" id="hippo-1" name="hippo-group-1" checked>
<label for="hippo-1">tab</label>
<div class="moose">
<div style="width:300px; height:300px;"><img src="http://placehold.it/300x300"></div>
</div>
</div>

<div class="hippo">
<input type="radio" id="hippo-2" name="hippo-group-1">
<label for="hippo-2">tab</label>
<div class="moose">
<div style="width: 300px; height: 300px;  text-align: justify; font-size: 9px; font-family: tahoma; line-height: 8.5px; color: #4B3B40; overflow: auto;">  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  this is a post, yes. this is a post, yes.  </div>
</div>
</div>

<div class="hippo">
<input type="radio" id="hippo-3" name="hippo-group-1">
<label for="hippo-3">tab</label>
<div class="moose">
<center><img src="http://placehold.it/200x100">
<div style="width: 200px; font-family: 'Felipa', cursive; font-size: 25px; color: #4B3B40;">??? words for tagged</div>
<div style="width: 200px; background-color:#fff; padding: 5px; text-align: justify; font-size: 9px; font-family: tahoma; line-height: 8.5px; color: #4B3B40;">  any notes that you need to add here, just add.. yeah? k? </div>
</div>
</div>

</div></div><div style="width: 400px; text-align: right; font-family: georgia, serif; font-size: 8px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=15184">THANKS LISHA</a></center>[/html]

0

19

[html]<center>

<div class="hero1">show me a hero</div>
<div class="hero2">

<div class="hero3"></div>

post goes here

</div>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5361"><div class="hero1">and i will write you a tragedy</div></a>

</center>
<style type="text/css">
.hero1 {
  width: 330px;
  border-right: 10px solid #C7DE7A;
  border-left: 10px solid #C7DE7A;
  padding: 10px 0;
  background-color: #333;
  color: #ddd;
  font-family: arial;
  font-size: 7px;
  text-transform: uppercase;
  line-height: 100%;
  letter-spacing: 2px;
  }

.hero2 {
  width: 280px;
  padding: 35px;
  background-color: #f2f2f2;
  text-align: justify;
  font-family: arial;
  font-size: 10.5px;
  line-height: 103%;
  color: #333;
  min-height:150px;
  }

.hero3 {
  position: relative;
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
  width: 100px;
  height: 100px;
  border: 5px solid #C7DE7A;
  background-image: url(http://placehold.it/100); /*IMAGE*/
  -webkit-background-size: 100px 100px;
  background-size: 100px 100px
  }

</style>[/html]

0

20

[html]<center><div style="width: 410px; text-align: justify; font-size: 9px; color:#000000; background-image: url(http://i56.tinypic.com/345buhg.jpg); line-height:90%; padding: 10px; -moz-border-radius: 250px 250px 0px 0px; border: solid 5px #c0c0c0;">
<div style="width: 400px; height:200px; border: #c0c0c0 1px solid; -moz-border-radius: 250px 250px 0px 0px; background: #ffffff url(400X200 IMAGE HERE); "></div>
<br />
<div style="width: 400px; text-align: justify; font-family: tahoma; font-size: 10px; line-height: 80%; color: #000000;"><div style="font-size: 45px; font-family: impact; color: #e8008e; text-align: center; text-shadow: #000000 1px 0px 1px; line-height: 25%; text-transform: lowercase; ">
THREAD TITLE
</div><br /><br />
<div style=" width: 400px; background-color: #e8008e; color: #ffffff; font-family: tahoma; font-size: 8px; line-height: 100%; text-transform: uppercase; padding: 0px; text-spacing: 5px; text-shadow: #000000 1px 0px 1px; -moz-border-radius: 10px;"><center><b>-----------------------run baby run don't ever look back they'll tear us apart-----------------------</b></center></div></br>
<div style="text-align: justify; font-size: 9px; color:#000000; padding: 0px 5px 0px 40px; ">

YOUR POST GOES HERE. DON'T WORRY, IT'S IN REGULAR CASE. YOU JUST POST AND POST AND POST UNTIL YOU DON'T WANT TO POST ANYMORE. IT'LL KEEP GOING AND GOING AND GOING. NO, IT DOESN'T SCROLL, SORRY. IF YOU KNOW THE CODE YOU COULD ADD IT I GUESS, BUT IT LOOKS FINE WITHOUT IT IN MY OPINION. [color=e8008e]"OH LOOK! IT'S DIALOG!"[/color]. ITALICS TOO! OH! WAIT! UNDERLINE SOMETHING!

</div><div style=" width: 400px; background-color: #e8008e; color: #ffffff; font-family: tahoma; font-size: 8px; line-height: 100%; text-transform: uppercase; padding: 0px; text-spacing: 5px; text-shadow: #000000 1px 0px 1px; -moz-border-radius: 10px;"><center><b>??? WORDS || OUTFIT</b></center></div></br></br>

<center>lyrics belong to we the kings;; template made by wraith of <a href="http://z10.invisionfree.com/Shadowplay">shadowplay</a></center>
</div></div></center>[/html]

0

21

[html]<style type='text/css'>
.name1 { font-family: share tech; font-size: 13px; font-weight: bold; letter-spacing: 0px;  line-height: 100%; text-align: right; padding-bottom: 10px; padding-right: 5px;}
.randommm { position: relative; top: 210px; float: left; padding-right: 5px; background-color: #fafafa; width: auto; height:20px; letter-spacing: 0px; font-weight: bold; font-family: share tech; font-size: 14px; line-height: 170%; text-align: center;  text-transform: uppercase; border: 1px solid #fff; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.9);  transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
#aaaaa { border: 5px solid #fff; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.9); width: 265px; height: 250px; position: relative; overflow: hidden; }
.bbbbb { width: 265px; height: 250px; position: absolute; top: -7px; left: 13px; opacity: 0;  transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
#aaaaa:hover .bbbbb { opacity: .95; top: -7px; left: 13px; }
#aaaaa:hover .randommm { opacity: 0; }
.ccccc { margin-top: 1px; margin-bottom: 1px; width: 215px; height: 190px; background-color: #fff; padding: 5px; text-align: left; font-family: arial; font-size: 10px; color: #000; line-height: 135%; overflow: auto;}
::-webkit-scrollbar { height:12px; width: 13px;}
::-webkit-scrollbar-thumb { background: #070707; }
::-webkit-scrollbar-track  {background-color: #ddd; }
</style><center><table cellpadding="8" cellspacing="1"><tr><td><div id="aaaaa"> <div style="width:265px; height: 250px; background-image: url(http://placehold.it/265x250);"></div><div class="bbbbb"><div style="height: 20px;"></div><div style="width: 230px; height: 215px; background-color: #fff; border: 5px solid #fff; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.9);"><div style="height: 5px;"></div><div class="ccccc">

you can put a disclaimer or something here. let people know how you like to plot and thread and stuff. maybe throw a little shade! you can put a disclaimer or something here. let people know how you like to plot and thread and stuff. maybe throw a little shade! you can put a disclaimer or something here. let people know how you like to plot and thread and stuff. maybe throw a little shade! you can put a disclaimer or something here. let people know how you like to plot and thread and stuff. maybe throw a little shade! 

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


<td><div id="aaaaa"> <div style="width:265px; height: 250px; background-image: url(http://placehold.it/265x250);"><div class="randommm" style="color: #000; text-align: center; padding-left: 5px;">something here</div></div><div class="bbbbb"><div style="height: 20px;"></div><div style="width: 230px; height: 215px; background-color: #fff; border: 5px solid #fff; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.9);"><div style="height: 5px;"></div><div class="ccccc"> <div class="name1">CHARACTER NAME HERE</div>

character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls!

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


<tr><td><div id="aaaaa"> <div style="width:265px; height: 250px; background-image: url(http://placehold.it/265x250);"><div class="randommm" style="color: #000; text-align: center; padding-left: 5px;">something here</div></div><div class="bbbbb"><div style="height: 20px;"></div><div style="width: 230px; height: 215px; background-color: #fff; border: 5px solid #fff; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.9);"><div style="height: 5px;"></div><div class="ccccc"> <div class="name1">CHARACTER NAME HERE</div>

character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls!

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



<td><div id="aaaaa"> <div style="width:265px; height: 250px; background-image: url(http://placehold.it/265x250);"><div class="randommm" style="color: #000; text-align: center; padding-left: 5px;">something here</div></div><div class="bbbbb"><div style="height: 20px;"></div><div style="width: 230px; height: 215px; background-color: #fff; border: 5px solid #fff; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.9);"><div style="height: 5px;"></div><div class="ccccc"> <div class="name1">CHARACTER NAME HERE</div>

character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls! character info here. put as much or as little as you want. it scrolls!

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

</table>[/html]

0

22

[html]<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<center>
<div class="corion">
<div class="corion2">
<div class="orionhead"><div style="position:relative; top:39px;">first last</div>
<div style="font-family:open sans condensed; text-transform:uppercase; position:relative; top:40px; font-size:10px; line-height:100%; color:#333;">LIST OF TRAITS GOES HERE</div>
</div>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5361"><div class="orionhead2"></div></a>
</div>
<div class="orions">

<div class="orion">
<input type="radio" id="orion-1" name="orion-group-1" checked>
<label for="orion-1">about</label>
<div class="orionc">
STUFF ABOUT CHARACTER HERE
</div>
</div>

<div class="orion">
<input type="radio" id="orion-2" name="orion-group-1">
<label for="orion-2">friends</label>
<div class="orionc">
STUFF ABOUT FRIENDS HERE
</div>
</div>

<div class="orion">
<input type="radio" id="orion-3" name="orion-group-1">
<label for="orion-3">enemies</label>
<div class="orionc">
STUFF ABOUT ENEMIES HERE
</div>
</div>

<div class="orion">
<input type="radio" id="orion-4" name="orion-group-1">
<label for="orion-4">lovers</label>
<div class="orionc">
STUFF ABOUT LOVERS HERE
</div>
</div>

</div></div>

</center>

<style type="text/css">
.corion {
  width: 400px;
  padding: 15px;
  height: 400px;
  background-color: #fcfcfc;
  border: 1px solid #eee
  }

.corion2 {
  width: 400px;
  height: 150px
  }

.orionhead {
  width: 230px;
  font-family: "Kaushan Script";
  font-size: 32px;
  text-transform: lowercase;
  line-height: 100%;
  position: relative;
  float: left;
  height: 150px;
  color: #333
  }

.orionhead2 {
  width: 150px;
  height: 115px;
  position: relative;
  float: right;
  border: 10px solid #eee;
  background-image: url(http://placehold.it/150x120);
  background-size:auto 120px;
  -webkit-background-size: auto 120px;
  background-position: center center;
  -webkit-background-position:center center;
  }

.orions {
  position: relative;
  width: 400px;
  height: 250px;
  overflow: hidden
  }

.orion {
  float: left
  }

.orion label {
  background: #eee;
  height: 25px;
  margin-bottom: 5px;
  position: relative;
  display: block;
  line-height: 25px;
  width: 100px;
  text-align: center;
  text-transform: uppercase;
  font-family: open sans condensed;
  font-weight: 300
  }

.orion [type=radio] {
  display: none
  }

.orionc {
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 5px;
  right: 0;
  width: 348px;
  height: 158px;
  background: white;
  border-bottom:20px solid white;
  padding:20px;
  overflow: auto;
  text-align: justify;
  font-family: arial;
  font-size: 9.5px;
  line-height: 95%;
  outline: 1px solid #eee;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s
  }

.orions [type=radio]:checked ~ label {
  background: white;
  z-index: 2
  }

.orions [type=radio]:checked ~ label ~ .orionc {
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  z-index: 5
  }

</style>[/html]

0

23

[html]<link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,900italic' rel='stylesheet' type='text/css'>
<style type="text/css">@import url("http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Comms/jCircles.css")</style>

<div class="jcircle" style="background-color: #00AAFF;"><div class="jcirclecredit"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=4829">&raquo</a></div>

<h1>username</h1><div class="jcircleim">

your im here
   
</div><div class="jcircle2" style="background-image: url(URL TO IMAGE)">
   
</div>
</div>[/html]

0

24

[html]<style type="text/css">
.holdme { width: 450px; height: 500px; background-image: url(http://colourlovers.com.s3.amazonaws.co … 1365114836); padding: 20px;border: 5px solid #EBE0CE; }

.holdme a { font-family: oxygen; text-tranform: uppercase; font-size: 12px; }
.holdme a:hover { color: #6BD1D6 }
</style>
<link href='http://fonts.googleapis.com/css?family=Oxygen|Crushed' rel='stylesheet' type='text/css'>
<center>
<div class="holdme"><div style="width: 490px; height: 75px; background-color: #6BD1D6; margin-top: -20px; margin-left: -20px;"><div style="text-align: center; font-family: crushed; font-size: 55px; color: #FEE9D4; letter-spacing: 1px; word-spacing: 2px; padding-top: 32px; text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);">the face claim</div><div style="width: 450px; height: 60px;background: transparent;"></div><div style="width: 400px; padding: 15px; height: 350px; background-color: #FEE9D4; border: 10px solid #C7DDBF;"><div style="float: left;"><div style=" width: 180px; height: 40px; font-family: crushed; font-size : 38px;color: #A0D9CD; text-shadow: 0px 2px 1px rgba(103, 101, 83, .7); letter-spacing: 2px;  padding-top: 10px; ">females</div>
<div style="width: 180px; height: 250px; padding: 10px; overflow: auto; font-family: oxygen; font-size: 12px; text-transform: caps;"><a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
</div>
</div>
<div style="float: right;"><div style="width: 180px; height: 40px; font-family: crushed; font-size : 38px;color: #A0D9CD; text-shadow: 0px 2px 1px rgba(103, 101, 83, .7); padding-top: 10px;letter-spacing: 2px; ">males</div><div style="width: 180px; height: 250px; padding: 10px; overflow: auto; font-family: oxygen; font-size: 12px; text-transform: caps;"><a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
<a href="#">PLAY BY NAME</a><br>
</div>
</div></div></div></div>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5361">❤</a>

</center>[/html]

0

25

[html]<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
<style type="text/css">

/* image from unsplash.com/license -- free for use stock photos */

.jgumdropcontainer1 {
   width: 500px;
   height: auto;
   background-color: #e9e5c9;
   margin: 10px auto 2px;
   font: normal normal normal 10px/110% Calibri;
   border: 10px solid #fff;
   box-shadow: 0px 3px 2px #999, 0px 0px 2px #999;;
   overflow: hidden;
   position: relative;
   text-align: justify;
}

.jgumdropcontainer1 ::-webkit-scrollbar { background: #e8e8ea; width: 5px; border: 2px solid #fff; }
.jgumdropcontainer1 ::-webkit-scrollbar-thumb { background: #736093; }
.jgumdropcontainer1 ::-webkit-scrollbar-corner { background: #fff; }

.jgumdropcontainer1 h1 {
   margin: 40px auto 0px;
   color: #243a52;
   text-align: center;
   font: normal normal normal 55px/100% 'Open Sans Condensed';
   text-transform: uppercase;
   letter-spacing: -2px;
}

.jgumdropcontainer1 h2 {
   margin: 5px auto 0px;
   text-align: center;
   font: normal normal 700 10px/100% 'Open Sans Condensed';
   text-transform: uppercase;
   color: #617c87;
   letter-spacing: 1px;
}

   .jgumdropcontainer1 h3 {
   margin: 0px auto;
   text-align: center;
   font: normal normal 700 8px/100% 'Open Sans Condensed';
   text-transform: uppercase;
   color: #243a52;
   letter-spacing: 1px;
}

.jgumdropcontainer2 {
   background-color: #b8b6c1;
   width: 500px;
   height: 450px;
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 1;
}

.jgumdropcontainer {
margin: 10px auto; /* centers it */
height: auto;
width: auto;
}

.jgumdroptabs {
margin: 0px auto;
position: relative;
right: 0px;
width: 400px;
height:  220px;
}

.jgumdroptab {
float: left;
}

.jgumdroptab label {
display: block;
width: 25px;
height: 25px;
background: #b8b6c1;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
position: relative;
left: 120px;
top: 210px;
z-index: 2;
}

.jgumdroptab input[type=radio]:checked ~ label {
background: #818094;
z-index: 2;
}

.jgumdroptab input[type=radio] {
display: none; /* DON'T EDIT */
}

.jgumdropcontent {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: white;
padding: 0px 3px;
border: 20px solid #fff;
outline: 1px solid #ccc;
overflow: auto;
}

.jgumdroptab input[type=radio]:checked ~ label ~ .jgumdropcontent {
z-index: 1;
}

.jgumdropcontent img { float:left; }

</style>

<div class="jgumdropcontainer1">

<div class="jgumdropcontainer">

<div class="jgumdroptabs">

<div class="jgumdroptab">
<input type="radio" id="jgumdroptab-1" name="jgumdroptab-group-1" checked>
<label for="jgumdroptab-1"> <! Tab One !> </label>
<div class="jgumdropcontent">

<h1>first last</h1>
<h2>nickname. age. membergroup. face claim. </h2>

</div>
</div>

<div class="jgumdroptab">
<input type="radio" id="jgumdroptab-2" name="jgumdroptab-group-1">
<label for="jgumdroptab-2"> <! Tab Two !> </label>
<div class="jgumdropcontent">

<img src="IMG URL 150x180">

<h2>dob</h2>  <h3>> month day</h3>
<h2>occupation</h2>  <h3>> position > company</h3>
<h2>hometown</h2>  <h3>> city > state > country</h3>
<h2>other</h2>  <h3>> other fields may be added</h3>

</div>
</div>

<div class="jgumdroptab">
<input type="radio" id="jgumdroptab-3" name="jgumdroptab-group-1">
<label for="jgumdroptab-3"> <! Tab Three !> </label>
<div class="jgumdropcontent">

Freestyle app

</div>
</div>

<div class="jgumdroptab">
<input type="radio" id="jgumdroptab-4" name="jgumdroptab-group-1">
<label for="jgumdroptab-4"> <! Tab Four !> </label>
<div class="jgumdropcontent">

<h1>alias</h1>
<h2>age. timezone. contact. character #.</h2>

</div>
</div>

</div>

</div>

<! REPLACE THIS IMG SRC URL IF YOU DON'T WANT THE MOUNTAINS IMAGE- IMAGE MUST BE 500PX WIDE, AS TALL AS YOU WANT - MOUNTAINS ARE 243 PX TALL - PLEASE REHOST MOUNTAINS IMAGE IF YOU USE !>
<img src="http://i.imgur.com/Vozq2JQ.png?1">

</div>
<div style="width: 500px; font-family: Calibri; margin: 0px auto; font-size: 10px; text-align: right; line-height: 110%; text-transform: uppercase;">application by nicole (<a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=26371">i</a>, <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=4829">ii</a>, <a href="http://wecode.jcink.net/index.php?showuser=268">iii</a>, <a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3717">iv</a>).</div>[/html]

0

26

[html]<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Smythe' rel='stylesheet' type='text/css'>
<style type="text/css">
.hotbod { width: 430px; height: 210px; background-color: #5F5E63; padding: 10px; border: 10px solid #E4E9EC; outline: 1px solid #5F5E63;}
.thefirst { width: 200px; height: 200px; border: 5px solid #DECBCD; position: relative; float: left;}
.thesecond { width: 200px; height: 200px; border: 5px solid #E4E9EC; position: relative; float: right; background-color: rgba(245,240,237, .85); }
.inwards { width: 175px; height: 175px; padding: 10px; text-align: justify; color: #5F5E63; overflow: auto; font-size: 10px; font-family: actor; line-height: 95%;  }
.thethird { width: 200px; height: 200px; border: 5px solid #DECBCD; position: relative; float: right;}
.thefourth { width: 200px; height: 200px; border: 5px solid #E4E9EC; position: relative; float: left; background-color: rgba(245,240,237, .85); }
.inwards { width: 175px; height: 175px; padding: 10px; text-align: justify; color: #5F5E63; overflow: auto; font-size: 10px; font-family: actor; line-height: 95%;  }
</style>
<center>
<div style="width: 430px; text-align: center; color: #5F5E63; font-family: smythe; font-size: 42px; text-transform: lowercase;line-height: 95%;">character name - age -pb</div>
<div class="hotbod"><div class="thefirst"><img src="http://placehold.it/200x200"></div><div class="thesecond"><div class="inwards">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet velit ac erat eleifend commodo gravida libero ornare. Morbi erat lorem, elementum sed vulputate sed, laoreet et augue. Sed sodales massa euismod turpis tempor pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dolor nisl, bibendum a eleifend iaculis, elementum nec massa. Donec vehicula tincidunt varius. Nunc sem nibh, venenatis eget eleifend vitae, placerat at est. Integer porttitor, lorem vel suscipit ullamcorper, enim sapien dictum dui, sit amet condimentum felis sem sed lorem. Nulla posuere pretium nisl, ornare consectetur dui dictum eu. Etiam mollis rhoncus dui, a scelerisque erat vestibulum vel. Proin eget nisi nunc, nec vestibulum magna. Vivamus mattis sagittis suscipit. Pellentesque eu tellus felis. Nunc semper aliquet orci ac ornare. Pellentesque pulvinar elementum metus elementum blandit. </div></div></div><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5361">❤</a>
<p>
<div style="width: 430px; text-align: center; color: #5F5E63; font-family: smythe; font-size: 42px; text-transform: lowercase;line-height: 95%;">character name - age -pb</div>
<div class="hotbod"><div class="thethird"><img src="http://placehold.it/200x200"></div><div class="thefourth"><div class="inwards">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet velit ac erat eleifend commodo gravida libero ornare. Morbi erat lorem, elementum sed vulputate sed, laoreet et augue. Sed sodales massa euismod turpis tempor pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dolor nisl, bibendum a eleifend iaculis, elementum nec massa. Donec vehicula tincidunt varius. Nunc sem nibh, venenatis eget eleifend vitae, placerat at est. Integer porttitor, lorem vel suscipit ullamcorper, enim sapien dictum dui, sit amet condimentum felis sem sed lorem. Nulla posuere pretium nisl, ornare consectetur dui dictum eu. Etiam mollis rhoncus dui, a scelerisque erat vestibulum vel. Proin eget nisi nunc, nec vestibulum magna. Vivamus mattis sagittis suscipit. Pellentesque eu tellus felis. Nunc semper aliquet orci ac ornare. Pellentesque pulvinar elementum metus elementum blandit. </div></div></div>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5361">❤</a>

</center>[/html]

0

27

[html]<style>
.trial {background-image: url(225X280 IMG, OTHER SIZES WILL RESIZE - RECOMMEND PORTRAIT IMAGES); }
.fleek {background-image: url(90X90IMG OR GIF, WILL RESIZE;}
</style>

<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,800,700,900' rel='stylesheet' type='text/css'>
<div id="pacify">

<div class="trial">
</div>
<div class="indigo">  <div class="fleek"></div>
<div class="royal" style="top: 160px">OCCUPATION</div>
<div class="royal" style="top: 190px">AGE</div>
<div class="royal" style="top: 220px">MEMBERGROUP</div>
</div>

<div class="strong">WORDS HERE</div>

<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908"><div class="elephant">FIRST LAST</div></a>

</div>

<style>
#pacify {height: 330px; width: 450px; border: 10px solid #fcfcfc; margin: 10px auto; position: relative; overflow: hidden}
.elephant {height: 50px; font-family: raleway; width: 450px; background: #A0DC51; position: absolute; bottom: 0; line-height: 50px; text-align: center; color: #fff; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; font-size: 25px}
.trial {height: 280px; width: 225px; position: absolute; top: 0; background-size: 280px auto; background-repeat: no-repeat;}
#pacify .trial {-webkit-filter: grayscale(0%); -webkit-transition: 0.8s; -moz-filter: grayscale(0%); -moz-transition: 0.8s; filter: grayscale(0%); transition: 0.8s}
#pacify:hover .trial {-webkit-filter: grayscale(100%); -webkit-transition: 0.8s; -moz-filter: grayscale(100%); -moz-transition: 0.8s; filter: grayscale(100%); transition: 0.8s}
.strong {height: 260px; width: 205px; position: absolute; right: 0; border-color: #fff; border-style: solid; border-width: 10px 5px 10px 10px; padding-right: 5px; font-family: calibri; font-size: 11px; text-align: justify; line-height: 12px; overflow: auto; background: #fff}
.strong p:first-letter {color: #fff; font-family: raleway; font-weight: 800; font-size: 25px; float: left; padding: 10px 8px; background: #A0DC51; margin: 0px 4px 0px 0px}
.strong p:nth-child(even):first-letter {background: #DC519B}
.strong::-webkit-scrollbar {width: 5px}
.strong::-webkit-scrollbar-thumb {background-color: #fff; border-left: 1px solid #A0DC51; border-right: 1px solid #A0DC51;border-top: 1px solid #DC519B; border-bottom: 1px solid #DC519B}
.indigo {height: 100%; width: 100%; position: absolute}
#pacify .indigo {top: -280px; -webkit-transition: 0.5s ease-in-out 0.1s; -moz-transition: 0.5s ease-in-out 0.1s; transition: 0.5s ease-in-out 0.1s;}
#pacify:hover .indigo {top: 0px; -webkit-transition: 0.5s ease-in-out 0.1s; -moz-transition: 0.5s ease-in-out 0.1s; transition: 0.5s ease-in-out 0.1s}
.fleek {height: 90px; width: 90px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 8px solid #fff; position: absolute; top: 45px; left: 59.5px; background-size: 90px 90px}
.royal {height: 25px; width: 120px; font-family: raleway; text-transform: uppercase; text-align: center; color: white; font-size: 10px; line-height: 25px; font-weight: 700; letter-spacing: 1px; left: 52.5px; position: absolute}
.royal:nth-child(even) {background: #A0DC51}
.royal:nth-child(odd) {background: #DC519B}

</style>[/html]

0

28

[html]<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>

<style type="text/css">

.dwyer { width: 550px; background-color: #000; color: #d6ef00; font-family: yanone kaffeesatz; font-size: 38px; text-transform: uppercase; text-align: center; line-height: 100%; letter-spacing: 1px; padding-top: 35px; padding-bottom: 35px; -moz-transition: all 0.9 ease-in-out; -o-transition: all 0.9 ease-in-out; -webkit-transition: all 0.9 ease-in-out; }

.dwyer:hover  { width: 550px; background-color: #d6ef00; color: #000; font-family: yanone kaffeesatz; font-size: 38px; text-transform: uppercase; text-align: center; line-height: 100%; letter-spacing: 1px; padding-top: 35px; padding-bottom: 35px  }

</style>

<center>
<div class="dwyer">mattheus j. reinhardt</div>

<div style="width: 550px; background-color: #f7f7f7; padding-top: 25px; padding-bottom: 25px ">

<center><table>
<td>
<div style="width: 245px; height: 410px; background-image: url(http://i49.tinypic.com/s1kua1.png); border: 10px solid #000"></div>
</td>

<td>
<div style="width: 210px; text-align: center; font-family: yanone kaffeesatz; font-size: 14px; color: #000; line-height: 100%; letter-spacing: -1px; text-transform: uppercase; padding-bottom: 5px">seventeen. junior. vander. legacy.</div>
<table>
<td><div style="width: 170px; height: 5px; background-color: #d6ef00"></div>
</td>

<td>
<div style="width: 35px; height: 5px; background-color: #000;"></div></td>
</table>
<div style="width: 210px; height: 350px; background-color: #fff; padding-top: 10px; padding-bottom: 10px">
<center>

<div style="width: 190px; text-align: justify; font-family: arial; font-size: 9px; line-height: 100%; overflow: auto; text-transform: lowercase; margin-left: 5px">hi this is a test </div>

</center>
</div>

<table>
<td><div style="width: 170px; height: 5px; background-color: #000"></div>
</td>

<td><div style="width: 35px; height: 5px; background-color: #d6ef00;"></div></td>
</table>

</td>
</table></center>

<div style="width: 482px">THANKS BIRGITTE!
</div>

</div>

</center>[/html]

0

29

[html]<link rel="stylesheet" type="text/css" href="http://accicodes.b1.jcink.com/uploads/accicodes/poppy.css">
<center>
<div id="poppy">
   <div id="poppy2">
    <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908"><div class="poppyi" style="background-image:url(80 X 80 GIF OR IMG HERE)">
      </div></a>
     <div class="poppyo">name is <font style="color: #e3b51e">online</font></div>
     <div class="poppym">MESSAGE HERE</div>
   </div>
   </div>
</center>[/html]

0

30

[html]<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
<center>

<style type="text/css">
.charrrn {width: 462px; color: white; background-color: black; font-size: 30px; font-family: 'sansita one'; padding: 20px}
.heypic {width: 500px; height: 200px; border-left: 1px dotted black; border-right: 1px dotted black; border-bottom: 1px dotted black; background-image: url('URL TO 500X200PX HERE don't remove the '    ')}
.unpic {width: 490px; padding: 5px; font-family: arial; text-transform: uppercase; letter-spacing: 2px; font-size: 8px; background-color: white; border-bottom: 1px solid black }
.unpicbox { height: 5px; width: 5px; background-color: white; position: relative; }
.connte {width: 460px; padding: 20px; background-color: white; color: black; text-align: justify; border-left: 1px dotted black; border-right: 1px dotted black }
.person { width: 160px; font-family: arial; text-transform: uppercase; letter-spacing: 7px; font-size: 8px; color: white; text-align: right; background-color: black }
.hist {width: 160px; font-family: arial; text-transform: uppercase; letter-spacing: 12px; font-size: 8px; color: white; text-align: right; background-color: black}
.appear {width: 160px; font-family: arial; text-transform: uppercase; letter-spacing: 8px; font-size: 8px; color: white; text-align: right; background-color: black}
.linee {width: 300px; height: 1px; background-color: black}
.pam {width: 490px; padding: 5px; font-family: arial; text-transform: uppercase; letter-spacing: 2px; font-size: 8px; background-color: black; color: white; }
.quoote {width: 300px; height: 5px; opacity:0;  padding: 100px; font-family: calibri; font-size: 9px; letter-spacing: 1px; background-color:black; color:white; text-align: center; font-style: italic; transition-duration: 2.4s;-moz-transition-duration: 2.4s; -webkit-transition-duration: 2.4s;-o-transition-duration: 2.4s;}
.quoote:hover {opacity: 1; }
.signg {font-family: 'sansita one'; font-size: 40px; font-style: italic; position: relative; top: 10px; left: -150px}
</style>

<div class="charrrn"> NAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAME
NAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAME
NAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAME
NAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAMENAME</div>
<div class="heypic">
<div class="quoote"> <br><br><br><br><br><br>
<div class="signg">"</div>
YOUR QUOTES HERE YOUR QUOTES HERE</div></div>
<div class="pam">alias ▲ group ▲ occupation</div>
<div class="connte">
<table><td><div class="linee"></div></td><td><div class="person">► personality</div></td></table> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu velit non eros condimentum consectetur a at mauris. Integer fermentum placerat ligula venenatis lobortis. Nullam varius, ligula eget venenatis venenatis, risus sem fermentum tellus, in pulvinar lectus mauris vitae augue. Suspendisse libero magna, auctor nec suscipit ultricies, blandit sed felis. Aenean bibendum, est ut imperdiet facilisis, libero arcu tincidunt turpis, a ullamcorper diam sapien in neque. Proin in justo eget nisi fermentum aliquam. Nullam dolor dolor, blandit id erat at, auctor pretium arcu.<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu velit non eros condimentum consectetur a at mauris. Integer fermentum placerat ligula venenatis lobortis. Nullam varius, ligula eget venenatis venenatis, risus sem fermentum tellus, in pulvinar lectus mauris vitae augue. Suspendisse libero magna, auctor nec suscipit ultricies, blandit sed felis. Aenean bibendum, est ut imperdiet facilisis, libero arcu tincidunt turpis, a ullamcorper diam sapien in neque. Proin in justo eget nisi fermentum aliquam. Nullam dolor dolor, blandit id erat at, auctor pretium arcu.</div>

<div class="connte"><table><td><div class="linee"></div></td><td><div class="hist">► history</div></td></table> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu velit non eros condimentum consectetur a at mauris. Integer fermentum placerat ligula venenatis lobortis. Nullam varius, ligula eget venenatis venenatis, risus sem fermentum tellus, in pulvinar lectus mauris vitae augue. Suspendisse libero magna, auctor nec suscipit ultricies, blandit sed felis. Aenean bibendum, est ut imperdiet facilisis, libero arcu tincidunt turpis, a ullamcorper diam sapien in neque. Proin in justo eget nisi fermentum aliquam. Nullam dolor dolor, blandit id erat at, auctor pretium arcu.<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu velit non eros condimentum consectetur a at mauris. Integer fermentum placerat ligula venenatis lobortis. Nullam varius, ligula eget venenatis venenatis, risus sem fermentum tellus, in pulvinar lectus mauris vitae augue. Suspendisse libero magna, auctor nec suscipit ultricies, blandit sed felis. Aenean bibendum, est ut imperdiet facilisis, libero arcu tincidunt turpis, a ullamcorper diam sapien in neque. Proin in justo eget nisi fermentum aliquam. Nullam dolor dolor, blandit id erat at, auctor pretium arcu.</div>

<div class="connte"><table><td><div class="linee"></div></td><td><div class="appear">► appearance</div></td></table> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu velit non eros condimentum consectetur a at mauris. Integer fermentum placerat ligula venenatis lobortis. Nullam varius, ligula eget venenatis venenatis, risus sem fermentum tellus, in pulvinar lectus mauris vitae augue. Suspendisse libero magna, auctor nec suscipit ultricies, blandit sed felis. Aenean bibendum, est ut imperdiet facilisis, libero arcu tincidunt turpis, a ullamcorper diam sapien in neque. Proin in justo eget nisi fermentum aliquam. Nullam dolor dolor, blandit id erat at, auctor pretium arcu.<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu velit non eros condimentum consectetur a at mauris. Integer fermentum placerat ligula venenatis lobortis. Nullam varius, ligula eget venenatis venenatis, risus sem fermentum tellus, in pulvinar lectus mauris vitae augue. Suspendisse libero magna, auctor nec suscipit ultricies, blandit sed felis. Aenean bibendum, est ut imperdiet facilisis, libero arcu tincidunt turpis, a ullamcorper diam sapien in neque. Proin in justo eget nisi fermentum aliquam. Nullam dolor dolor, blandit id erat at, auctor pretium arcu.</div>

<div class="pam">your name ▲ age</div>
<a href=http://z10.invisionfree.com/Shadowplay/index.php?showuser=7567">•••</a>
</center>[/html]

0


Вы здесь » fyfd » обсуждалка » html


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