Thème portrait avec modules

<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>