Код:
<center><div class="dlust1">
<img src="http://i.imgur.com/kj3mDPe.png">
<div class="dlust2"><table height="86"><tr><td class="dlust3">
She’s the most beautiful thing I have ever seen yet, I can only look and long for her.
</td></tr></table></div><div class=" dlust4">❝</div><div class="dlust5">❞</div></div>
<table width="500px" cellspacing="0"><tr> <td class="ltab1"></td><td class="ltab2"></td> <td class="ltab3"></td><td class="ltab4"></td> <td class="ltab5"></td></tr></table>
<div class="dlust6"> first m. last
<div class="dlust7">AGE • GENDER • ORIENTATION</div></div>
<table width="500px" cellspacing="0" style="margin-top: 15px;"><tr> <td class="ltab5"></td><td class="ltab4"></td> <td class="ltab3"></td><td class="ltab2"></td> <td class="ltab1"></td></tr></table>
<div style="width: 460px; height: 250px; padding: 20px; background-color: #ffffff;"><div class="tabs">
<div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1" style="margin-left: 53px;">GENERAL INFO</label><div class="content">
<div class="dlust8"><div class="dlust9">THE APPEARANCE</div><div class="dlust14">
Donec consequat ligula quis suscipit cursus. Curabitur hendrerit porttitor eros eu malesuada. Duis varius ante quis odio pharetra, id hendrerit sem porttitor. Integer et scelerisque sem. Quisque a sagittis est. Nulla quis vehicula leo, ultrices tincidunt dui. Donec vitae scelerisque justo. Nulla ultrices ut massa non elementum.<p>
Praesent consectetur nunc dui, ut lacinia libero sollicitudin a. Aenean id est ut eros fermentum sagittis. Aenean imperdiet sapien at rhoncus aliquet. In adipiscing, nisl vel congue aliquam, enim enim congue nisl, a posuere nisl nulla non odio. Proin at lectus vel leo tempor pharetra. Nam eleifend dolor felis, ut suscipit metus eleifend ut. Ut tristique orci ac augue pretium, vitae euismod ante bibendum.
</div></div><div class="dlust10">
series name
<br>fc first last name
<br>roleplayed by oocname
</div><div class="dlust11">BASIC DETAILS</div>
<div class="dlust12">NICKNAME
<div class="dlust7">USERGROUP • OCCUPATION</div>
<img src="http://i.imgur.com/TLT4FK0.jpg" class="dlust13"></div>
</div></div>
<div class="tab"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2" style="margin-left: 25px;">THE PERSONALITY</label><div class="content">
<div class="dlust15"><div class="dlust9" style="background-color: #C7B424;">DETAILED PERSONALITY</div> <div class="dlust14">
Donec consequat ligula quis suscipit cursus. Curabitur hendrerit porttitor eros eu malesuada. Duis varius ante quis odio pharetra, id hendrerit sem porttitor. Integer et scelerisque sem. Quisque a sagittis est. Nulla quis vehicula leo, ultrices tincidunt dui. Donec vitae scelerisque justo. Nulla ultrices ut massa non elementum.<p>
Praesent consectetur nunc dui, ut lacinia libero sollicitudin a. Aenean id est ut eros fermentum sagittis. Aenean imperdiet sapien at rhoncus aliquet. In adipiscing, nisl vel congue aliquam, enim enim congue nisl, a posuere nisl nulla non odio. Proin at lectus vel leo tempor pharetra. Nam eleifend dolor felis, ut suscipit metus eleifend ut. Ut tristique orci ac augue pretium, vitae euismod ante bibendum.
</div></div>
<div class="det1">THINGS I LIKE</div>
<div class="det2">LIST A LIKE HERE</div>
<div class="det3">LIST A LIKE HERE</div>
<div class="det4">LIST A LIKE HERE</div>
<div class="det5">LIST A LIKE HERE</div>
<div class="det6">LIST A LIKE HERE</div>
<div class="det7">THINGS I DISLIKE</div>
<div class="det8">LIST A DISLIKE HERE</div>
<div class="det9">LIST A DISLIKE HERE</div>
<div class="det10">LIST A DISLIKE HERE</div>
<div class="det11">LIST A DISLIKE HERE</div>
<div class="det12">LIST A DISLIKE HERE</div>
<div class="det13">THINGS I FEAR</div>
<div class="det14">LIST A FEAR HERE</div>
</div></div>
<div class="tab"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3" style="margin-left: 25px;">THE HISTORY</label><div class="content">
<div class="dlust8"><div class="dlust9">THE BACKGROUND</div><div class="dlust14">
Donec consequat ligula quis suscipit cursus. Curabitur hendrerit porttitor eros eu malesuada. Duis varius ante quis odio pharetra, id hendrerit sem porttitor. Integer et scelerisque sem. Quisque a sagittis est. Nulla quis vehicula leo, ultrices tincidunt dui. Donec vitae scelerisque justo. Nulla ultrices ut massa non elementum.<p>
Praesent consectetur nunc dui, ut lacinia libero sollicitudin a. Aenean id est ut eros fermentum sagittis. Aenean imperdiet sapien at rhoncus aliquet. In adipiscing, nisl vel congue aliquam, enim enim congue nisl, a posuere nisl nulla non odio. Proin at lectus vel leo tempor pharetra. Nam eleifend dolor felis, ut suscipit metus eleifend ut. Ut tristique orci ac augue pretium, vitae euismod ante bibendum.
</div></div><div class="dlust17"><div class="dlust9" style="background-color: #C7B424;">EXTRA INFORMATION</div> <div class="dlust16">
Donec consequat ligula quis suscipit cursus. Curabitur hendrerit porttitor eros eu malesuada. Duis varius ante quis odio pharetra, id hendrerit sem porttitor. Integer et scelerisque sem. Quisque a sagittis est. Nulla quis vehicula leo, ultrices tincidunt dui. Donec vitae scelerisque justo. Nulla ultrices ut massa non elementum.<p>
Praesent consectetur nunc dui, ut lacinia libero sollicitudin a. Aenean id est ut eros fermentum sagittis. Aenean imperdiet sapien at rhoncus aliquet. In adipiscing, nisl vel congue aliquam, enim enim congue nisl, a posuere nisl nulla non odio.
</div></div></div></div></div></div>
<div style="font-family: calibri; text-align: center; font-size: 08px; text-transform: uppercase; letter-spacing: 1px;">TEMPLATE BY DALI OF CANDYLAND COUTURE</div>
<div style="height: 15px;"></div>
<style>
.ltab1 { background-color: #D1CCA6; height: 5px; } .ltab2 { background-color: #498B8C; height: 5px; } .ltab3 { background-color: #13313B; height: 5px; } .ltab4 { background-color: #5E5B52; height: 5px; } .ltab5 { background-color: #C7B424; height: 5px; } .dlust14::-webkit-scrollbar {width: 05px;} .dlust14::-webkit-scrollbar-track {background-color: #ffffff;} .dlust14::-webkit-scrollbar-thumb {background-color: #ebebeb;} .dlust16::-webkit-scrollbar {width: 05px;} .dlust16::-webkit-scrollbar-track {background-color: #ffffff;} .dlust16::-webkit-scrollbar-thumb {background-color: #ebebeb;} .dlust1 { margin-top: 10px; width: 400px; height: 126px; position: relative; border: solid 50px #ffffff; } .dlust2 { position: absolute; top: 10px; left: 10px; height: 86px; width: 86px; padding: 10px; background-color: #ffffff; opacity: 0.7; } .dlust3 { font-family: calibri; font-size: 08px; text-transform: uppercase; text-align: justify; letter-spacing: 1px; color: #454545; line-height: 09px; } .dlust4 { position: absolute; top: 15px; left: 15px; font-family: calibri; font-size: 12px; text-transform: uppercase; text-align: justify; letter-spacing: 1px; color: #498B8C; line-height: 09px; opacity: 0.5; } .dlust5 { position: absolute; bottom: 15px; left: 101px; font-family: calibri; font-size: 12px; text-transform: uppercase; text-align: justify; letter-spacing: 1px; color: #498B8C; line-height: 09px; opacity: 0.5; } .dlust6 { margin-top: 15px; width: 500px; padding: 20px 0px; background-color: #ffffff; text-align: center; font-family: calibri; text-transform: uppercase; color: #cccccc; font-size: 23px; line-height: 22px; } .dlust7 { font-size: 08px; letter-spacing: 1px; line-height: 09px; color: #d7d7d7; } .dlust8 { position: absolute; top: 0px; left: 0px; height: 205px; width: 230px; padding: 10px; overflow: hidden; background-color: #fafafa; color: #9b9b9b; font-family: calibri; font-size: 10px; line-height: 10px; text-align: justify; border-right: 5px solid #ffffff; } .dlust9 { background-color: #498B8C; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #fafafa; margin-bottom: 05px; } .dlust10 { position: absolute; bottom: 5px; right: 5px; font-family: calibri; font-size: 10px; letter-spacing: 1px; text-align: right; width: 460px; color: #d7d7d7; text-transform: uppercase; line-height: 10px; } .dlust11 { position: absolute; top: 10px; right: 10px; background-color: #5E5B52; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #fafafa; margin-bottom: 05px; width: 180px; } .dlust12 { position: absolute; top: 40px; right: 10px; width: 180px; padding: 2px; text-align: center; font-family: calibri; text-transform: uppercase; color: #d7d7d7; font-size: 23px; line-height: 22px; } .dlust13 { margin-top: 10px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; overflow: hidden; border: 5px solid #ffffff; height: 80px; width: 80px; } .dlust14 { background-color: #ffffff; padding: 5px; border-top: 5px solid #fafafa; height: 175px; overflow: auto; } .dlust15 { background-color: #fafafa; border-left: 5px solid #ffffff; position: absolute; top: 0px; right: 0px; height: 205px; width: 230px; padding: 10px; overflow: hidden; background-color: #fafafa; color: #9b9b9b; font-family: calibri; font-size: 10px; line-height: 10px; text-align: justify; } .dlust16 { background-color: #ffffff; padding: 5px; border-top: 5px solid #fafafa; height: 175px; overflow: auto; } .dlust17 { background-color: #fafafa; position: absolute; top: 0px; right: 0px; height: 205px; width: 185px; padding: 10px; overflow: hidden; background-color: #fafafa; color: #9b9b9b; font-family: calibri; font-size: 10px; line-height: 10px; text-align: justify; } .det1 { position: absolute; top: 10px; left: 10px; background-color: #13313B; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #fafafa; margin-bottom: 05px; width: 180px; } .det2 { position: absolute; top: 25px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .det3 { position: absolute; top: 40px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .det4 { position: absolute; top: 55px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .det5 { position: absolute; top: 70px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .det6 { position: absolute; top: 85px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .det7 { position: absolute; top: 100px; left: 10px; background-color: #498B8C; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #fafafa; margin-bottom: 05px; width: 180px; } .det8 { position: absolute; top: 115px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .det9 { position: absolute; top: 130px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .det10 { position: absolute; top: 145px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .det11 { position: absolute; top: 160px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .det12 { position: absolute; top: 175px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .det13 { position: absolute; top: 190px; left: 10px; background-color: #D1CCA6; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #fafafa; margin-bottom: 05px; width: 180px; } .det14 { position: absolute; top: 205px; left: 10px; background-color: #ffffff; padding: 2px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; line-height: 08px; text-align: center; color: #acacac; margin-bottom: 05px; width: 180px; } .tabs { position: relative; width: 460; height: 250; } .tab { float: left; } .tab label { display: block; background: #fafafa; padding: 02px 18px; margin-left: -1px; position: relative; left: 1px; font-family: calibri; font-size: 08px; text-transform: uppercase; letter-spacing: 1px; color: #cccccc; line-height: 08px; } .tab [type=radio] { display: none; } .content { position: absolute; top: 28px; bottom: 0px; left: 0px; right: 0px; background: #fafafa; padding: 20px; height: 185px; } [type=radio]:checked ~ label { background: #fafafa; color: #acacac; border-bottom: 1px solid white; z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 1; }
</style>
</center>