Des codes, des codes et des amis !
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Thème portrait avec modules

Aller en bas 
AuteurMessage
RubyFeather



Messages : 2
Date d'inscription : 07/02/2018

MessageSujet: Thème portrait avec modules   Mer 7 Fév - 15:01

❚ INFO
AGE Age
NATIONALITY Nationality
HEIGHTHeight
WEIGHT Weight
GENDER Gender
BIRTHDAY Birthday
BLOODTYPE Bloodtype
ORIENTATION Orientation
VOICE Voice name & link

❚ PERSONALITY
- MBTI-T/A
ADJECTIVE | ADJECTIVE | ADJECTIVE -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
ADJECTIVE | ADJECTIVE | ADJECTIVE -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.
ADJECTIVE | ADJECTIVE | ADJECTIVE -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt.

❚ POWERS
POWER -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus.
▸APPLICATION
▸APPLICATION
▸APPLICATION
▸APPLICATION
POWER -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus.
▸APPLICATION
▸APPLICATION
▸APPLICATION
▸APPLICATION
POWER -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus.
▸APPLICATION
▸APPLICATION
▸APPLICATION
▸APPLICATION

❚ STATS & SKILLS
HEALTH STAMINA STRENGTH POWER SPEED DEFENSE INTELLECT
Explanation - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. SKILL
SKILL
SKILL
SKILL
SKILL
SKILL

❚ STORY
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus. Proin vulputate turpis et tempus feugiat. Pellentesque non metus ut ipsum sodales rutrum et eget libero. Quisque nec mollis leo, vitae euismod turpis. Phasellus imperdiet fringilla massa, aliquet faucibus diam males.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus. Proin vulputate turpis et tempus feugiat. Pellentesque non metus ut ipsum sodales rutrum et eget libero. Quisque nec mollis leo, vitae euismod turpis. Phasellus imperdiet fringilla massa, aliquet faucibus diam males

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus. Proin vulputate turpis et tempus feugiat. Pellentesque non metus ut ipsum sodales rutrum et eget libero. Quisque nec mollis leo, vitae euismod turpis. Phasellus imperdiet fringilla massa, aliquet faucibus diam males

❚ FACTS & EXTRAS
Cras consequat sit amet nibh at condimentum.
Cras consequat sit amet nibh at condimentum.
Cras consequat sit amet nibh at condimentum.
Cras consequat sit amet nibh at condimentum.
Cras consequat sit amet nibh at condimentum.
Cras consequat sit amet nibh at condimentum.

FIRSTNAME LASTNAME
« Quote blablabla »



Code:
<style> .all{ position: relative; width: 510px; margin: 60px auto; border: 0px solid green; line-height: 16px; font-family: "Open Sans"; color: #2d2f30; } .all table{ border: 0px; margin-top: 10px; } .all table tr td{ padding: 2px 2px 2px 2px; font-size: 13px; } .warp { background: #fff; background: transparent; width: 460px; height: 630px; border: 0px solid blue; box-sizing: border-box; z-index: 2; } .border-top{ position: absolute; width: 60%; height: 200px; top: -24px; left: 0; border-top: 1px solid #2d2f30; border-left: 1px solid #2d2f30; border-radius: 7px 0px 0px 0px; z-index: 2; } .border-bottom{ position: absolute; width: 30%; height: 150px; bottom: 0; right: 55px; border-bottom: 1px solid #2d2f30; border-right: 1px solid #2d2f30; border-radius: 0px 0px 7px 0px; z-index: 2; } .refcontainer{ position: relative; max-width: 400px; height: 600px; margin: 24px 24px 0px 24px; background: transparent; box-sizing: border-box; border: 0px solid red; } .box_base{ position: absolute; top: 0; right: 0; width: 100%; height: 600px; border-radius: 5px 5px 5px 5px; box-sizing: border-box; overflow: hidden; background: #ebeae8; z-index: 0; } .button_margin, .button1, .button2, .button3, .button4, .button5, .button6{ background: #2d2f30; width: 40px; height: 40px; border-radius: 0px 10px 10px 0px; color: #ebeae8; font-size: 22px; text-align: center; padding-top: 14px; padding-right: 0px; margin-right: 10px; float: right; } .button1{ margin-top:20px; } .button2{ margin-top:90px; } .button3{ margin-top:160px; } .button4{ margin-top:230px; } .button5{ margin-top:300px; } .button6{ margin-top:370px; } .button_margin{ height: 1px; opacity: 0; margin-bottom: 18px; } .button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover{ background: black; color: #ccc; } .box_border{ display:block; position: absolute; top: -1px; left: -1px; width: 402px; height: 602px; box-sizing: border-box; border-radius: 5px 5px 5px 5px; border: 1px solid #2d2f30; z-index: 2; } .boxcontainer1, .boxcontainer2, .boxcontainer3, .boxcontainer4, .boxcontainer5, .boxcontainer6 { position: absolute; top: 1; right: -51px; width: 0px; height: 0px; border: 0px solid blue; z-index: 10; } .box1, .box2, .box3, .box4, .box5, .box6 { position: absolute; top: -1px; right: 51px;; width: 0px; height: 526px; border-radius: 5px 5px 0px 0px; box-sizing: border-box; transition-delay: 0.16s; overflow: hidden; } .box1 .content, .box2 .content, .box3 .content, .box4 .content, .box5 .content, .box6 .content{ background-color: rgba(255, 255, 255, 0.9); position: absolute; top: 700px; right: 0px; opacity: 1; width: 100%; height: 526px; padding: 57px 22px 30px 22px; text-align: justify; transition: ease 0.4s; box-sizing: border-box; overflow: auto !important; font-size: 12px; } /*---BUTTONS & BOXS INTERACTION---*/ /*---BOX1---*/ .boxcontainer1:hover .box1 .content{ top: 1px; right: 0; } .boxcontainer1:hover .box1 { width: 400px; transition: ease 0s; } /*---BOX2---*/ .boxcontainer2:hover .box2 .content { top: 1px; right: 0; } .boxcontainer2:hover .box2 { width: 400px; transition: ease 0s; } /*---BOX3---*/ .boxcontainer3:hover .box3 .content { top: 1px; right: 0; } .boxcontainer3:hover .box3 { width: 400px; transition: ease 0s; } /*---BOX4---*/ .boxcontainer4:hover .box4 .content { top: 1px; right: 0; } .boxcontainer4:hover .box4 { width: 400px; transition: ease 0s; } /*---BOX5---*/ .boxcontainer5:hover .box5 .content { top: 1px; right: 0; } .boxcontainer5:hover .box5 { width: 400px; transition: ease 0s; } /*---BOX6---*/ .boxcontainer6:hover .box6 .content { top: 1px; right: 0; } .boxcontainer6:hover .box6 { width: 400px; transition: ease 0s; } /*---TITLES---*/ .title1 div, .title2 div, .title3 div, .title4 div, .title5 div, .title6 div{ position: absolute; width: 100%; box-sizing: border-box; color: #2d2f30; padding: 25px 25px 10px 20px; font-size: 20px; text-align: left; top: 0; left: 0; z-index: 3; letter-spacing: 0.2px; transition: ease 0.4s; } .title1, .title2, .title3, .title4, .title5, .title6{ position: absolute; overflow: hidden; height: 60px; width: 100%; background: transparent; left: 0; top: 0; font-weight: 500; z-index: 3; } /*---BOX---*/ .refname{ position: absolute; background: #2d2f30; width: 100%; height: 75px; box-sizing: border-box; color: #fff; padding: 12px 20px 9px 10px; font-size: 25px; text-align: right; overflow: hidden; bottom: 0; font-weight: 100; z-index: 1; transition: ease 0.1s; transition-delay: 0.1s; line-height: 25px; border-radius: 0px 0px 4px 4px } .refname div{ font-size: 15px; } .box_base img{ position: absolute; top: 0; left: 0; } /*---BOX3---*/ .applications{ font-size: 10px; line-height: 14px; font-weight: 700; background: rgba(0, 0, 0, 0.1); padding: 5px 5px 5px 5px; border-radius: 3px 3px 3px 3px; } /*---BOX4---*/ .stats_box{ position: relative; height: 250px; width: 240px; margin: 30px 0px 0px 95px; } .stats_box .stats{ position: absolute; top: 20; left: 0; opacity: 0.5; height: 170px; width: 170px; background: black; -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); } .bar{ position: relative; background: #2d2f30; padding: 0px; height:16px; } .bar_inner{ margin-left: 10px; width: 150px; background: rgba(0, 0, 0, 0.2); height:16px; border-radius: 3px; overflow: hidden; } .health, .stamina, .strength, .power, .speed, .defense, .intellect { display: block; position: absolute; font-size: 12px; letter-spacing: -0.5px; } .health{left: 63px;} .stamina{top: 45px; left: -42px;} .strength{top: 115px; left: -65px} .power{top: 190px; left:0px;} .speed{top: 190px; left: 130px;} .defense{top:115px; left:175px;} .intellect{top:45px; left:160px;} /*---BOX5---*/ /*---BOX6---*/ .box6 table { font-size: 14px; } .bullet { font-weight: bold; padding-top: 2px; } .content::-webkit-scrollbar{width: 5px;} .content::-webkit-scrollbar-track {background: transparent;} .content::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.2);border-radius: 2px 2px 2px 2px;} .content::-webkit-scrollbar-thumb:hover {background: rgba(0, 0, 0, 0.5);} .boxcontainer1:hover~.box, .boxcontainer2:hover:hover~.box, .boxcontainer3:hover:hover~.box, .boxcontainer4:hover:hover~.box, .boxcontainer5:hover:hover~.box, .boxcontainer6:hover:hover~.box { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); transition: ease 1s; } </style> <!----------------------------------->  <div class="all"> <div class="warp"> <div class="border-top"></div> <div class="border-bottom"></div> <div class="refcontainer"> <div class="box_border"></div> <div class="button_margin"></div> <div class="boxcontainer1"> <div class="button1"></div> <div class="box1"> <div class="content"><p> <div class="title1"><div>❚ INFO</div></div> <table> <tr> <td style="width: 140px; font-weight: 500;"> AGE </td> <td> Age </td> </tr> <tr> <td style="width: 140px; font-weight: 500; padding-bottom: 2px;"> NATIONALITY </td> <td> Nationality </td> </tr><tr> <td style="width: 140px; font-weight: 500; padding-bottom: 2px;">HEIGHT</td><td>Height</td> </tr> <tr> <td style="width: 140px; font-weight: 500; padding-bottom: 2px;"> WEIGHT </td> <td> Weight </td> </tr> <tr> <td style="width: 140px; font-weight: 500; padding-bottom: 2px;"> GENDER </td> <td> Gender </td> </tr> <tr> <td style="width: 140px; font-weight: 500; padding-bottom: 2px;"> BIRTHDAY </td> <td> Birthday </td> </tr> <tr> <td style="width: 140px; font-weight: 500; padding-bottom: 2px;"> BLOODTYPE </td> <td> Bloodtype </td> </tr> <tr> <td style="width: 140px; font-weight: 500; padding-bottom: 2px;"> ORIENTATION </td> <td> Orientation </td> </tr> <tr> <td style="width: 140px; font-weight: 500; padding-bottom: 2px;"> VOICE </td> <td> Voice name & link </td> </tr> </table> </p></div> </div> </div> <div class="boxcontainer2"> <div class="button2"></div> <div class="box2"> <div class="content"><p> <div class="title2"><div>❚ PERSONALITY</div></div> <table> <tr><td style="padding-bottom:10px;padding-top:10px;font-size:18px;"> <i>- MBTI-T/A</i> </td></tr> <tr><td> ADJECTIVE | ADJECTIVE | ADJECTIVE - </td></tr> <tr><td style="padding-bottom:10px;text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt. </td></tr> <tr><td> ADJECTIVE | ADJECTIVE | ADJECTIVE - </td></tr> <tr><td style="padding-bottom: 10px;text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt. </td></tr> <tr><td> ADJECTIVE | ADJECTIVE | ADJECTIVE - </td></tr> <tr><td style="padding-bottom: 10px;text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit nisi, venenatis a est interdum, consectetur malesuada magna. Integer laoreet sagittis dui sed tincidunt. </td></tr> </table> </p></div> </div> </div> <div class="boxcontainer3"> <div class="button3"></div> <div class="box3"> <div class="content"><p> <div class="title3"><div>❚ POWERS</div></div> <table> <tr> <td> POWER - </td> </tr> <tr> <td style="text-align:justify;padding-bottom: 5px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus. </td> </tr> <tr> <td><div class="applications"> ▸APPLICATION<br> ▸APPLICATION<br> ▸APPLICATION<br> ▸APPLICATION </div></td> </tr> <tr> <td style="padding-top: 20px;"> POWER - </td> </tr> <tr> <td style="text-align:justify;padding-bottom: 5px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus. </td> </tr> <tr> <td><div class="applications"> ▸APPLICATION<br> ▸APPLICATION<br> ▸APPLICATION<br> ▸APPLICATION </div></td> </tr> <tr> <td style="padding-top: 20px;"> POWER - </td> </tr> <tr> <td style="text-align:justify;padding-bottom: 5px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus. </td> </tr> <tr> <td><div class="applications"> ▸APPLICATION<br> ▸APPLICATION<br> ▸APPLICATION<br> ▸APPLICATION </div></td> </tr> </table> </p></div> </div> </div> <div class="boxcontainer4"> <div class="button4"></div> <div class="box4"> <div class="content"><p> <div class="title4"><div>❚ STATS & SKILLS</div></div> <div class="stats_box"> <span class="health">HEALTH</span> <span class="stamina">STAMINA</span> <span class="strength">STRENGTH</span> <span class="power">POWER</span> <span class="speed">SPEED</span> <span class="defense">DEFENSE</span> <span class="intellect">INTELLECT</span> <div class="stats"></div></div> <table> <tr> <td rowspan="10" style="vertical-align:top; width: 130px;padding-right: 10px;text-align:left; font-size: 12px"> Explanation - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </td> <td style="padding-top: 1px;">SKILL</td> <td><div class="bar_inner"><div class="bar" style="width:60px;"></div></div></td> </tr> <tr> <td>SKILL</td> <td><div class="bar_inner"><div class="bar" style="width:100px;"></div></div></td> </tr> <tr> <td>SKILL</td> <td><div class="bar_inner"><div class="bar" style="width:100px;"></div></div></td> </tr> <tr> <td>SKILL</td> <td><div class="bar_inner"><div class="bar" style="width:100px;"></div></div></td> </tr> <tr> <td>SKILL</td> <td><div class="bar_inner"><div class="bar" style="width:100px;"></div></div></td> </tr> <tr> <td>SKILL</td> <td><div class="bar_inner"><div class="bar" style="width:100px;"></div></div></td> </tr> </table> </p></div> </div> </div> <div class="boxcontainer5"> <div class="button5"></div> <div class="box5"> <div class="content"><p> <div class="title5"><div>❚ STORY</div></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus. Proin vulputate turpis et tempus feugiat. Pellentesque non metus ut ipsum sodales rutrum et eget libero. Quisque nec mollis leo, vitae euismod turpis. Phasellus imperdiet fringilla massa, aliquet faucibus diam males.<br/><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus. Proin vulputate turpis et tempus feugiat. Pellentesque non metus ut ipsum sodales rutrum et eget libero. Quisque nec mollis leo, vitae euismod turpis. Phasellus imperdiet fringilla massa, aliquet faucibus diam males<br/><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras consequat sit amet nibh at condimentum. Aliquam vehicula luctus massa, at feugiat quam. Ut quis eros consequat, eleifend diam sed, maximus lacus. Proin vulputate turpis et tempus feugiat. Pellentesque non metus ut ipsum sodales rutrum et eget libero. Quisque nec mollis leo, vitae euismod turpis. Phasellus imperdiet fringilla massa, aliquet faucibus diam males </p></div> </div> </div> <div class="boxcontainer6"> <div class="button6"></div> <div class="box6"> <div class="content"><p> <div class="title6"><div>❚ FACTS & EXTRAS</div></div> <table> <tr> <td class="bullet"> • </td> <td> Cras consequat sit amet nibh at condimentum. </td> </tr> <tr> <td class="bullet"> • </td> <td> Cras consequat sit amet nibh at condimentum. </td> </tr> <tr> <td class="bullet"> • </td> <td> Cras consequat sit amet nibh at condimentum. </td> </tr> <tr> <td class="bullet"> • </td> <td> Cras consequat sit amet nibh at condimentum. </td> </tr> <tr> <td class="bullet"> • </td> <td> Cras consequat sit amet nibh at condimentum. </td> </tr> <tr> <td class="bullet"> • </td> <td> Cras consequat sit amet nibh at condimentum. </td> </tr> </table> </p></div> </div> </div> <div class="box_base"> <img src="" style="text-align:left;width:400px"> </div> <div class="refname">FIRSTNAME LASTNAME <div>« Quote blablabla »</div> </div> </div> </div> </div>


Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
Thème portrait avec modules
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Portrait chinois
» Gros Mek avec CFK et Krameur
» Avec ce projet, Alexis pourra donner 100,000 emplois permanents aux Haitiens
» Une Danse avec l'Ange Démoniaque, Nyx Hela
» perdu avec sa veste [PUBLIC]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Aeva's labs :: ★ Les codes libres d'utilisation. :: Fiches de présentation.-
Sauter vers: