InícioQueen
Admin
Mensagens :
894
Modelo de Ficha
Explicação em construção- Código:
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'><style type="text/css">::-webkit-scrollbar { height: 12px; width: 10px; background-color: transparent;} ::-webkit-scrollbar-thumb { background: #030303; } ::-webkit-scrollbar-corner { background: #030303; }::-webkit-scrollbar-track { background: transparent; }#thtabcontainer { width: 500px; height: 500px; background-color: #030303; position: relative; }.thcontimage img { position: absolute; right: 0px; top: 0px; width: 325px; height: 500px; }.thooc { position: absolute; bottom: 20px; left: 25px; width: 105px; padding: 10px; font-family: kite one; font-size: 6px; letter-spacing: 1px; line-height: 8px; color: white; text-transform: uppercase; }.tabs { position: relative; height: 500px; width: 500px; clear: both; }.tab label { display: block; width: 50px; background: #FFF; color: #030303; padding: 15px; font: 6px/12px kite one; text-transform: uppercase; letter-spacing: 3px; text-align: right; position: absolute; right: 325px; top: 200px; }.tab [type=radio] { display: none; }[type=radio]:checked ~ label { background: #DBDF8A; color: #FFF; border-bottom: 0px; z-index: 2; }[type=radio]:checked ~ label ~ .thcontent { z-index: 1; opacity: 1; filter: alpha(opacity=100); }.thcontent { width: 300px; position: absolute; top: 12px; left: 187px; float: right; right: 12px; bottom: 12px; text-align: justify; opacity: 0; filter: alpha(opacity=0); }[type=radio]:checked ~ label { background: #DBDF8A; color: #030303; border-bottom: 0px; z-index: 2; }[type=radio]:checked ~ label ~ .thcontent { z-index: 1; }.thfirsttab { text-align: center; width: 300px; position: absolute; bottom: 20px; left: 35px; background-color: rgba(0,0,0,0.8); padding: 20px; width: 190px; height: 90px; color: white; font-family: times; font-size: 7px; text-transform: uppercase; letter-spacing: 2px; line-height: 90px; }.thappcontent { background-color: rgba(255,255,255,0.8); padding: 20px; font-family: times; font-size: 10px; line-height: 11px; letter-spacing: 1px; height: 432px; overflow: auto; }.thabout { position: absolute; top: 180px; left: -15px; width: 300px; }.thabout ul { list-style: none; }.thabout li { display: block; float: left; margin-left: 5px; margin-bottom: 5px; background-color: #030303; text-align: center; font-family: kite one; letter-spacing: 1px; color: white; font-size: 6px; line-height: 25px; width: 80px; text-transform: uppercase; }</style><center><div id="thtabcontainer"><div class="thcontimage"><img src="325 x 500 IMAGE GOES HERE"></div><div class="thooc">OOC NAME. CONTACT INFO. TIMEZONE.</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="thcontent"><div class="thfirsttab">FIRST M. LAST</div></div> </div><div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2" style="margin-top: 42px;">two</label><div class="thcontent"><div class="thabout"><ul> <li>idade</li><li>data de aniversário</li><li>apelido</li></ul><ul><li style="width: 165px;">avatar</li><li>raça [opcional]</li></ul><ul><li style="width: 250px;">grupo escolhido</li></ul><ul> <li>país dev origem</li><li>estado civil</li><li>seu nome em off</li></ul> </div></div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3" style="margin-top: 84px;">three</label><div class="thcontent"><div class="thappcontent">Sua história em no mínimo 20 linhas do word, ou 20 fatos sobre sua história
<b>Amor:</b> Como seu personagem é com relações amorosas? Como age?
<b>Amigos & Família:</b> Como seu personagem é com relações famíliares e amizades? Como age?
<b>Inimigos:</b> Como seu personagem é com relações de inimigos? Como age?</div> </div> </div> </div></div><div style="font-size: 7px; text-transform: uppercase; font-family: georgia; letter-spacing: 1px; word-spacing: 3px;"><a href="http://shine.b1.jcink.com/index.php?showtopic=3546">THEONS</a> @ SHINE</div></center>
</div><div style="margin-top: 25px; width: 280px; height: 1px; background-color: #111;"></div><div style="width:280px; height: 50px; background-color: transparent; border-top: 45px solid white;"></div></div></div></center>
Respostas!
- Código:
<center><link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'><style type=text/css>.xxk b { font: 13px muli; line-height: 100%; font-weight: bold; color: #333; }</style><div style="width: 387px; background: #fff; padding: 10px; border: 1px solid #eee; margin-bottom: 10px; font: 10px muli; text-align: right; text-transform: uppercase; letter-spacing: 2px; color: #555">Nome do Personagem da Ficha + Seu Nome (Os primeiros)</div><table cellpadding="0" cellspacing="0"><td valign=top><a href="http://z13.invisionfree.com/__SKINNYLOVE/index.php?showuser=485"><div style="width: 95px; height: 95px; border: 1px solid #eee;"><img src="imagem quadrada, redimensiona sozinho" width="75px" height="75px" style="border: 10px solid #fff;"></div></a><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=3216"><div style="font: 6px arial; text-align: center; text-transform: uppercase; color: #aaa; letter-spacing: 2px; margin-top: 10px;">
kristen</div></a></td><td valign=top><div class="xxk" style="width: 200px; padding: 50px; background: #fff; font: 13px muli; text-align: justify; text-transform: normal; color: #333; line-height: 110%; letter-spacing: 1px; border: 1px solid #eee; margin-left: 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 <b>"ullamco laboris nisi ut aliquip ex ea,"</b> commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat
</div></td></table></center>
Tópicos semelhantesPermissões neste sub-fórum
Não podes responder a tópicos|
|
|