derivative form

[border=0;

/*theme colors*/
--c1: #f72585;
--c2: #b5179e;
--c3: #7209b7;
--c4: #560bad;
--c5: #480ca8;
--c6: #380ca3;
--c7: #3f37c9;
--c8: #4361ee;
--c9: #4895ef;
--c10: #4cc9f0;

/*character image*/
--img1: url('https://i.postimg.cc/8zJJSMGW/danny.png');

/*aesthetic image*/
--img2: url('https://i.postimg.cc/BnrRbBG0/air-conditioner.png');

background-color: black;
position: relative;
left: 20%;
width: 700px;
height: 600px;
overflow: hidden;
line-height: 0px;
]

[comment]--- TEXT BOX 1 BEGINS---[/comment]
[border=0;
position: absolute;
width: 500px;
height: 200px;
top: 20px;
left: 20px;
background-color: #080808;
overflow: hidden;
]
[comment]--- TITLE 1 ---[/comment]
[border=0;
position: absolute;
padding: 0px;
left: 10px;
top: 30px;
width: 200px;
height: 15px;
color: #e2e2e2;
font-family: Arial, serif;
text-align: left;
font-size: 20px;
border-bottom: 5px solid #e2e2e2;
][b]PERSONALITY:[/b]
[/border]
[border=0;
position: absolute;
height: 140px;
width: 465px;
left: 10px;
top: 60px;
box-sizing: border-box;
overflow: hidden;
background-color: var(--c9);
]
[border=0;
height: 110px;
width: 200%;
overflow-y: scroll;
]
[border=0;
height: 200px;
width: 50%;
box-sizing: border-box;
color: #ffffff;
font-size: 11px;
text-align: justify;
line-height: 16px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
]Suspendisse molestie libero in interdum sagittis. Nulla augue sapien, dapibus eget nisi et, malesuada scelerisque enim. Donec erat felis, luctus id sapien in, semper varius ante. Fusce sit amet dolor tincidunt, tincidunt diam vel, dignissim lectus. Nullam et elit nunc. Nullam porta tristique leo id laoreet. Aliquam erat volutpat. Phasellus mollis dictum efficitur. Cras vel finibus tellus. Aenean in placerat turpis.

Donec nec nisi sed justo efficitur lobortis sit amet id lacus. Donec elementum bibendum dolor sed rhoncus. Phasellus sit amet neque augue. Nullam ut fringilla elit. Curabitur et tempor turpis, a volutpat ligula. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec volutpat imperdiet lobortis. Nulla rhoncus, ex ut imperdiet ultricies, dolor quam finibus libero, sit amet congue velit lectus non leo. Morbi ullamcorper leo a condimentum ullamcorper. Nunc iaculis id urna vitae scelerisque. Nullam massa dolor, blandit et aliquam at, euismod non orci.

Nulla facilisi. Proin consectetur sapien a quam egestas, eget venenatis dolor gravida. Pellentesque id lectus sem. Nunc ornare finibus vestibulum. Phasellus eget turpis non mi vulputate suscipit. Aenean eros dolor, tincidunt a dui sed, cursus ultricies nibh. Mauris eget fermentum purus. Proin luctus nisi vel accumsan commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi efficitur ligula id metus suscipit, sed cursus urna congue. In mollis turpis ac sollicitudin viverra. In hac habitasse platea dictumst. Vivamus venenatis sodales ante, et molestie nibh molestie ac. Nulla facilisi. Pellentesque laoreet mi sit amet consectetur efficitur.
[/border]
[/border]
[/border]
[/border]
[comment]--- TEXT BOX 1 ENDS ---[/comment]

[comment]--- TEXT BOX 2 BEGINS ---[/comment]
[border=0;
position: absolute;
width: 300px;
height: 300px;
bottom: 20px;
right: 200px;
background-color: #080808;
overflow: hidden;
]
[comment]--- TITLE 2 ---[/comment]
[border=0;
position: absolute;
padding: 0px;
left: 10px;
top: 30px;
width: 100px;
height: 15px;
color: #e2e2e2;
font-family: Arial, serif;
text-align: left;
font-size: 20px;
border-bottom: 5px solid #e2e2e2;
][b]BIO:[/b]
[/border]
[border=0;
position: absolute;
height: 230px;
width: 290px;
left: 15px;
top: 60px;
box-sizing: border-box;
overflow: hidden;
background-color: var(--c2);
]
[border=0;
height: 180px;
width: 200%;
position: absolute;
top: 20px;
left: 0px;
overflow-y: scroll;
]
[border=0;
height: 250px;
width: 50%;
box-sizing: border-box;
color: #ffffff;
font-size: 11px;
text-align: justify;
line-height: 16px;
padding-right: 25px;
]Aliquam erat volutpat. Suspendisse ullamcorper eleifend efficitur. Morbi porttitor est vitae arcu efficitur consequat. Donec quis ex molestie, maximus felis bibendum, iaculis massa. Phasellus a laoreet elit. Mauris sed leo ac sem imperdiet dapibus. Integer finibus pulvinar arcu, at egestas purus pretium sed. Quisque ac nisi tortor. Pellentesque urna mi, iaculis ac congue vel, suscipit nec velit. Nunc eget ex quis ligula fermentum blandit in eu orci. Sed sed egestas massa. Nam aliquam dui nec auctor interdum.

Duis dictum dictum hendrerit. Etiam a venenatis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus elit elit, non suscipit leo laoreet ultrices. Phasellus dictum velit magna. Fusce enim urna, cursus efficitur eleifend sit amet, vestibulum sed diam. Nulla facilisi. Sed et orci id lorem imperdiet euismod. Donec congue ultricies vulputate. Phasellus in diam in turpis sollicitudin elementum. Cras commodo, velit non placerat fermentum, risus nisi eleifend neque, non tincidunt sapien libero at turpis. Cras ut tincidunt ligula, id ultrices purus. Nulla facilisi.

Donec ullamcorper tortor odio, malesuada tempor est mattis sed. Ut sem nisl, efficitur vitae efficitur id, cursus at augue. Vestibulum eget dui neque. Integer nec tellus nisi. Etiam nec rhoncus massa. Ut sit amet feugiat magna. Nulla et elit consequat justo hendrerit laoreet. Etiam eleifend massa a sapien porttitor, id ultrices eros vulputate.

Vivamus consequat fringilla ligula, consectetur sodales tellus dignissim in. Nam tincidunt tellus eget dictum commodo. Morbi sapien mi, iaculis eu turpis non, hendrerit scelerisque velit. Vivamus ultricies ante vel lectus eleifend aliquam. Phasellus volutpat sollicitudin nisi pellentesque efficitur. Mauris pellentesque purus non nunc faucibus, aliquet ultrices enim tincidunt. Quisque sagittis felis sit amet est ornare, et rhoncus est dignissim. Etiam ultrices, tortor eu hendrerit feugiat, purus diam viverra lorem, venenatis tristique enim risus ac lorem. Nunc laoreet efficitur mi sed iaculis. Curabitur laoreet, lacus a gravida interdum, nulla mauris tincidunt dolor, at finibus nunc eros consectetur diam. Ut varius congue tristique. Cras quis nunc leo. Donec vestibulum elementum nibh quis aliquam. Suspendisse in sem eget lectus pulvinar aliquet.
[/border]
[/border]
[/border]

[/border]
[comment]--- TEXT BOX 2 ENDS ---[/comment]

[comment]--- TRIANGULAR SECTION ---[/comment]
[border=0;
position: absolute;
width: 245px;
height: 245px;
left: -90px;
bottom: 60px;
transform: rotate(45deg);
background-color: #202020;
overflow: hidden;
]
[border=0;
position: absolute;
top: -40px;
width: 100%;
height: 100%;
background-image: var(--img2);
background-size: contain;
]
[border=0;
position: absolute;
background-color: gray;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 50%;
]
[/border]
[/border]
[/border]
[border=0;
position: absolute;
width: 100px;
height: 358px;
left: -68px;
bottom: 2px;
background-color: black;
]
[/border]

[comment]--- STRIPE 1 ---[/comment]
[border=0;
position: absolute;
background-color: var(--c1);
width: 700px;
height: 10px;
transform: rotate(90deg);
bottom: 293px;
left: 300px;
]
[/border]
[comment]--- STRIPE 2 ---[/comment]
[border=0;
position: absolute;
background-color: var(--c2);
width: 700px;
height: 10px;
transform: rotate(90deg);
bottom: 293px;
left: 290px;
]
[/border]
[comment]--- STRIPE 3 ---[/comment]
[border=0;
position: absolute;
background-color: var(--c3);
width: 700px;
height: 10px;
transform: rotate(90deg);
bottom: 293px;
left: 280px;
]
[/border]
[comment]--- STRIPE 4 ---[/comment]
[border=0;
position: absolute;
background-color: var(--c4);
width: 700px;
height: 10px;
transform: rotate(90deg);
bottom: 293px;
left: 270px;
]
[/border]
[comment]--- STRIPE 5 ---[/comment]
[border=0;
position: absolute;
background-color: var(--c5);
width: 700px;
height: 10px;
transform: rotate(90deg);
bottom: 293px;
left: 260px;
]
[/border]
[comment]--- STRIPE 6 ---[/comment]
[border=0;
position: absolute;
background-color: var(--c5);
width: 700px;
height: 10px;
transform: rotate(90deg);
bottom: 293px;
left: 250px;
]
[/border]
[comment]--- STRIPE 7 ---[/comment]
[border=0;
position: absolute;
background-color: var(--c7);
width: 700px;
height: 10px;
transform: rotate(90deg);
bottom: 293px;
left: 250px;
]
[/border]
[comment]--- STRIPE 8 ---[/comment]
[border=0;
position: absolute;
background-color: var(--c8);
width: 700px;
height: 10px;
transform: rotate(90deg);
bottom: 293px;
left: 240px;
]
[/border]
[comment]--- STRIPE 9 ---[/comment]
[border=0;
position: absolute;
background-color: var(--c9);
width: 700px;
height: 10px;
transform: rotate(90deg);
bottom: 293px;
left: 230px;
]
[/border]
[comment]--- STRIPE 10 ---[/comment]
[border=0;
position: absolute;
background-color: var(--c10);
width: 700px;
height: 10px;
transform: rotate(90deg);
bottom: 293px;
left: 220px;
]
[/border]

[comment]--- CHARACTER IMAGE ---[/comment]
[border=10px solid #202020;
border-radius: 300px;
position: absolute;
background-color: var(--c10);
width: 200px;
height: 200px;
bottom: 320px;
right: 10px;
background-image: var(--img1);
background-size: cover;
background-position: center;
overflow: hidden;
]
[border=0;
position: absolute;
background-color: gray;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 50%;
]
[/border]
[/border]

[comment]--- TEXT ABOVE IMAGE ---[/comment]
[border=0;
position: absolute;
width: 200px;
height: 60px;
top: 25px;
right: 10px;
color: #e2e2e2;
font-size: 30px;
font-family: Times New Roman, serif;
text-align: center;
]
[b][i]DERIVATIVE ![/i][/b]
[/border]

[comment]--- BASIC INFO BOX ---[/comment]
[border=0;
position: absolute;
width: 200px;
height: 170px;
right: 12px;
top: 330px;
background-color: #202020;
overflow: hidden;
]
[border=0;
position: absolute;
height: 170px;
width: 200px;
left: 5px;
top: -5px;
box-sizing: border-box;
overflow: hidden;
padding-right: 2px;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 5px;
]
[border=0;
height: 150px;
width: 200%;
overflow-y: scroll;
]
[border=0;
height: 170px;
width: 50%;
box-sizing: border-box;
color: #ffffff;
text-align: left;
line-height: 16px;
][i]scrolls![/i]
[B][FONT=Arial][SIZE=4]NAME:[/SIZE][/FONT][/B]  [FONT=ARIAL][SIZE=3] Ongo Gablogian [/SIZE][/FONT]

[B][FONT=Arial][SIZE=4]AGE:[/SIZE][/FONT][/B] [FONT=ARIAL][SIZE=3] 69 [/SIZE][/FONT]

[B][FONT=Arial][SIZE=4]GENDER:[/SIZE][/FONT][/B] [FONT=ARIAL][SIZE=3] Pangender [/SIZE][/FONT]

[B][FONT=Arial][SIZE=4]PRONOUNS:[/SIZE][/FONT][/B] [FONT=ARIAL][SIZE=3] Any/All [/SIZE][/FONT]

[B][FONT=Arial][SIZE=4]SEXUALITY:[/SIZE][/FONT][/B] [FONT=ARIAL][SIZE=3] Pansexual [/SIZE][/FONT]

[B][FONT=Arial][SIZE=4]OCCUPATION:[/SIZE][/FONT][/B] [FONT=ARIAL][SIZE=3] Art Collector [/SIZE][/FONT]
[/border]
[/border]
[/border]
[/border]

[border=0;
width: 300px;
height: 10px;
position: absolute;
right: -185px;
bottom: 10px;
font-size: 11px;
text-align: justify;
line-height: 16px;
]
coded by mountainpost
[/border]

[/border]