CODE: FAR AS I COULD GET (CHARACTER BIO)

[onetouchdonnie]

❝ in the celestial vaults, i drew bedraggled breaths ❞

my first multi-tabbed code in terms of character bio! this is something i'm fairly confident in because look at this. i'm so proud of it. just. good luck if you want to change certain things. i'll in the future i'll probably add in the color codes that are used so you can replace it but that's in the future. for now just enjoy the way it looks? EDITED JULY 27: WHOA I DID NOT NOTICE HOW SOMETHING WENT TERRIBLY WRONG DURING MY CODING. I fixed that mistake and sorry for that, everyone. Hopefully you guys can use this without problems right off the bat!

CHARACTER NAME HOME HISTORY PERSONALITY ABILITIES

" QUOTE OF SOME SORT HERE. " NAME. CHARACTER NAME. NICKNAME. NICKNAME/S. AGE AND DOB. 00 (MONTH 00, 0000) OCCUPATION. OCCUPATION/S. RANK AND SUIT. X OF X. ORIENTATION. ORIENTATION. DATING STATUS. SINGLE/TAKEN/ETC. HEIGHT. 0'0" BUILD. PHYSICAL BUILD. HAIR. HAIR COLOR, STYLE. EYES. EYE COLOR, QUALITY. PB. PB NAME. PLAYER. PLAYER NAME. JOURNAL. ~JOURNAL NAME. TIME ZONE. TIMEZONE.

CHARACTER NAME HOME HISTORY PERSONALITY ABILITIES

" QUOTE OF SOME SORT HERE. " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas varius dui diam, vitae rhoncus ipsum vestibulum vitae. Praesent nisi sem, tincidunt vel risus ac, dapibus scelerisque nisi. Nunc ultrices blandit enim, sed varius ligula tincidunt eget. Mauris leo erat, mollis ut ex a, semper ullamcorper odio. Donec consequat, risus nec pellentesque aliquet, massa orci tincidunt dui, non pulvinar est nulla et enim. Suspendisse scelerisque quam id finibus sodales. Fusce leo massa, convallis ut eros vel, congue euismod quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dapibus bibendum blandit. Duis scelerisque, magna eget vulputate dapibus, lorem velit mattis metus, sit amet porttitor urna tellus sed ante. Vestibulum euismod odio vitae pellentesque faucibus. Maecenas id quam vitae est convallis varius a eget nisl. Vivamus id molestie lacus, eget blandit mauris. Nulla elementum lorem eget erat commodo semper. Sed id nibh urna. Nullam bibendum ligula in elit fermentum placerat. Donec fermentum accumsan eros, id sagittis tellus mattis eu. Maecenas dictum fringilla magna vitae commodo. Phasellus lectus dolor, consectetur a lacinia nec, imperdiet sit amet risus. Mauris pretium semper libero, sit amet mattis nisl aliquam a. Duis interdum, felis ac finibus laoreet, justo velit mollis lacus, in pharetra mi sapien at nisl. Nullam condimentum imperdiet ipsum, at placerat nulla varius at. Praesent egestas, sem eu molestie interdum, orci ex posuere tortor, nec pretium turpis nunc a lectus. Donec pulvinar nunc at scelerisque iaculis. Donec accumsan nisi eu diam aliquam aliquam. Fusce interdum libero cursus arcu blandit aliquet. Praesent semper mauris eget convallis dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Ut suscipit erat augue, vitae scelerisque est vestibulum a. Quisque quis felis porttitor, scelerisque lorem quis, molestie ante. Vestibulum semper diam orci, et pulvinar elit commodo dignissim. Suspendisse laoreet eros dictum, viverra lorem sed, tristique sem. Quisque at metus porttitor, faucibus odio luctus, accumsan sapien. Donec semper tempor elit vel mattis. Integer vel lorem ante. Cras euismod tempus nibh, et lacinia augue molestie aliquam. Etiam sed neque erat. Aenean in semper orci. Curabitur et ex eget metus luctus bibendum. Fusce ac ultrices lacus. Donec ullamcorper ligula vel arcu fermentum, et ultricies mi interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu mauris magna. Nullam scelerisque rhoncus facilisis. Nulla eget pharetra lacus, et posuere elit. Sed facilisis ultrices lacus aliquet fringilla.

CHARACTER NAME HOME HISTORY PERSONALITY ABILITIES

" QUOTE OF SOME SORT HERE. " MBTI ( XXXX; THE MBTI TITLE ) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ENNEAGRAM ( THE TITLE ) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas varius dui diam, vitae rhoncus ipsum vestibulum vitae. Praesent nisi sem, tincidunt vel risus ac, dapibus scelerisque nisi. Nunc ultrices blandit enim, sed varius ligula tincidunt eget. Mauris leo erat, mollis ut ex a, semper ullamcorper odio. Donec consequat, risus nec pellentesque aliquet, massa orci tincidunt dui, non pulvinar est nulla et enim. Suspendisse scelerisque quam id finibus sodales. Fusce leo massa, convallis ut eros vel, congue euismod quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dapibus bibendum blandit. Duis scelerisque, magna eget vulputate dapibus, lorem velit mattis metus, sit amet porttitor urna tellus sed ante. Vestibulum euismod odio vitae pellentesque faucibus. Maecenas id quam vitae est convallis varius a eget nisl. Vivamus id molestie lacus, eget blandit mauris. Nulla elementum lorem eget erat commodo semper. Sed id nibh urna. Nullam bibendum ligula in elit fermentum placerat. Donec fermentum accumsan eros, id sagittis tellus mattis eu. Maecenas dictum fringilla magna vitae commodo. Phasellus lectus dolor, consectetur a lacinia nec, imperdiet sit amet risus. Mauris pretium semper libero, sit amet mattis nisl aliquam a. Duis interdum, felis ac finibus laoreet, justo velit mollis lacus, in pharetra mi sapien at nisl. Nullam condimentum imperdiet ipsum, at placerat nulla varius at. Praesent egestas, sem eu molestie interdum, orci ex posuere tortor, nec pretium turpis nunc a lectus. Donec pulvinar nunc at scelerisque iaculis. Donec accumsan nisi eu diam aliquam aliquam. Fusce interdum libero cursus arcu blandit aliquet. Praesent semper mauris eget convallis dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Ut suscipit erat augue, vitae scelerisque est vestibulum a. Quisque quis felis porttitor, scelerisque lorem quis, molestie ante. Vestibulum semper diam orci, et pulvinar elit commodo dignissim. Suspendisse laoreet eros dictum, viverra lorem sed, tristique sem. Quisque at metus porttitor, faucibus odio luctus, accumsan sapien. Donec semper tempor elit vel mattis. Integer vel lorem ante. Cras euismod tempus nibh, et lacinia augue molestie aliquam. Etiam sed neque erat. Aenean in semper orci. Curabitur et ex eget metus luctus bibendum. Fusce ac ultrices lacus. Donec ullamcorper ligula vel arcu fermentum, et ultricies mi interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu mauris magna. Nullam scelerisque rhoncus facilisis. Nulla eget pharetra lacus, et posuere elit. Sed facilisis ultrices lacus aliquet fringilla.

CHARACTER NAME HOME HISTORY PERSONALITY ABILITIES

" QUOTE OF SOME SORT HERE. " ABILITY ( QUOTE OF SOME SORT ) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ABILITY ( QUOTE OF SOME SORT ) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ABILITY ( QUOTE OF SOME SORT ) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ABILITY ( QUOTE OF SOME SORT ) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ABILITY ( QUOTE OF SOME SORT ) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

coding credit: proverbially

GET THE CODE HERE:

<raw-code><center><div style="overflow: hidden; height: 510px;"> <!-- START THE CODE --> <!-- START OF THE HOME MENU --> <a name="HOME"></a> <table style="width: 800px; height: 500px; background-color: #010101; padding: 2px; border: 5px solid #e6e6e6; box-shadow: 1px 1px 10px #030202;"><tbody><tr style="height: 500px;"> <td style="width: 230px; background-image: url('BACKGROUNDIMG'); background-repeat: no-repeat;"><br> <center><span style="font-family: century gothic; font-size: 20px; font-weight: bold; color: #dbdbdb; letter-spacing: 3px;">CHARACTER NAME</span><br><br> <img src="CHARACTERIMGLINK" style="width: 150px; height: 150px; border: solid #e6e6e6 5px;"> <table style="width: 100px;"><tbody> <tr> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#HOME">HOME</a></td> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#HISTORY">HISTORY</a></div></td> </tr> <tr style="height: 10px;"></tr> <tr> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#PERSONALITY">PERSONALITY</a></td> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#ABILITIES">ABILITIES</a></div></td> </tr> </tbody></table></center> </td> <td style="width: 570px; background:-webkit-linear-gradient(top, transparent 5%, #1c2126); background:-moz-linear-gradient(top, transparent 5%, #1c2126); border: 3px solid #e6e6e6;"> <table style="width: 300px;"><tbody> <div style="font-family: century gothic; color: #f7f7f7; font-size: 15px; font-weight: bold; text-align: center; text-transform: uppercase; letter-spacing: 5px;"><br>" QUOTE OF SOME SORT HERE. "</div> <center><div style="width: 200px; border-bottom: solid 1px #e8e8e8; padding-top: 5px; padding-bottom: 5px;"></div></center> <tr style="height: 20px;"><td> </td><td> </td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">NAME.</td><td style="font-family: century gothic; color: #f7f7f7;">CHARACTER NAME.</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">NICKNAME.</td><td style="font-family: century gothic; color: #f7f7f7;">NICKNAME/S.</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">AGE AND DOB.</td><td style="font-family: century gothic; color: #f7f7f7;">00 (MONTH 00, 0000)</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">OCCUPATION.</td><td style="font-family: century gothic; color: #f7f7f7;">OCCUPATION/S.</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">RANK AND SUIT.</td><td style="font-family: century gothic; color: #f7f7f7;">X OF X.</td></tr> <tr style="height: 20px;"><td> </td><td> </td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">ORIENTATION.</td><td style="font-family: century gothic; color: #f7f7f7;">ORIENTATION.</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">DATING STATUS.</td><td style="font-family: century gothic; color: #f7f7f7;">SINGLE/TAKEN/ETC.</td></tr> <tr style="height: 20px;"><td> </td><td> </td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">HEIGHT.</td><td style="font-family: century gothic; color: #f7f7f7;">0'0"</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">BUILD.</td><td style="font-family: century gothic; color: #f7f7f7;">PHYSICAL BUILD.</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">HAIR.</td><td style="font-family: century gothic; color: #f7f7f7;">HAIR COLOR, STYLE.</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">EYES.</td><td style="font-family: century gothic; color: #f7f7f7;">EYE COLOR, QUALITY.</td></tr> <tr style="height: 20px;"><td> </td><td> </td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">PB.</td><td style="font-family: century gothic; color: #f7f7f7;">PB NAME.</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">PLAYER.</td><td style="font-family: century gothic; color: #f7f7f7;">PLAYER NAME.</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">JOURNAL.</td><td style="font-family: century gothic; color: #f7f7f7;">~JOURNAL NAME.</td></tr> <tr><td style="opacity: .5; font-family: century gothic; color: #e6e6e6;">TIME ZONE.</td><td style="font-family: century gothic; color: #f7f7f7;">TIMEZONE.</td></tr> </tbody></table></div> </td> </tr></tbody></table> <!-- END OF THE HOME MENU --> <!-- START OF THE HISTORY MENU --> <a name="HISTORY"></a> <table style="width: 800px; height: 500px; background-color: #010101; padding: 2px; border: 5px solid #e6e6e6; box-shadow: 1px 1px 10px #030202;"><tbody><tr style="height: 500px;"> <td style="width: 230px; background-image: url('BACKGROUNDIMG'); background-repeat: no-repeat;"><br> <center><span style="font-family: century gothic; font-size: 20px; font-weight: bold; color: #dbdbdb; letter-spacing: 3px;">CHARACTER NAME</span><br><br> <img src="CHARACTERIMGLINK" style="width: 150px; height: 150px; border: 5px solid #e6e6e6;"> <table style="width: 100px;"><tbody> <tr> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#HOME">HOME</a></td> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#HISTORY">HISTORY</a></div></td> </tr> <tr style="height: 10px;"></tr> <tr> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#PERSONALITY">PERSONALITY</a></td> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#ABILITIES">ABILITIES</a></div></td> </tr> </tbody></table></center> </td> <td style="width: 570px; background:-webkit-linear-gradient(top, transparent 5%, #1c2126); background:-moz-linear-gradient(top, transparent 5%, #1c2126); border: 3px solid #e6e6e6;"><div style="font-family: century gothic; color: #f7f7f7; font-size: 15px; font-weight: bold; text-align: center; text-transform: uppercase; letter-spacing: 5px;"><br>" QUOTE OF SOME SORT HERE. "</div> <center><div style="overflow-y: scroll; height: 400px; padding: 10px;"> <div style="font-family: century gothic; color: #f7f7f7; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br><br> Maecenas varius dui diam, vitae rhoncus ipsum vestibulum vitae. Praesent nisi sem, tincidunt vel risus ac, dapibus scelerisque nisi. Nunc ultrices blandit enim, sed varius ligula tincidunt eget. Mauris leo erat, mollis ut ex a, semper ullamcorper odio. Donec consequat, risus nec pellentesque aliquet, massa orci tincidunt dui, non pulvinar est nulla et enim. Suspendisse scelerisque quam id finibus sodales. Fusce leo massa, convallis ut eros vel, congue euismod quam.<br><br> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dapibus bibendum blandit. Duis scelerisque, magna eget vulputate dapibus, lorem velit mattis metus, sit amet porttitor urna tellus sed ante. Vestibulum euismod odio vitae pellentesque faucibus. Maecenas id quam vitae est convallis varius a eget nisl. Vivamus id molestie lacus, eget blandit mauris. Nulla elementum lorem eget erat commodo semper.<br><br> Sed id nibh urna. Nullam bibendum ligula in elit fermentum placerat. Donec fermentum accumsan eros, id sagittis tellus mattis eu. Maecenas dictum fringilla magna vitae commodo. Phasellus lectus dolor, consectetur a lacinia nec, imperdiet sit amet risus. Mauris pretium semper libero, sit amet mattis nisl aliquam a. Duis interdum, felis ac finibus laoreet, justo velit mollis lacus, in pharetra mi sapien at nisl. Nullam condimentum imperdiet ipsum, at placerat nulla varius at. Praesent egestas, sem eu molestie interdum, orci ex posuere tortor, nec pretium turpis nunc a lectus. Donec pulvinar nunc at scelerisque iaculis.<br><br> Donec accumsan nisi eu diam aliquam aliquam. Fusce interdum libero cursus arcu blandit aliquet. Praesent semper mauris eget convallis dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Ut suscipit erat augue, vitae scelerisque est vestibulum a. Quisque quis felis porttitor, scelerisque lorem quis, molestie ante.<br><br> Vestibulum semper diam orci, et pulvinar elit commodo dignissim. Suspendisse laoreet eros dictum, viverra lorem sed, tristique sem. Quisque at metus porttitor, faucibus odio luctus, accumsan sapien. Donec semper tempor elit vel mattis. Integer vel lorem ante. Cras euismod tempus nibh, et lacinia augue molestie aliquam. Etiam sed neque erat. Aenean in semper orci. Curabitur et ex eget metus luctus bibendum. Fusce ac ultrices lacus. Donec ullamcorper ligula vel arcu fermentum, et ultricies mi interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu mauris magna. Nullam scelerisque rhoncus facilisis. Nulla eget pharetra lacus, et posuere elit. Sed facilisis ultrices lacus aliquet fringilla.<br> </div></div></center> </td> </tr></tbody></table> <!-- END OF THE HISTORY MENU --> <!-- START OF THE PERSONALITY MENU --> <a name="PERSONALITY"></a> <table style="width: 800px; height: 500px; background-color: #010101; padding: 2px; border: 5px solid #e6e6e6; box-shadow: 1px 1px 10px #030202;"><tbody><tr style="height: 500px;"> <td style="width: 230px; background-image: url('BACKGROUNDIMG'); background-repeat: no-repeat;"><br> <center><span style="font-family: century gothic; font-size: 20px; font-weight: bold; color: #dbdbdb; letter-spacing: 3px;">CHARACTER NAME</span><br><br> <img src="CHARACTERIMGLINK" style="width: 150px; height: 150px; border: 5px solid #e6e6e6;"> <table style="width: 100px;"><tbody> <tr> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#HOME">HOME</a></td> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#HISTORY">HISTORY</a></div></td> </tr> <tr style="height: 10px;"></tr> <tr> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#PERSONALITY">PERSONALITY</a></td> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#ABILITIES">ABILITIES</a></div></td> </tr> </tbody></table></center> </td> <td style="width: 570px; background:-webkit-linear-gradient(top, transparent 5%, #1c2126); background:-moz-linear-gradient(top, transparent 5%, #1c2126); border: 3px solid #e6e6e6;"><div style="font-family: century gothic; color: #f7f7f7; font-size: 15px; font-weight: bold; text-align: center; text-transform: uppercase; letter-spacing: 5px;"><br>" QUOTE OF SOME SORT HERE. "</div> <center><div style="overflow-y: scroll; height: 400px; padding: 10px;"> <div style="font-family: century gothic; color: #f7f7f7; text-align: justify;"> <center><div style="width: 450px; font-size: 10px; color: #f7f7f7; text-align: justify;"><b>MBTI</b> ( <a href="https://www.16personalities.com/personality-types" style="text-decoration: none; color: #1e3b5f;">XXXX; THE MBTI TITLE</a> )<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br><br> <b>ENNEAGRAM</b> ( <a href="https://www.enneagramworldwide.com/tour-the-nine-types/" style="text-decoration: none; color: #1e3b5f;">THE TITLE</a> )<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div></center><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br><br> Maecenas varius dui diam, vitae rhoncus ipsum vestibulum vitae. Praesent nisi sem, tincidunt vel risus ac, dapibus scelerisque nisi. Nunc ultrices blandit enim, sed varius ligula tincidunt eget. Mauris leo erat, mollis ut ex a, semper ullamcorper odio. Donec consequat, risus nec pellentesque aliquet, massa orci tincidunt dui, non pulvinar est nulla et enim. Suspendisse scelerisque quam id finibus sodales. Fusce leo massa, convallis ut eros vel, congue euismod quam.<br><br> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dapibus bibendum blandit. Duis scelerisque, magna eget vulputate dapibus, lorem velit mattis metus, sit amet porttitor urna tellus sed ante. Vestibulum euismod odio vitae pellentesque faucibus. Maecenas id quam vitae est convallis varius a eget nisl. Vivamus id molestie lacus, eget blandit mauris. Nulla elementum lorem eget erat commodo semper.<br><br> Sed id nibh urna. Nullam bibendum ligula in elit fermentum placerat. Donec fermentum accumsan eros, id sagittis tellus mattis eu. Maecenas dictum fringilla magna vitae commodo. Phasellus lectus dolor, consectetur a lacinia nec, imperdiet sit amet risus. Mauris pretium semper libero, sit amet mattis nisl aliquam a. Duis interdum, felis ac finibus laoreet, justo velit mollis lacus, in pharetra mi sapien at nisl. Nullam condimentum imperdiet ipsum, at placerat nulla varius at. Praesent egestas, sem eu molestie interdum, orci ex posuere tortor, nec pretium turpis nunc a lectus. Donec pulvinar nunc at scelerisque iaculis.<br><br> Donec accumsan nisi eu diam aliquam aliquam. Fusce interdum libero cursus arcu blandit aliquet. Praesent semper mauris eget convallis dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Ut suscipit erat augue, vitae scelerisque est vestibulum a. Quisque quis felis porttitor, scelerisque lorem quis, molestie ante.<br><br> Vestibulum semper diam orci, et pulvinar elit commodo dignissim. Suspendisse laoreet eros dictum, viverra lorem sed, tristique sem. Quisque at metus porttitor, faucibus odio luctus, accumsan sapien. Donec semper tempor elit vel mattis. Integer vel lorem ante. Cras euismod tempus nibh, et lacinia augue molestie aliquam. Etiam sed neque erat. Aenean in semper orci. Curabitur et ex eget metus luctus bibendum. Fusce ac ultrices lacus. Donec ullamcorper ligula vel arcu fermentum, et ultricies mi interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu mauris magna. Nullam scelerisque rhoncus facilisis. Nulla eget pharetra lacus, et posuere elit. Sed facilisis ultrices lacus aliquet fringilla.<br> </div></div></center> </td> </tr></tbody></table> <!-- END OF THE PERSONALITY MENU --> <!-- START OF THE ABILITIES MENU --> <a name="ABILITIES"></a> <table style="width: 800px; height: 500px; background-color: #010101; padding: 2px; border: 5px solid #e6e6e6; box-shadow: 1px 1px 10px #030202;"><tbody><tr style="height: 500px;"> <td style="width: 230px; background-image: url('BACKGROUNDIMG'); background-repeat: no-repeat;"><br> <center><span style="font-family: century gothic; font-size: 20px; font-weight: bold; color: #dbdbdb; letter-spacing: 3px;">CHARACTER NAME</span><br><br> <img src="CHARACTERIMGLINK" style="width: 150px; height: 150px; border: 5px solid #e6e6e6;"> <table style="width: 100px;"><tbody> <tr> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#HOME">HOME</a></td> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#HISTORY">HISTORY</a></div></td> </tr> <tr style="height: 10px;"></tr> <tr> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#PERSONALITY">PERSONALITY</a></td> <td><a style="font-family: century gothic; font-size: 10px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; text-align: center; display: inline-block; background-color: #12181e; width: 110px; height: 35px; color:#fff; line-height: 35px; border: 3px solid #e6e6e6;" href="#ABILITIES">ABILITIES</a></div></td> </tr> </tbody></table></center> </td> <td style="width: 570px; background:-webkit-linear-gradient(top, transparent 5%, #1c2126); background:-moz-linear-gradient(top, transparent 5%, #1c2126); border: 3px solid #e6e6e6;"><div style="font-family: century gothic; color: #f7f7f7; font-size: 15px; font-weight: bold; text-align: center; text-transform: uppercase; letter-spacing: 5px;"><br>" QUOTE OF SOME SORT HERE. "</div> <center><div style="overflow-y: scroll; height: 400px; padding: 10px;"> <div style="font-family: century gothic; color: #f7f7f7; text-align: justify;"> <b><span style="letter-spacing: 2px;">ABILITY</span></b> ( <span style="color: #1e3b5f; letter-spacing: 2px;">QUOTE OF SOME SORT</span> )<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br><br> <b><span style="letter-spacing: 2px;">ABILITY</span></b> ( <span style="color: #1e3b5f; letter-spacing: 2px;">QUOTE OF SOME SORT</span> )<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br><br> <b><span style="letter-spacing: 2px;">ABILITY</span></b> ( <span style="color: #1e3b5f; letter-spacing: 2px;">QUOTE OF SOME SORT</span> )<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br><br> <b><span style="letter-spacing: 2px;">ABILITY</span></b> ( <span style="color: #1e3b5f; letter-spacing: 2px;">QUOTE OF SOME SORT</span> )<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br><br> <b><span style="letter-spacing: 2px;">ABILITY</span></b> ( <span style="color: #1e3b5f; letter-spacing: 2px;">QUOTE OF SOME SORT</span> )<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor turpis ligula, quis aliquet quam elementum eu. Vestibulum tincidunt ligula mi, quis volutpat neque faucibus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br><br> </div></div></center> </td> </tr></tbody></table> <!-- END OF THE ABILITIES MENU --> <!-- END THE CODE --> </div></center></raw-code> <div align="right"><small><b><font face="century gothic">coding credit: <user name="proverbially"></font></b></small></div>

Please read my rules HERE. Requests are OPEN. As my first ever multi-tabbed code that's supposed to be a character bio, I'll be leaving this open for everyone. If you want to see more of my codes I have here in the community, you can easily add yourself HERE. Please do not remove my credit!

UP NEXT: OVERWATCH (50)

Comments

[isleofapples]

This is really lovely. :) Well done.

[onetouchdonnie]

Thank you! I hope you and the others find use of it in the future. <3

[creper]

Hello! I'm in the middle of tinkering with the code for my use.

I was wondering if there's any way to add a scroll bar on the home page where the profile information is that shows up on every other tab. Tables within divs are my nightmare, so I was wondering if you could help me out.

[onetouchdonnie]

Hi! Sorry for leaving this comment unanswered to for so long in the comm.

As you know I sent you a reply via PM and, again, if you ever need help in any of my coding in the future please give me a shout! I'll do my best to help you out. o /

[fe_male]

Super neat. Using a slightly altered version of it here! (I needed a couple extra tabs)

[onetouchdonnie]

You did such a great did with the coding here. This is just gorgeous!

[touchstoned]

ty! it took a long time, but honestly i'm super picky abt shit but your coding was instantly fantastic and fully worth the 1.5 week banging-my-head-against-a-wall in terms of attempting to adapt it

[gingerbull]

Hi! Using it here, but how do I get it to sit more in the center?