Бурлящие страсти, интригующие повороты, умопомрачительные встречи, незабываемые впечатления, - приправим домашним уютом и теплом особый коктейль семьи Space51.
Соблазнительно? Не сомневайся, твоя квартира ждёт.
- Почему ты не сказал, что нельзя заходить в сарай? Почему ты не сказал, что вы держите хищных зверей? - Она остановилась, оттолкнув от себя Деллакорта, и прижав руки к лицу. learn more
У Вас отключён javascript.
В данном режиме, отображение ресурса
браузером не поддерживается

free love

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

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


Вы здесь » free love » наработки ленивца » код достижений


код достижений

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

1

Код:
<!--record--><center>
<div style="width: 515px; background: #000; padding: 25px; overflow: hidden;">
<img src="https://i.imgur.com/R5uYS6B.gif"> <img src="https://i.imgur.com/N4eYNSB.gif"><br> <br>
<img src="https://i.imgur.com/B8fo1K6.gif"> <img src="https://i.imgur.com/sp0yZ1D.gif"><br> <br>
<img src="https://i.imgur.com/OQoLPAX.gif"> <img src="https://i.imgur.com/BVONGOi.gif"><br> <br>
<font size="2" color="white" ">СЕНТЯБРЬ 2017, НЬЮ-ЙОРК<br></font>
<font size="2" color="white" "><i>А у нас нет моральных ценностей, вся наша жизнь - <BR> сплошной нигилизм, цинизм, сарказм и оргазм.</i></font><br>
</div><br>
</center>

[html] <div class='postcolor'> <center><link href='http://fonts.googleapis.com/css?family=Aldrich|Cookie' rel='stylesheet' type='text/css'>

<style type="text/css">

.jtabs { position: relative; width: 400px; height: 310px; clear: both; background: #C6E5D9; }
.jtab { float: left; }
.jtab label { background: #D68189; padding: 6px; margin-left: 10px; position: relative; left: 80px; display: block; top: 292px; z-index: 2; border-radius: 9px 9px 9px 9px; -moz-border-radius: 9px 9px 9px 9px; -webkit-border-radius: 9px 9px 9px 9px; }
.jtab [type=radio] { display: none; baseline-tab-shift: true, retrieve; }
.jcontent { position: absolute; top: 0px; bottom: 25px; left: 0px; right: 0px; background: #faf1de; padding: 20px; }
[type=radio]:checked ~ label { background: #E94E77; z-index: 2; }
[type=radio]:checked ~ label ~ .jcontent { z-index: 1; }

.jzgname { width: 200px; height: 18px; background: #E94E77; text-transform: uppercase; text-align: center; color: white; font-family: 'Aldrich', sans-serif; font-size: 10px; padding-top: 12px; }
.jzgtitle { text-align: center; color: #E94E77; font-family: 'Cookie', cursive; font-size: 55px; margin-top: 13px; }
.jzgsub { text-align: center; color: #D68189; text-transform: lowercase; font-size: 13px; font-family: calibri; margin-top: 7px; font-variant: small-caps; letter-spacing: 2px; }
.jzgcontent { color: black; font-family: calibri; font-size: 11px; line-height: 100%; text-align: justify; width: 300px; margin-top: 15px; }
.jzgcontent  a:link, .jzgcontent  a:visited, .jzgcontent  a:active { color: black; font-family: calibri; font-size: 11px; }

</style>

<div class="jtabs">

<div class="jtab">
<input type="radio" id="jtab-1" name="jtab-group-1" checked>
<label for="jtab-1"></label>
<div class="jcontent">
<div class="jzgtitle">About the Coder</div>
<div class="jzgsub">he's got looks that books take pages to tell</div>
<div class="jzgcontent">Hello! I'm Jazmine, and thanks for checking out my gallery! I've been coding doHTML for over two years, and skinning for about four. I love making thread templates, application templates, signature codes, and IM templates. Higher numbers indicate newer templates. Feel free to poke around, but if you use something, be sure to keep the credit on! <b>Current rank: Intermediate</b>
<p>
<a href="http://oi43.tinypic.com/9gxyll.jpg">superhero template</a> § <a href="http://i112.photobucket.com/albums/n163/lil_azn_hpfan/SPawards/colourpalette-jaz.png">color palette template</a> § <a href="http://oi44.tinypic.com/34pxf2o.jpg">dear diary</a> § <a href="http://i.imgur.com/qk3SAqu.png">frozen images</a> § <a href="http://i.imgur.com/Z30Eei2.png">font madness</a> § <a href="http://i36.photobucket.com/albums/e26/Vanessa_x17/sp%20awards/156-random1.jpg">random palette (template)</a></div>
</div>
</div>
 
<div class="jtab">
<input type="radio" id="jtab-2" name="jtab-group-1">
<label for="jtab-2"></label>
<div class="jcontent">
<div class="jzgtitle">Thread Templates</div>
<div class="jzgsub">he's got a face to make you fall on your knees</div>
<div class="jzgcontent"><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47048">rumor has it</a> § <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47480">like no other lover</a> § <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=48477">king of anything</a> § <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=48515">like grace kelly</a> § <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=52385">a taste of what you paid for</a></div>
</div>
</div>
 
<div class="jtab">
<input type="radio" id="jtab-3" name="jtab-group-1">
<label for="jtab-3"></label>
<div class="jcontent">
<div class="jzgtitle">Shipping Templates</div>
<div class="jzgsub">he's got money in the bank to thank and i guess</div>
<div class="jzgcontent"><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47301">waiting for me</a></div>
</div>
</div>

<div class="jtab">
<input type="radio" id="jtab-4" name="jtab-group-1">
<label for="jtab-4"></label>
<div class="jcontent">
<div class="jzgtitle">Site Templates</div>
<div class="jzgsub">you could think he's living at ease</div>
</div>
</div>
 
<div class="jtab">
<input type="radio" id="jtab-5" name="jtab-group-1">
<label for="jtab-5"></label>
<div class="jcontent">
<div class="jzgtitle">Technology Templates</div>
<div class="jzgsub">like lovers on the open shore what's the matter</div>
</div>
</div>

<div class="jtab">
<input type="radio" id="jtab-6" name="jtab-group-1">
<label for="jtab-6"></label>
<div class="jcontent">
<div class="jzgtitle">Signature Templates</div>
<div class="jzgsub">when you're sitting there with so much more</div>
</div>
</div>

<div class="jtab">
<input type="radio" id="jtab-7" name="jtab-group-1">
<label for="jtab-7"></label>
<div class="jcontent">
<div class="jzgtitle">Other Templates</div>
<div class="jzgsub">when you're wondering what the hell to be</div>
</div>
</div>
 
<div class="jtab">
<input type="radio" id="jtab-8" name="jtab-group-1">
<label for="jtab-8"></label>
<div class="jcontent">
<div class="jzgtitle">Skins</div>
<div class="jzgsub">do you wish you were ugly like me?</div>
</div>
</div>

<div class="jtab">
<input type="radio" id="jtab-9" name="jtab-group-1">
<label for="jtab-9"></label>
<div class="jcontent">
<div class="jzgtitle">Tutorials</div>
<div class="jzgsub">blame it on the girls who know what to do</div>
</div>
</div>
 
<div class="jtab">
<input type="radio" id="jtab-10" name="jtab-group-1">
<label for="jtab-10"></label>
<div class="jcontent">
<div class="jzgtitle">Challenges</div>
<div class="jzgsub">blame it on the boys who keep hitting on you</div>
</div>
</div>

<div class="jtab">
<input type="radio" id="jtab-11" name="jtab-group-1">
<label for="jtab-11"></label>
<div class="jcontent">
<div class="jzgtitle">Archived</div>
<div class="jzgsub">blame it on your momma for the things she said</div>
</div>
</div>

</div>

<div style="width: 400px; height: 45px; padding-top: 15px; background:url(http://i44.tinypic.com/2ijgh7p.png)"><div class="jzgname">jazmine's coding gallery</div></div>

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

[html]<div class='postcolor'> <center><link href='http://fonts.googleapis.com/css?family=Crushed' rel='stylesheet' type='text/css'>

<div style="margin-bottom: -37px">

<div style="background-color: #c99ca8; width: 295px; position: relative; left: 50px; bottom: -20px; font: 43px crushed; color: #f9f9f9; text-align: center; text-transform: uppercase; letter-spacing: -3px; text-shadow: -1px 0 #aaa, 0 1px #aaa, 1px 0 #aaa, 0 -1px #aaa;">you're so hypnotizing</div>

<div style="width: 434px; height: 50px; background-image: url(http://i409.photobucket.com/albums/pp17 … birdbg.png); -moz-border-radius: 35px 35px 0px 0px; -webkit-border-radius: 35px 35px 0px 0px; margin-top: -50px"></div>

<div style="width: 434px; height: 5px; background-color: #f9f9f9;"></div>

<div style="width: 434px; height: 5px; background-color: #eee;"></div>

<div style="width: 434px; height: 5px; background-color: #aaa;"></div>

<div style="width: 434px; height: 5px; background-color: black;"></div>

<div style="background-color: #c99ca8; height: 7px; width: 434px;"></div>

<div style="background-color: #ddd; width: 434px; padding: 2px 0px 2px 0px; border-bottom: 7px solid #c99ca8;">

<table><td><div style="background-color: #f9f9f9; width: 200px; height: 250px; padding: 4px"><div style="width: 200px; height: 250px; background-image: url(http://i409.photobucket.com/albums/pp17 … _500-1.jpg);"></div></div></td>

<td><div style="position: relative; top: -12px; width: 200px; height: 225px; overflow: auto; font: 10px trebuchet ms; line-height: 100%; color: black; text-align: justify; padding: 0px 5px 5px 5px">Purnia Fray walked down the cobbled street of District 12, making her daily rounds and accumulating mixed expressions from people standing near her. Some wore smiles; some wanted to spit in her direction but didn’t have the courage to do so. If they had, they knew they’d get the wrath of a lion, and people didn’t dare cross a peacekeeper, even if they were usually as friendly as N
</div></td></table></div></div>

<div style="width: 205px; background-color: #c99ca8; position: relative; right: -110px; top: 3px; font: 7px terminal; text-align: justify; text-transform: uppercase; line-height: 100%; color: black; padding: 5px">words: 580. outfit: <a href='http://www.polyvore.com/peacekeeper_lol/set?id=31290488' target='_blank' rel='nofollow'><font style="font: 7px terminal; color: white;">black uniform</font></a> (something like that). notes: someone cheer her up! template by kristen loves you! of atf, sds, sp, and caution.</div></center> <br /><br /><span class='edit'>This post has been edited by <b>KRISTEN LOVES YOU!</b> on Jul 3 2011, 12:14 AM</span> </div>[/html]

0

2

[html]<div class='postcolor'> <center>
<link href='http://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>
<style type="text/css" >
.gallery {opacity: 0.0;transition-duration: 0.6s;-moz-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;-o-transition-duration: 0.6s;}
.gallery:hover { opacity: .9}</style>

<div style="width:590px; background-image:url(http://i.imgur.com/FadwJUF.png); padding:1px;"><br /><br />
<div style="width:360px; font-family: Six Caps, sans-serif; font-size:45px; text-transform:uppercase; text-align:center; line-height:100%; color:f7e8c5; text-shadow: #fabbbb 1px 1px 1px;">
Rory Williams' Coding Gallery
</div>
<div style="width:570px; font-family:calibri; font-size:11px; text-align:justify; line-height:90%; letter-spacing:1px; color:#ccc;">
Hi! Thanks for coming to check out my gallery in the works. I've been coding for about two years, off and on. This has probably been my longest break yet, so go easy on me if some of my codes are not up to par. If you'd like to request anything, I'd be more than happy to try and fulfill anything you may want. Please do not steal any of my codes, as I have worked very hard on each and every one of them. I will attempt to update them regularly.  </div>
<p></p>
<table>
<tr>
<td><div style="background-image:url(http://i.imgur.com/Ev7cYFd.jpg);"><div class="gallery">

<div style="width:122px; height:120px; background-color:#fff; padding:30px; font-family:calibri; font-size:11px; text-align:justify;">
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47100' target='_blank' rel='nofollow'>ONE.</a>
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47101' target='_blank' rel='nofollow'>TWO.</a>
</div></div>

</td>
<td><div style="background-image:url(http://i.imgur.com/kj4az3U.jpg);"><div class="gallery">

<div style="width:122px; height:120px; background-color:#fff; padding:30px; font-family:calibri; font-size:11px; text-align:justify;">
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47102' target='_blank' rel='nofollow'>ONE.</a>
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47103' target='_blank' rel='nofollow'>TWO.</a>
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47104' target='_blank' rel='nofollow'>THREE.</a>
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47106' target='_blank' rel='nofollow'>FOUR.</a>
</div></div>

</td>
<td><div style="background-image:url(http://i.imgur.com/eDI6IvZ.jpg);"><div class="gallery">

<div style="width:122px; height:120px; background-color:#fff; padding:30px; font-family:calibri; font-size:11px; text-align:justify;">
NONE YET.
</div></div>

</td></tr>
<tr>
<td><div style="background-image:url(http://i.imgur.com/iyZNxhK.jpg);"><div class="gallery">

<div style="width:122px; height:120px; background-color:#fff; padding:30px; font-family:calibri; font-size:11px; text-align:justify;">
NONE YET.
</div></div>

</td>
<td><div style="background-image:url(http://i.imgur.com/81RcUmz.jpg);"><div class="gallery">

<div style="width:122px; height:120px; background-color:#fff; padding:30px; font-family:calibri; font-size:11px; text-align:justify;">
NONE YET.
</div></div>

</td><td><div style="background-image:url(http://i.imgur.com/188n7qn.jpg);"><div class="gallery">

<div style="width:122px; height:120px; background-color:#fff; padding:30px; font-family:calibri; font-size:11px; text-align:justify;">
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47107' target='_blank' rel='nofollow'>ONE</a>
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47108' target='_blank' rel='nofollow'>TWO.</a>
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47109' target='_blank' rel='nofollow'>THREE.</a>
</div></div>

</td></tr><tr>
<td><div style="background-image:url(http://i.imgur.com/scQWcX3.jpg);"><div class="gallery">

<div style="width:122px; height:120px; background-color:#fff; padding:30px; font-family:calibri; font-size:11px; text-align:justify;">
NONE YET.
</div></div>

</td>
<td><div style="background-image:url(http://i.imgur.com/KKM0hU3.jpg);"><div class="gallery">

<div style="width:122px; height:120px; background-color:#fff; padding:30px; font-family:calibri; font-size:11px; text-align:justify;">
NONE YET.
</div></div>

</td>
<td><div style="background-image:url(http://i.imgur.com/EsPluNR.jpg);"><div class="gallery">

<div style="width:122px; height:120px; background-color:#fff; padding:30px; font-family:calibri; font-size:11px; text-align:justify;">
NONE YET.</div></div>

</td></tr>
</table>
<p></p>
</div>
</center>  </div>[/html]

0

3

[html]<div class='signature'><center><div style="width: 460px;"><div style="width: 450px; height: 40px; background-color: #663333;"><div style="font-family: arial; font-size: 7px; color: #fff; text-transform: uppercase; letter-spacing: 2px; padding-top: 13px; padding-bottom: 20px;"><center>If I had one wish.. </div></div><table cellspacing="0"cellpadding="0"><tr><td valign="top"><div style="width: 210px; height: 35px; background-color: #B33131;"><center><div style="width: 195px; text-align: justify; color: #fff; font-family: arial; font-size: 7px; line-height: 7pt; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px;"><center>Damn it I love you, there you go </div> </center></div><div style="width: 210px; height: 5px; background-color: #f1f1f1;"></div><div style="width: 210px; height: 140px; background-image: url(http://media.tumblr.com/tumblr_makeqsY1 … o8_250.gif);"></div></td><td valign="top"><div style="width: 5px; height: 160px; background-color: #fff;"></div></td><td valign="top"><div style="width: 15px; height: 180px; background-color: #F0D878;"></div></td><td valign="top"><div style="width: 5px; height: 26px; background-color: #fff;"></div></td><td valign="top"><div style="width: 215px; height: 138px; background-image: url(http://i44.tinypic.com/dls65e.gif);"></div><div style="width: 215px; height: 10px; background-color: #fff;"></div><div style="width: 215px; height: 32px; background-color: #B33131;"><center><div style="width: 195px; text-align: justify; color: #fff; font-family: arial; font-size: 7px; line-height: 7pt; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px;"><center> I’m pretending that everything’s ok, So many masks I’m wearing on my own face.</div> </center> </div></td></tr></table><div style="width: 450px; height: 30px; background-color: #663333;"><div style="font-family: arial; font-size: 7px; color: #fff; text-transform: uppercase; letter-spacing: 2px; padding-top: 7px; padding-bottom: 14px;"><center>It would be for you to take that ring</div></div></center></div>[/html]

0

4

[html]<div class='postcolor'> <center><link href='http://fonts.googleapis.com/css?family=Lobster'rel='stylesheet' type='text/css'>

<style type="text/css">.drink1 {opacity: 0; width: 200px; height: 100px;  transition-duration: 0.5s;  -moz-transition-duration: 0.5s;  -webkit-transition-duration: 0.5s;  -o-transition-duration: 0.5s;}
.drink1:hover {opacity: 1;}

.drink2 {width: 195px; height: 94px; background-color: #eb9d8d; font-family: Calibri; font-size: 10px; text-transform: uppercase; padding; color: white; letter-spacing: 1px; border-bottom: 1px dotted #bb5750; padding: 3px;}</style>

<div style="width: 550px; height: 30px; background-color: #bb5750; font-family: Lobster; font-size: 28px; text-transform: lowercase; padding-top: 15px; color: white; letter-spacing: 1px; text-shadow: #f0d2cc 0.0em 0.1em 0.1em">drink while the water is clean</div>

<div style=" width: 550px;  background-color: #f8f2f1">
<div style="width: 350px; height: 50px; background-color: #eb9d8d; font-family: Calibri; font-size: 10px; text-transform: uppercase; padding: 5px; color: white; letter-spacing: 1px; border-bottom: 1px dotted #bb5750; text-align: justify;">Welcome to my gallery! My name is Ash, I'm 19 and I'm from Spain. I'm new in this, so coments are loved <3 The gallery is a little bit empty at the moment, but don't worry because I'll start updating very soon. Hope you like my stuff!</div>

<br />

<table>

<tr><td><div style="font-family: Lobster; font-size: 24px; text-transform: lowercase; padding-top: 15px; color: #bb5750; letter-spacing: 1px; text-align: center;">Shippers</div><div style="width: 200px; height: 100px; background-image: url(http://i.imgur.com/PIwNP4c.png)"><div class="drink1"><div class="drink2">coming soon</div></div></td> <td><div style="font-family: Lobster; font-size: 24px; text-transform: lowercase; padding-top: 15px; color: #bb5750; letter-spacing: 1px; text-align: center;">Trackers</div><div style="width: 200px; height: 100px; background-image: url(http://i.imgur.com/FshctvG.png)"><div class="drink1"><div class="drink2">coming soon</div></div></td></tr>

<tr><td><div style="font-family: Lobster; font-size: 24px; text-transform: lowercase; padding-top: 15px; color: #bb5750; letter-spacing: 1px; text-align: center;">Signatures</div><div style="width: 200px; height: 100px; background-image: url(http://i.imgur.com/rmOtTnJ.png)"><div class="drink1"><div class="drink2"><a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=48423' target='_blank' rel='nofollow'>Follow me down</a> ;; <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=50412' target='_blank' rel='nofollow'>Can't haunt me</a> ;;</div></div></td> <td><div style="font-family: Lobster; font-size: 24px; text-transform: lowercase; padding-top: 15px; color: #bb5750; letter-spacing: 1px; text-align: center;">Roleyplay threads</div><div style="width: 200px; height: 100px; background-image: url(http://i.imgur.com/hmSQEgX.png)"><div class="drink1"><div class="drink2"><a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=48329' target='_blank' rel='nofollow'>Jump On It</a> ;; <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=48328' target='_blank' rel='nofollow'>Wanna be loved</a> ;;</div></div></td></tr>

<tr><td><div style="font-family: Lobster; font-size: 24px; text-transform: lowercase; padding-top: 15px; color: #bb5750; letter-spacing: 1px; text-align: center;">Site Threads</div><div style="width: 200px; height: 100px; background-image: url(http://i.imgur.com/amar8y4.png)"><div class="drink1"><div class="drink2"><a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=48409&st=0&#last' target='_blank' rel='nofollow'>We Can't Stop</a> ;;</div></div></td> <td><div style="font-family: Lobster; font-size: 24px; text-transform: lowercase; padding-top: 15px; color: #bb5750; letter-spacing: 1px; text-align: center;">Others</div><div style="width: 200px; height: 100px; background-image: url(http://i.imgur.com/FXukQUC.png)"><div class="drink1"><div class="drink2">coming soon</div></div></td></tr>

</table>

<br /> <br /></div><div style="width: 550px; height: 30px; background-color: #bb5750; font-family: Lobster; font-size: 28px; text-transform: lowercase; padding-top: 15px; color: white; letter-spacing: 1px; text-shadow: #f0d2cc 0.0em 0.1em 0.1em">follow me down to the river</div></center>  </div>[/html]

0

5

[html]  <div class='postcolor'> <style type="text/css">
#gallery { width: 400px; height: 575px; overflow: hidden; background-image: url(http://i.imgur.com/79gnntr.png); }
#gallery #title { height: 15px; width: 60px; margin-top: 260px; z-index: 10; background-color: white; padding: 20px; font: italic 10px times; letter-spacing: 3px; opacity: 1;  transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; }
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten { background-color: white; color: #3e4f65; font-family: georgia; font-size: 8.5px; letter-spacing: 0px; position: absolute; padding: 20px 10px 10px 10px; width: 160px; margin: 15px -20px; height: 65px; overflow: auto; opacity: 0; text-align: justify; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; }
#two { margin: 127px 50px; }
#three { margin: 240px -20px; }
#four { margin: 353px 50px; }
#five  { margin: 466px -20px; }
#ten { margin: 15px 180px; }
#six { margin: 127px 250px; }
#seven { margin: 240px 180px; }
#eight { margin: 353px 250px; }
#nine { margin: 466px 180px; }

::-webkit-scrollbar { height: 5px; width: 5px; }
::-webkit-scrollbar-track { background-color: #3e4f65; }
::-webkit-scrollbar-thumb { background-color: #98a4ae; }

#gallery:hover #title { opacity: 0; }
#gallery:hover #one { opacity: 1; transition-delay:0.2s; margin: 15px; }
#gallery:hover #two { opacity: 1; transition-delay:0.4s; margin: 127px 15px; }
#gallery:hover #three { opacity:1; transition-delay:0.6s; margin: 240px 15px; }
#gallery:hover #four { opacity:1; transition-delay:0.8s; margin: 353px 15px; }
#gallery:hover #five { opacity:1; transition-delay:1.0s; margin: 466px 15px; }
#gallery:hover #ten { opacity:1; transition-delay:1.2s; margin: 15px 207px; }
#gallery:hover #six { opacity:1; transition-delay:1.4s; margin: 127px 207px; }
#gallery:hover #seven { opacity:1; transition-delay:1.6s; margin: 240px 207px; }
#gallery:hover #eight { opacity:1; transition-delay:1.8s; margin: 353px 207px; }
#gallery:hover #nine { opacity:1; transition-delay:2.0s; margin: 466px 207px; }

.header { background-color: #3e4f65; color: white; letter-spacing: 1px; font-size: 8px; position: absolute; text-align: center; width: 100%; padding: 3px 0 3px 10px; margin: -20px -20px 0px -20px; text-transform: uppercase; }
</style>

<center><div id="gallery"><div id="title">hover</div><div style="margin-top: -315px;">

<div id="one" style="width: 350px;"><div class="header">about autumn</div>
I'm Autumn but you can call me Minnie~ Autumn's just an alias but it's such a pretty name! I love too too much! I'm known under multiple names but for now, I'm just Autumn! I'm seventeen, living in New York City, in my senior year! These codes are just things I like doing in my spare time and I hope you enjoy them! If you have any questions about them, feel free to PM me!
</div>

<div id="two"><div class="header">plotters / want ads</div>
» <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=53227">path of a lightning bolt</a> -- with hover and reply!<br />
</div>

<div id="three"><div class="header">threads</div>
» <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=53290">light a cigarette</a> -- simple with scroll/no scroll options<br />
» <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=53434">took a pill or maybe two</a> -- simple with hover<br />
</div>

<div id="four"><div class="header">technology</div>
» <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=53569">where the church bells cry</a> -- black iphone 5 for texts<br />
</div>

<div id="five"><div class="header">site necessities</div>
» <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=53362">eyes of apple green</a> -- mini profile with hover<br />
</div>

<div id="six"><div class="header">signatures</div>
» <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=53560">old rusty guitar</a> -- with links and mp3<br />
</div>

<div id="seven"><div class="header">instant messengers</div>
» <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=53517">making up the pavement</a> -- simple<br />
</div>

<div id="eight"><div class="header">miscellaneous</div>
» Coming soon! I promise!<br />
</div>

<div id="nine"><div class="header">skins</div>
» Coming soon! I promise!<br />
</div>

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

0

6

[html]      <div class='postcolor'> <link href='http://fonts.googleapis.com/css?family=Oswald:400,300|Yanone+Kaffeesatz' rel='stylesheet' type='text/css'><center><style type="text/css">

#reegallery {overflow:hidden;width: 480px;
height: 350px;}

.st-container {
position: relative;
width: 480px;
height: 350px;
top: 0;
left: 0;
font-family: 'Oswald', sans-serif;
background-image:url(http://i.imgur.com/PVjzHHg.png);
z-index: 9999999
}

.st-container > input,
.st-container > a {
position: absolute;
font-family: 'Yanone Kaffeesatz', sans-serif;
text-transform: uppercase;
bottom: 0px;
width: 20%;
cursor: pointer;
font-size: 16px;
height: 34px;
line-height: 34px;
}

.st-container > input {
opacity: 0;
z-index: 1000;
}

.st-container > a {
z-index: 10;
font-family: Yanone Kaffeesatz, sans-serif;
width:480px;
background: #222222;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}

.st-container:before {
content: "'';
position: absolute;
width: 480px;
height: 30px;
background: #222222;
z-index: 9;
bottom: 0;
}

#st-control-1, #st-control-1 + a {
left: 0%;
width:25%
}

#st-control-2, #st-control-2 + a {
left: 25%;
width: 25%

}

#st-control-3, #st-control-3 + a {
left: 50%;
width: 25%
}

#st-control-4, #st-control-4 + a {
left: 75%;
width:25%
}

.st-container > input:checked + a,
.st-container > input:checked:hover + a{
background: #191919;
}

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
bottom: 25px;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #191919;
border-width: 20px;
left: 50%;
margin-left: -20px;
}

.st-container > input:hover + a{
background: #191919;
}

.st-container > input:hover + a:after {
border-bottom-color: #191919;
}

.st-scroll,
.st-panel {
position: relative;
width: 480px;
height: 350px;
}

.st-scroll {
top: 0;
left: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}

.st-panel{
background:transparent;
overflow: hidden;
}

#st-control-1:checked ~ .st-scroll {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
#st-control-2:checked ~ .st-scroll {
-webkit-transform: translateY(-400px);
-moz-transform: translateY(-400px);
-o-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
}
#st-control-3:checked ~ .st-scroll {
-webkit-transform: translateY(-750px);
-moz-transform: translateY(-750px);
-o-transform: translateY(-750px);
-ms-transform: translateY(-750px);
transform: translateY(-750px);
}

#st-control-4:checked ~ .st-scroll {
-webkit-transform: translateY(-1105px);
-moz-transform: translateY(-1105px);
-o-transform: translateY(-1105px);
-ms-transform: translateY(-1105px);
transform: translateY(-1105px);
}

.st-panel cover {
color: #191919;
text-shadow: 1px 1px 1px rgba(41,31,34, 0.8); ;
position: absolute;
font-size: 54px;
font-weight: 400;
width: 80%;
left: 10%;
text-align: center;
text-transform: uppercase;
line-height: 50px;
margin: -70px 0 0 0;
padding: 10px 0px;
top: 50%;
-webkit-backface-visibility: hidden;
z-index: 99999999
}

.st-panel h2 {
color: #191919;
text-shadow: 1px 1px 1px rgba(41,31,34, 0.8); ;
position: absolute;
font-size: 54px;
font-weight: 400;
width: 80%;
left: 10%;
text-align: center;
text-transform: uppercase;
line-height: 50px;
margin: -70px 0 0 0;
padding: 10px 0px;
top: 30%;
-webkit-backface-visibility: hidden;
z-index: 99999999
}

.reebody { opacity:0; font-size: 10px; font-family: georgia; text-align: justify; color: #000; max-height: 190px; transition-duration: 0.8s;  -moz-transition-duration: 0.8s;  -webkit-transition-duration: 0.8s;  -o-transition-duration: 0.8s; background: white;width: 325px; margin-top: 20% }
.reebody:hover { opacity:1; transition-duration: 0.8s;  -moz-transition-duration: 0.8s;  -webkit-transition-duration: 0.8s;  -o-transition-duration: 0.8s; z-index: 1 }
.reebodyc { opacity:0; font-size: 10px; font-family: georgia; text-align: justify; color: #000; max-height: 200px; transition-duration: 0.8s;  -moz-transition-duration: 0.8s;  -webkit-transition-duration: 0.8s;  -o-transition-duration: 0.8s; background: white;width: 325px; margin-top: 30% }
.reebodyc:hover { opacity:1; transition-duration: 0.8s;  -moz-transition-duration: 0.8s;  -webkit-transition-duration: 0.8s;  -o-transition-duration: 0.8s; z-index: 1 }
.reebody h3 { text-align: right; text-transform: uppercase; color: black; font: 15px oswald; line-height: 100%}
.reebody h4 { text-align: left; text-transform: uppercase; color: black; font: 15px oswald; line-height: 100%}

#st-control-1:checked ~ .st-scroll #st-panel-1 cover,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2{
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
0% {
    -webkit-transform: translateY(-40px);
    opacity: 0;
}
100% {
    -webkit-transform: translateY(0px); 
    opacity: 1;
}
}

@-moz-keyframes moveDown{
0% {
    -moz-transform: translateY(-40px);
    opacity: 0;
}
100% {
    -moz-transform: translateY(0px); 
    opacity: 1;
}
}

@-o-keyframes moveDown{
0% {
    -o-transform: translateY(-40px);
    opacity: 0;
}
100% {
    -o-transform: translateY(0px); 
    opacity: 1;
}
}

@-ms-keyframes moveDown{
0% {
    -ms-transform: translateY(-40px);
    opacity: 0;
}
100% {
    -ms-transform: translateY(0px); 
    opacity: 1;
}
}

@keyframes moveDown{
0% {
    transform: translateY(-40px);
    opacity: 0;
}
100% {
    transform: translateY(0px); 
    opacity: 1;
}
}

.st-color,{
background: #fa96b5;
}
.st-color [data-icon]:after {
color: #fa96b5;
}
.st-color {
background: #fff;
}
.st-color h2 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
color: #fff;
color: rgba(255,255,255,0.8);
}

.reegalleryscroll::-webkit-scrollbar { width: 2px; }
.reegalleryscroll::-webkit-scrollbar-track { background-color: transparent; }
.reegalleryscroll::-webkit-scrollbar-thumb { background-color: #555; }

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover {
    color: #c00;
    text-decoration: none;
}

.tooltip:hover:after {
    background: #191919;
    background: rgba(0,0,0,.8);
    border-radius: .4em;
    bottom: 1.35em;
    color: #fff;
    font: 9px yanone kaffeesatz;
    text-transform: uppercase;
    letter-spacing: 2px;
    content: attr(title);
    display: block;
    left: 1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}

.tooltip:hover:before {
    border: solid;
    border-color: #191919 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 1em;
    position: absolute;
    z-index: 99;
}
</style>
<div id="reegallery">
<div class="st-container">
             
    <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
    <a href="#st-panel-1"><img src="http://i.imgur.com/EhBGV3C.png" width="18px" style="margin-top: 8px"/></a>
     
    <input type="radio" name="radio-set" id="st-control-2"/>
    <a href="#st-panel-2">About</a>
     
    <input type="radio" name="radio-set" id="st-control-3"/>
    <a href="#st-panel-3">Codes</a>

<input type="radio" name="radio-set" id="st-control-4"/>
    <a href="#st-panel-4">Credits</a>
     
    <div class="st-scroll">

        <section class="st-panel" id="st-panel-1">

            <cover>Ree's Gallery</cover>
     
        </section>
         
        <section class="st-panel" id="st-panel-2">

            <h2>About</h2>
            <div style="width: 325px; max-height: 200px; padding: 10px" class="reebodyc reegalleryscroll">
<div style="width: 320px; max-height: 200px; overflow: auto; padding-right: 5px">

Hi I'm Ree. Actually, my name is Kristen, but I've been going by Ree or Kacey for a while now so it's stuck. I've been coding for a little over a year now and I've still got a lot to learn about it so I'll be even better and my sucky codes won't make me cry, but so far I think I'm making good progress? Anyways, this is my gallery, so enjoy!
<br />If you have any questions about anything, don't hesitate to pm me!

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

<section class="st-panel" id="st-panel-3">
            <h2>Codes</h2>
          <div style="width: 325px; max-height: 190px; padding: 10px" class="reebody reegalleryscroll">
<div style="width: 320px; max-height: 190px; overflow: auto; padding-right:5px">
<h3>threads</h3><div style="text-align:right"><p>
<p><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42741" class="tooltip" title="thread w/ scroll">i don't want your crown</a> <br /><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42984" class="tooltip" title="thread w/ scroll">love we need it now</a> <br /> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43090" class="tooltip" title="thread w/ scroll">clair de lune</a><br /> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43262" class="tooltip" title="thread w/ scroll">love on a wire</a><br /> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43218" class="tooltip" title="rapidfire">all these little things</a><br /> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43630" class="tooltip" title="rapidfire">beautiful disaster</a><br /> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44276" class="tooltip" title="thread w/ scroll">baby i'm a sociopath</a> <br /> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47678" class="tooltip" title="rapidfire">the planets bend between us</a><br /> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=52276" class="tooltip" title="rapidfire">this is gospel</a>
<br /><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=52918" class="tooltip" title="rapidfire">save your reputation</a></div>
<h4>shippers/requests</h4><p><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43009" class="tooltip" title="shipper/request">left me so undone</a> <br /><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44288" class="tooltip" title="request">soldier on</a> <br /><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47855" class="tooltip" title="shipper">electric soul</a>
<h3>technology</h3><div style="text-align:right"><p><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=51517" class="tooltip" title="iphone: ios7">live for the applause</a><br /><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=54160" class="tooltip" title="instant messenger">yelling timber</a><br /><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=54574" class="tooltip" title="iphone: ios7">come take away the cold</a><p>

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

         <section class="st-panel" id="st-panel-4">
            <h2>Credits</h2>
            <div style="width: 325px; max-height: 200px; padding: 10px" class="reebodyc reegalleryscroll">
<div style="width: 320px; max-height: 200px; overflow: auto; padding-right: 5px">
Credit for responsive layout and transitions tutorial goes to <a href="http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/">Mary Lou</a> of Codrops.<p>Credit for tooltip tutorial goes to <a href="http://cssdeck.com/labs/pure-css-tooltip-with-arrow">Winston</a> of CSSDeck.</div></div>
        </section>

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

0

7

[html]<div class='postcolor'> <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<style type="text/css">
#tcontainer { width: 500px; height: 500px; position: relative;}
.thebg { background-image: url(http://25.media.tumblr.com/tumblr_mcqtj … o1_500.png); position: absolute; top: 0px; left: 20px; width: 450px; height: 500px; }

#codes a:link { font-family: times; text-transform: lowercase; color: #353535; font-size: 11px; font-style: italic; }

#codes li { display: inline; width: 100px; text-align: center; background-color: #FFF; color: #484848; line-height: 73px; height: 73px; font-size: 11px; font-family: playfair display; }
#codes li:hover { background-color: #d8d8d8; color: #fff; }
#codes li > div { width: 220px; height: 300px; overflow: auto; position: absolute; left: -300px; padding: 20px; visibility:hidden;   background-color:rgba(255,255,255,0.0); color: #353535; text-align: justify; font-size:1em; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; font-family: times; font-size: 11px; line-height: 130%; font-style: none;}
#codes li:hover > div { visibility:visible; background-color:rgba(255,255,255,1.0);-moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; font-style:none; }

.threads { position: absolute; top: 0px; right: 50px; }
.shippers { position: absolute; top: 73px; right: 50px; }
.tech { position: absolute; top: 145px; right: 50px; }
.forsite { position: absolute; bottom: 215px; right: 50px; }
.skins { position: absolute; bottom: 145px; right: 50px; }
.sigs { position: absolute; bottom: 73px; right: 50px; }
.misc { position: absolute; bottom: 0px; right: 50px; }
</style>
<center>
<div id="tcontainer"><div class="thebg"></div>
<ul id="codes">
        <li class="threads">
        <i> about</i>
            <div style="margin-top: 4px;"><br /><br />
hello there! i'm marley, but i used to go by faye and sometimes beca. it just depends on my mood. i've been coding for um, almost year now?  anyways, i'm trying to practice as much as i can. especially by trying out new fonts. that's my main focus right now. and adding color rather than b&w, but i'm a simple person and i love black and white things so that'll be hard. also skins. but they take forever. ugh. i live in seattle where all it does is rain. haha. no but we like to think it does. i'm still in high school so i have a life other then roleplaying and it sucks. because i love roleplaying. i've been rolelplaying for a long time now.  what else? um idk. i'm boring. <p>total codes: 17<br />1 skin for use, 4 not for use

            </div>
        </li>
        <li class="shippers">
           <i>shippers</i>
            <div style="margin-right: -60px; margin-top: -69px;">
          <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42133&hl="> sweet dreams are made of these</a>.<p>

<a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42833&hl="> show me the stars</a>.<p>

<a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43744&hl="> safe and sound</a>.<p><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44431&hl=">fade to black.</a><p><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45336">beauty lives on.</a>
            </div>
        </li>
        <li class="tech">
           <i>techy</i>
             <div style="margin-right: -185px; margin-top: -142px;">
             
<a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41284&hl="> a story of a girl</a>.<p>

<a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43995&hl="> storm the sorrow</a>. <p><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44147&hl="> don't fence me in</a>. <p><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44979&hl="> both deep and wide </a>.
            </div>
        </li>
<li class="forsite">
        <i> for the site</i>
            <div style="margin-top: -209px;">

<p><a href="http://forums.athousandfireflies.com/index.php?showtopic=43783&view=findpost&p=22417450">smooth looks (application)</a>.
         <p>   <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43863&hl=">i'm out of luck (mini-profile)</a>.<p>
<a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45267&hl=">sweet and dangerous (mini-profile)</a>.
            </div>
        </li>
        <li class="skins">
          <i>skins</i>
            <div style="margin-right: -225px; margin-top: -278px;">
              <a href="http://seaofteeth.b1.jcink.com/"> sea of teeth (a non-usable skin).<p>  <a href="http://aumoe.b1.jcink.com/"> aumoe (non-usable for rn). </a><p><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44237&hl="> past and present</a>. <p><a href="http://marleyskin3.b1.jcink.com/index.php?act=idx"> knockout (made for a request)</a><p><a href="http://fragilelove.b1.jcink.com/"> fragile love (not for use)</a>
            </div>
        </li>
  <li class="sigs">
        <i> threads</i>
            <div style="margin-right: -225px; margin-top: -350px;">
            <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43712&hl="> wish i was special</a>.

<p>  <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43791&hl="> cold hands, warm hearts</a>.  <p> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44207&hl="> it's all in my mind</a>. <p><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47038"> WHEN ONLY THE DARKEST ASHES ARE LEFT</a>. <p><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=47082"> red headed beauty</a>.
            </div>
        </li>
  <li class="misc">
           <i>other</i>
            <div style="margin-right: -225px; margin-top: -423px;">
<a href="http://forums.athousandfireflies.com/index.php?showtopic=41355&hl="> testing grounds</a>.
            </div>
        </li>
</ul>
</div>
</center>
  </div>[/html]

0

8

[html]<div class='postcolor'>  <link href='http://fonts.googleapis.com/css?family=Marvel|Oswald' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Yesteryear|Playball|Seaweed+Script|Six+Caps|Poiret+One' rel='stylesheet' type='text/css'><center> <style type="text/css">

.tabs {
position: relative;   
width: 430px;
height: 380px;
clear: both;
margin: 0;
}

.tab {
float: left;
}

.tab label {
padding: 3px 10px 3px 10px;
background: #eee;
position: relative;
left: 83px;
top: -15px;
font-family: calibri;
font-size: 10px;
line-height: 100%;
}

.tab [type=radio] {
display: none;   
baseline-tab-shift: true, retrieve;
}

.content {
width: 0px;
height: 0px;
position: absolute;
top: 20px;
bottom: 0px;
left: 30px;
right: 0px;
}

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

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

.ssaraboxout { width: 430px; height: 270px; background-image: url(http://colourlovers.com.s3.amazonaws.co … 518087.png);}

.ssabout { width: 320px; height: 200px; padding: 15px; background-color: #fff; position: relative; left: 10px;  text-align: justify;}
.ssthreads { width: 320px; height: 200px; padding: 15px; background-color: #fff; position: relative; left: 10px; text-align: justify;}
.ssplot { width: 320px; height: 200px; padding: 15px; background-color: #fff; position: relative; left: 10px;  text-align: justify;}
.sscom { width: 320px; height: 200px;  padding: 15px; background-color: #fff; position: relative; left: 10px;  text-align: justify;}
.ssskins { width: 320px; height: 200px;  padding: 15px; background-color: #fff; position: relative; left: 10px;  text-align: justify;}
.sssite { width: 320px; height: 200px; padding: 15px; background-color: #fff; position: relative; left: 10px; text-align: justify;}
.sssignatures  { width: 320px; height: 200px;  padding: 15px; background-color: #fff; position: relative; left: 10px;  text-align: justify;}
.ssarchives  { width: 320px; height: 200px;  padding: 15px; background-color: #fff; position: relative; left: 10px; text-align: justify;}

.stitle {font-family: 'poiret one', sans-serif; font-size: 30px; color: #000;  text-align: center;}
</style>

<div style="width: 430px; padding: 18px 0px 18px 0px; background-color: #333; font-family: 'poiret one', sans-serif; font-size: 45px; color: #fff; text-shadow: 1px 2px 1px #000; text-transform: uppercase; line-height: 100%; text-align: center;">SARA'S GALLERY!</div>
<div style="width: 430px; height: 20px; background-color: #666;"></div>
<div class="ssaraboxout">

<div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">I.</label>
<div class="content"><div class="ssabout">
<div style="height: 20px;"></div>
<div class="stitle">ABOUT ME. </div>
<div style="height: 5px;"></div>
<center><div style="width: 250px; height: 1px; background-color: #ccc; margin-top: 12px;"></div>
<div style="width: 230px; font-family: garamond; font-size: 11px; color: #000; text-align: justify; line-height: 100%; padding: 10px;">
hii there! i'm sara. i've been coding for about two years now! i love coding, its a great stress-reliever for me. i love learning new things, and experimenting with different elements. feel free to comment with feedback! <3 <p>
<center> <b>total codes = 57 </b> </center>
</div>
<div style="width: 250px; height: 1px; background-color: #ccc;"></div>
</center>
</div> </div></div>
 
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2" style="margin-left: 2px;">II.</label>
<div class="content"><div class="ssthreads">
<div style="height: 13px;"></div>
<div class="stitle">THREADS.</div>
<center><div style="width: 280px; height: 1px; background-color: #ccc; margin-top: 12px;"></div>
<div style="width: 250px; font-family: garamond; font-size: 11px; color: #000; text-align: justify; line-height: 100%; padding: 10px;">

<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=38197&hl=' target='_blank' rel='nofollow'> called out in the dark</a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=38388&hl=' target='_blank' rel='nofollow'> you could be happy </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=40526&hl=' target='_blank' rel='nofollow'> i'll show you the wild side </a>  • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42316&hl=' target='_blank' rel='nofollow'> the lovers anthem </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41899&st=0&hl=' target='_blank' rel='nofollow'> your words shook me </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42734&hl=' target='_blank' rel='nofollow'> and i know he's long gone </a>  • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41049&st=0&hl=' target='_blank' rel='nofollow'> a beautiful mess </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=39564&hl=' target='_blank' rel='nofollow'> love is always a game </a>  • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41897&st=0&hl=' target='_blank' rel='nofollow'> my dear, my darling </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45482&hl=' target='_blank' rel='nofollow'> china doll </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45483&hl=' target='_blank' rel='nofollow'> spaceship coupe </a>  • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45631' target='_blank' rel='nofollow'> all we get is absolute </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45632' target='_blank' rel='nofollow'> burning desire </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45635' target='_blank' rel='nofollow'> must have been a fool </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45680' target='_blank' rel='nofollow'> gravity </a> •

</div>
<div style="width: 280px; height: 1px; background-color: #ccc;"></div>
</center>

</div> </div></div>
 
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3"  style="margin-left: 2px;">III.</label>
<div class="content"><div class="ssplot">
<div style="height: 13px;"></div>
<div class="stitle">SHIPPERS/PLOTS.</div>
<center><div style="width: 280px; height: 1px; background-color: #ccc; margin-top: 12px;"></div>
<div style="width: 250px; font-family: garamond; font-size: 11px; color: #000; text-align: justify; line-height: 100%; padding: 10px;">
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=38499&st=0&hl=' target='_blank' rel='nofollow'> silenced by the night </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=40152&st=0&hl=' target='_blank' rel='nofollow'> cosmic love </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=39471&hl=' target='_blank' rel='nofollow'> i am titanium </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41268&view=findpost&p=22305806' target='_blank' rel='nofollow'> looking for the golden life </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42391&hl=' target='_blank' rel='nofollow'> i'll dance myself up </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=39907&hl=' target='_blank' rel='nofollow'> like a cheap thriller </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41524&hl=' target='_blank' rel='nofollow'> hush darling </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44113&hl=' target='_blank' rel='nofollow'> fractured moonlight on the sea </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44111&hl=' target='_blank' rel='nofollow'> set me free </a>  • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44112&hl=' target='_blank' rel='nofollow'> out of goodbyes </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45636' target='_blank' rel='nofollow'> love on the rocks </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45637' target='_blank' rel='nofollow'> just a feeling </a> •

</div>
<div style="width: 280px; height: 1px; background-color: #ccc;"></div>
</center>

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

<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4"  style="margin-left: 2px;">IV.</label>
<div class="content"><div class="sscom">
<div style="height: 13px;"></div>
<div class="stitle">COMMUNICATION.</div>
<center><div style="width: 280px; height: 1px; background-color: #ccc; margin-top: 12px;"></div>
<div style="width: 250px; font-family: garamond; font-size: 11px; color: #000; text-align: justify; line-height: 100%; padding: 10px;">

<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41689&hl=' target='_blank' rel='nofollow'> just breathe </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42516&hl=' target='_blank' rel='nofollow'> good place to fall </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41048&st=0&hl=' target='_blank' rel='nofollow'> it will rain </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42399&hl=' target='_blank' rel='nofollow'> you took my heart </a> •  <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=44110&hl=' target='_blank' rel='nofollow'> dreaming for so long </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=38285&st=0&hl=' target='_blank' rel='nofollow'> slow it down tonight </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42514&hl=' target='_blank' rel='nofollow'> loving him was red </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45479&hl=' target='_blank' rel='nofollow'> a smile and a song </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42074&hl=' target='_blank' rel='nofollow'> such selfish prayers </a> •

</div>
<div style="width: 280px; height: 1px; background-color: #ccc;"></div>
</center>

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

<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5"  style="margin-left: 2px;">V.</label>
<div class="content"><div class="sssite">
<div style="height: 13px;"></div>
<div class="stitle">SITE CODES.</div>
<center><div style="width: 280px; height: 1px; background-color: #ccc; margin-top: 12px;"></div>
<div style="width: 250px; font-family: garamond; font-size: 11px; color: #000; text-align: justify; line-height: 100%; padding: 10px;">
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=38330&hl=' target='_blank' rel='nofollow'> ways and means </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41896&hl=' target='_blank' rel='nofollow'> in the end </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45689' target='_blank' rel='nofollow'> little of your time </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45708' target='_blank' rel='nofollow'> let your heart be light </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45710' target='_blank' rel='nofollow'> & it's coming closer </a> •
</div>
<div style="width: 280px; height: 1px; background-color: #ccc;"></div>
</center>

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

<div class="tab">
<input type="radio" id="tab-6" name="tab-group-1">
<label for="tab-6"  style="margin-left: 2px;">VI.</label>
<div class="content"><div class="sssignatures">
<div style="height: 13px;"></div>
<div class="stitle">SIGS/TRACKERS.</div>
<center><div style="width: 280px; height: 1px; background-color: #ccc; margin-top: 12px;"></div>
<div style="width: 250px; font-family: garamond; font-size: 11px; color: #000; text-align: justify; line-height: 100%; padding: 10px;">
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=40398&st=0&hl=' target='_blank' rel='nofollow'> i'm slipping underneath </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=38246&hl=' target='_blank' rel='nofollow'> what the water gave me </a> •  <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=39457&hl=' target='_blank' rel='nofollow'> grip of a hurricane </a>  • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41898&hl=' target='_blank' rel='nofollow'> this is the last time </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43625&hl=' target='_blank' rel='nofollow'> it comes with a price </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=43121&hl=' target='_blank' rel='nofollow'> forever yours </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45480&hl=' target='_blank' rel='nofollow'> give me the bright lights </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45481&hl=' target='_blank' rel='nofollow'>life imitates art </a>• <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45634' target='_blank' rel='nofollow'> fortune teller </a> •
</div>
<div style="width: 280px; height: 1px; background-color: #ccc;"></div>
</center>

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

<div class="tab">
<input type="radio" id="tab-7" name="tab-group-1">
<label for="tab-7"  style="margin-left: 2px;">VII.</label>
<div class="content"><div class="ssskins">
<div style="height: 13px;"></div>
<div class="stitle">SKINS.</div>
<center><div style="width: 280px; height: 1px; background-color: #ccc; margin-top: 12px;"></div>
<div style="width: 250px; font-family: garamond; font-size: 11px; color: #000; text-align: justify; line-height: 100%; padding: 10px;">
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=38210&st=0&hl=' target='_blank' rel='nofollow'> heres to the meantime </a> •
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=39446&st=0&hl=' target='_blank' rel='nofollow'> breaking down again </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41122&st=0&hl=' target='_blank' rel='nofollow'> like a dark paradise </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42961&hl=' target='_blank' rel='nofollow'> chasing the light </a> • <a href='http://merrychristmasgem.b1.jcink.com/' target='_blank' rel='nofollow'> exclusive skin </a> • <a href='http://merrychristmasnina.b1.jcink.com/' target='_blank' rel='nofollow'> exclusive skin </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=42356&st=0&hl=' target='_blank' rel='nofollow'> nothing ever lasts forever </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=45590&hl=' target='_blank' rel='nofollow'> give a little more </a>•
</div>
<div style="width: 280px; height: 1px; background-color: #ccc;"></div>
</center>

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

<div class="tab">
<input type="radio" id="tab-8" name="tab-group-1">
<label for="tab-8"  style="margin-left: 2px;">VIII.</label>
<div class="content"><div class="ssarchives">
<div style="height: 13px;"></div>
<div class="stitle">ARCHIVES.</div>
<center><div style="width: 280px; height: 1px; background-color: #ccc; margin-top: 12px;"></div>
<div style="width: 250px; font-family: garamond; font-size: 11px; color: #000; text-align: justify; line-height: 100%; padding: 10px; text-transform: lowercase;">
<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=38162&hl=' target='_blank' rel='nofollow'> ALL THIS AND HEAVEN TOO </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=38378&hl=' target='_blank' rel='nofollow'> SLEEPING TO DREAM </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=41050&hl=' target='_blank' rel='nofollow'> before i let you go </a> • <a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=39476&hl=' target='_blank' rel='nofollow'> you're all i have </a> •<a href='http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=38284&hl=' target='_blank' rel='nofollow'> my lucky strike </a> •
</div>
<div style="width: 280px; height: 1px; background-color: #ccc;"></div>
</center>

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

0

9

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

<style>
#rihannas {
    -webkit-perspective: 800px;
-moz-perspective: 800px;
    perspective: 800px;
    -webkit-perspective-origin: 0 50%;
    -moz-perspective-origin: 0 50%;
    perspective-origin: 0 50%;
    width:250px;
    height:150px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
border: 3px solid #fff;
}
.vibin {
    width:250px;
    height:150px;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
    background-image: url(http://i.imgur.com/4dTnb4G.png);
    overflow: hidden;
}
#rihannas:hover .vibin {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
.vibinaroo {
   
    height:150px;
    width:250px;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
    -moz-transform:  rotateY(-90deg);
    transform:  rotateY(-90deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
    background-color: #eee;
    margin-top:-150px;
margin-left:0px;

overflow:hidden;

}
#rihannas:hover .vibinaroo {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform:  rotateY(0deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
height:150px;
width:250px;
overflow:hidden;
}</style>

<center>
<div style="background-image:url(http://i.imgur.com/xGvxy7G.png); height:400px; width:400px; border:20px solid #fff; outline: 1px solid #eee;">

<div style="height:250px; width:250px; border: 3px double #fff;
padding:20px; margin-top:50px;"><div id="rihannas">
    <div style="height:150px; width:250px; overflow:hidden;"><div class="vibin"></div></div>

        <div class="vibinaroo"><center> 

<div style="margin-left:50px; width: 130px; height:100px; font-family: abril fatface; font-size:20; line-height:100%; text-align:right; padding:10px; border-right: 10px solid #000;">
sometimes i love you sometimes it's you i can't stand </div>
<div style="font-family:arial; font-size:7px;"> TAG : ANA/GABE.</DIV>
</center></div>
</div>

<div style="height:20px; width:176px; padding:30px; border:10px solid #fff; margin-left:0px; background-color: #fff; text-align:justify; overflow:auto; font-size:9px; font-family:arial; line-height:100%;"> emotional wasn’t a word to describe her. she breathed easy and stayed calm in most situations. she was by no means a calm person, however instead she was explosive and dramatic. the calm steadiness came from a place of the state ‘whatever forever’. there were a few people she found herself emotionally attached to though. attached enough to become some sort of worry wart - in the loosest sense - something she was the farthest from. with a panic look ziggy could be found behind the wheel now - not the smartest idea given the circumstances. at the stop lights she’d become anxious. because four years - though she’d caterogranize some of them on par with chinese water torture - of whatever they were had gabriel that liberty. the privilege of being someone she cared about. cared deeply about to further clarify. <p>
car accident? who the fuck did he think he was getting into a car accident. making her heart worry and ache while forced a calm exterior. she walked with a purpose into the hospital. her heels - finally found those red ones somewhere in a bush outside - echoing the halls of the already noisy hospital. without stopping at the front desk - she wasn’t an idiot she could follow signs and arrows until she found the room number gabriel - she walked the maze of the hospital emergency room trying to find her boyfriend.<p>
beaten up boots giving him away.she opened the closed curtain has if she had the authority to, only to find a rather flirtatious nurse keeping his company. <b>”you look fucking alright.”</b> she managed to sneer without a glimpse at the injuries - without a glimpse at him because a blonde <s>bimbo</s> stood in her way..<b>”enjoying yourself?”</b> </div>

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

0


Вы здесь » free love » наработки ленивца » код достижений


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