character form - geronimo

[comment]
PLEASTE NOTE - editing then hitting 'preview' will make it look wonky, saving changes works tho

i'm really tired so i'm probably not going to include a table of contents for this one; i did my best to label everything, though, so have fun

for the third button that has the pen icon, i just linked it back to my rpn profile: that link is yours to do whatever with, it's just a personal writer's link, redirect it to your own social or whatever, or change it to whatever you'd like lmao.

©mountainpost with thanks to everyone in the discord, as always
[/comment]

[border=0;

/*CHARACTER IMAGES*/
--bg1: url('https://i.postimg.cc/8PSkxLJH/lida1.png'); /*first background image*/
--char1: url('https://i.postimg.cc/3NpjLVfY/lida.png'); /*character name*/
--char2: url('https://i.postimg.cc/FFWSRZdF/linda2.png'); /*personality*/
--char3: url('https://i.postimg.cc/tgf7dBj9/lida8.png'); /*history*/
--char4: url('https://i.postimg.cc/t4YPGZDv/lida7.png'); /*gallery*/
--char5: url('https://i.postimg.cc/BZVsYhwK/lida3.png'); /*gallery image 1*/
--char6: url('https://i.postimg.cc/nLrfGBYk/lida5.png'); /*gallery image 2*/
--char7: url('https://i.postimg.cc/SRVhdKMc/lida9.png'); /*gallery image 3*/
--char8: url('https://i.postimg.cc/Qxh8L2NF/lida11.png'); /*gallery image 4*/

/*COLORS*/
--c1: #ffcdb2;
--c2: #ffb4a2;
--c3: #e5989b;
--c4: #b5838d;
--c5: #6d6875;

border-radius: 0px;
position: relative;
max-width: 400px;
height: 450px;
margin: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-grow: 1;
line-height: 0px;
padding: 0px;
overflow: hidden;
pointer-events: auto;
]

[comment]--- BACKGROUND IMAGE ---[/comment]
[border=0;
position: relative;
background-color: gray;
width: 110%;
height: 110%;
right: 10%;
background: var(--bg1) no-repeat;
background-position: center;
background-size: cover;
]
[/border]

[comment]--- HORIZONTAL SCROLL BEGINS ---[/comment]
[border=0;
position: relative;
width: 105%;
height: 100%;
left: -116%;
padding: 0px;
overflow: visible;
]
[border=0;
height: 105%;
width: 100%;
overflow-y: hidden;
overflow-x: scroll;
padding: 0px;
]
[border=0px;
height: 385px;
width: 375px;
position: relative;
right: -103%;
top: 5%;
overflow: visible;
padding: 10px;
]
[border=3px solid var(--c1);
position: relative;
height: 100%;
width: 90%;
top: -3%;
left: -3%;
overflow: visible;
]
[border=0;
position: relative;
height: 94%;
width: 94%;
background-color: var(--c3);
overflow: hidden;
]

[comment]--- VERTICAL SCROLL BEGINS ---[/comment]
[border=0;
position: relative;
height: 94%;
width: 93%;
overflow: visible;
]
[border=0;
height: 101%;
width: 101%;
box-sizing: border-box;
overflow: hidden;
]
[border=0;
height: 100%;
width: 200%;
overflow-y: scroll;
]
[border=0;
height: auto;
width: 50%;
box-sizing: border-box;
line-height: 0px;
position: relative;
left: -2%
]

[comment]--- FIRST STICKY TAB BEGINS ---[/comment]
[border=1;
position: absolute;
width: 300px;
height: 250px;
left: -2%;
top: -53%;
overflow: visible;
padding: 0px;
pointer-events: none;
]
[border=0;
width: 150%;
height: 60%;
position: sticky;
top: 0px;
overflow: visible;
z-index: 5;
]
[comment]--- CHARACTER IMAGE 1 ---[/comment]
[border=5px solid var(--c4);
width: 100px;
height: 100px;
border-radius: 300px;
position: relative;
top: -25%;
left: -7%;
background: var(--char1) no-repeat;
background-size: cover;
z-index: 6;
]
[/border]
[border=1px solid var(--c4);
width: 300px;
height: 100px;
position: absolute;
top: -40%;
background-color: var(--c4);
z-index: 5;
]
[/border]
[comment]--- CHARACTER NAME LABEL ---[/comment]
[border=0;
position: absolute;
width: 150px;
height: 50px;
top: 5%;
right: 40%;
line-height: 30px;
font-size: 30px;
text-align: center;
color: var(--c5);
text-shadow: 3px 3px var(--c2);
z-index: 5;
][font=Fjalla One]character name[/font]
[/border]
[/border]
[comment]--- TEXT BOX 1 BEGINS ---[/comment]
[border=0;
width: 65px;
height: 70px;
position: absolute;
top: 46%;
left: 2%;
background-color: var(--c5);
border-radius: 10px;
]
[border=0;
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
]
[border=0;
height: 100%;
width: 200%;
position: relative;
top: -25%;
left: -25%;
overflow-y: scroll;
pointer-events: auto;
overflow-x: hidden;
]
[border=0;
height: auto;
width: 120%;
position: relative;
left: -20%;
top: -30%;
box-sizing: border-box;
line-height: 9px;
font-size: 9px;
overflow-x: hidden;
color: #ffffff;
][font=Padauk]gender: woman
age: 69
sex. or: bisexual
d.o.b: 4/20/69
this does scroll
[/font]
[/border]
[/border]
[/border]
[/border]
[comment]--- TEXT BOX 1 ENDS ---[/comment]

[comment]--- CIRCULAR BUTTONS BEGIN ---[/comment]
[border=0;
height: 60px;
width: 180px;
position: absolute;
right: 5%;
top: 50%;
padding: 0px;
flex-direction: row;
display: flex;
flex-wrap: wrap;
z-index: 3;
pointer-events: none;
]
[comment]--- BUTTON 1 ---[/comment]
[border=0;
width: 30px;
height: 30px;
border-radius: 300px;
position: absolute;
top: 10%;
background-color: var(--c1);
z-index: 3;
pointer-events: none;
] [border=0; position: relative; height: auto; width: auto; top: -3px; z-index: 3; left: -3px; pointer-events: none; color: #ffffff;][fa]far fa-music[/fa][/border]
[/border]

[comment]--- BUTTON 2 ---[/comment]
[border=0;
width: 30px;
height: 30px;
border-radius: 300px;
position: absolute;
top: 10%;
left: 35%;
background-color: var(--c4);
pointer-events: auto;
][border=0; position: relative; height: auto; width: auto; top: 0px; left: -2px; color: #ffffff;]
[comment]--- MOODBOARD LINK GOES HERE ---[/comment]
[URL='https://pm1.narvii.com/6738/16e2fa5ffb20cde7be77a7e3a4e7ed90cdda0facv2_hq.jpg'][COLOR=rgb(255, 255, 255)][fa]far fa-flower-tulip[/fa][/COLOR][/URL][/border]
[/border]

[comment]--- BUTTON 3 ---[/comment]
[border=0;
width: 30px;
height: 30px;
border-radius: 300px;
position: absolute;
top: 10%;
right: 0%;
background-color: var(--c5);
pointer-events: auto;
][border=0; position: relative; height: auto; z-index: 3; width: auto; top: -3px; left: -2px;]
[comment]--- YOUR PERSONAL LINK HERE ---[/comment]
[URL='https://www.rpnation.com/members/mountainpost.96163/'][COLOR=rgb(255, 255, 255)][fa]far fa-pen-nib[/fa][/COLOR][/URL][/border]
[/border]
[/border]
[comment]--- CIRCULAR BUTTONS END ---[/comment]

[/border]
[comment]--- FIRST STICKY TAB ENDS ---[/comment]

[comment]--- SECOND STICKY TAB BEGINS ---[/comment]
[border=0;
position: absolute;
width: 300px;
height: auto;
left: -2%;
top: 240px;
overflow: visible;
padding: 0px;
z-index: 5;
]
[border=0;
width: 150%;
height: 80px;
position: sticky;
top: 15px;
overflow: visible;
padding: 0px;
z-index: 5;
]
[comment]--- CHARACTER IMAGE 2 ---[/comment]
[border=5px solid var(--c4);
width: 100px;
height: 100px;
border-radius: 300px;
position: relative;
top: -45px;
right: -190px;
background: var(--char2) no-repeat;
background-size: cover;
z-index: 4;
]
[/border]
[border=1px solid var(--c4);
width: 300px;
height: 50px;
position: relative;
top: -160px;
background-color: var(--c4);
z-index: 2;
]
[/border]
[comment]--- PERSONALITY LABEL ---[/comment]
[border=0;
width: 140px;
height: 50px;
top: 10px;
left: 15px;
position: absolute;
z-index: 3;
line-height: 30px;
font-size: 30px;
text-align: center;
color: var(--c5);
text-shadow: 3px 3px var(--c2);
][font=Fjalla One]personality[/font]
[/border]
[/border]

[comment]--- PERSONALITY INFO ---[/comment]
[border=1px solid var(--c1);
max-width: 230px;
height: 200px;
border-radius: 30px;
margin-left: 20px;
background-color: var(--c1);
color: #ffffff;
overflow: hidden;
]
[border=0;
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
position: relative;
top: -2%;
]
[border=0;
height: 100%;
width: 200%;
overflow-y: scroll;
]
[border=0;
height: auto;
width: 50%;
box-sizing: border-box;
line-height: 9px;
font-size: 9px;
][font=Padauk]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit urna quam, vitae tristique odio pulvinar sit amet. Suspendisse ut faucibus enim. Aliquam sit amet nisi ac enim aliquet sagittis ut quis mi. Donec iaculis lectus non dui pharetra, vitae condimentum arcu congue. Proin turpis tellus, lacinia sit amet justo et, volutpat imperdiet ex. Sed auctor pellentesque augue sed lobortis. Ut sed arcu in quam interdum posuere at id augue. Nunc fermentum tempus tortor, rhoncus feugiat neque suscipit non. Cras eleifend lectus sed nisl pellentesque sagittis. Sed faucibus, ipsum non venenatis mollis, lectus nunc ultricies metus, eu laoreet massa nulla eget nisl. Mauris finibus metus a odio pulvinar, vitae sagittis libero vestibulum. In volutpat bibendum libero sed gravida.

Morbi dictum in lorem facilisis hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique dignissim enim at imperdiet. Pellentesque fermentum odio at ligula cursus dapibus. Fusce convallis ante at nunc molestie, et sagittis metus elementum. Donec et velit aliquet, malesuada nunc quis, rutrum enim. Nulla volutpat, enim eu ornare commodo, erat sapien vulputate dui, vitae feugiat risus mi sit amet velit. Nunc vel imperdiet nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit urna quam, vitae tristique odio pulvinar sit amet. Suspendisse ut faucibus enim. Aliquam sit amet nisi ac enim aliquet sagittis ut quis mi. Donec iaculis lectus non dui pharetra, vitae condimentum arcu congue. Proin turpis tellus, lacinia sit amet justo et, volutpat imperdiet ex. Sed auctor pellentesque augue sed lobortis. Ut sed arcu in quam interdum posuere at id augue. Nunc fermentum tempus tortor, rhoncus feugiat neque suscipit non. Cras eleifend lectus sed nisl pellentesque sagittis. Sed faucibus, ipsum non venenatis mollis, lectus nunc ultricies metus, eu laoreet massa nulla eget nisl. Mauris finibus metus a odio pulvinar, vitae sagittis libero vestibulum. In volutpat bibendum libero sed gravida.[/font]
[/border]
[/border]
[/border]
[/border]
[/border]
[comment]--- SECOND STICKY TAB ENDS ---[/comment]

[comment]--- THIRD STICKY TAB BEGINS ---[/comment]
[border=0;
position: absolute;
width: 300px;
height: auto;
left: -2%;
top: 600px;
overflow: visible;
padding: 0px;
z-index: 3;
]
[border=0;
width: 150%;
height: 80px;
position: sticky;
top: 15px;
overflow: visible;
padding: 0px;
z-index: 3;
]
[comment]--- CHARACTER IMAGE 3 ---[/comment]
[border=5px solid var(--c4);
width: 100px;
height: 100px;
border-radius: 300px;
position: relative;
top: -45px;
left: -30px;
background: var(--char3) no-repeat;
background-size: cover;
z-index: 3;
]
[/border]
[border=1px solid var(--c4);
width: 300px;
height: 50px;
position: relative;
top: -160px;
background-color: var(--c4);
z-index: 2;
]
[/border]
[comment]--- HISTORY LABEL ---[/comment]
[border=0;
width: 140px;
height: 50px;
top: 10px;
left: 85px;
position: absolute;
z-index: 3;
line-height: 30px;
font-size: 30px;
text-align: center;
color: var(--c5);
text-shadow: 3px 3px var(--c2);
][font=Fjalla One]history[/font]
[/border]
[/border]
[comment]--- HISTORY INFO ---[/comment]
[border=1px solid var(--c1);
max-width: 230px;
height: 200px;
border-radius: 30px;
margin-left: 20px;
background-color: var(--c1);
color: #ffffff;
]
[border=0;
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
position: relative;
top: -2%;
]
[border=0;
height: 100%;
width: 200%;
overflow-y: scroll;
]
[border=0;
height: auto;
width: 50%;
box-sizing: border-box;
line-height: 9px;
font-size: 9px;
][font=Padauk]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit urna quam, vitae tristique odio pulvinar sit amet. Suspendisse ut faucibus enim. Aliquam sit amet nisi ac enim aliquet sagittis ut quis mi. Donec iaculis lectus non dui pharetra, vitae condimentum arcu congue. Proin turpis tellus, lacinia sit amet justo et, volutpat imperdiet ex. Sed auctor pellentesque augue sed lobortis. Ut sed arcu in quam interdum posuere at id augue. Nunc fermentum tempus tortor, rhoncus feugiat neque suscipit non. Cras eleifend lectus sed nisl pellentesque sagittis. Sed faucibus, ipsum non venenatis mollis, lectus nunc ultricies metus, eu laoreet massa nulla eget nisl. Mauris finibus metus a odio pulvinar, vitae sagittis libero vestibulum. In volutpat bibendum libero sed gravida.

Morbi dictum in lorem facilisis hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique dignissim enim at imperdiet. Pellentesque fermentum odio at ligula cursus dapibus. Fusce convallis ante at nunc molestie, et sagittis metus elementum. Donec et velit aliquet, malesuada nunc quis, rutrum enim. Nulla volutpat, enim eu ornare commodo, erat sapien vulputate dui, vitae feugiat risus mi sit amet velit. Nunc vel imperdiet nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit urna quam, vitae tristique odio pulvinar sit amet. Suspendisse ut faucibus enim. Aliquam sit amet nisi ac enim aliquet sagittis ut quis mi. Donec iaculis lectus non dui pharetra, vitae condimentum arcu congue. Proin turpis tellus, lacinia sit amet justo et, volutpat imperdiet ex. Sed auctor pellentesque augue sed lobortis. Ut sed arcu in quam interdum posuere at id augue. Nunc fermentum tempus tortor, rhoncus feugiat neque suscipit non. Cras eleifend lectus sed nisl pellentesque sagittis. Sed faucibus, ipsum non venenatis mollis, lectus nunc ultricies metus, eu laoreet massa nulla eget nisl. Mauris finibus metus a odio pulvinar, vitae sagittis libero vestibulum. In volutpat bibendum libero sed gravida.[/font]
[/border]
[/border]
[/border]

[/border]

[/border]
[comment]--- THIRD STICKY TAB ENDS ---[/comment]

[comment]--- FOURTH STICKY TAB BEGINS ---[/comment]
[border=1px solid red;
position: absolute;
width: 300px;
height: 380px;
left: -2%;
top: 970px;
overflow: visible;
padding: 0px;
z-index: 3;
]
[border=0;
width: 150%;
height: 80px;
position: sticky;
top: 15px;
overflow: visible;
padding: 0px;
z-index: 3;
]
[comment]--- CHARACTER IMAGE 4 ---[/comment]
[border=5px solid var(--c4);
width: 100px;
height: 100px;
border-radius: 300px;
position: relative;
top: -45px;
right: -190px;
background: var(--char4) no-repeat;
background-size: cover;
z-index: 4;
]
[/border]
[border=1px solid var(--c4);
width: 300px;
height: 50px;
position: relative;
top: -160px;
background-color: var(--c4);
z-index: 2;
]
[/border]
[comment]--- GALLERY LABEL ---[/comment]
[border=0;
width: 140px;
height: 50px;
top: 10px;
left: 15px;
position: absolute;
z-index: 3;
line-height: 30px;
font-size: 30px;
text-align: center;
color: var(--c5);
text-shadow: 3px 3px var(--c2);
][font=Fjalla One]gallery[/font]
[/border]
[/border]
[comment]--- GALLERY IMAGES BEGIN ---[/comment]
[comment]--- GALLERY IMAGE 1 ---[/comment]
[border=1px solid var(--c1);
max-width: 130px;
height: 80px;
border-radius: 10px;
margin-left: 10px;
padding: 20px;
color: #ffffff;
line-height: 9px;
font-size: 9px;
background: var(--char5) no-repeat;
background-size: cover;
]
[/border]
[comment]--- GALLERY IMAGE 2 ---[/comment]
[border=1px solid var(--c1);
position: relative;
right: -200px;
top: -121px;
max-width: 30px;
height: 80px;
border-radius: 10px;
margin-right: 10px;
padding: 20px;
color: #ffffff;
line-height: 9px;
font-size: 9px;
background: var(--char6) no-repeat;
background-size: cover;
z-index: 0;
]
[/border]
[comment]--- GALLERY IMAGE 3 ---[/comment]
[border=1px solid var(--c1);
position: relative;
top: -100px;
margin-left: 10px;
max-width: 30px;
height: 80px;
border-radius: 10px;
margin-right: 10px;
padding: 20px;
color: #ffffff;
line-height: 9px;
font-size: 9px;
background: var(--char7) no-repeat;
background-size: cover;
z-index: 0;
]
[/border]
[comment]--- GALLERY IMAGE 4 ---[/comment]
[border=1px solid var(--c1);
position: relative;
top: -223px;
left: 100px;
max-width: 130px;
height: 80px;
border-radius: 10px;
margin-right: 10px;
padding: 20px;
color: #ffffff;
line-height: 9px;
font-size: 9px;
background: var(--char8) no-repeat;
background-size: cover;
z-index: 0;
]
[/border]
[/border]
[comment]--- FOURTH STICKY TAB ENDS ---[/comment]

[comment]--- SOUNDCLOUD ---[/comment]
[border=0;
width: auto;
height: auto;
position: absolute;
left: 85px;
top: 105px;
z-index: 0;
opacity: 100%;
pointer-events: auto;
overflow: visible;
][MEDIA=soundcloud]eatshitpeachpit/pepsi-on-the-house#track_id=1224039904[/MEDIA]
[/border]
[border=0;
width: 170px;
height: 130px;
position: absolute;
top: 105px;
left: 90px;
pointer-events: none;
background-color: var(--c3);
z-index: 2;
]
[/border]
[/border]
[/border]
[/border]
[/border]
[comment]---- VERTICAL SCROLL ENDS ---[/comment]
[/border]
[/border]

[comment]--- DESIGN ON FIRST PANEL ---[/comment]
[border=5px solid var(--c4);
position: absolute;
width: 380px;
height: 40px;
left: -435px;
top: 15px;
background-color: var(--c4);
]
[/border]
[border=5px solid var(--c1);
position: absolute;
width: 380px;
height: 40px;
left: -435px;
top: 0px;
background-color: var(--c1);
]
[/border]
[comment]--- TITLE ON FRONT PANEL HERE ---[/comment]
[border=0;
position: absolute;
width: 280px;
height: 60px;
left: -420px;
top: 45px;
line-height: 50px;
font-size: 50px;
text-align: center;
color: #ffffff;
text-shadow: 3px 3px var(--c3);
][font=Fjalla One][i]geronimo![/i][/font]
[/border]
[comment]--- SCROLL INSTRUCTIONS ---[/comment]
[border=0;
width: 200px;
height: 10px;
position: absolute;
top: -25px;
left: -250px;
line-height: 10px;
font-size: 11px;
color: #ffffff;
text-align: right;
][b][i]SCROLL >>>[/i][/b]
[/border]

[/border]
[comment]--- HORIZONTAL SCROLL ENDS ---[/comment]
[/border][/border][/border][comment]--- SIGNATURE PLS DON'T REMOVE ---[/comment][border=0;
max-width: 300px;
max-height: 30px;
margin: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-grow: 1;
line-height: 10px;
font-size: 10px;
text-align: center;
]coded by mountainpost
[/border]