Últimos temas
» prueba popup
Jue Ago 30, 2018 3:05 pm por Admin

» temas putos 123
Vie Abr 13, 2018 3:51 pm por Invitado

» Prueba de afiliaciones RODA
Jue Mar 15, 2018 12:50 am por Admin

» Inventario [HTML]
Miér Ene 24, 2018 3:03 pm por Admin

» Búsquedas [HTML]
Jue Ene 11, 2018 7:20 pm por Admin

» Ficha con pestañas [HTML]
Dom Nov 12, 2017 1:55 am por Admin

» Pergamino [HTML]
Lun Oct 30, 2017 7:23 pm por Admin

» Texto de prueba
Mar Oct 03, 2017 3:56 pm por Rigoberto Pompolinocio

» Quote, spoiler & code
Lun Ago 14, 2017 6:23 pm por Admin

Afiliados Elite 00 de 45


Afiliados Hermanos
Directorio

Búsquedas [HTML]

Ver el tema anterior Ver el tema siguiente Ir abajo

Búsquedas [HTML]

Mensaje por Admin el Jue Ene 11, 2018 7:20 pm



Name
McName
age • group • sexuality • year
about
about here 
friends
friends here
enemies
enemies here!  
paramour
paramour here
Name
McName
age • group • sexuality • year
 
about
about here
friends
friends here  
enemies
enemies here  
paramour
paramour here
Name
McName
age • group • sexuality • year
about
about here  
friends
friends here  
enemies
enemies here
paramour
paramour here




Código:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,700i|Poppins:400" rel="stylesheet">

<div class="sfoscontainer"><div class="sfostabs"><div class="sfostab"><input type="radio" id="sfostab-1" name="sfostab-group-1" checked><label for="sfostab-1">i.</label><div class="sfoscontent"> <div class="sfosin" style="background:url(https://placehold.it/250x400)"></div> <div class="sfosin2"> <input type="checkbox" id="toggle"><label for="toggle" title="click for more"><div class="sfosicon"><img src="https://placehold.it/100"></div></label> <div class="sfosname"> Name<br>McName </div> <div class="sfossub"> age • group • sexuality • year </div><div class="sfosplot"><label for="toggle" style="position:absolute;top:-5px;line-height:100%;left:5px;text-transform:lowercase;font-size:10px;padding:5px;border-radius:100%;border:1px solid #ddd;">x</label><div class="sfosplotin"><div class="sfosplotsub">about</div> about here <div class="sfosplotsub">friends</div> friends here <div class="sfosplotsub">enemies</div> enemies here!  <div class="sfosplotsub">paramour</div> paramour here </div> </div> </div></div></div><div class="sfostab"><input type="radio" id="sfostab-2" name="sfostab-group-1" ><label for="sfostab-2">ii.</label><div class="sfoscontent"> <div class="sfosin" style="background:url(https://placehold.it/250x400)"></div> <div class="sfosin2"> <input type="checkbox" id="toggle2"> <label for="toggle2" title="click for more"> <div class="sfosicon"> <img src="https://placehold.it/100"> </div> </label> <div class="sfosname"> Name<br>McName </div> <div class="sfossub"> age • group • sexuality • year </div> <div class="sfosplot">  <label for="toggle2" style="position:absolute;top:-5px;line-height:100%;left:5px;text-transform:lowercase;font-size:10px;padding:5px;border-radius:100%;border:1px solid #ddd;">x</label> <div class="sfosplotin"> <div class="sfosplotsub">about</div> about here <div class="sfosplotsub">friends</div> friends here  <div class="sfosplotsub">enemies</div>enemies here  <div class="sfosplotsub">paramour</div> paramour here </div></div> </div></div></div><div class="sfostab"><input type="radio" id="sfostab-3" name="sfostab-group-1" ><label for="sfostab-3">iii.</label><div class="sfoscontent"> <div class="sfosin" style="background:url(https://placehold.it/250x400)"></div> <div class="sfosin2"> <input type="checkbox" id="toggle3"> <label for="toggle3" title="click for more"> <div class="sfosicon"> <img src="https://placehold.it/100"> </div> </label><div class="sfosname"> Name<br>McName </div> <div class="sfossub"> age • group • sexuality • year </div> <div class="sfosplot"> <label for="toggle3" style="position:absolute;top:-5px;line-height:100%;left:5px;text-transform:lowercase;font-size:10px;padding:5px;border-radius:100%;border:1px solid #ddd;">x</label> <div class="sfosplotin"> <div class="sfosplotsub">about</div> about here  <div class="sfosplotsub">friends</div> friends here  <div class="sfosplotsub">enemies</div>enemies here <div class="sfosplotsub">paramour</div> paramour here </div></div> </div></div></div></div></div><div style="text-align:center;font-family:Poppins;font-size:8px;text-transform:uppercase;color:#aaa;letter-spacing:1px;"><a href="http://shine.jcink.net/index.php?showuser=23444">JARONART</a></div>

<style type="text/css">
.sfoscontainer {margin: 10px auto; height: auto;width: auto;}.sfostabs {margin: 0px auto; position: relative;width: 301px; height: 401px; padding:10px;background:#f6f6f6;border:1px solid #ddd;border-radius:17px;overflow:hidden;box-shadow:0px 0px 10px #bbb;}.sfostab {
display:block;/* CHANGE TO DISPLAY:BLOCK FOR VERTICAL TABS */}/* position your tab labels in here - also use margins to space your labels - you kind of have to eye until it's centered bc the math with tabs gets confusing */.sfostab label {display: block; /* this lets you fix the label dimensions */width: 10px;height: 10px;padding:5px;font-family:Playfair Display;font-weight:700;text-transform:lowercase;color:#aaa;font-style:italic;font-size:9px;text-align:center;
background: #fff;margin-top:10px;position: relative;left: 265px;top: 5px;z-index: 3;cursor:crosshair;}.sfostab input[type=radio]:checked ~ label {background: white;z-index: 2;border-bottom:1px solid #ddd;}.sfostab input[type=radio] {display: none; /* DON'T EDIT */}/* if you want tab transitions they go here */.sfoscontent {position: absolute;top: 10px;bottom: 0px;left: 10px;right: 0px;background: #fff;width:300px;height:400px;border-radius:10px; transition:all 1s ease-in-out; opacity:0;}/* if you want tab transitions they also go here */.sfostab input[type=radio]:checked ~ label ~ .sfoscontent {z-index: 1;opacity:1;transition:all 1s ease-in-out;}.sfosin {width:250px; height:400px; position:absolute; border-radius:10px 0px 0px 10px; overflow:hidden; transition:all 1s ease-in-out;filter:grayscale(70%);}.sfoscontent:hover .sfosin { filter:grayscale(40%);}.sfosin2 { width:250px; height:400px; position:absolute;border-radius:10px 0px 0px 10px; overflow:hidden; background:rgba(0,0,0,0.1); transition:all 1s ease-in-out;}.sfosin2:hover {background:rgba(0,0,0,0.3);}.sfosin2 label {transition:all 1s ease-in-out; position:absolute;top:75px; left:90px;}.sfosicon { width:80px; height:80px; border-radius:100%; padding:10px; background:#fff; border:1px solid #ddd; text-align:center;overflow:hidden; cursor:crosshair; position:absolute; left:-15px; top:-15px;transition:all 1s ease-in-out; box-shadow:0px 3px 5px #666;}.sfosicon img {width:80px; height:80px; border-radius:100%;}.sfosname { width:200px; position:absolute; top:185px; left:25px; font-family:Playfair Display; font-weight:700; font-style:italic; text-align:center; text-shadow:0px 3px 5px #333; color:#fff; line-height:100%; font-size:25px; transition:all 1s ease-in-out;}.sfossub { width:200px;position:absolute; top:250px; left:25px; font-family:Poppins; color:#fff; text-transform:uppercase; font-size:8px; text-align:center; line-height:100%; transition:all 1s ease-in-out; text-shadow:0px 3px 5px #333;}.sfosplot {width:220px;height:370px;position:absolute;top:15px; left:315px;border-radius:10px;transition:all 1s ease-in-out;opacity:0;}.sfosin2 input[type=checkbox] {display: none;}.sfosin2 input[type=checkbox]:checked ~ .sfosname {left:325px;opacity:0;}.sfosin2 input[type=checkbox]:checked ~ .sfossub {left:325px;opacity:0;}.sfosin2 input[type=checkbox]:checked ~ label {left:385px;opacity:0;}.sfosin2 input[type=checkbox]:checked ~ .sfosplot {left:15px;opacity:1;transition:all 1s ease-in-out 0.5s;}.sfosplot {width:220px;height:370px;position:absolute;top:15px; left:315px;border-radius:10px;transition:all 1s ease-in-out;background:rgba(900,900,900,0.95);}.sfosplotin {position:absolute;top:30px; left:27px;width:170px;height:315px;padding-right:8px;font-family:Poppins;font-weight:400;text-align:justify;color:#666;overflow-y:auto;overflow-x:hidden;font-size:9px;line-height:12px;}.sfosplotin b {font-family:Playfair Display;font-weight:700;}.sfosplotin i {font-family:Playfair Display;font-weight:400;font-style:italic;}.sfosplotin::-webkit-scrollbar {width:5px;border-radius:10px;}.sfosplotin::-webkit-scrollbar-thumb {border-radius:10px;border:2px solid #fff;background:#ccc;}.sfosplotin::-webkit-scrollbar-track {background:#fff;border-radius:10px;}.sfosplotsub {padding:10px;margin-bottom:10px;border-bottom:1px solid #ddd;font-family:Playfair Display;font-weight:700;font-style:italic;color:#888;font-size:12px;text-align:center;line-height:100%;}
</style>


...oh honey, you should see me in a

crown!


avatar
Administrador
Administrador
Imagen :

Apodo :
Admin

Mensajes :
16

Puntos :
273

Edad :
30 años

Raza :
Humano

Planeta :
Tierra

Imagen hoja :

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.