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

Объявление

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

♦ ♦ ♦





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



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

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



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

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


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


красота html

Сообщений 31 страница 60 из 66

31

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

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

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

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

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

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

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

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

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

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


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

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

</style>

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

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

</div>

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

0

32

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<center>
 <div id="poot">
   <div class="poott">
     <div class="pootp" style="background-image:url(400 X 200 IMG HERE)">
       <div class="pooti" style="top: 90px">
         <marquee>the first and last of your kind --- tag // words // notes </marquee>
       </div>
     </div>
     <div class="pootbg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis iaculis feugiat. Sed metus magna, lacinia ac pellentesque a, consectetur in neque. In id leo sodales, rhoncus lectus sed, auctor nibh. Ut pulvinar ipsum sed elit lacinia, sit amet
       tempus nulla aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst. In fermentum urna mauris, accumsan vehicula elit efficitur in. Nullam vel libero sit amet nisl eleifend faucibus vel in turpis.
       Aenean tempor erat eu ipsum vehicula, tincidunt euismod velit fermentum. Morbi tempor ante et fermentum hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus egestas leo luctus turpis fringilla
       consectetur. Donec sed feugiat urna. Curabitur pharetra, lorem eu tincidunt dictum, tortor arcu pretium arcu, sit amet malesuada leo sem sagittis nisl. Donec dictum egestas eros ut sollicitudin. Vivamus vestibulum tortor at purus condimentum lobortis.
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis quam leo. Integer nec odio dolor. In ornare sem sed arcu facilisis pellentesque. Suspendisse sed velit aliquam, commodo nisl eu, pulvinar diam. Vestibulum condimentum velit non tellus
       pretium vestibulum. Cras scelerisque ipsum fermentum, porttitor lorem eu, tristique erat. Pellentesque ut varius felis, vitae cursus nunc. Integer sagittis ligula at aliquet condimentum. Donec ultricies pellentesque condimentum. Maecenas porttitor
       gravida lacus, suscipit convallis ante eleifend non. Proin commodo lobortis feugiat. Cras ut lobortis nisl. Aliquam bibendum mauris et sem tempor lacinia. Aliquam pulvinar accumsan libero nec rhoncus. Pellentesque quis ex massa. Pellentesque sollicitudin
       vitae velit sit amet hendrerit. Nunc semper odio vitae urna consectetur fermentum. Praesent at justo ac purus consectetur tincidunt a a ex. Vivamus auctor dui in tellus imperdiet, at lacinia risus elementum. Mauris sagittis in arcu a vehicula.
       Vestibulum mauris lectus, vulputate id scelerisque sit amet, placerat sed dolor. Phasellus sit amet tellus sed urna pellentesque scelerisque. Pellentesque posuere ex lorem, ac luctus mauris volutpat vel. Cum sociis natoque penatibus et magnis
       dis parturient montes, nascetur ridiculus mus. Phasellus id nunc commodo, varius nulla nec, euismod tortor. Curabitur sit amet facilisis enim, eu tincidunt purus. Donec quis felis ipsum. Ut pretium, libero nec vestibulum mollis, sapien quam elementum
       nunc, at pretium orci leo a enim. Sed eu odio mattis, luctus felis quis, malesuada arcu. Aliquam erat volutpat. Etiam vitae velit ullamcorper, vulputate mauris non, porta dui. Morbi at quam dui. Integer gravida iaculis venenatis. Vestibulum dignissim
       ut nisi sit amet aliquet. Morbi sapien libero, tincidunt nec auctor eu, tincidunt sit amet ligula. Pellentesque sed dignissim justo. Fusce nec nibh vel orci interdum sagittis.

     </div>

   </div>
 </div>
 <div style="text-align: right; font-family: roboto; text-transform: uppercase; font-size: 9px; width: 500px"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908" style="color: #000; text-decoration: none">holly at sp</a></div>
</center>
<style>

#poot {
 height: 300px;
 width: 500px;
 position: relative;
 background-image: url(http://i.imgur.com/ecrXdjc.png)
}

.poott {
 height: 200px;
 width: 400px;
 position: absolute;
 top: 50px;
 left: 50px;
 overflow: hidden;
}

.pootp {
 height: 200px;
 width: 400px;
 position: absolute;
 z-index: 2;
 background-color: #FFEB00;
 background-blend-mode: multiply
}

.pooti {
 height: 25px;
 line-height: 25px;
 background-color: #212121;
 color: #fff;
 width: 340px;
 position: absolute;
 left: 30px;
 text-align: center;
 letter-spacing: 3px;
 text-transform: uppercase;
 font-family: calibri;
 font-size: 9px
}

.pootbg {
 height: 160px;
 width: 360px;
 background-color: #fff;
 padding: 10px;
 border: 10px solid #fff;
 font-family: roboto;
 line-height: 12px;
 font-size: 9px;
 text-align: justify;
 column-count: 2;
 -moz-column-count: 2;
 -webkit-column-count: 2;
 column-gap: 10px;
 -moz-column-gap: 10px;
 -webkit-column-gap: 10px;
 overflow: auto;
}

.pootbg::-webkit-scrollbar {
 height: 3px
}

.pootbg::-webkit-scrollbar-thumb {
 background-color: #FFEB00
}

#poot .pootp {
 left: -0px;
 -webkit-transition: 1s ease-in-out;
}

#poot:hover .pootp {
 left: -400px;
 -webkit-transition: 1s ease-in-out;
}
</style>

0

33

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

#threaad {width: 450px}
#nein {width: 450px; height: 160px; -webkit-transition-duration: 0.6s; -ms-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s}
.nein2 {width: 450px; height: 160px; background-color: #fff; position: relative}
#nein .nein2 {opacity: 0; -webkit-transition: 0.4s all ease-in-out; -ms-transition: 0.4s all ease-in-out; -moz-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out; transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s;}
#nein:hover .nein2 {opacity: 0.8; -webkit-transition: 0.4s all ease-in-out; -ms-transition: 0.4s all ease-in-out; -moz-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out;}


.bitte {width: 130px; padding: 2px 0px 2px 0px; color: #fff; background-color: #615C5C; font-family: calibri, arial; font-size: 10px; position: relative; text-transform: uppercase; letter-spacing: 1px; left: -15px; text-align: center; top: -40px; left: 0px; height: 20px; line-height: 20px}

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

#nein .bitte {opacity: 0; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -moz-transition-delay: 0.3s;}

#nein:hover .bitte {opacity: 1; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out; transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; -moz-transition-delay: 0.6s;}


#oui {height: 480px; width: 450px; background-image: url(http://i.imgur.com/vTRhp58.png)}

.merci {height: 120px; width: 480px; position: relative; left: -200px; top: 220px}

.mercia {font-family: Roboto; color: #E30075; text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff; text-align: center; font-size: 60px; text-transform: uppercase; transform: rotate(-90deg); letter-spacing: -0.5px}

.mercib {width: 440px; padding: 1px; font-family: arial; color: #615C5C; background-color: #fff; position: relative; text-transform: uppercase; font-size: 8px; transform: rotate(-90deg); top:-10px; left: 45px; text-align: center; letter-spacing: 3px; height: 15px; line-height: 15px}

.bonjour {height: 440px; position: relative; top: -100px; width: 320px; background-color: #fff; left:50px;}

.bonjoura {position: relative; top: 20px; font-family: calibri; color: #615C5C; line-height: 98%; text-align: justify; overflow: auto; width: 280px; height: 400px}

.bonjoura b {font-family: 'Oswald'; color: #000; font-size: 14px; font-style: italic; text-transform: lowercase}

.bonjoura::-webkit-scrollbar {width: 4px; background-color: transparent}
.bonjoura::-webkit-scrollbar-thumb {background-color: transparent}



</style>

<div id="threaad">
<div id="nein" style="background-image:url(450X160 IMAGE HERE)">
<div class="nein2"></div>

<table>
<td><div class="bitte">tag</div></td>
<td><div class="bitte">notes</div></td>
<td><div class="bitte"><a href="link">outfit</div></td>
</table>
</div>

<div id="oui">
<div class="merci">
<div class="mercia">automatic</div>
<div class="mercib">don't you wanna <font style="color: #E30075">live</font>, don't you wanna <font style="color: #E30075">be</font></div>
</div>
<div class="bonjour">

<div class="bonjoura" style="overflow: scroll">

<p>Proin quam nunc, lobortis a bibendum nec, molestie nec libero. Nunc eget facilisis nulla, nec rutrum mi. Integer consectetur facilisis ante sit amet faucibus. <b>Aliquam sollicitudin egestas purus.</b> Aliquam tempus luctus scelerisque. Vivamus nunc erat, fringilla non bibendum at, pulvinar at lectus. Duis commodo purus justo, eget ornare nibh luctus non. Integer egestas enim sed ante facilisis hendrerit. <b>Mauris ut hendrerit felis. Aliquam mattis eleifend semper. Pellentesque in purus sapien. Vivamus in mi non ligula egestas mollis nec nec lacus.</b> Morbi egestas laoreet tortor ac tincidunt. Aenean hendrerit ligula eget placerat facilisis.

<p>Vivamus orci lorem, varius quis turpis non, sodales posuere metus. Morbi euismod dolor non mollis pulvinar. <b>Phasellus vitae nulla vel felis lobortis egestas sed eget arcu. Praesent quam nibh, lobortis at risus nec, fringilla aliquet leo.</b> Praesent pharetra egestas velit id imperdiet. Integer mauris orci, aliquet malesuada finibus non, tempor non orci. Nunc placerat ex ac tortor rhoncus scelerisque. Proin venenatis velit eget accumsan congue. Mauris tempor vel dui eu iaculis. <b>Morbi ultrices sapien risus, vel blandit justo hendrerit in.</b> Nam imperdiet neque sem, sed viverra felis maximus sit amet. Nunc porttitor eget mauris ut elementum. Suspendisse in libero consequat, suscipit nunc nec, ultrices arcu. Sed gravida magna non ligula lobortis pulvinar.

<p><b>Donec tempus leo eget mauris blandit, consequat sodales tellus cursus. Suspendisse potenti. Mauris eleifend est felis, id euismod augue posuere sed.</b> Nunc metus sapien, varius non vulputate nec, condimentum ac turpis. Sed fermentum eros at justo imperdiet, sit amet ullamcorper nisi maximus. <b>Donec non purus vehicula, facilisis ligula quis, gravida dolor.</b> Quisque sed iaculis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tincidunt dolor risus, id ultrices enim pretium in. Praesent euismod dictum odio ac volutpat. Nulla vehicula, erat eu mollis sodales, enim mauris tempor odio, eget accumsan urna massa in urna.

</div>


</div></div>

</div>

<div style="width: 450px; position: relative; text-align: right; font-size: 7px; text-transform: uppercase"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908">HOLLY AT SP</a></div>

</div>
</center>

0

34

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

0

35

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

<style type="text/css">
.outerwrap {
width:540px;
height:315px;
background-color:#161515;
}

.whole {
padding: 25px 0 0 0;	
}

.image {
width: 500px;
height: 200px;
background-image: url(http://placehold.it/500x200);
}

.text {
background-color:#161515;
width: 400px;
height: 200px;
opacity: 0;
border-left: 50px solid #5B1F17;
border-right: 50px solid #5B1F17;
transition-duration: .6s; 
-webkit-transition-duration: .6s; 
-moz-transition-duration: .6s; 
-ms-transition-duration: .6s; 
-o-transition-duration: .6s;
overflow: auto;
}

.actualtext {
padding: 15px 5px 15px 5px;
color:rgb(244,244,244);
opacity: .9;
font-size: 12px;
}

.text:hover {width: 400px; height: 200px; opacity: .9; }

.innerwrappp {

}

.buttonsss1 {
background-color:#D8CCCB;
color:#D8CCCB;
padding: 5px 0 5px 0;
opacity: .5;
width: 90px;
height: 35px;
margin: 25px 5px 0px 25px;
float: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
}

.buttonsss1:hover {
opacity: .9;
color:#161515;
}

.buttonsss2 {
background-color:#D8CCCB;
color:#D8CCCB;
padding: 5px 0 5px 0;
opacity: .5;
width:90px;
height: 35px;
margin: 25px 5px 0px 25px;
float: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
}

.buttonsss2:hover {
opacity: .9;
color: #161515;
}

.headerrr {
color:#5B1F17;
font-family: Pacifico;
font-size: 50px;
width: 250px;
float: left;
text-shadow: 2px 2px 0px rgb(244,244,244);
padding: 35px 0 0 0;
}

.footer {
clear: both;
}

.credit {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 6px;
text-decoration: none;
}

</style>

<div class="outerwrap">

<div class="whole"><div class="image">

<div class="text"><div class="actualtext">TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE</div></div>

</div></div>

<div class="innerwrappp">

<div class="buttonsss1">
<div class="notes">NOTES: you may type here</div>
</div>

<div class="buttonsss2">
<div class="tags">TAGS: you may type here</div>
</div>

<div class="headerrr">blood&wine</div>

</div>

</div>

<div class="footer"><div class="credit"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5962">SABRINA @SP</a></div>

</center>

0

36

Код:
<!--HTML-->
<style type="text/css">
.toptriangle { width: 0px; height: 0px; border-style: solid; border-width: 0 75px 50px 75px; border-color: transparent transparent #222 transparent; }
.bottomtriangle { width: 0px; height: 0px; border-style: solid; border-width: 50px 75px 0 75px; border-color: #222 transparent transparent transparent; }
.emtrait { width: 250px; font-family: verdana; font-size: 7px; text-align: center; line-height: 100%; color: #222; text-transform: uppercase; }
.emname { width: 250px; font-family: 'Dosis', sans-serif; font-size: 35px; text-transform: uppercase; line-height: 100%; letter-spacing: -2px; color: #222; font-weight: lighter; text-align: center; }
.emtrack { width: 224px; padding: 10px; background-color: #fafafa; height: 194px; border: double 3px #f0f0f0; font-family: verdana; font-size: 7px; line-height: 100%; color: #222; text-transform: uppercase; text-align: justify; letter-spacing: .5px;}
.emtrack a { font-family: verdana; font-size: 7px; line-height: 100%; color: #222; text-transform: uppercase; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -o-transition-duration: .6s; -ms-transition-duration: .6s; letter-spacing: 2px; font-style: italic; }
.emtrack a:hover { color: #69adc7 }
.emtitle { width: 214px; font-family: 'Dosis', sans-serif; font-size: 25px; text-transform: uppercase; line-height: 100%; letter-spacing: -2px; color: #222; font-weight: lighter; text-align: right; padding-bottom: 10px; padding-right: 5px; }
.lolbscroll::-webkit-scrollbar { width: 5px; background-color: transparent; }
.lolbscroll::-webkit-scrollbar-track { width: 5px; background-color: transparent; }
.lolbscroll::-webkit-scrollbar-thumb { background-color: #555 }
</style>
<link href='http://fonts.googleapis.com/css?family=Dosis:200' rel='stylesheet' type='text/css'>

<center><div style="height: 20px"></div><table cellpadding="0" cellspacing="0"><td><div style="width: 150px;"><div class="toptriangle"></div><div style="width: 150px; height: 200px; background-image: url(http://placehold.it/150x200); "></div><div class="bottomtriangle"></div></div></td><td><div style="width: 10px"></div></td><td><div class="emtrack"><div style="width: 219px; padding-right: 5px; overflow: auto; height: 194px;" class="lolbscroll">

<div class="emtitle">basics.</div>
<a href="">application</a> ▲ first middle last, age, member group.<br>
<a href="">shipping</a> ▲ occupation.<br>
<a href="">request</a> ▲ summary.<br>
<a href="">twitter</a> ▲ title.<br>
<a href="">instagram</a> ▲ title.

<p><div class="emtitle">technology.</div>
<a href="">title of thread</a> ▲ im/cell/skype/w.e w/ first last.<br>
<a href="">title of thread</a> ▲ im/cell/skype/w.e w/ first last.<br>
<a href="">title of thread</a> ▲ im/cell/skype/w.e w/ first last.<br>
<a href="">title of thread</a> ▲ im/cell/skype/w.e w/ first last.<br>
<a href="">title of thread</a> ▲ im/cell/skype/w.e w/ first last.

<p><div class="emtitle">current.</div>
<a href="">title of thread</a> ▲ location w/ first last.<br>
<a href="">title of thread</a> ▲ location w/ first last.<br>
<a href="">title of thread</a> ▲ location w/ first last.<br>
<a href="">title of thread</a> ▲ location w/ first last.<br>
<a href="">title of thread</a> ▲ location w/ first last.<br>
<a href="">title of thread</a> ▲ location w/ first last.

<p><div class="emtitle">deceased.</div>
<a href="">title of thread</a> ▲ location w/ first last.<br>
<a href="">title of thread</a> ▲ location w/ first last.<br>
<a href="">title of thread</a> ▲ location w/ first last.<br>
<a href="">title of thread</a> ▲ location w/ first last.<br>
<a href="">title of thread</a> ▲ location w/ first last.<br>
<a href="">title of thread</a> ▲ location w/ first last.

</div></div><div class="emname">

first m. last

</div><div class="emtrait">

## ▲ member group ▲ occupation ▲ pb

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

0

37

Код:
<!--HTML-->
<style type="text/css">
.tempcodeone{width: 400px; padding: 10px; background-image: url(http://25.media.tumblr.com/tumblr_m6d6q7aDgx1rzf09so1_400.png); opacity: 0.5; border-bottom: 7px solid #4A1B26;} 
.tempcodetwo {width: 75%; padding: 10px; background-color: 2b2b2b; font-family: arial narrow; font-size: 9px; text-transform: uppercase; line-height: 90%; text-align: justify; letter-spacing: 1px; color: eeeeee;} 
.tempcodewords {vertical-align:middle; font-family: georgia; color:#cccccc; text-transform:lowercase; text-align:center; font-size:30; letter-spacing:2px; line-height:92%; padding-top:3px;}
.tempcodesubwords {vertical-align:middle; font-family: arial narrow; color:#4b4b4b; text-transform:uppercase; text-align:center; font-size:9; letter-spacing:2px; line-height:88%; padding-top:2px; padding-bottom:2px;}
.temptop {width: 420px; background-color:#4A1B26;}
.tempback {width:420px; background-color:#0e0e0e; padding:20px;}
</style>
<center><div class="tempback"><div class="temptop"><div class="tempcodewords">announcement title</div>
<div class="tempcodesubwords">subtitle here please</div></div><div class="tempcodeone"><div class="tempcodetwo">this is where you can type up anything that you would want for your site, whether it be rules, your plots, your member group information, or anything else, really. this is giong to expand as your content gets larger, so don't worry about scrolling issues and whatnot. this is where you can type up anything that you would want for your site, whether it be rules, your plots, your member group information, or anything else, really. this is giong to expand as your content gets larger, so don't worry about scrolling issues and whatnot. <br><br>
this is where you can type up anything that you would want for your site, whether it be rules, your plots, your member group information, or anything else, really. this is giong to expand as your content gets larger, so don't worry about scrolling issues and whatnot. this is where you can type up anything that you would want for your site, whether it be rules, your plots, your member group information, or anything else, really. this is giong to expand as your content gets larger, so don't worry about scrolling issues and whatnot. </div></div></div></center>

0

38

Код:
<!--HTML-->
<center>
<div class="folderbkgd">
<div class="filename">

FILE NAME

</div>
<div class="file">
<div class="typefile">

<table><tr><td>
NAME: NAME HERE
</td></tr><tr><td>
DATE: DATE HERE
</td></tr><tr><td>
STATUS: OPEN/CLOSE/UNSOLVED
</td></tr><tr><td>
ALIASES: OTHER NAMES HERE
</td></tr><tr><td>
NOTES:

<div class="typecase">

Notes go here.
<p>
Don’t forget paragraphs
<p>
Scrolls

</div>
</td></tr></table>
</div>
<div class="binderclip">
</div></div>
<div class="polaroids">
<div style="width:115px; height:117px; background-image:url(http://placehold.it/115x117); position:absolute; margin-top:68px; margin-left:28px;">
</div>
<div class="paperclip">
</div></div>
</div>
<div class="agent"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=3541">@ travvy</a>
</center>

<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<style type="text/css"> 

.folderbkgd { width: 500px; height: 322px; background-image:url(http://i58.tinypic.com/iwhwkm.jpg); }

.filename {font-size:25px; font-family: 'Special Elite', cursive; position:relative; top: 18px; right: 160px;}
.paperclip {width: 73px; height:63px; background-image:url(http://i60.tinypic.com/25z73h4.jpg); position:relative; top: 60px; right:58px; z-index:1; }
.binderclip {width:50px; height:63px; background-image:url(http://i58.tinypic.com/qrckts.jpg); position:relative; top: -50px; }
.polaroids {width:150px; height:214px; background-image:url(http://i57.tinypic.com/2h39aqd.jpg); position:relative; top: -220px; right:160px;}
.file { width: 280px; height: 270px; background: #FFF; position:relative; top:20px; left:90px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); }
.typefile { font-size:12px; font-family: 'Special Elite', cursive; padding:5px; position:absolute; margin-top:20px; }
.typecase { width: 265px; height: 140px; font-size:12px; font-family: 'Special Elite', cursive; text-align:justify; position:absolute; margin-top:5px; overflow:auto; padding-right:5px;}
.agent { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg);  position:relative; left:255px; top:-30px;}
.typecase::-webkit-scrollbar-track  { background-color: #ffffff; }
.typecase::-webkit-scrollbar-thumb { background-color: #ffffff; }

</style>

0

39

Код:
<!--HTML-->
<center>
<div style="width: 300px; background: #eeeeee; border: 15px solid #FF93BA;">
<div style=" border-top: 10px solid #C73AA2; border-bottom: 10px solid #C73AA2; border-left: 1px dotted #666666; border-right: 1px dotted #666666; padding: 20px;">

<div style="font-family: times; font-size: 30px; color: #F794AE; text-shadow: 1px 1px 0px #C73AA2; font-style: italic;">
felt so right
</div>

<div style="font-family: tahoma; font-size: 11px; text-align: justify; color: #333333; padding: 10px;">
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. 
</div>

</div>
</div>

</center>

0

40

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono|Fascinate+Inline' rel='stylesheet' type='text/css'><style type="text/css" >.gbgnew { background-color: #DCDCDC; width: 600px; padding: 15px; background-image: url(http://i62.tinypic.com/33e4cg3.jpg);}
.gnewhead { font-family: 'Fascinate Inline', cursive; font-size: 50px; color: #1A2421;   padding-bottom:31px;padding-top:12px;}
.gnewline { background-color: #808080; width: 500px; height: 1px; margin-bottom: 1px; }
.gnewmintext { font-family: monospace; font-size: 12px; color: 808080; padding-bottom:2px; }
.imgborde3r { margin-top: 10px;border: 2px solid #1a2421; width: 500px; height: 200px; margin-bottom: 10px;} 
.gnewtitle { font-family: 'Fascinate Inline', cursive; font-size: 50px; padding-top: 10px; text-transform: uppercase; font-weight: bold; letter-spacing: -3px; width: 550px; line-height: 40px; color: #1A2421;}
.gnewmintext2 { font-family: monospace; font-size: 12px; color: #1A2421; padding-bottom:5px; text-align: right;width: 490px; }
.gnewsinfo h1 {
   color: #1a2421;height: 100px;
   font-family: "Fascinate Inline";
   font-size: 23px;
   line-height: 25px;
   padding: 2px 0 5px;
   text-align: left; width:
}
.gnewsinfo { - 243px;-column-count:2; -moz-column-count:2; column-count:2;-webkit-column-gap:10px; -moz-column-gap:10px; column-gap:10px;  color: #1a2421; text-align: justify; width: 500px;font-family: monospace; font-size: 10px; line-height: 11px; margin-top:3px; margin-bottom: 10px;}
p:first-letter{ font-size:150%;color:#85754E; padding-top: 10px;}
.gnewsicon {background-image: url(http://placehold.it/100); width: 100px; height: 100px; border: 1px dashed #1A2421; float: left; margin-right: 10px; }
.gnewscred {  width: 480px; height: 15px; margin-top: 0px; color: #3B444B; font-family: mali,  text-transform: uppercase; font-size: 13px; padding-top: 10px; font-size: 10px;  }</style>
<center>
 <div class="gbgnew">
   <div class="gnewhead">♦ Coffeerush Times ♦</div>
   <div class="gnewline"></div> <div class="gnewline"></div>
   <div class="gnewmintext">Volume 3, Number 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       Fredericksburg, Texas   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;March 24, 2014   </div>
   <div class="gnewline"></div>
<div class="gnewline"></div>
   <div class="gnewtitle">Mayor Caught doing the Nasty in office</div>
   <div class="gnewmintext2">Reported by Jessica Weatherbe</div>
  <div class="imgborde3r"> <img src="http://placehold.it/500x200" border=2></div>
   <div class="gnewline"></div><div class="gnewline"></div>
  
   <div class="gnewsinfo"><div class="gnewsinfo"><h1>Caught in Action on Company Desk</h1></div><div class="gnewsicon"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in congue magna. Integer leo erat, feugiat et tortor id, euismod molestie tortor. Vivamus at felis aliquet, sodales arcu non, imperdiet sapien. Cras egestas lectus nec erat iaculis congue. Nunc rhoncus leo a odio aliquam ullamcorper. Maecenas tristique tristique sodales. Quisque scelerisque mollis auctor. Curabitur vitae nulla nec leo gravida cursus vel a magna. Sed lectus velit, rhoncus ac libero vitae, dapibus viverra erat. In hac habitasse platea dictumst. Nunc vel magna non libero interdum facilisis ac eget nibh. Sed eu ultricies libero, eu blandit ante. Cras tincidunt iaculis sem a fringilla. Phasellus porttitor aliquam semper.</p>

<p>Fusce volutpat mi diam, non sodales ligula vulputate eu. Maecenas vel vestibulum elit. Nunc ac eros hendrerit, placerat arcu in, luctus nunc. Cras porta nibh sed urna convallis imperdiet. Pellentesque quis interdum risus. Suspendisse tempus volutpat ipsum, et fermentum sem. Integer semper mauris non lacus rhoncus volutpat. Pellentesque venenatis leo ut semper euismod.</p>

     <div class="gnewsicon"></div><p>Cras a tempor enim, ac bibendum massa. Phasellus lobortis lectus non metus euismod, a sollicitudin metus rutrum. Nam vel dolor massa. Morbi eu blandit ligula. Sed tincidunt mauris ac erat hendrerit, vitae consequat felis feugiat. Mauris scelerisque feugiat aliquam. Sed eget nibh magna. Fusce ac libero sapien. Donec faucibus fermentum sapien, sed consectetur enim aliquet quis. Phasellus sed lacus ut massa adipisci n, gravida in eros sit amet, volutpat mattis urna.</p>


 </div>
   <div class="gnewline"></div><div class="gnewline"></div>

<div class="gnewscred"> created by MORBID MEMORIES @ <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=2600"STYLE="TEXT-DECORATION: NONE"><font color="#663854">Shadowplay</font></a> & <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=9125"STYLE="TEXT-DECORATION: NONE"><font color="#663854">ATF</font></a></div>
</center>

0

41

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lora:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Old+Standard+TT' rel='stylesheet' type='text/css'>
<style>.tabs {
position: relative;  
width: 450px;
height: 474px;  overflow: hidden; background-image: url(http://i.imgur.com/cFylTiq.png); align: center;
}

.tab {
float: left; background-image: url(http://i.imgur.com/cFylTiq.png); 
}

.tab label {
display: block;
text-align: center; width: 37px;
font-family: 'Monda', serif; 
color: #fff; margin-right: 0px;
font-size: 7px;
letter-spacing: 0px;
text-transform: uppercase;
height: 20px; line-height: 12px; padding-top: 5px;
border: 0px solid #ccc;
position: relative; z-index: 1; top: 27px
top: 0px;
left: 0px;
}

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

.content {
position: absolute;
top: 24px; background-color: #ffffff;
left: 0px;
width: 450px;
height: 450px;  -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -o-transition-duration: .6s; 
}

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

[type=radio]:checked ~ label ~ .content {
z-index: 1; -webkit-transform: rotate(720deg); -o-transform: rotate(720deg); -moz-transform: rotate(720deg);
}

#idhover { width: 450px; height: 450px; overflow: hidden; }
.hover { width: 450px; height: 450px; background-color: #fff; position: relative; top: 450px; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -o-transition-duration: .7s; }
#idhover:hover .hover { top: 0px; }

.idqu { width: 220px; height: 40px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; margin-top: 3px; }

.idques { font-family: 'Rochester', cursive;  text-align: center; font-size: 18px; line-height: 13px; padding-top: 2px; }

.idans { font-family: 'Monda', serif; letter-spacing: 0px; text-transform: uppercase; text-align: center; font-size: 7px; }

.ruletitle { font-weight: 900; font-family: 'Lobster', cursive; letter-spacing: 2px;text-transform: none; text-align: center; font-size: 60px; letter-spacing: -3px; line-height: 20px; padding-top: 25px; padding-bottom: 24px; color: #ffffff;text-shadow: 1px 0px 0px #000000;  }

.refugee { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #FFF; padding-top:5px; padding-bottom: 5px; background-color: #BE973B; width: 450px; }
.military { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #FFF; padding-top:5px; padding-bottom: 5px; background-color: #36630d; width: 450px; }
.grouper { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #FFF; padding-top:5px; padding-bottom: 5px; background-color: #1b5984; width: 450px; }
.loner { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #d12f32; padding-top:5px; padding-bottom: 5px; background-color: #770707; width: 450px; }


.zombieap1 { font-family: 'Rochester', cursive; text-transform: none; text-align: center; font-size: 35px; letter-spacing: -1px; line-height: 20px;  color: #c4c4c4; text-shadow: 1px 0px 0px #000000; padding-top: 8px; padding-bottom: 0px; }

.zombieap1b { font-family: 'Rochester', cursive; text-transform: none; text-align: center; font-size: 35px; letter-spacing: -1px; line-height: 20px;  color: #c4c4c4; text-shadow: 1px 0px 0px #fff; padding-top: 8px; padding-bottom: 0px; }

.zombieap2 { border-top: 17px solid #63646b; width:150px; overflow: auto; height: 130px; }

.zombieboxy { width:150px; overflow: auto; height: 147px; }

.zombiepad { padding: 3px; font-family: 'Roboto Condensed', sans-serif; text-align: justify; font-size: 9px; line-height: 9px; letter-spacing: 0px; color: #63646b; text-transform: none; }
.zombiepad a { font-weight: 900; padding: 3px; font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 1px; color: #a81111; text-transform: uppercase; }
.zombiepad a:hover { font-weight: 900; padding: 3px; font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 1px; color: #5d2526; text-transform: uppercase; }

.zombiepadb { padding-left: 3px; padding-right: 3px; padding-top: 8px; padding-bottom: 4px; font-family: 'Roboto Condensed', sans-serif; text-align: justify; font-size: 9px; line-height: 9px; letter-spacing: 0px; color: #63646b; text-transform: none; }
.zombiepadb a { font-weight: 900; padding-left: 3px; padding-right: 3px; padding-top: 8px; padding-bottom: 4px; font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 0px; color: #a81111; text-transform: uppercase; }
.zombiepadb a:hover { font-weight: 900; padding-left: 3px; padding-right: 3px; padding-top: 8px; padding-bottom: 4px;  font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 0px; color: #5d2526; text-transform: uppercase; }
.padzom { padding: 5px; }

.musicplst { background-color: #1b5984; text-align: center; padding-left: 2px; padding-top: 2px; padding-bottom: 2px; margin-top: 1px; line-height: 10px; font-size: 7px; color: #fff; font-family: 'Monda', sans-serif; text-transform: uppercase; }
.musicspan { font-size: 9px;  padding-right: 10px; }
.musicwrite { padding-left: 20px; padding-right: 20px; height: 40px; overflow: auto; font-family: 'Roboto Condensed', sans-serif; font-size: 7px; text-transform: uppercase;  }


.idqu { width: 220px; height: 40px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; margin-top: 3px; }

.journaltitle { font-family: 'Rochester', cursive;  text-align: center; font-size: 18px; line-height: 13px; padding-top: 2px; }
.journaldate { text-align: right; font-family: 'Rochester', cursive;  font-weight: 100; font-size: 12px;  }
.journaltext { font-family: 'Monda', serif; letter-spacing: 0px; text-transform: uppercase; text-align: justify; font-size: 7px; }


.personalitytitle { font-family: 'Rochester', cursive;  text-align: center; font-size: 18px; line-height: 13px; padding-top: 2px; }
.personalitytext { font-family: 'Monda', serif; letter-spacing: 0px; text-transform: uppercase; text-align: justify; font-size: 7px; }
.personalitytext b { text-align: right; color: #BE973B; font-family: 'Monda', serif;  font-weight: 900; font-size: 7px; text-transform: uppercase; }
.personalitytext i { text-align: right; color: #36630d; font-family: 'Rochester', cursive; text-transform: none; font-size: 12px;  }
.personalitytext u { text-align: right; color: #1b8451; font-family: 'Monda', serif;  font-weight: 100; font-size: 7px; text-transform: uppercase; }

.malef { opacity: 0;transition-duration: 0.5s;-moz-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;-o-transition-duration: 0.5s; overflow: auto; width: 200px; height: 280px;  overflow: auto; color: #000000; background-color:#fcfcfc;  } .malef:hover { opacity: 1; } 
</style>

<center><div style="width: 450px; background-image: url(http://i.imgur.com/cFylTiq.png);">
<div class="ruletitle">lydia a. baratheon</div><div class="grouper">
➥ playby ➥ trait ➥ trait 
</div></div><div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">one</label>
<div class="content">

<center><div id="idhover"><div style="width: 450px; height: 450px; background-image: url(http://i.imgur.com/kjBEQ2S.png);"><div class="hover"><div class="padzom">
<table cellspacing='1' cellpadding='2'> <td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png);"><div class="malef"><p>
<div class="idques">Home Town</div><div class="idans">where they where raised</div>
<div class="idques">Birth Place</div><div class="idans">where they where born</div>
<div class="idques">Current Home</div><div class="idans">where they live now</div>
<div class="idques">Ethnicity</div><div class="idans">Whats their ethnic background</div>
<div class="idques">Religion</div><div class="idans">Do they believe in anything? </div>
</div></div></td><td><div style="width: 220px; height: 280px; line-height: 12px; ">
<div class="idques">Birth Name</div><div class="idans">lydia ann baratheon</div>
<div class="idques">Nickname(s)</div><div class="idans">dia, Annie, Ann</div>
<div class="idques">Birth Date</div><div class="idans">may 1st, twenty three</div>
<div class="idques">Height</div><div class="idans">5'1</div>
<div class="idques">Hair</div><div class="idans">pale blonde </div>
<div class="idques">Eyes</div><div class="idans">eye color</div>
<div class="idques">Gender</div><div class="idans">gender</div>
<div class="idques">Sexuality</div><div class="idans">sexuality here</div>
<div class="idques">Relationship Status</div><div class="idans">Single</div>
<div class="idques">Affiliation</div><div class="idans">any groups</div>
</div>
</td>
</table>
<div style="width: 420px; height: 150px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); ">
</div>

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

</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">two</label>
<div class="content"><div class="padzom"><table cellspacing='1' cellpadding='1'>
<td><div style="width: 120px; height: 440px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/3mLFBgh.png); ">    

</div></td><td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); "></div><div class="zombieap1">Weapons</div>
<div class="zombieap2"><div class="zombiepad">
To survive a zombie apocalypse one will need some sort of weapons. You can list and describe your weapons here. 
</div></div>

<div class="zombieap1">Skills</div>
<div class="zombieap2"><div class="zombiepad">
To survive a zombie apocalypse one will need to adapt and learn skills. Here is where you can list their zombie apocalypse skills. 
</div></div>

</td>
<td><div class="zombieap1">Location</div>
<div class="zombieap2"><div class="zombiepad">
Are they a part of a camp? Are they on the road? Where they here to stay - or do they have another goal in mind. If so, where. Ext.  
</div></div>

<div class="zombieap1">Living</div>
<div class="zombieap2"><div class="zombiepad">
Do they have a set place, whats it like? Is it a house, a farm? Camper? Tent? If its mobile what is the constant characteristics?
</div></div>


<div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); ">    </div></td>
</table>
</div>
</div>
</div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">three</label>
<div class="content">


<div class="padzom"><table cellspacing='1' cellpadding='1'>
<td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); "></div><div class="zombieap1b">Likes</div>
<div class="zombieboxy"><div class="zombiepadb">
character likes here
</div></div>

<div class="zombieap1b">Dislikes</div>
<div class="zombieboxy"><div class="zombiepadb">
character dislikes here
</div></div>

</td>
<td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); ">    </div>
<div class="zombieap1b">Goals</div>
<div class="zombieboxy"><div class="zombiepadb">
Character goals here
</div></div>

<div class="zombieap1b">Fears</div>
<div class="zombieboxy"><div class="zombiepadb">
Character fears here
</div></div>

</td><td><div style="width: 120px; height: 440px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/3mLFBgh.png); ">    </div></td>
</table>
</div>


</div>
</div>

<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">four</label>
<div class="content">


<center><div id="idhover"><div style="width: 450px; height: 450px; background-image: url(http://i.imgur.com/kjBEQ2S.png);"><div class="hover"><div class="padzom"><div style="width: 420px; height: 152px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); "></div>
<table cellspacing='1' cellpadding='2'> <td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="zombieap1b">Character Style</div><div class="zombiepadb">
What sort of clothing do they have, what is/was their favorite before the zombie apocalypse. Is it practical or more just an indulgence. Do they have more than one pair of clothes? What sort of shirts? Pants? Skirt? Jacket? Shoes? Write as little or as much as you like. You can link things like polyvor and the links will appear like <a href="">this</a>
</div></div>
</td><td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
</table></div></div></div></center>

</div>
</div>

<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">five</label>
<div class="content">

<div class="padzom"><div style="width: 420px; height: 150px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); "></div>
<table cellspacing='1' cellpadding='2'> <td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="zombieap1b">Character Playlist</div><div class="zombiepadb">

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>


</div></div>
</td><td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
</table></div>


</div>
</div>

<div class="tab">
<input type="radio" id="tab-6" name="tab-group-1">
<label for="tab-6">six</label>
<div class="content">

<div class="padzom">
<table cellspacing='1' cellpadding='2'> <td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td><td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="journaltitle">Dear Diary</div><div class="journaldate">## of Month,</div><div class="journaltext">
Diary / Journal entry from character</div>
</div>
</td>
</table>
<div style="width: 420px; height: 150px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); ">
</div>

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


<div class="tab">
<input type="radio" id="tab-7" name="tab-group-1">
<label for="tab-7">seven</label>
<div class="content">

<div class="padzom"><div style="width: 420px; height: 150px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); ">
</div>
<table cellspacing='1' cellpadding='2'><td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="personalitytitle ">Personality</div><div class="personalitytext">

Here is where you can go into detail about your characters personality. Your <b>bold text</b> will change to that and your <i>italic text</i> to that and your <u>underlined text</u> to that.

</div>
</div>
</td>
<td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
</table>

</div>

</div></div>


<div class="tab">
<input type="radio" id="tab-8" name="tab-group-1">
<label for="tab-8">eight</label>
<div class="content">

<div class="padzom"><table cellspacing='1' cellpadding='2'>
<td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td><td><div style="width: 15px;"></div></td><td><div style="width: 210px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/rIZh3Fs.png); "></div></td>
</table>
<table cellspacing='1' cellpadding='2'>
<td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
<td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="personalitytitle ">History</div><div class="personalitytext">

Here is where you can go into detail about your characters history. . Your <b>bold text</b> will change to that and your <i>italic text</i> to that and your <u>underlined text</u> to that.

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

</div>

</div></div>

<div class="tab">
<input type="radio" id="tab-9" name="tab-group-1">
<label for="tab-9">nine</label>
<div class="content">

<div class="padzom">
<table cellspacing='1' cellpadding='2'>
<td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="personalitytitle ">Relationships</div><div class="personalitytext">

Here is where you can go into detail about your characters relationships and family. . . What sort of romantic relationships do they / have they had? You could even give a write up on what kind of friend, enemy or lover they are. Your <b>bold text</b> will change to that and your <i>italic text</i> to that and your <u>underlined text</u> to that.

</div>
</div>
</td> <td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>

</table>
<table cellspacing='0' cellpadding='0'>
<td><div style="width: 210px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/rIZh3Fs.png); "></div></td><td><div style="width: 15px;"></div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); "></div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td>
</table>
</div>

</div></div>

<div class="tab">
<input type="radio" id="tab-10" name="tab-group-1">
<label for="tab-10">ten</label>
<div class="content">

<div class="padzom"><table cellspacing='0' cellpadding='0'>
<td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td><td><div style="width: 15px;"></div></td><td><div style="width: 210px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/rIZh3Fs.png); "></div></td>
</table>
<table cellspacing='1' cellpadding='2'>
<td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
<td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="personalitytitle ">Plotting & Future</div><div class="personalitytext">

 Have plots planned out for your character you dont want to forget? Have an end goal? Put it in here!  Your <b>bold text</b> will change to that and your <i>italic text</i> to that and your <u>underlined text</u> to that.

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

</div>

</div></div>

<div class="tab">
<input type="radio" id="tab-11" name="tab-group-1">
<label for="tab-11">eleven</label>
<div class="content">

<div class="padzom">
<table cellspacing='1' cellpadding='2'>
<td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="personalitytitle ">Miscellaneous</div><div class="personalitytext">

Basically do what ever you want here! Your <b>bold text</b> will change to that and your <i>italic text</i> to that and your <u>underlined text</u> to that.

</div>
</div>
</td> <td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>

</table>
<table cellspacing='0' cellpadding='0'>
<td><div style="width: 210px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/rIZh3Fs.png); "></div></td><td><div style="width: 15px;"></div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); "></div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td>
</table>
</div>

</div></div>


<div class="tab">
<input type="radio" id="tab-12" name="tab-group-1">
<label for="tab-12">twelve</label>
<div class="content">


<div class="padzom"><table cellspacing='1' cellpadding='1'>
<td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); "></div><div class="zombieap1b">Misc. Title</div>
<div class="zombieboxy"><div class="zombiepadb">
misc text here
</div></div>

<div class="zombieap1b">Misc. Title</div>
<div class="zombieboxy"><div class="zombiepadb">
misc text here
</div></div>

</td>
<td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); ">    </div>
<div class="zombieap1b">Misc. Title</div>
<div class="zombieboxy"><div class="zombiepadb">
misc text here
</div></div>

<div class="zombieap1b">Misc. Title</div>
<div class="zombieboxy"><div class="zombiepadb">
misc text here
</div></div>

</td><td><div style="width: 120px; height: 440px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/3mLFBgh.png); ">    </div></td>
</table>
</div>


</div>
</div>

</div><div class="grouper">
<div style="font-family: 'Monda', serif; font-size: 7px; text-transform; uppercase; letter-spacing: 0px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=18211"><div style="letter-spacing: 1px; text-transform: uppercase; font-style: italic; width: 450px; font-weight: 600; font-family: 'Roboto Condensed', sans-serif; color: #ffffff; font-size: 8px;">thank-you maleficent of shadowplay</div></a></div>
</div></div>
</center>

0

42

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

<style type="text/css">

p, h2 {padding:0; margin:0;}

#wineberry {
width: 200px;
margin: 0 auto;
background-color:#F5F7F5;
border-bottom: 5px #445254 solid; 
border-top: 1px #352D39 solid;
}

#wineberry .inner {
padding: 10px;
font: normal normal normal 13px/110% arial, sans-serif;
}

#wineberry h2 {
padding-bottom: 10px;
color:#531A27;
font-family: 'Droid Serif', serif;
font-style: italic;
text-align:center;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}

#wineberry span {
color:#727938;
font-style:italic;
}

#wineberry .center {
font-weight:800;
}

#wineberry a{
color:#727938;
}

</style>

<div id="wineberry">
<div class="inner">
<h2>hault</h2>
<p>i'd like you to <span>keep the credit on</span> and link back if you use, just cause i wanna see! 
if you need help changing any colors, <span>feel free to pm me</span>, because i'd love to help! 
<span class="center">image:</span> 350x150
</p>
</div>


</div>


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

.flipwrap p, .flipwrap h2, .flipwrap h3 {padding:0;margin:0;}

.flipwrap ::-webkit-scrollbar { background: #fff; width: 0; }
.flipwrap ::-webkit-scrollbar-thumb { background: #fff; }
.flipwrap ::-webkit-scrollbar-corner { background: #fff; }

.flipwrap {
width:350px;
height:145px;
margin:0 auto;
background-color:rgba(58,51,53,1.0);
border-bottom:5px rgba(240,84,79,1.0) solid;
}

.card-container {
 height: 150px;
 perspective: 600;
 position: relative;
 width: 350px;
}
.card {
 height: 100%;
 position: absolute;
 transform-style: preserve-3d;
 transition: all 1s ease-in-out;
 width: 100%;
}
.card:hover {
 transform: rotateY(180deg);
}
.card .side {
 backface-visibility: hidden;
 height: 100%;
 position: absolute;
 width: 100%;
}
.card .back {
 transform: rotateY(180deg);
}

.content {
text-align:center;	
width: 200px;
padding: 10px;
height: 130px;
overflow:auto;
margin: 0 70px 0 70px;
background-color:rgba(240,84,79,1.0);
}

.content p {
height: 113px;
overflow:auto;
text-align:justify;
color:rgba(58,51,53,1.0);
}

.content h3 {
height: 17px;
font-family: 'Playfair Display', serif;
font-size:20px;
text-transform:uppercase;
color:rgba(58,51,53,1.0);
font-size:15px;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}

.content h3:hover {
color: rgba(253,240,213,.7);
}

.content a {
text-decoration:none;
color: rgba(253,240,213,.7);
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}

.content a:hover {
color: rgba(253,240,213,1.0);
}






</style>


<div class="flipwrap">

<div class="card-container">
   <div class="card">
     <div class="side"><img src="http://placehold.it/350x150"/></div>
     <div class="side back">
     	<div class="content">
     	<p>Mesdames et Messieurs <a href="">S'il vous plaоt</a> Soyez prкt pour AronChupa et Albatraoz C'est parti! Let me tell you all a story About a mouse named Lorry Yeah, Lorry was a mouse In a big brown house She call herself the hoe With the money money blow But fuck that little mouse 'Cause I'm an albatraoz I'm an albatraoz I'm an albatraoz Yeah, Lorry said she was a mouse Smoked the cheese and light it out Moneyli money money hoe Katching katching katching kablow Yeah, Lorry was a witch, Yeah, a sneaky little bitch So fuck that little mouse 'cause I'm an albatraoz I'm an albatraoz I'm an albatraoz Mesdames et Messieurs S'il vous plaоt Soyez prкt pour AronChupa et Albatraoz C'est parti! I got it! Ooh, i see ya, ooh, i see ya, ooh, i see ya I'm an albatraoz I'm, I'm, I'm... Stop! I got it I'm an albatraoz This is albatraoz
</p>
     	<h3>i'm an albatraoz</h3>
     	</div>
     </div>
   </div>
</div>

</div>

0

43

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<style type="text/css">
.ethan { width: 180px; height: 300px; opacity: 0; transition-duration: 0.8s;  -moz-transition-duration: 0.8s;  -webkit-transition-duration: 0.8s;  -o-transition-duration: 0.8s; }
.ethan:hover { width: 180px; height: 300px; opacity: 1; }
.aiden a, .aiden b { font-family: calibri; font-size: 8px; text-transform: uppercase; line-height: 100%; letter-spacing: 2px; font-style: italic; color: #000 }
.aiden::-webkit-scrollbar { background: #222; width: 5px; }
.aiden::-webkit-scrollbar-thumb { background: #f0f0f0;  }
.aiden::-webkit-scrollbar-corner { background: #222; }
.cuteness { width: 160px; background-color: #222; padding-top: 5px; padding-bottom: 5px; font-size: 7px; color: #fff; font-family: calibri; text-transform: uppercase; line-height: 100%; text-align: center; letter-spacing: 2px }
</style>

<center><table cellpadding="0" cellspacing="0"><td><div style="width: 180px; height: 300px; padding: 5px; background-color: #fafafa; border: 3px double #e6e6e6"><div style="width: 180px; height: 300px; background-image: url(180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE)"><div class="ethan"><div style="width: 180px; height: 300px; background-image: url(180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE 180X300 IMAGE HERE)"><div style="height: 200px"></div><div style="width: 140px; height: 70px; background-color: #222; margin-left: 10px; opacity: .6; padding: 10px"><div style="width: 140px; height: 70px; overflow: hidden; font-size: 7px; color: #fff; font-family: calibri; text-transform: uppercase; line-height: 100%; text-align: justify; letter-spacing: 2px">And the tears come streaming down your face When you lose something you can't replace When you love someone but it goes to waste Could it be worse Lights will guide you home And ignite your bones And I will try to fix you --------------------- ✹</div></div></div></div></div></div></td> <td><div style="width: 2px"></div></td> <td><div style="width: 190px; height: 300px; background-color: #fafafa; padding: 5px; border: 3px double #e6e6e6;"><div style="width: 190px; font-family: 'Alex Brush'; font-size: 60px; text-transform: lowercase; line-height: 80%; text-align: center; letter-spacing: -1px; color: #fff; text-shadow: 1px 1px 0px #222; margin-bottom: -10px">FIRST L.</div>

<div style="width: 170px; height: 240px; padding: 10px"><div style="width: 165px; padding-right: 5px; height: 240px; overflow: auto; font-family: georgia; font-size: 9px; text-align: justify; line-height: 100%; color: #222" class="aiden">

<p><div class="cuteness">basics</div><p>

<a href="link">application</a> ▶ blab
<p><a href="link">shipping</a> ▶ blah
<p><a href="link">request</a> ▶ blah

<p><div class="cuteness">on going</div><p>

<a href="link">title</a> ▶ cute little description on thread
<p><a href="link">title</a> ▶ cute little description on thread
<p><a href="link">title</a> ▶ cute little description on thread
<p><a href="link">title</a> ▶ cute little description on thread
<p><a href="link">title</a> ▶ cute little description on thread
<p><a href="link">title</a> ▶ cute little description on thread

<p><div class="cuteness">completed</div><p>

<a href="link">title</a> ▶ cute little description on thread
<p><a href="link">title</a> ▶ cute little description on thread
<p><a href="link">title</a> ▶ cute little description on thread
<p><a href="link">title</a> ▶ cute little description on thread
<p><a href="link">title</a> ▶ cute little description on thread
<p><a href="link">title</a> ▶ cute little description on thread

<p><div class="cuteness">future</div><p>

[b]name[/b] ▶ description on future threads
<p>[b]name[/b] ▶ description on future threads
<p>[b]name[/b] ▶ description on future threads
<p>[b]name[/b] ▶ description on future threads
<p>[b]name[/b] ▶ description on future threads
<p>[b]name[/b] ▶ description on future threads

</div></div></div></td></table>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=3722" style="font-family: arial; font-size: 7px; text-transform: uppercase; line-height: 90%; color: #999; ">&copy; darren criss.</a></center>

0

44

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

<div style="width: 405px; border-left: #261717 8px solid;">

<div style="width: 400px; border-left: #8F4C5B 5px solid; background: #EBE6D5; padding: 10px 10px 10px 10px;">

<div style="width: 380px; color: #8F4C5B; text-align: center; text-transform: uppercase; font-size: 9px; font-family: verdana; height: 10px; border-top: 1px solid #8F4C5B; border-bottom: #8F4C5B 1px solid; margin-bottom: 13px; padding-top: 3px; padding-bottom: 5px;">month day, year</div>

<div style="background: transparent; font-size: 35px; color: #261717; font-family: 'Aguafina Script', cursive; text-align: left; padding-left: 5px; padding-top: 15px; padding-bottom: 15px;">Dear Journal,</div>

<div style="width: 380px; font-family: verdana; color: black; font-size: 10px; line-height: 100%; text-align: justify;"><div style="width: 100px; height: 100px; background:url(100x100 image url here); float: left; margin: 0px 10px 3px 0px;"></div>Journal entry goes here</div>

<div style="background: transparent; font-size: 35px; color: #261717; font-family: 'Aguafina Script', cursive; text-align: right; padding-right: 10px; padding-top: 10px; padding-bottom: 15px;">Sincerely, Name</div>

<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=4002"><div style="width: 380px; color: #8F4C5B; text-align: center; font-size: 12px; font-variant: small-caps; font-family: verdana; height: 10px; border-top: 1px solid #8F4C5B; border-bottom: #8F4C5B 1px solid; margin-top: 13px; padding-top: 3px; padding-bottom: 5px;">made by jazmine at shadowplay</div></a>

</div></div>

</center>

0

45

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=VT323|Share+Tech+Mono|Over+the+Rainbow' rel='stylesheet' type='text/css'><style type="text/css" >
.minisbg { background-image: url(http://i62.tinypic.com/303cqqr.jpg);  width: 590px; height: 458px; margin: 10px; background-color: #dfdddd; padding: 0px; }
.minisname { font-family: 'Share Tech Mono'; position: relative; left: 50px; top: -236px; color: #956b6e; font-size:18px; letter-spacing: -2px; float:left; }
.minisdept { font-family: 'Share Tech Mono'; position: relative; right: 120px; top: -203px; color: #956b6e; font-size:18px; letter-spacing: -2px; float: left; }
.minisholdsig { font-family: 'Over the Rainbow', cursive;  position: relative; right: 320px; top: 30px; font-weight: bold; color: #534B4F; font-size: 19px; }
.dobsignsun { font-family: 'Share Tech Mono'; position: relative; left: 170px; top:4px; color: #956b6e; font-size:15px; letter-spacing: -2px; }
.dobsignmoon { font-family: 'Share Tech Mono'; position: relative; left: 255px; top: -14px; color: #956b6e; font-size:15px; letter-spacing: -2px; }
.coloreyes { font-family: 'Share Tech Mono'; position: relative; left: 140px; top:-3px; color: #956b6e; font-size:15px; letter-spacing: -2px; }
.colorhair { font-family: 'Share Tech Mono'; position: relative; left: 255px; top: -22px; color: #956b6e; font-size:15px; letter-spacing: -2px; }
.weightmom { font-family: 'Share Tech Mono'; position: relative; left: 110px; top:-11px; color: #956b6e; font-size:15px; letter-spacing: -2px; }
.heightmom { font-family: 'Share Tech Mono'; position: relative; left: 244px; top: -31px; color: #956b6e; font-size:15px; letter-spacing: -2px; }
.personphonto { background-image: url(http://placehold.it/210x240); width: 210px; height:240px; position: relative; top: -15px; left: 171px;}
.dateisud { font-family: 'Share Tech Mono'; position: relative; left: 190px; top:2px; color: #956b6e; font-size:15px; letter-spacing: -2px; }
.empidnum { font-family: 'Share Tech Mono'; position: relative; left: 190px; top: 55px; color: #956b6e; font-size:20px; letter-spacing: -2px; }
.momcreditme {  width: 480px; height: 15px; margin-top: 0px; color: #3B444B; font-family: 'share tech mono',  text-transform: uppercase; font-size: 13px; padding-top: 0px; font-size: 10px;  }
</style>
<center>
 <div class="minisbg">  
   <div class="dobsignsun">Leo</div>
   <div class="dobsignmoon">Sagittarius</div>
   <div class="coloreyes">Blue</div>
   <div class="colorhair">Brown</div>
   <div class="weightmom">164</div>
   <div class="heightmom">5 &nbsp;&nbsp;&nbsp;&nbsp; 8</div>
   <div class="personphonto"></div>
   <div class="dateisud">Jupiter in Scorpio</div>
   <div class="empidnum">*I493859394*</div>
 <div class="minisname">Krisdiana Lilith Droverson</div>
 <div class="minisdept">Minister of Magic</div>
 <div class="minisholdsig">Krisdiana Lilith Droverson</div>

 </div>
<div class="momcreditme"> created by MORBID MEMORIES @ <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=2600"STYLE="TEXT-DECORATION: NONE"><font color="#663854">Shadowplay</font></a></div>
</center>

0

46

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto' rel='stylesheet' type='text/css'>
<center>
<style>
#retrospectm {height: 120px; width: 360px; background-image: url(http://i.imgur.com/jZus0Qw.png); overflow: hidden; position: relative}
.retrospectp1 {width: 360px; height: 120px; position: absolute}
.retrospectp2 {width: 360px; height: 120px; position: absolute}

.retrospectn {font-family: 'Montserrat'; color: #0094cf; font-size: 32px; text-transform: uppercase; position: absolute; top: 55px; font-weight: 700; letter-spacing: -2.5px; text-align: center; width: 360px}
.retrospecti {font-family: 'roboto'; color: #fff; font-size: 10px; width: 290px; background-color: #00babd; position: absolute; top: 80px; text-transform: uppercase; font-style: italic; text-align: center; height: 18px; line-height: 18px; left: 35px}

#retrospectm .retrospectp1 {top: 0px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear;}
#retrospectm:hover .retrospectp1 {top: 120px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear;}

#retrospectm .retrospectp2 {top: -120px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear;}
#retrospectm:hover .retrospectp2 {top: 0px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear;}


.retrospectpic {height: 80px; width: 80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 10px solid #fff; position: absolute; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); top: 10px; left: 10px}

.retrospectpb {height: 80px; width: 80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: #00ebb8; opacity: 0.5; position: absolute; top: 20px; left: 20px;}

.retrospecttd {height: 90px; width: 210px; position: absolute; top: 10px; left: 130px; background-color: #fff; font-family: 'Roboto'; text-transform: uppercase; font-size: 10px; text-align: left; line-height: 95%; padding: 5px; overflow: auto; color: #000}

.retrospecttd::-webkit-scrollbar {width: 0px; background-color: transparent}

.retrospecttd h1 {text-align: right; width: 210px; margin: 10px 10px 10px 5px; color: #00ebb8; font-style: italic; letter-spacing: 2px; line-height: 100%; font-size: 10px; border-bottom: 1px solid #000; padding-bottom: 3px; padding-right: 3px; position: relative; right: 5px}

.retrospecttd h2 {text-align: right; width: 210px; margin: 10px 10px 10px 5px; color: #9aedc1; font-style: italic; letter-spacing: 2px; line-height: 100%; font-size: 10px; border-bottom: 1px solid #000; padding-bottom: 3px; padding-right: 3px; position: relative; right: 5px}


.retrospecttd h3 {text-align: right; width: 210px; margin: 10px 10px 10px 5px; color: #e4ffcf; font-style: italic; letter-spacing: 2px; line-height: 100%; font-size: 10px; border-bottom: 1px solid #000; padding-bottom: 3px; padding-right: 3px; position: relative; right: 5px}


.retrospecttd a {color: #00babd; text-decoration: none}
.retrospecttd i {color: #00babd; font-family: 'Roboto'; font-size: 10px}

</style>
<div id="retrospectm">
<div class="retrospectp1">
<div class="retrospectn">FIRST M. LAST</div>
<div class="retrospecti">SOME WORDS HERE</div>
</div>
<div class="retrospectp2">
<div class="retrospectpic" style="background-image:url(80X80 IMG/GIF HERE)"></div>
<div class="retrospectpb"></div>
<div class="retrospecttd">
<h1>active</h1>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<h2>comms</h2>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<h3>inactive</h3>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>


</div>

</div>

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

0

47

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<center>
<div style="width: 450px; background: #fff; padding: 20px; box-shadow:3px 3px 5px #888888; -moz-box-shadow: 3px 3px 5px #888888; -webkit-box-shadow: 3px 3px 5px #888888; -o-box-shadow:3px 3px 5px #888888;">
<div style="font-family: lily script one; font-size: 35px; color: #323369; margin-left: 163px; line-height: 70%;">face claim</div>
<div style="width: 220px; height: 8px; background: #733b94; border-left: 80px solid #418275; border-right: 150px solid #b865c7;"></div>
<div style="width: 400px; height: 120px; font-family: roboto; font-size: 10px; line-height: 95%; color: #3b3b3b; overflow: auto; text-align: justify; padding-top: 20px; margin-bottom: -15px;">

FACE CLAIM INFO HERE

</div>
<table><tr>
<td><center><div style="width: 200px; height: 30px; background: #b865c7; font-family: lily script one; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">female</div>
<div style="width: 190px; height: 150px; padding: 5px; font-family: roboto; text-transform: lowercase; font-size: 10px; line-height: 95%; color: #3b3b3b; overflow: auto; text-align: justify;">

[color=#b865c7]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#b865c7]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#b865c7]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#b865c7]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#b865c7]CELEBLAST, CELEBFIRST[/color] → character name <br>

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

<td><center><div style="width: 200px; height: 30px; background: #418275; font-family: lily script one; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">male</div>
<div style="width: 190px; height: 150px; padding: 5px; font-family: roboto; text-transform: lowercase; font-size: 10px; line-height: 95%; color: #3b3b3b; overflow: auto; text-align: justify;">

[color=#418275]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#418275]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#418275]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#418275]CELEBLAST, CELEBFIRST[/color] → character name <br>
[color=#418275]CELEBLAST, CELEBFIRST[/color] → character name <br>

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

<td><center><div style="width: 200px; height: 30px; background: #323369; font-family: lily script one; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">reserved</div>
<div style="width: 190px; height: 150px; padding: 5px; font-family: roboto; text-transform: lowercase; font-size: 10px; line-height: 95%; color: #3b3b3b; overflow: auto; text-align: justify;">

[color=#323369]CELEB NAME[/color] → for name until 00/00 <br>
[color=#323369]CELEB NAME[/color] → for name until 00/00 <br>
[color=#323369]CELEB NAME[/color] → for name until 00/00 <br>
[color=#323369]CELEB NAME[/color] → for name until 00/00 <br>
[color=#323369]CELEB NAME[/color] → for name until 00/00 <br>

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

<td><center><div style="width: 200px; height: 30px; background: #733b94; font-family: lily script one; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">wanted</div>
<div style="width: 190px; height: 150px; padding: 5px; font-family: roboto; text-transform: lowercase; font-size: 10px; line-height: 95%; color: #3b3b3b; overflow: auto; text-align: justify;">

[color=#733b94]CELEB NAME[/color] →  <a href="wantadlink">◼</a> <br>
[color=#733b94]CELEB NAME[/color] →  <a href="wantadlink">◼</a> <br>
[color=#733b94]CELEB NAME[/color] →  <a href="wantadlink">◼</a> <br>
[color=#733b94]CELEB NAME[/color] →  <a href="wantadlink">◼</a> <br>
[color=#733b94]CELEB NAME[/color] →  <a href="wantadlink">◼</a> <br>

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

CODES HERE IF YOU NEED (IF NOT JUST DELETE THIS SENTENCE)

<div style="width: 220px; height: 8px; background: #733b94; border-left: 80px solid #418275; border-right: 150px solid #b865c7;"></div>
</div>
<div style="font-family: arial; text-transform: uppercase; letter-spacing: 4px; line-height: 11px; font-size: 7px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=148">little dove.</a></div>
</center>

0

48

Код:
/* MINI PROFILE CODE BY JAZMINE AT SHINE */
.btwmg { width: 220px; height: 30px; font-family: 'Oswald', sans-serif; color: white; border-bottom: 5px solid #96E8E6; font-size: 20px; text-transform: uppercase; background: black; padding-top: 5px; }
.btwcon { width: 180px; height: 280px; background: black; opacity: 0; transition-duration: 0.8s;-moz-transition-duration: 0.8s;-webkit-transition-duration: 0.8s;-o-transition-duration: 1.0s; padding: 10px; line-height: 100%; }
.btwcon:hover { opacity: .8; }
.btwname { font-family: 'Roboto Condensed', sans-serif; font-size: 20px; color: white; text-align: center; text-transform: uppercase; padding-top: 8px; padding-bottom: 8px; }
.btwstatus { width: 180px; height: 20px; background: #96E8E6; font-family: 'Roboto Condensed', sans-serif; color: white; text-align: center; font-size: 11px; text-transform: uppercase; padding-top: 10px; font-weight: bold; text-shadow: 1px 1px 1px black; margin-bottom: 5px; }
.btwquotes { color: white; font-family: 'Lora', serif; font-size: 60px; color: white; text-align: left;  }
.btwquote { color: white; font-family: calibri; font-size: 10px; text-align: justify; line-height: 100%; padding-top: 10px; }
.btwbox { width: 180px; height: 20px; background: white; color: black; font-family: 'Roboto Condensed', sans-serif; font-size: 11px; text-transform: uppercase; padding-top: 10px; margin-bottom: 5px; }
Код:
<center><div style="width: 200px; height: 300px; border: 10px solid black; background:url(<!-- |avatar| -->);"><div class="btwcon"><table><tr><th valign="top"><div class="btwquotes">“</div></th><th valign="top"><div class="btwquote"><!-- |field_1| --></div></th></tr></table><div class="btwbox"><!-- |field_2| --> - <!-- |posts| --> posts - <!-- |field_3| --></div><div class="btwstatus"><!-- |field_4| --> is <!-- |status| -->!</div><div class="btwbox"><a href="<!-- |field_5| -->">application</a> - <a href="<!-- |field_6| -->">shipper</a></div><div style="width: 180px; height: 90px; background:url(<!-- |field_7| -->);"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="180px" height="10px"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#96E8E6" /><param name="FlashVars" value="mp3=<!-- |field_8| -->" /></object></div></div><div class="btwmg">- <!-- |g_title| --> -</div></center>

0

49

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<style type="text/css"> 
.helenaapp {
width: 500px;
height: auto;
position: relative;
overflow: hidden; 
background-image: url('http://i.imgur.com/50XfyJN.png');
border: 20px solid #ebfdd4;
outline: 1px dashed #b1f6cb;
text-align: justify;
}

.helenaapp ::-webkit-scrollbar { background: #ebfdd4; width: 5px; border: 2px solid #ebfdd4; }
.helenaapp ::-webkit-scrollbar-thumb { background: #b1f6cb; }

.helenaapp .content h1 {
color: #7bab8d;
text-align: center;
font-family: 'Slabo 27px', serif;
font-size: 40px;
text-transform: uppercase;
letter-spacing: -3px;
}

.helenaapp .content h2 {
margin: 1px auto 0px;
text-align: right;
font-family: calibri;
font-size: 10px;
text-transform: uppercase;
background: #ccfacf;
color: #617c87;
padding: 5px;
}

.helenaapp .content h3 {
margin: -5px auto 0px;
text-align: center;
font-family: calibri;
font-size: 10px;
text-transform: uppercase;
background: #ccfacf;
color: #617c87;
letter-spacing: 1px;
padding: 5px;
}

.helenaapp .helenacontainer {
margin: 10px auto;
height: auto;
width: 500px;
}

.helenaapp .tabs {
margin: 0px auto; 
position: relative;
right: 0px;
width: 480px; 
height:  220px;
}

.helenaapp .tab {
float: left;
}

.helenaapp .tab label {
display: block; 
width: 0px;
height: 0px;
background: none;
position: relative;
left: 65px;
top: -25px;
margin-left: 40px;
z-index: 2;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 25px solid #b1f6cb;
}

.helenaapp .tab input[type=radio]:checked ~ label {
background: none;
z-index: 2;
}

.helenaapp .tab input[type=radio] {
display: none;
}

.helenaapp .content {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: #ebfdd4;
padding: 5px;
border: 20px solid #dcfbd2;
outline: 1px dashed #b1f6cb;
overflow: auto;
opacity: 0;
-webkit-transition: 0.8s all ease-in-out; 
-moz-transition: 0.8s all ease-in-out;
-ms-transition: 0.8s all ease-in-out; 
-o-transition: 0.8s all ease-in-out; 
transition: 0.8s all ease-in-out; 
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translateY(-10px); 
-moz-transform: rotate(0deg) scale(1) skew(0deg) translateY(-10px); 
-ms-transform: rotate(0deg) scale(1) skew(0deg) translateY(-10px); 
-o-transform: rotate(0deg) scale(1) skew(0deg) translateY(-10px); 
transform: rotate(0deg) scale(1) skew(0deg) translateY(-10px);
}

.helenaapp .content img {
float: right;
}

.helenaapp .tab input[type=radio]:checked ~ label ~ .content {
z-index: 1;
opacity: 1; 
-webkit-transition: 0.8s all ease-in-out; 
-moz-transition: 0.8s all ease-in-out; 
-ms-transition: 0.8s all ease-in-out; 
-o-transition: 0.8s all ease-in-out;
transition: 0.8s all ease-in-out; 
-webkit-transition-delay: 0.8s all ease-in-out; 
-moz-transition-delay: 0.8s all ease-in-out; 
-ms-transition-delay: 0.8s all ease-in-out; 
-o-transition-delay: 0.8s all ease-in-out; 
transition-delay: 0.8s all ease-in-out; 
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translateY(0px); 
-moz-transform: rotate(0deg) scale(1) skew(0deg) translateY(0px); 
-ms-transform: rotate(0deg) scale(1) skew(0deg) translateY(0px); 
-o-transform: rotate(0deg) scale(1) skew(0deg) translateY(0px); 
transform: rotate(0deg) scale(1) skew(0deg) translateY(0px);
}
</style>

<center>
<div class="helenaapp">
<img src="http://33.media.tumblr.com/f7ea4a91aaa3f97419dd5df2fa471506/tumblr_no3g1z4VzB1txan9ao2_500.gif">
<div class="helenacontainer">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1"></label>
<div class="content">
<h1>First</h1>
<center>
<table cellspacing="5" cellpadding="2" style="width: 80%; margin-bottom: -15px;">
<tr><td><h3>Nickname</h3></td> <td><h3>Age</h3></td></tr>
<tr><td><h3>Group</h3></td> <td><h3>Face Claim</h3></td></tr>
</table>
</center>
<h1>Last</h1>
</div>
</div>


<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2"></label>
<div class="content" style="overflow: hidden;">
<table style="margin-top: -4px;"><tr>
<td>
<table style="width: 270px; text-align: left; font-family: calibri; font-size: 9px!important; text-transform: uppercase;">
<tr><td width="150"><h2>Birthday</h2></td> <td>Month | Day | Year</td></tr>
<tr><td width="150"><h2>Hometown</h2></td> <td>City | State | Country</td></tr>
<tr><td width="150"><h2>Occupation</h2></td> <td>Position | Company</td></tr>
<tr><td width="150"><h2>Gender</h2></td> <td>Male | Female</td></tr>
<tr><td width="150"><h2>Relationship</h2></td> <td>Status Here</td></tr>
<tr><td width="150"><h2>Schooling</h2></td> <td>Diploma | Degree</td></tr>
</table>
</td>
<td valign="middle">
<img src="http://placehold.it/150x160">
</td></tr></table>
</div>
</div>


<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3"></label>
<div class="content" style="line-height: 11px;">
Post-ironic art party farm-to-table mumblecore messenger bag cliche. Ethical single-origin coffee pop-up distillery, tofu farm-to-table beard authentic kogi irony tattooed typewriter. Mustache four loko skateboard, Helvetica messenger bag PBR deep v farm-to-table readymade synth try-hard asymmetrical. Gentrify quinoa church-key hoodie, wayfarers lomo locavore VHS four dollar toast Intelligentsia Godard lo-fi chia roof party Shoreditch. Typewriter Carles 3 wolf moon, bicycle rights meh retro meditation. Blue Bottle shabby chic kale chips Marfa kitsch. Jean shorts Godard quinoa iPhone, viral pickled letterpress hashtag cornhole drinking vinegar ennui Pinterest.
<p>
Crucifix trust fund tousled viral food truck. Banksy viral Bushwick, Godard fap cronut 90's Williamsburg bespoke post-ironic. +1 beard messenger bag trust fund pork belly, sartorial dreamcatcher brunch. Vegan butcher chia, fanny pack ugh shabby chic PBR. Street art Helvetica Blue Bottle viral, 90's art party kogi cold-pressed deep v Banksy. McSweeney's Tumblr brunch, tote bag chambray craft beer selfies. Shabby chic flannel ugh, Neutra +1 tote bag hella meh salvia viral tilde.
</div>
</div>

<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1" checked>
<label for="tab-4"></label>
<div class="content">
<br><br>
<h1>alias</h1>
<center>
<table cellspacing="5" cellpadding="2" style="width: 80%;">
<tr><td><h3>Age</h3></td> <td><h3>Timezone</h3></td></tr>
<tr><td><h3>Contact</h3></td> <td><h3>Character #</h3></td></tr>
</table>
</center>
</div>
</div>
</div>
</div>
</div>

<div style="font-size: 10px; width: 400px; text-align: center; margin-top: 5px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=7482">♥</a></div>
</center>

0

50

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Marck+Script|Playball|Cookie|Luckiest+Guy|Ruslan+Display' rel='stylesheet' type='text/css'>
<style type="text/css">
.faceclaim {width: 205px; height: 300px; background-color: #ede4ff; font-family: 'Monda', sans-serif; font-size: 10px; padding: 5px; text-transform: none; line-height: 10px; letter-spacing: 0px;text-align: justify; color: #8974b3; text-align: center; border: 1px solid #dcd3f4; overflow: auto;}
.faceclaim a:link, .fac6a  a:visited, .fac6a a:active { font-family: 'Monda', sans-serif; color: #8974b3; text-transform: uppercase; font-size: 9px; }
.faceclaim a:hover { font-family: 'Monda', sans-serif; color: #060d4a; }
</style>
<div style="width: 500px; height: 510px; background-image: url(http://i.imgur.com/P9Hbief.png);">
<div style="height: 25px;"></div><div style="width: 450px; height: 460px; background-color: #f2eff7; border: 2px solid #8974b3;">   <br>
<div style="width: 80%; line-height: 20px; font-family: 'Marck Script', cursive; text-shadow:1px 1px 0px #ffffff; font-size: 40px; background-image:  url(http://i.imgur.com/52u39La.png); color: #8974b3; border: 1px solid #dcd3f4;"><center><br>The Face Claims</center><div style="font-family: 'Monda', sans-serif; font-size: 10px; padding: 5px; text-transform: none; line-height: 10px; letter-spacing: 0px;text-align: justify; color: #8974b3;"> 
face claims are first come first served. no doubles unless they're twins. </div>
</div><br><br>
<table><td>
<div style="font-family: 'Marck Script', cursive; text-shadow:1px 1px 0px #ffffff; font-size: 40px; color: #be5dc9; text-align: center; line-height: 35px;">Females</div>
<center><div class="faceclaim">

<a href="">HERE</a>

</div></center>
</td>
<td><div style="font-family: 'Marck Script', cursive; text-shadow:1px 1px 0px #ffffff; font-size: 40px;  color: #b37474; text-align: center;  line-height: 35px;">Males </div>
<center><div class="faceclaim">

<a href="">HERE</a>

</div></center>
</td></table>
</div>
</div><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=18211"><div style="letter-spacing: 1px; text-transform: uppercase; font-style: italic; width: 300px; font-weight: 600; font-family: 'Roboto Condensed', sans-serif; color: #111111; font-size: 8px;">thank-you maleficent of shadowplay</div></a></div>

0

51

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Contrail+One|Karla' rel='stylesheet' type='text/css'>
<style type="text/css">
.info { 
background-color: #fcfcfc; 
opacity: 0.7;
color: #d8c799; 
display: block; 
padding: 10px; 
margin: 2px; 
font-size: 13px; 
line-height: 1; 
height: 14px; 
-moz-border-radius: 0px 50px 50px 0px;
-webkit-border-radius: 0px 50px 50px 0px;
-khtml-border-radius: 0px 50px 50px 0px;
border-radius: 0px 50px 50px 0px;
transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-webkit-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
}

.info:hover {
opacity: 1;
border-left: 10px solid #e3a90e;
-moz-border-radius: 50px 0px 0px 50px;
-webkit-border-radius: 50px 0px 0px 50px;
-khtml-border-radius: 50px 0px 0px 50px;
border-radius: 50px 0px 0px 50px;
}
</style>

<div style="width: 450px; padding: 40px; background-color: #f3f2e8; color: #b6ad92; text-align: justify; font-family: 'Karla', sans-serif;">
<div style="color: #ecd553; font-family: 'Contrail One', sans-serif; text-shadow: -1px 0px #fcfcfc, 1px 0px #fcfcfc, 0px -1px #fcfcfc, 0px 1px #fcfcfc; text-align: center; font-size: 48px; letter-spacing: -1px; padding: 20px; border-bottom: 5px solid #f4eaa8;">FIRST MIDDLE LAST</div>

<div style="width: 450px; padding: 10px 0; border-top: 5px solid #e3a90e;">
<img src="http://placehold.it/250x250" alt="250x250" />
<div style="width: 190px; height: 250px; float: right; margin-top: -2px;">
<div class="info">age in words</div>
<div class="info">date of birth</div>
<div class="info">membergroup</div>
<div class="info">occupation</div>
<div class="info">marital status</div>
<div class="info">face claim</div>
<div class="info">player</div>
</div>

</div>

Liquor ipsum dolor sit amet. Quisque, flaming dr pepper malesuada linkwood libero bibendum ultrices chopin mauris flirtini gin and tonic. Hac feugiat senectus magna id kremlin colonel flaming volcano. Van winkle family reserve bibendum; libero curae senectus luctus hendrerit yorsh, vehicula--enim; adipiscing magna. Nikolaschka paloma lejon, seven and seven: varius, ornare quis proin jose cuervo tempor lagavulin viverra. Phasellus tanqueray; toro rojo metus heart of fire ipsum, praesent in per. Hendrerit feugiat conubia nisl, nam dictumst luctus suscipit planter's punch, luctus sidecar commodo rose kennedy cocktail purus quam.
<br /><br />
Ut caol ila knockdhu, velit imperdiet; suspendisse vesper martini dapibus interdum hendrerit oban porta lobortis. Eget angel's tit wolfram; caipirinha abhainn dearg auchroisk non usher's glenlivet wolfschmitt cursus odio glenlossie vodka sundowner semper polmos krakow. Quam est seagrams praesent snowball faucibus eros brandy alexander deanston tellus? Pharetra curabitur clynelish, cragganmore primis missouri mule tonic and tequila sollicitudin turpis ligula sollicitudin painkiller nibh conubia elementum. Augue non canadian club, flaming dr pepper, brave bull. Fermentum mattis, ut irish flag bacardi enim glenglassaugh dolor elit mi cursus bladnoch neque golden doublet nostra old bushmill's. Curae suscipit kilchoman donec porta hendrerit martini faucibus stinger congue, "long island iced tea nostra sagittis, 7 crown aviation?" Glendullan panama glenfarclas polish martini; primis glen scotia kentucky tavern dalmore enim arcu jack rose harvey wallbanger?
</div>
<div style="color: #b6ad92; text-align: center; font-family: 'Karla', sans-serif; font-size: 10px; letter-spacing: 3px; font-variant: small-caps;">template by lily of [url=http://z10.invisionfree.com/Shadowplay/index.php?showuser=8889]sp[/url] + [url=http://forums.athousandfireflies.com/index.php?showuser=14426]atf[/url].</div>

0

52

Код:
<!--HTML-->
<style type="text/css">
#codeimage { height: 150px; width: 150px; background-image: url('http://placehold.it/150x150'); border: 5px solid #eeeeee; }

#shortfacts { width: 150px; height: 350px; background: #f8f8f8; border: 5px solid #eeeeee; border-top: none; text-align: center;}

.shortfact { width: 120px; padding: 3px; background: #e6ca97; font-family: 'Verdana'; font-size: 12px; color: #ffffff; text-transform: uppercase; margin: auto;} 

.shortfacta { width: 120px; padding: 3px; background: #e6be86; font-family: 'Verdana'; font-size: 7px; color: #ffffff; text-transform: uppercase; letter-spacing: 2px; margin: auto;} .shortfacta a { color: #ffffff; font-weight: normal; text-shadow: none; text-decoration: none;  } 

#application { height: 495px; width: 340px; background: #f8f8f8; border: 5px solid #eeeeee; border-left: none;  padding: 5px; text-align: center; padding-top: 5px; padding-bottom: 5px; } 

.songtitle { height: 25px; width: 320px; text-align: center; background: #e6be86; font-family: 'Verdana'; font-size: 8px; color: #ffffff; text-transform: uppercase; letter-spacing: 3px; margin: auto; line-height: 3.4em; } 

#apptext { height: 435px; width: 310px; overflow: auto; padding: 5px; background: #fafafa; margin: auto; font-family: 'Calibri'; font-size: 11px; text-align: justify; color: #5f5f5f; line-height: 1.2em; } 

#titeltop { height: 40px; width: 515px; text-align: center; background: #e6be86; font-family: 'Verdana'; font-size: 12px; color: #ffffff; text-transform: uppercase; letter-spacing: 4px; margin: auto; line-height: 3.4em;  }</style>
<center>


<div id="titeltop">You & me run the same course.</div>

<table cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="codeimage"></div>

<div id="shortfacts"><br /><div class="shortfact">Face Claim</div><div class="shortfacta">Name ~</div>

<br /><div class="shortfact">Username</div><div class="shortfacta">Your Name</div>

<br /><div class="shortfact">Your Age</div><div class="shortfacta">xx years</div>

<br /><div class="shortfact">Misc</div><div class="shortfacta"><3 <3 <3</div>

<br /><div class="shortfact">Thanks</div>

<div class="shortfacta"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=18335" target="blank">Sparks fly</a> @ SP</div>
</div></td>
<td>
<div id="application">
<div class="songtitle"> Honey, it's raining tonight </div>
<div id="apptext">

!!!!!!!!!!!! Text goes here !!!!!!!!!!</div>

<div class="songtitle">But storms always have an eye</div>
</div>
</td>
</tr>
</table>
</center>

0

53

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

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

<style>
.tagbox { background: #d0d0d0; font-family: Oswald; text-transform: uppercase; font-size: 11px; color: #19181e; text-align: justify; width: 100px; height: 15px; border-radius: 0px 0px 30px 30px; transition-duration: 1.2s;-moz-transition-duration: 1.2s;-webkit-transition-duration: 1.2s;-o-transition-duration: 1.2s; overflow: hidden; padding: 10px; text-align: center; overflow: hidden; border-bottom: 5px solid #19181e; }
.tagbox:hover { height: 200px; }
</style>

<div style="width: 500px; padding: 20px; background: #131218;">

<div style="width: 450px; padding: 20px; background: #19181e;">

<div style="background: url('http://i272.photobucket.com/albums/jj194/lapicturing/coding/ellieg_zps279ea371.png'); width: 440px; height: 300px; border-bottom: 20px solid #19181e;"><div class="tagbox">
<br><br><br><br><br>
tag: tag here
<br>
<div style="border-bottom: 1px solid #19181e;"></div>
<br>
words: 00000
<br>
<div style="border-bottom: 1px solid #19181e;"></div>
<br>
date: 00/00/0000
<br>
<div style="border-bottom: 1px solid #19181e;"></div>
<br>
</div></div>

<div style="font-family: Economica; font-size: 20px; color: #d0d0d0; text-shadow: 1px 0px #19181e, 0px 1px #19181e, -1px 0px #19181e, 0px -1px #19181e; letter-spacing: 0px;">i have never seen a footprint.</div>

<div style="width: 420px; padding: 10px; background: #d0d0d0; color: #19181e; font-family: Trebuchet MS; font-size: 10px; text-align: justify; border-top: 20px solid #27262c; border-bottom: 10px solid #27262c;">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. 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. 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. 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.
<br><br>
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. 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. 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. 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.
<br><br>
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. 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. 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. 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.</div>

</div>
</div>

<div style="font-family: Oswald; text-transform: lowercase; font-size: 10px; color: #19181e; letter-spacing: 5px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=2104">template by iamnotalone . at sp</a></div>

</center>

0

54

Код:
<!--HTML-->
<center><div style="width: 450px; background-image: url(http://i.imgur.com/c8FWUWF.png); height: auto; padding-top: 25px; padding-bottom: 25px;"><a href=http://z10.invisionfree.com/Shadowplay/index.php?showuser=13982"><img src="380X200" width="380" height="200"></a><div style="position: relative; top: -10px; left: 0px; width: 380px; height: 15px; background-color: #363434;"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="380" height="15"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#363434" /><param name="FlashVars" value="mp3=SONGURLHEREHEREHERE" /></object></div><div style="width: 280px; border: 30px solid #f7f7f7; line-height: 94%; background-color: #fff; padding: 20px; font-family: calibri; height: 90px; overflow: auto; font-size: 10px; text-transform: lowercase; text-align: justify; margin-top: -10px;">

words here

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

0

55

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><style type="text/css">#nowhat {padding: 2px; border: 1px solid white; width: 450px; height: 155px; position: absolute; top: 20px; left: 23px;}
#nowhat .nohov {padding: 10px; opacity: 0; background-color: white; transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; height: 135px;}
#nowhat:hover .nohov {opacity: 0.95;}
.nope b {color: 4C65A1; font-family: georgia;}
.nope p:first-letter {padding: 10px; font-family: oswald; text-transform: uppercase; background-color: 4C65A1; color: white; font-size: 15px; float: left; margin-right: 7px; margin-bottom: 1px;}</style><center><BR><div style="width: 500px;"><div style="font-family: oswald; color: 4C65A1; text-transform: uppercase; font-size: 45px; letter-spacing: -4px; text-shadow: 1px 0px white, 2px 0px black; margin-bottom: 12px;">

ripping my heart was so easy

</div><div style="padding: 5px; background-color: 4C65A1; font-family: arial; color: white; font-size: 6px; letter-spacing: 2px; text-transform: uppercase;">

launch your assault now take it easy raise your weapon one word and its over

</div><div style="width: 500px; height: 200px; background-image: url(500 X 200 IMAGE HERE. GIFS WORK GREAT!); position: relative;"><div id="nowhat"><div class="nohov"><div style="padding-left: 5px; padding-right: 10px; font-family: calibri, sans-serif; color: 121212; font-size: 10px; text-align: justify; line-height: 90%; height: 130px; overflow: auto;" class="nope"> <p>


post here. make sure to separate paragraphs with the <p> tag, unless you don't want the fancy first letter.


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

### , tagged , notes 

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

0

56

Код:
<!--HTML--><style>
/* building blocks */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 320px;
max-width: 480px;
max-height: 360px;*/
width: 48%;
background: #000000;
text-align: center;
cursor: pointer;
}

.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}

.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.grid figure p {
letter-spacing: 1px;
font-size: 65%;
}
/* effect */
figure.effect-hoveff h2 {
position: absolute;
right: 0;
bottom: 0;
padding: 1em 1.2em;
}

figure.effect-hoveff p {
padding: 0 10px 0 0;
width: 50%;
border-right: 1px solid #fff;
text-align: right;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0,0);
transform: translate3d(-40px,0,0);
}

figure.effect-hoveff:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
</style>
<div style="border:3px solid #aeaeae;width:530px;padding:0px;background-color:#000000;margin:0 auto;">
<table>
<tr>
<td style="background-color:#000000;width:20px;margin:0px;padding:0px;position:relative;right:-5px;"></td>
<td style="background-color:#000000;"><div class="grid">
<figure class="effect-hoveff">
 <img src="http://i.imgur.com/pz9hGdg.png" alt="img11"/>
 <figcaption>
 	<p><b style="font-size:16px;font-family:serif;">Lucida Will</b>
 	<br>She never really liked the smell of the forest anyway.</p>
 </figcaption>  	
</figure>
</div></td>
<td style="background-color:#000000;width:20px;margin:0px;padding:0px;position:relative;left:-5px;"></td></tr>
</table>
<div style="background-color:#000000;color:#ffffff;;padding:10px;width:516px;position:relative;left:7px;top:-14px;padding:0px;margin:0px;">
 <div style="width:370;margin:0 auto;border-left:20px solid #890d1d;border-right:20px solid #890d1d;padding-left:20px;padding-right:20px;position:relative;top:0px;padding-top:10px;"><h1 style="font-size:30;margin:8px;padding:8pxpx;text-align:center;text-shadow:1px 2px 2px white;color:#890d1d;font-family:serif;">Run away with me now.</h1>
 <div style="font-family:sans-serif;font-size:12px;text-align:center;background-color:#aeaeae;width:300px;position:relative;margin:0 auto;color:#000000;"><i>take my hand and we're free</i>.</div>
 </div>
 
<div style="margin:0 auto;width:370px;border-left:20px solid #890d1d;border-right:20px solid #890d1d;padding:20px;font-family:sans-serif;font-size:14px;border-bottom:20px solid #890d1d;color:#aeaeae;position:relative;top:-7px;">
If you asked Lucinda, she would say the specific day when she was banned from the forest was no big deal. That she never really like the smell of the trees or the feeling of the soft dirt between her toes. <i>Stepping on prickle bushes hurt anyway</i>.

<p>She would shrug and tell you that she liked being in the city. That the hustle and bustle made her feel alive. She loved being around all of the people and hearing all the noises.</p>

<p>"There are so many more opportunities here!" She would exclaim. Thought if you were perceptive enough, you would be able to see that small crack in her facade slowly becoming larger.</p>

<p>You would see the pain in her eyes instead of the smile plastered on her face. The way she took quick shallow breaths of the polluted air instead of the long deep inhales in through her nose and out through her mouth like she used to. You would see her shooting quick nasty glares to all of the tourists that would ask her for directions or that would push past her on the sidewalks.</p>

<p>But if you asked her, Lucinda would reply, "I never really liked the forest much anyway."</p>

</div>
<div style="text-align:center;height:70px;line-height:60px;"><a style="text-decoration:none;color:#890d1d;text-transform:uppercase;font-weight:bold;" href="#">link1</a> | <a style="text-decoration:none;color:#890d1d;text-transform:uppercase;font-weight:bold;" href="#">link2</a> | <a style="text-decoration:none;color:#890d1d;text-transform:uppercase;font-weight:bold;" href="http://z10.invisionfree.com/Shadowplay/index.php?showtopic=61488&st=0#entry22625925">credit</a></div>


</div>
</div>

0

57

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

<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>

<style>
#bigpicture {
width: 500px; 
height: 240; 
position: relative; 
overflow: hidden;
z-index: 1;
}

#bigpicture .image { 
-WEBKIT-TRANSITION: 2S ALL EASE-IN-OUT;
-MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT;
O-TRANSITION: 0.8S ALL EASE-IN-OUT;
position: absolute;
TOP: 0px;
bottom: 0px;
width:500px;
height: 240px;
}

#bigpicture:hover .image {
-WEBKIT-TRANSITION: 0.8S ALL EASE-IN-OUT; 
-MOZ-TRANSITION: 0.8S ALL EASE-IN-OUT; 
O-TRANSITION: 0.8S ALL EASE-IN-OUT; 
TOP: -400px;}

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

</style>

<div style="font-family:luckiest guy; padding:10px; font-size: 40px; color:#1d273d; margin-bottom: -20px; text-shadow: #9e1104 0px -5px 0px; position: relative; z-index: 10;">Murder, He Wrote</div>

<div id="bigpicture">

<div class="image"><img src="http://i.imgur.com/U6Lgc1O.jpg" style="width:500px;"></div>

<div style="width:500px; height: 238px; background-color:#9e1104;">

<div style="width:480px; height: 238px; background-color:#1d273d;">

<div style="color:#f7efe9; font-family:news cycle; font-size: 20px; padding-top: 20px;">SEASON 5 EPISODE 4</div>

<div style="color:#f7efe9; font-family: news cycle; line-spacing: 10px; padding: 10px; ">Tick, Tick, Tick… No, we’re not talking about that pulse-pounding “Tick, Tick, Tick…” episode from Season 2. This tick tock is on Beckett’s clock. It’s counting down to when she and Castle can escape the city for a romantic weekend in the Hamptons. Wonder if they'll be staying near Grayson Manor. Anyway, five on Friday finally rolls around with no pesky murders to spoil the plans. Castle’s story is that he’s off to write. Ryan and Esposito know that Beckett is also going away with her new boyfriend. They make it their mission to find out just who this mystery man is.<br><br>
Beckett is in awe of Castle’s castle at the beach. She wonders how many other women he’s whisked away to this oasis. There have been a few for sure, but none of those other ladies were her. This brings a smile to Beckett’s face. Castle is also smiling once he realizes Beckett forgot her bathing suit. Unfortunately, someone else decides to take a dip in the pool as a man covered in blood stumbles in from the beach. SPLASH! The guy’s dead in the water. Looks like Castle and Beckett are in for a killer weekend! <br><br>
The victim is a weekender named Randal Franklin who was at a party up the beach. Local Police Chief John Brady believes his deputy has caught the killer when he wrangles up a drugged out dude who was in possession of the dead man’s wallet. Castle doesn’t think it’s that simple since there’s no blood splatter on the alleged shooter. Beckett knows they won’t be able to get on with their weekend until he gets some answers.


[ABC's website]</div>

</div>

</div>

</div>



<div style="width:500px; height: 15px; background-color:#9e1104;  margin-top:-3px; padding: 7px 0px 5px 0px; color: #1d273d; font-family:news cycle;">
### . TAGGED . NOTES. <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5962" style="color:#1d273d">BRINIGIRL @ SP</a>
</div>
</center>

0

58

Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script|Marvel' rel='stylesheet' type='text/css'><style type="text/css">.bh {width: 500px; height: 300px; background-image: url(SECOND IMAGE URL HERE. 500 X 300!!!!!!!!); opacity: 0.0; -o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out;}
.bh:hover {width: 500px; height: 300px; background-image: url(SECOND IMAGE URL HERE AGAIN. 500 X 300!!!!!); opacity: 1.0;}</style>

<center><div style="background-image: url(FIRST IMAGE HERE. 500 X 300!!!!!); width: 500px; height: 300px;"><div class="bh"><div style="width: 200px; padding: 10px; background-color: white; position: relative; top: 100px; left: 80px; font-family: times new roman; color: 121212; font-style: italic; letter-spacing: 3px; font-size: 8px; opacity: 0.95; text-align: justify; line-height: 95%;">

### &bull; tagged &bull; your notes go here you can write quite a bit your notes go here you can write quite a bit your notes go here you can write quite a bit 

&bull; <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=3417">&hearts; lauz</a></div></div></div><div style="width: 500px; background-color: white; border-bottom: 40px solid #12A18D;">

<div style="width: 400px; font-family: petit formal script; color: 12A18D; font-size: 45px; padding-top: 30px; position: relative; z-index: 2;">

yes, i'm drunk

</div><div style="width: 400px; font-family: marvel; color: 121212; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-top: 12px;">

and you're beautiful and tomorrow morning

</div><BR><div style="width: 250px; padding-left: 10px; padding-right: 10px; font-family: calibri, sans-serif; color: 121212; font-size: 9.5px; line-height: 90%; text-align: justify; height: 200px; overflow: auto;">

post goes here.

</div><BR><BR><BR><div style="width: 460px; padding: 20px; font-family: marvel; color: white; font-size: 10px; letter-spacing: 6px; text-transform: uppercase; background-color: 12A18D;">

i'll be sober but you'll still be beautiful

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

0

59

<!--HTML-->

Код:
<!--HTML--><style type="text/css">
.regan .alec { width: 250px; height: 80px; background-color: #222; border-bottom: 7px solid #b8c968; position: relative; top: 0px; left: 0px; opacity: 0; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; }
.moretti a:hover { color: #b8c968; }
.regan .anna { width: 150px; padding-top: 5px; padding-bottom: 5px; font-size: 8px; letter-spacing: 2px; color: #fff; text-align: center; text-transform: lowercase; line-height: 100%; font-style: italic; background-color: #b8c968; font-family: cambria, serif; position: absolute; top: 65px; opacity: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s;}
</style>
<link rel="stylesheet" type="text/css" href="http://yougobeckycoco.b1.jcink.com/uploads/yougobeckycoco/tracker.css">


<center><div class="regan"><div class="img"><div style="width: 150px; height: 150px; border-radius: 100%; background-image: url(http://placehold.it/150);"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=3722"><div class="anna"> 

first last

</div></a></div></div><div class="alec"></div>

<div class="moretti">


<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>

<a href="link to thread">title here</a><br>
desc goes here<p>


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

0

60

Код:
<!--HTML--><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<center>
<style type="text/css">

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

}

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

}

@keyframes light {
   0%   {opacity: 0;}
   50%   {opacity: 1;}
   100%   {opacity: 0;}

}

#basebg {height: 577px; width: 299px; position: relative; background-image:url(http://i.imgur.com/gPmFPNP.png)}
.baselight {height: 15px; width: 15px; position: absolute; left: 221px; top: 12px; background-color: #76EB00; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); -o-filter: blur(3px); filter: blur(3px); -webkit-animation: light 2s ease-in-out infinite; -moz-animation: light 2s ease-in-out infinite; animation: light 2s ease-in-out infinite;}
.base1 {height: 466px; width: 260px; position: absolute; left: 19.5px; top: 55.5px; background-color: transparent; overflow: hidden}
.base1s {height: 466px; width: 260px; position: absolute; background-image: url(http://i.imgur.com/CV8ZmDi.png); z-index: 2}
.base1sa {position: relative; top: 190px; opacity: 0.7; background-color: #000; z-index: 3; width: 120px; height: 22px; line-height: 22px; font-family: 'PT Sans Narrow'; color: #fff; -webkit-border-radius: 5%; -moz-border-radius: 5%; -ms-border-radius: 5%; -o-border-radius: 5%; border-radius: 5%; font-size: 12px}
.base1 .base1s {left: 0px; top: 0px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}
.base1:hover .base1s {left: -260px; top: 0px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s;}
.base2 {height: 466px; width: 260px; background-image:url(http://i.imgur.com/htB43t9.png); position: absolute;}
.base1 .base2 {opacity: 0; transform:scale(0.7); -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s;}
.base1:hover .base2 {opacity: 1; transform:scale(1); -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s;  -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}
.base2t {width: 253px; height: 20px; padding-right: 7px; position: absolute; color: #fff; background-color: #1C1C1C; font-size: 10px; text-align: right}
.base2tc {font-family: 'PT Sans Narrow'; color: #fff; font-size: 10px; width: 260px; height: 20px; line-height: 20px; position: absolute; text-align: center; top: 2px}
.base2n {padding: 7px 0px 7px 0px; width: 260px; background-color: #fff; color: #1c1c1c; font-family: 'Roboto', arial; font-size: 15px; position: absolute; top: 20px; letter-spacing: -0.7px}
.base2msg {width: 240px; border-color: transparent; border-style: solid; border-width: 5px; padding: 5px; height: 366px; background-color: transparent; position: absolute; top: 65px; overflow: auto}
.base2msg::-webkit-scrollbar {width: 0px}
.lftmsg {min-height: 50px; box-shadow: 2px 2px 10px #CFCFCF; font-family: arial; color: #1c1c1c; text-align: justify; padding: 9px; margin: 10px 0px 0px 10px; width: 150px; float: left; background-color: #fff; font-size: 9px; line-height: 95%}
.rtmsg {min-height: 50px; box-shadow: 2px 2px 10px #CFCFCF; font-family: 'Roboto'; color: #1c1c1c; text-align: justify; padding: 10px; margin: 10px 10px 0px 0px; width: 150px; float: right; background-color: #FFFED2; font-size: 9px; line-height: 95%}

</style>
<div id="basebg">
<div class="baselight"></div>
<div class="base1">
<div class="base1s">
<div class="base1sa"><i class="fa fa-envelope-o"></i> 1 New Message</div>
</div>
<div class="base2">
<div class="base2t"><i class="fa fa-wifi"></i><i class="fa fa-signal"></i></div>
<div class="base2tc">12:45PM</div>
<div class="base2n">First Last <img src="http://placehold.it/30" style="-webkit-border-radius: 50%; margin-left: 3px"></div>

<div class="base2msg">
<div class="lftmsg">
<img src="http://placehold.it/20" style="float: left; padding: 0px 5px 2px 0px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus. Etiam vitae nunc porta, mattis erat non, fermentum augue. Mauris iaculis sed nisi in fermentum. Donec non turpis gravida, aliquam sem vitae, consequat sem. Praesent at quam tellus. Nullam nec lacus ante. Mauris pellentesque rutrum consectetur. Cras porta nulla non sagittis dignissim.</font></div>

<div class="rtmsg">
<img src="http://placehold.it/20" style="float: right; padding: 0px 0px 2px 5px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus.</font>
</div>
<div class="rtmsg">
<img src="http://placehold.it/20" style="float: right; padding: 0px 0px 2px 5px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus.</font>
</div>

<div class="lftmsg">
<img src="http://placehold.it/20" style="float: left; padding: 0px 5px 2px 0px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus. Etiam vitae nunc porta, mattis erat non, fermentum augue. Mauris iaculis sed nisi in fermentum. Donec non turpis gravida, aliquam sem vitae, consequat sem. Praesent at quam tellus. Nullam nec lacus ante. Mauris pellentesque rutrum consectetur. Cras porta nulla non sagittis dignissim.</font></div>

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

0


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


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