Astrophel Date d'inscription : 08/02/2015 Messages : 325 Dollars : 93
grand manitou | Sujet: — facebook ; modèle de libre-service Ven 22 Fév 2019 - 14:43 |
| RÉSEAUX SOCIAUX // FACEBOOK explications Vous trouverez ci-dessous un code en libre service pour poster si vous le souhaitez le compte facebook de votre personnage. C'est totalement optionnel et juste pour le fun, alors faites vous plaisir ♥ Le code ci-dessous est un libre service disponible sur CAUTION TO THE WIND. libre service - MODÈLE:
- Code:
-
<style>.jfb,.jfbfriend,.jfbscroll{overflow:auto}.jfbnarrow,.jfbtabbar,.jffloattall{box-sizing:border-box}.jfb{width:550px;color:#333;height:auto;background-color:#e9eaed;outline:#f0f0f0 solid 1px;margin:0 auto;position:relative;font:normal normal normal 11px/110% Helvetica,Arial,sans-serif}.jfb ::-webkit-scrollbar{width:3px}.jfb ::-webkit-scrollbar-track{background-color:#d8dfea}.jfb ::-webkit-scrollbar-thumb{background-color:#6d84b4}.jfbtabbar,.jfbwide{background-color:#fff}.jfb .jprofile{position:absolute;top:120px;left:18px;border:3px solid #fff;outline:#ddd solid 1px}.jfbtab label,.jfbtabbar{border-right:1px solid #ddd;border-left:1px solid #ddd}.jfbtabbar{width:100%;height:40px;border-bottom:1px solid #ddd;text-align:center;font:normal normal normal 12px/40px Helvetica,Arial,sans-serif;text-transform:uppercase;letter-spacing:1px}.jfbtabcontainer{margin:5px;position:relative;height:420px}.jfbtab{float:left}.jfbtab input[type=radio]{display:none}.jfbtab .jfcontent{opacity:0}.jfbtab input[type=radio]:checked~label~.jfcontent{opacity:1;z-index:2}.jfbtab label{display:block;height:40px;padding:0 14px;margin:2px -1px 0 0;position:relative;top:-47px;left:130px;font:normal normal bold 12px/40px Helvetica,Arial,sans-serif;text-transform:none;letter-spacing:normal;color:#6d84b4}.jfbtab input[type=radio]:checked~label{color:#000}.jfbtab input[type=radio]:checked~label:after{content:"";position:absolute;bottom:0;left:42%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:10px solid #e9eaed}.jfcontent{position:absolute;top:0;left:0;right:0;bottom:0}.jfbwide{border:1px solid #ddd}.jfbwide h1{background-color:#f6f7f8;padding:20px;margin:0;border-bottom:1px solid #ddd}.jfbscroll{margin:10px;padding-right:5px;height:345px}.jfbphotos img{border:0;padding:0;float:left;margin:1px;width:100px;height:100px}.jfbfriend{width:49%;display:inline-block;height:80px}.jfbfriend img{float:left;margin-right:15px}.jfbwide h2{margin:0;float:left;font:normal normal bold 16px/80px Helvetica,Arial,sans-serif;color:#3b5998}.jfbwide h3{font:normal normal bold 12px/100% Helvetica,Arial,sans-serif;margin:0 0 20px 10px;padding:3px 5px;color:#888;text-align:left}.jfbwide h3:nth-of-type(1){margin-top:30px;border-left:3px solid #3b5998;color:#000}.jfbwide h4{margin:15px 0 5px;border-bottom:1px solid #ddd;padding-left:20px;text-transform:uppercase;font:normal normal bold 9px/100% Helvetica,Arial,sans-serif;color:#888}.jfbnarrow span,.jffloattall span{color:#6d84b4}.jfbwide h4:nth-of-type(1){margin-top:0}.jfbnarrow p{text-indent:5px}.jffloatleft{height:365px;width:29%;float:left;border-right:1px solid #ddd}.jfbnarrow{padding:20px}.jffloattall{height:405px;padding:10px 10px 0 5px}.jfbpost{height:auto;background-color:#f1f1f1;border:1px solid #ddd;margin-bottom:20px}.jfbpost:last-child{margin-bottom:0}.jfbpostmain{background-color:#fff;padding:15px;text-align:justify}.jpostimage{float:left;margin-right:15px}.jfbpostmain h5{margin:14px 0 18px;font:normal normal bold 14px/100% Helvetica,Arial,sans-serif;color:#3b5998}.jfbpostmain h5 span{display:block;font-weight:400;font-size:10px;color:#666}.jfblike{margin-top:10px;color:#6d84b4}.jfblike2{color:#6d84b4;margin:10px}.jpostimage{max-width:100%;display:block;margin-bottom:5px}</style><div class="jfb"><img src="https://placehold.it/550x200" class="jcover"><a href="http://cttw.jcink.net/index.php?showuser=6"><img src="https://placehold.it/100" class="jprofile"></a><div class="jfbtabbar"></div><div class="jfbtabcontainer"><div class="jfbtab"><input type="radio" id="jtimeline" name="jfbgroup-1" checked><label for="jtimeline"> Timeline </label><div class="jfcontent"><div class="jffloatleft jffloattall"><div class="jfbpost"><div class="jfbpostmain">Works at <span>place</span><br><br>Went to <span>University</span><br><br>Lives in <span>City, Province</span><br><br>From <span>City, Province</span></div></div></div><div class="jfbscroll jfbnarrow jffloattall" style="padding: 10px;"><div class="jfbpost"><div class="jfbpostmain"><img src="http://placehold.it/50" class="jpostimage"><h5>Name<span>Sunday, May 5th</span></h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur et enim id mollis. Mauris a felis molestie, maximus lorem id, molestie libero. Cras tempor ultrices fermentum. Integer et fringilla ante. Sed nisi arcu, commodo id faucibus luctus, pellentesque et est. <div class="jfblike">Like • Comment • Share</div></div><div class="jfblike2">4 people like this</div></div><div class="jfbpost"><div class="jfbpostmain"><img src="http://placehold.it/50" class="jpostimage"><h5>Name<span>Sunday, May 5th</span></h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<img src="http://placehold.it/400x200" class="jpostimage"><div class="jfblike">Like • Comment • Share</div></div><div class="jfblike2">4 people like this</div></div><div class="jfbpost"><div class="jfbpostmain"><img src="http://placehold.it/50" class="jpostimage"><h5>Name<span>Sunday, May 5th</span></h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur et enim id mollis. Mauris a felis molestie, maximus lorem id, molestie libero. Cras tempor ultrices fermentum. Integer et fringilla ante. Sed nisi arcu, commodo id faucibus luctus, pellentesque et est. <div class="jfblike">Like • Comment • Share</div></div><div class="jfblike2">4 people like this</div></div></div></div></div><div class="jfbtab"><input type="radio" id="jabout" name="jfbgroup-1"><label for="jabout"> About </label><div class="jfcontent"><div class="jfbwide"><h1>About</h1><div class="jffloatleft"><h3>Overview</h3><h3>Work and Education</h3><h3>Contact and Basic Info</h3><h3>Family and Relationship</h3><h3>Details About You</h3><h3>Life Events</h3></div><div class="jfbscroll jfbnarrow"><h4>about you</h4><p>Write a blurb about yourself here!<h4>current city and hometown</h4><p>Currently living in <span>City</span></p><p>Born in <span>City</span></p><h4>family</h4><p>List any family you have</p><h4>relationship</h4><p>♥ <span>single</span></p><h4>work</h4><p>Jan 2015 - present, <span>Workplace</span></div></div></div></div><div class="jfbtab"><input type="radio" id="jfriends" name="jfbgroup-1"><label for="jfriends"> Friends </label><div class="jfcontent"><div class="jfbwide"><h1>Friends</h1><div class="jfbscroll"><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div><div class="jfbfriend"><img src="http://placehold.it/80"><h2>first last</h2></div></div></div></div></div><div class="jfbtab"><input type="radio" id="jphoto" name="jfbgroup-1"><label for="jphoto"> Photos </label><div class="jfcontent"><div class="jfbwide"><h1>Photos</h1><div class="jfbscroll jfbphotos"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"><img src="http://placehold.it/100"></div></div></div></div></div></div> |
|