коды

Страница: 1

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

Поделиться12014-07-29 18:29:44

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Код:

<style type="text/css">
.stars_container { width:500px; height:500px; margin:auto; overflow:hidden;  background-image:url(500x500 IMAGE HERE!!!!!!!!!);}
.stars_box { height:10px; padding-top:45px; padding-bottom:45px; text-align:center; color:#fff; font-family:calibri; font-size:8px; text-transform:uppercase;  background-color:#fc8f99; color:#fff; text-align:center; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; width:100px; margin-top:-100px; margin-left:300px;}
.stars_barCont { overflow:hidden; height:100px; width:500px; }
.stars_fbar  { background-color:#000; height:10px; padding-top:45px; padding-bottom:45px; text-align:center; color:#fff; font-family:calibri; font-size:8px; text-transform:uppercase; font-style:italic; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s;   float:left; margin-left:-300px; width:300px;  -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; }

.stars_sbar { float:right; background-color:#000; height:10px; padding-top:45px; padding-bottom:45px; text-align:center; color:#fff; font-family:calibri; font-size:8px; text-transform:uppercase; margin-left:500px; width:100px; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out;  }
.stars_container:hover .stars_fbar { margin-left:0px; }
.stars_container:hover .stars_sbar { margin-left:0px; margin-top:0px; }
.stars_container:hover .stars_box { margin-top:0px; margin-left:300px;}

.stars_plot { width:300px; height:200px; padding:25px; background-color:rgba(255,255,255,0.8); text-align:justify; font-family:calibri; font-size:10px; line-height:110%; text-transform:none; color:#000;  margin-top:400px; margin-left:75px; }
.stars_container:hover .stars_plot { margin-top:75px; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; margin-left:75px;}
.stars_inner { width:298px; height:200px; overflow:auto; padding-right:2px;}
.stars_inner::-webkit-scrollbar-thumb:vertical {
   border:2px solid #fc8f99;
   background-color:#fff;
   }
.stars_inner::-webkit-scrollbar-thumb:horizontal {
   background-color:#fff;
   }
.stars_inner::-webkit-scrollbar {
   width:4px;
   height:7px;
   border:1px solid #fc8f99;
   background-color:#fff;
   }

.creds { font-family:calibri; font-size:7px; text-transform:uppercase; letter-spacing:1px;  margin-auto; text-align:right; width:475px;}
.creds a { color:#cccccc; }
</style>

<div class="stars_container">
<div class="stars_barCont">
<div class="stars_sbar">♕</div>
<div class="stars_fbar">" i'll be the dawn on your worst night "</div>
<div class="stars_box">FIRST</div></div>

<div class="stars_plot">
<div class="stars_inner">
SHIPPER TEXT HERE!!!<br /><br />
</div>
</div>

</div>
<center><div class="creds"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=9289">© </a><a href="http://obscurus.jcink.net/index.php?act=idx">MERC</a></div></center>

Цитировать Сообщение 1

Поделиться22014-07-29 18:33:01

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Код:

<center>

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

<style>

@font-face { font-family: "Yoghurt"; src: url('http://ohmygawdos.webs.com/-%20New%20Folder/Yoghurt.ttf'); } 

.dianavtriangleuno {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid #af3572;
position: relative; 
opacity: 0.8;
right: 125px;
}

.dianavtriangledos {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 60px solid transparent;
border-left: 100px solid #721176;
position: relative; 
top: -35px;
opacity: 0.8;
right: 125px;
}

.dianavtrianglethree {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 30px solid transparent;
border-left: 100px solid #7d3271;
position: relative; 
top: -67px;
opacity: 0.8;
right: 125px;
}

.dianatabs { position: relative; 
width: 200px;
height: 180px;
left: 45px;
right: 0px;
top: -415px;
background: #FFFFFF;
padding: 20px;
opacity: 0.9;
z-index: 999;
border: 3px double #6a3356; }

.dianatab { float: left; }

.dianatab label {
height: 100px;
left: -100px;
right: 0px;
top: 20px;
padding: 15px;
text-align: center;
font-family: Gilda Display;
font-style: italic;
font-size: 10px;
color: #FFFFFF;
letter-spacing: 0px;
text-transform: lowercase;
position: relative;
margin-right: 5px;
z-index: 999;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; }

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

.dianacontent { position: absolute;
padding: 20px; 
background: #FFFFFF;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; }

[type=radio]:checked ~ label { color: #FFFFFF; z-index: 999;}

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

.dianatext { color: #7d3271; font: 8.5px Georgia; font-style: italic; text-align: justify; line-height: 90%; height: 180px; overflow: auto; text-transform: lowercase; }

.dianav::-webkit-scrollbar { width: 10px; background: #840236; }
.dianav::-webkit-scrollbar-thumb { background: #434343; }
.dianav:-webkit-scrollbar-corner { background: #434343; } 

</style>



<div style="background: url(http://i3.minus.com/ibtPgtFhwuSuSK.png); width: 360px; height: 360px; padding: 30px; border: 5px solid #e9e9e9;">

<div style="background: url(http://i3.minus.com/icyslpJVM8AkH.png); width: 350px; height: 350px; overflow: hidden; border: 5px solid #faf1f6;">

<div class="dianavtriangleuno"> </div>
<div class="dianavtriangledos"> </div>
<div class="dianavtrianglethree"> </div>

<div class="dianatabs">

<div class="dianatab">
<input type="radio" id="dianatab-1" name="dianatab-group-1" checked>
<label for="dianatab-1">I.</label>
<div class="dianacontent">
<div class="dianav dianatext">

<div style="font: 40px Yoghurt; color: #9f458c; text-shadow: 1px 0px #1b2f2e, 0px 1px #600f4d, -1px 0px #1b2f2e, 1px 0px #FFFFFF, 4px 0px #FFFFFF, 5px 0px #600f4d; letter-spacing: -1; text-transform: lowercase; text-align: center;">basics.</div>

application:  
<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a> 
<br>
shipper: 
<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a>
<br>
diary: 
<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a> 
<br>
phone: <a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a>

</div>

</div>
</div>

<div style="padding-top: 130px;"></div>

<div class="dianatab">
<input type="radio" id="dianatab-2" name="dianatab-group-1">
<label for="dianatab-2">II</label>
<div class="dianacontent">
<div class="dianav dianatext">

<div style="font: 40px Yoghurt; color: #9f458c; text-shadow: 1px 0px #1b2f2e, 0px 1px #600f4d, -1px 0px #1b2f2e, 1px 0px #FFFFFF, 4px 0px #FFFFFF, 5px 0px #600f4d; letter-spacing: -1; text-transform: lowercase; text-align: center;">current.</div>

<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a> with someone.<br>
<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a> with someone.
<br>
<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a> with someone.
<br>
<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a> with someone.

</div>

</div>
</div>

<div style="padding-top: 120px;"></div>

<div class="dianatab">
<input type="radio" id="dianatab-3" name="dianatab-group-1">
<label for="dianatab-3">III.</label>
<div class="dianacontent">
<div class="dianav dianatext">

<div style="font: 40px Yoghurt; color: #9f458c; text-shadow: 1px 0px #1b2f2e, 0px 1px #600f4d, -1px 0px #1b2f2e, 1px 0px #FFFFFF, 4px 0px #FFFFFF, 5px 0px #600f4d; letter-spacing: -1; text-transform: lowercase; text-align: center;">finished.</div>

<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a> with someone.<br>
<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a> with someone.
<br>
<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a> with someone.
<br>
<a href="http://www.google.com/"><span style="color: #b64682; font-weight: bold;">a thread title</span></a> with someone.

</div>

</div>
</div>

<div style="margin-top: -30px;"></div>

<div style="font: 30px Yoghurt; color: #fffb73; text-shadow: 1px 0px #1b2f2e, 0px 1px #fffb73, -1px 0px #1b2f2e, 1px 0px #FFFFFF, 4px 0px #FFFFFF, 5px 0px #600f4d; letter-spacing: -1; position: relative;">oh, Portland</div>



</div>
</div>

<div style="font: 10px Georgia; color: #000000; letter-spacing: 0px; position: relative; top: -6px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=2104"><span style="color: #000000;">thanks iris@sp</span></a></div>

</center>

Цитировать Сообщение 2

Поделиться32014-07-29 18:40:13

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Код:

<style type="text/css">
.ship1 { width: 300px; height: 350px; background-color: #fafafa; overflow: hidden; position: relative; }
.ship1 .ship2 { width: 300px; height: 350px; background-image: url(http://placehold.it/300x350); position: absolute; top: 0px; left: 0px; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}
.shipn { font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; text-align: center; margin-top: 200px; color: #fff; text-shadow: -1px 0px #526c7e, 0px 1px #526c7e, 1px 0px #526c7e, 0px -1px #526c7e; border-bottom: 3px double #526c7e; line-height: 100%; width: 250px;}
.ship1:hover .ship2 { top: -400px; left: 0px; }
.ship1 .ship3 { position: absolute; width: 250px; height: 150px; background-image: url(http://placehold.it/250x150); top: -325px; left: 25px; opacity: 0; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s;}
.ship1:hover .ship3 { top: 25px; left: 25px; opacity: .99; }
.shipl { width: 250px; background-color: #526c7e; color: #fff; font-size: 8px; text-transform: uppercase; line-height: 100%; padding-top: 5px; padding-bottom: 5px; font-family: calibri, sans-serif; text-align: center; letter-spacing: 1px; margin-top: 100px; }
.ship1 .ship4 { width: 230px; padding: 10px; background-color: #fff; height: 130px; position: absolute; left: 25px; bottom: -225px; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; opacity: 0; }
.ship1:hover .ship4 { left: 25px; bottom: 25px; opacity: .99; }
.shipt { width: 225px; height: 130px; padding-right: 5px; overflow: auto; font-size: 10px; font-family: calibri, sans-serif; text-align: justify; color: #555; line-height: 100%; }
.shipt::-webkit-scrollbar { width: 5px; height: 5px; }
.shipt::-webkit-scrollbar-track { background-color: #fff; }
.shipt::-webkit-scrollbar-thumb { background-color: #eee; }
</style>
<link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css'>

<center>
<div style="width: 300px; padding: 30px; background-color: #fff; border: 3px double #eee;">
<div class="ship1">

<div class="ship2">
<div class="shipn"> first m. last </div>
</div>
<div class="ship3">
<div class="shipl"> ## ▪ occupation ▪ trait ▪ trait </div>
</div>
<div class="ship4">
<div class="shipt">

▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw
<p> ▪ lollll ramble ramble idekkk bulletpoints ftmfw

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

Цитировать Сообщение 3

Поделиться42014-07-29 18:41:46

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Код:

<center>

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

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

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

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

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


<style>

.charli { color: #D7DACF; text-align: justify; width: 350px; height: 450px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease; 
-webkit-filter: invert(0%); 
-ms-transform: scale(0.5); 
-webkit-transform: scale(0.5); 
-moz-transform: scale(0.5); 
-o-transform: scale(0.5); 
transform: scale(0.5);
opacity: 0.0; }
.charli:hover { opacity: 1.0;
-ms-transform: scale(1); 
-webkit-transform: scale(1); 
-moz-transform: scale(1); 
-o-transform: scale(1); 
transform: scale(1);} 
-webkit-filter: invert(100%); }

.skai::-webkit-scrollbar { width: 3px; background: #f2f2f1; }
.skai::-webkit-scrollbar-thumb { background: #32b0a5; }
.skai::-webkit-scrollbar-corner { background: #32b0a5; }  

</style>

<div style="background: url(http://www.shizoo-design.de/stuff/patterns/273.jpg); width: 350px; height: 450px; padding: 30px; border: 1px solid #FFFFFF;">

<div style="background: #FFFFF; width: 350px; height: 450px; padding: 1px;">

<div style="background: url(http://i1.minus.com/i5ded8gnfs7Pd.png); width: 330px; height: 430px; padding: 10px;">

<div style="width: 320px; height: 420px; border: 3px double #ffffff;">

<div class="charli">

<center>

<div style="background: #514340; width: 300px; height: 400px; padding: 10px; position: relative; left: -15px;">

<table cellspacing="1" cellpadding="1">

<tr>

<td>
<div style="background: #FFFFFF; width: 75px; height: 75px; border: 3px double #e2af3c; padding: 6px; margin-top: 5px;">

<div style="background: url(http://placehold.it/75x75/32b0a5/ffffff); width: 75px; height: 75px;"></div>
</td> 

<td>
<div style="background: #FFFFFF; width: 75px; height: 75px; border: 3px double #e2af3c; padding: 6px; margin-top: 5px;">

<div style="background: url(http://placehold.it/75x75/32b0a5/ffffff); width: 75px; height: 75px;"></div></div></td>

<td>
<div style="background: #FFFFFF; width: 75px; height: 75px; border: 3px double #e2af3c; padding: 6px; margin-top: 5px;">

<div style="background: url(http://placehold.it/75x75/32b0a5/ffffff); width: 75px; height: 75px;"></div></div></td>


</tr>

<tr>

<div style="font: 65px Abril Fatface;  letter-spacing: -3px; background: -webkit-linear-gradient(#604e54, #0ea89c);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; line-height: 80%;  text-align: center; line-height: 70%;">sky ferreira</div>
<br>
<div style="font: 12px Abel; text-transform: uppercase; letter-spacing: 3px; color: #c04886; position: relative; top: -10px;"><span style="color: #c04886;">name</span>. <span style="color: #efcc7a;">age.</span> <span style="color: #2bada3;">group.</span></div>

</tr>

<tr>

<div style="background: url(http://www.shizoo-design.de/stuff/patterns/273.jpg); width: 270px; height: 160px; padding: 5px; border: 3px solid #FFFFFF;">

<div style="background: #FFFFFF; width: 250px; height: 140px; padding: 5px; border: 3px double #f2f2f1;">

<div class="skai" style="font: 9px Abel; text-transform: uppercase; letter-spacing: 1px; color: #547361; text-align: justify; height: 140px; overflow: auto; line-height: 90%; column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;">

<div style="font: 30px Abril Fatface;  letter-spacing: -3px; color: #e1b047; text-align: center; line-height: 100%; text-transform: lowercase;">loves</div>

Well this is apparently a bit of random text just to fill things up so don't notice it, actually. Yeah very interesting indeed but hey, why are you even reading this? It's not interesting actually. Well this is apparently a bit of random text just to fill things up so don't notice it, actually. Yeah very interesting indeed but hey, why are you even reading this? It's not interesting actually. Well this is apparently a bit of random text just to fill things up so don't notice it, actually. Yeah very interesting indeed but hey, why are you even reading this? It's not interesting actually.


<div style="font: 30px Abril Fatface;  letter-spacing: -3px; color: #d3799f;  text-align: center; line-height: 100%; text-transform: lowercase;">hates</div>

Well this is apparently a bit of random text just to fill things up so don't notice it, actually. Yeah very interesting indeed but hey, why are you even reading this? It's not interesting actually. Well this is apparently a bit of random text just to fill things up so don't notice it, actually. Yeah very interesting indeed but hey, why are you even reading this? It's not interesting actually. Well this is apparently a bit of random text just to fill things up so don't notice it, actually. Yeah very interesting indeed but hey, why are you even reading this? It's not interesting actually. Well this is apparently a bit of random text just to fill things up so don't notice it, actually. Yeah very interesting indeed but hey, why are you even reading this? It's not interesting actually.



</div>

</div>

</tr>

</table>

</center>

</div>

</div>

</div>

</div>

</div>

<div style="font: 10px Georgia; color: #fe013d; letter-spacing: 0px; position: relative; top: -3px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=2104"><span style="color: #000000;">thanks iris@sp</span></a></div>

</center>

Цитировать Сообщение 4

Поделиться52014-07-29 18:42:40

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Код:

<head><link href='http://fonts.googleapis.com/css?family=Lato:300|Open+Sans|Alex+Brush' rel='stylesheet' type='text/css'></head><style>#gridbox {	position: relative; width: 450px; height: 450px; margin: 10px auto; BACKGROUND-COLOR: #FFFFFF; border: 3px double #BBBBBB; padding: 10px; text-align: center; COLORr: #555555; } #gridbox a:link, #gridbox a:active, #gridbox a:visited { padding: 0; margin: 0; COLOR: #888888; font-size: 20px; text-decoration: none; -webkit-transition: color ease 0.6s; -moz-transition: color ease 0.6s; -o-transition: color ease 0.6s; transition: color ease 0.6s; } #gridbox a:hover { COLOR: #666666;} .box { display: inline-block; width: 200px; height: 200px; margin: 11px; BACKGROUND-COLOR: #AAAAAA; z-index: 1; } .hov { opacity: 0; z-index: 3; margin: 0; padding: 0; width: 190px; height: 190px; overflow: auto; position: relative; border: 5px solid #AAAAAA; background-color: #DDDDDD; -webkit-transition: opacity ease 0.6s; -moz-transition: opacity ease 0.6s; -o-transition: opacity ease 0.6s; transition: opacity ease 0.6s; } .hov h1 { font-size: 24px; margin: 10px 0 5px 0; text-transform: capitalize; font-family: 'Alex Brush', cursive; } .hov h2 { margin: 0; font-size: 11px; text-transform: uppercase; font-family: 'Lato', sans-serif; } .hov p { padding: 7px; text-align: justify; line-height: 13px; font-family: 'Open Sans', sans-serif;} .hov:hover { opacity: 1; } .round { position: absolute; height: 176px; width: 176px; border-radius: 50%; BACKGROUND-COLOR: #BBBBBB; border: 10px solid #FFFFFF; top: 50%; margin-top: -103px; left: 50%; margin-left: -98px; opacity: 1; z-index: 2; } .round h1 { color: #888; font-size: 30px; letter-spacing: 3px; text-transform: uppercase; font-family: 'Lato', sans-serif; margin: 75px 0 5px 0; } .round h2 { margin: 0; padding: 0; font-size: 15px; letter-spacing: 1px; text-transform: lowercase; font-family: 'Lato', sans-serif; } hov h1, .hov h2, .round h1, .round h2 { font-weight: normal; } hr.styled { padding: 0; border: none; margin-top: 20px; border-top: medium double #333; color: #333; text-align: center; } hr.styled:after { content: "§"; display: inline-block; position: relative; top: -0.5em; font-size: 1.5em; padding: 0 0.25em; background: #DDDDDD; font-family: arial; }</style>

<div id='gridbox'>
<div class='box' style='background-image: url(http://i41.tinypic.com/dwyrz4.png);'>
 <div class='hov'>
 <h1>firstname surname</h1>
 <h2> - age, suggested pb - </h2>
 <hr class='styled'></hr>
 <p>info goes here
 </div>
</div>

<div class='box' style='background-image: url(http://i41.tinypic.com/dwyrz4.png);'>
 <div class='hov'>
 <h1>firstname surname</h1>
 <h2> - age, suggested pb - </h2>
 <hr class='styled'></hr>
 <p>info goes here
 </div>
</div>


<div class='box' style='background-image: url(http://i41.tinypic.com/dwyrz4.png);'>
 <div class='hov'>
 <h1>firstname surname</h1>
 <h2> - age, suggested pb - </h2>
 <hr class='styled'></hr>
 <p>info goes here
 </div>
</div>

<div class='box' style='background-image: url(http://i41.tinypic.com/dwyrz4.png);'>
 <div class='hov'>
 <h1>firstname surname</h1>
 <h2> - age, suggested pb - </h2>
 <hr class='styled'></hr>
 <p>info goes here
 </div>
</div>


<div class='round'>
 <h1>title</h1>
 <h2>brief subtitle</h2>
 <a href='http://z10.invisionfree.com/Shadowplay/index.php?showuser=7050'>ღ</a>
</div>
</div>

Цитировать Сообщение 5

Поделиться62014-07-29 18:43:56

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Код:

<style type="text/css">
.walden { width: 420px; height: 220px;  -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000;  } 

.henry {width: 420x; height: 220px; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d;-ms-transform-style: preserve-3d; }

.walden:hover .henry {-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);-ms-transform: rotateY(180deg); }

.emerson {overflow: hidden; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute;}

.waldo {overflow: hidden; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); opacity: 0; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute; width: 400px; height: 200px; padding: 10px; background-color: #716B7C; overflow: auto; float: left; }

.walden:hover .waldo {-webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; opacity: 1; background-color: #716B7C;}



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

<center>
<div style="width: 420px; height: 35px; background-color: #3B2543; color: rgba(235,242,238, .85);font-family: buda; font-size: 22px; text-align:center; text-transform: uppercase;line-height: 160%;">character name - age - group</div>
<div class="walden"><div class="henry"><div class="emerson"><div style="width:400px; height: 200px; background-image: url(http://placehold.it/400x200); border: 10px solid #A4BDB1;"></div></div><div class="waldo"><div style="width: 150px; height: 200px; position: relative; float: left;"><img src="http://placehold.it/150x200"></div><div style="height: 190px; width: 215px; border: 5px solid #96A0A3; background-color: #EBF2EE; position: relative; float: right;"><div style="width: 195px; height: 170px; padding: 10px; text-align: justify; color: #3B2543; font-family: cuprum; font-size: 9.5px; line-height: 94%;overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet velit ac erat eleifend commodo gravida libero ornare. Morbi erat lorem, elementum sed vulputate sed, laoreet et augue. Sed sodales massa euismod turpis tempor pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dolor nisl, bibendum a eleifend iaculis, elementum nec massa. Donec vehicula tincidunt varius. Nunc sem nibh, venenatis eget eleifend vitae, placerat at est. Integer porttitor, lorem vel suscipit ullamcorper, enim sapien dictum dui, sit amet condimentum felis sem sed lorem. Nulla posuere pretium nisl, ornare consectetur dui dictum eu. Etiam mollis rhoncus dui, a scelerisque erat vestibulum vel. Proin eget nisi nunc, nec vestibulum magna. Vivamus mattis sagittis suscipit. Pellentesque eu tellus felis. Nunc semper aliquet orci ac ornare. Pellentesque pulvinar elementum metus elementum blandit. </div></div>

Цитировать Сообщение 6

Поделиться72014-07-29 18:45:34

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Код:

<link href='http://fonts.googleapis.com/css?family=Vibur' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/w2uh6gphwjgmenu/betteralone.css?dl=1">

<div id="grisha-alina">
   <div class="grisha-mal">
       <div class="grisha-zoya"><img src="http://placehold.it/250x550"></div> </div>
   <div class="grisha-darkling">
       <div class="grisha-info">
           <span class="grisha-infon">FIRST LAST</span><br>
           17 . 'puff . drug lord
       </div>
    </div>
<div class="grisha-kuya">
   <div class="grisha-title">FIRST LAST</div>
   <div class="grisha-subtitle">i used to think that i was better alone</div>
   <img src="http://placehold.it/500x200">
<div class="grisha-text">YOUR TEXT HERE !!!!!!!!!!!!!!!!!!!!!11!1!!!!!!!!!!</div>
</div>
</div>

Цитировать Сообщение 7

Поделиться82014-08-07 20:14:13

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Цитировать Сообщение 8

Поделиться92014-08-08 01:14:02

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Цитировать Сообщение 9

Поделиться102014-08-08 01:17:54

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Цитировать Сообщение 10

Поделиться112014-08-08 02:22:34

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Цитировать Сообщение 11

Поделиться122014-08-08 02:29:51

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Цитировать Сообщение 12

Поделиться132014-08-08 02:38:44

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Цитировать Сообщение 13

Поделиться142014-08-08 02:47:44

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Цитировать Сообщение 14

Поделиться152014-08-08 03:13:00

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Цитировать Сообщение 15

Поделиться162014-08-08 23:50:43

Автор: Yato Hiroshi
Администратор
Зарегистрирован: 2014-03-12
Приглашений: 0
Сообщений: 22
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
13 часов 23 минуты
Последний визит:
2014-08-10 22:49:51

Код:

<center><link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Satisfy' rel='stylesheet' type='text/css'>

<style type="text/css">

.jaztabs {
position: relative;   
width: 400px;
height: 400px;
background: #f8f8f8;
border: 15px solid #eee;
clear: both;
}

.jaztab {
float: left;
}

.jaztab label {
background: #eee; width: 50px;
padding: 5px;
display: block;
text-align: center;
text-transform: uppercase; 
font-family: 'Roboto Condensed', sans-serif;
color: black;
font-size: 11px;
margin-right: 10px; 
position: relative;
top: 20px;
left: 55px; 
}

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

.jazcontent {
position: absolute;
top: 90px;
bottom: 20px;
left: 0px;
right: 0px;
background: #f8f8f8;
padding: 5px 20px 5px 20px;
text-align: justify;
color: black;
font-size: 11px;
line-height: 100%;
overflow: auto;
font-family: calibri;
}

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

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

.jazfctitle001 { font-family: 'Satisfy', cursive; color: black; font-size: 35px; text-align: center; padding-top: 25px; }
.jazfccredit001 { text-align: center; font-family: arial; font-size: 10px; font-variant: small-caps; margin-top: 352px; width: 400px; background: #1d1d1d; height: 13px; padding-top: 1px; letter-spacing: 1px; line-height: 100%; }

</style>

<div class="jaztabs">

<div class="jazfctitle001">The Face Claim</div>

<div class="jaztab">
<input type="radio" id="jaztab-1" name="jaztab-group-1" checked>
<label for="jaztab-1">Info</label>
<div class="jazcontent">
All of the rules regarding your face claim will go here.  If you have a lot of rules or information to give out, this box will scroll.  If you have a lot of face claims, those will also scroll, although it's unlikely you'll run out of room.  You can outline any kind of form you'd like, but I don't recommend using the "code" tags, because it tends to make the tabs go funny.
<p>
Your reservation rules can go here as well.  It makes a lot of sense to put them here, because it's just easier in terms of the template.  If you want to put reservation rules in the "reserve" section, you'll have to edit the HTML for that section, because I don't think you want your rules structured as columns.
</div> 
</div>
 
<div class="jaztab">
<input type="radio" id="jaztab-2" name="jaztab-group-1">
<label for="jaztab-2">Male</label>
<div class="jazcontent"><div style="column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; column-gap: 8px; -moz-column-gap: 8px; -webkit-column-gap: 8px;">
<b>pb last, first</b> plays character last, first<br>
</div> 
</div>
</div>
 
<div class="jaztab">
<input type="radio" id="jaztab-3" name="jaztab-group-1">
<label for="jaztab-3">Female</label>
<div class="jazcontent"><div style="column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; column-gap: 8px; -moz-column-gap: 8px; -webkit-column-gap: 8px;">
<b>pb last, first</b> plays character last, first<br>
</div>
</div>
</div>

<div class="jaztab">
<input type="radio" id="jaztab-4" name="jaztab-group-1">
<label for="jaztab-4">Reserve</label>
<div class="jazcontent"><div style="column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; column-gap: 8px; -moz-column-gap: 8px; -webkit-column-gap: 8px;">
<b>pb last, first</b> is reserved until <i>date</i><br>
</div> 
</div>
</div>

<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=4002"><div class="jazfccredit001"><div style="color: white; font-weight: normal;">made by jazmine at shadowplay</div></div></a>

</div>

</center>

Цитировать Сообщение 16

Ответить

Страница: 1

infinitum caelum

Меню навигации

Пользовательские ссылки

Объявление

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

коды

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

Поделиться12014-07-29 18:29:44

Поделиться22014-07-29 18:33:01

Поделиться32014-07-29 18:40:13

Поделиться42014-07-29 18:41:46

Поделиться52014-07-29 18:42:40

Поделиться62014-07-29 18:43:56

Поделиться72014-07-29 18:45:34

Поделиться82014-08-07 20:14:13

Поделиться92014-08-08 01:14:02

Поделиться102014-08-08 01:17:54

Поделиться112014-08-08 02:22:34

Поделиться122014-08-08 02:29:51

Поделиться132014-08-08 02:38:44

Поделиться142014-08-08 02:47:44

Поделиться152014-08-08 03:13:00

Поделиться162014-08-08 23:50:43