[nobr]
[class="bg"]
--url-for-bg-img: url('URL');
width: 320px;
height: 320px;
background: var(--url-for-bg-img);
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
box-sizing: border-box;
position: relative;
margin: auto;
padding: 20px;
border-radius: 20px;
[/class]
[class="a"]
--bg-color-for-1st-button: COLOR;
height: auto;
display: inline-block;
border-radius: 100px;
background: var(--bg-color-for-1st-button);
opacity: 0;
font-weight: bolder;
font-size: 17px;
box-sizing: border-box;
padding: 3px 15px 6px 15px;
cursor: pointer;
top: 20%;
left: 20%;
transform: translate(-20%, -20%);
position: absolute;
z-index: 1;
text-align: center;
[/class]
[COMMENT]i have positioned the div as "left: 20%;" "top: 20%;" and "transform: translate(-20%, -20%);" but you can change it as you like.
the "left: 20%;" coincides with the first numerical value in "transform: translate(-20%, -20%);" and "top: 20%;" with the second.
all of this ^^^ also applies for the classes named "b" and "c"[/COMMENT]
[class="texta"]
--bg-color-for-1st-text-div: rgba(#, #, #, 0.7);
height: calc(100% - 40px);
width: calc(100% - 40px);
background: var(--bg-color-for-1st-text-div);
position: absolute;
z-index: 0;
opacity: 0;
border-radius: 20px;
box-sizing: border-box;
padding: 10px 10px 0 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
[/class]
[COMMENT]the fourth number in "rgba(#, #, #, 0.7);" defines the opacity of the text div; i have left it as 0.7 but you may change it as you like: 1 means opaque and 0 means transparent.
this ^^^ applies for classes named "textb" and "textc" as well[/COMMENT]
[class="backa"]
--text-color-for-1st-div: COLOR;
display: inline-block;
font-weight: bolder;
color: var(--text-color-for-1st-div);
transition: 0.3s all ease;
font-size: 15px;
cursor: default;
line-height: 15px;
[/class]
[class name="backa" state="hover"]
--text-color-for-1st-back-button-when-hovered: COLOR;
color: var(--text-color-for-1st-back-button-when-hovered);
[/class]
[class="b"]
--bg-color-for-2nd-button: COLOR;
height: auto;
display: inline-block;
border-radius: 100px;
background: var(--bg-color-for-2nd-button);
opacity: 0;
font-weight: bolder;
font-size: 17px;
box-sizing: border-box;
padding: 3px 15px 6px 15px;
cursor: pointer;
top: 50%;
left: 55%;
position: absolute;
z-index: 1;
text-align: center;
transform: translate(-55%, -50%);
[/class]
[class="textb"]
--bg-color-for-2nd-text-div: rgba(#, #, #, 0.7);
height: 280px;
width: 280px;
background: var(--bg-color-for-2nd-text-div);
position: absolute;
z-index: 0;
opacity: 0;
border-radius: 20px;
box-sizing: border-box;
padding: 10px 10px 10px 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
[/class]
[class="backb"]
--text-color-for-2nd-div: COLOR;
display: inline-block;
font-weight: bolder;
color: var(--text-color-for-2nd-div);
transition: 0.3s all ease;
font-size: 15px;
cursor: default;
line-height: 15px;
[/class]
[class name="backb" state="hover"]
--text-color-for-2nd-back-button-when-hovered: COLOR;
color: var(--text-color-for-2nd-back-button-when-hovered);
[/class]
[class="c"]
--bg-color-for-3rd-button: COLOR;
height: auto;
display: inline-block;
border-radius: 100px;
background: var(--bg-color-for-3rd-button);
opacity: 0;
font-weight: bolder;
font-size: 17px;
box-sizing: border-box;
padding: 3px 15px 6px 15px;
cursor: pointer;
top: 80%;
right: 20%;
position: absolute;
z-index: 1;
text-align: center;
transform: translate(20%, -80%);
[/class]
[class="textc"]
--bg-color-for-3rd-text-div: rgba(#, #, #, 0.7);
height: 280px;
width: 280px;
background: var(--bg-color-for-3rd-text-div);
position: absolute;
z-index: 0;
opacity: 0;
border-radius: 20px;
box-sizing: border-box;
padding: 10px 10px 10px 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
[/class]
[class="backc"]
--text-color-for-3rd-div: COLOR;
display: inline-block;
font-weight: bolder;
color: var(--text-color-for-3rd-div);
transition: 0.6s all ease;
font-size: 15px;
cursor: default;
line-height: 15px;
[/class]
[class name="backc" state="hover"]
--text-color-for-3rd-back-button-when-hovered: COLOR;
color: var(--text-color-for-3rd-back-button-when-hovered);
[/class]
[class="hidden"]
width: 260px;
overflow: hidden;
margin-top: 5px;
[/class]
[class="scrolla"]
width: 120%;
height: 240px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class="textboxa"]
--text-color-for-1st-div: COLOR;
box-sizing: border-box;
max-width: 260px;
font-size: 12px;
text-align: justify;
color: var(--text-color-for-1st-div);
cursor: default;
[/class]
[class="scrollb"]
width: 120%;
height: 240px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class="textboxb"]
--text-color-for-2nd-div: COLOR;
box-sizing: border-box;
max-width: 260px;
font-size: 12px;
text-align: justify;
color: var(--text-color-for-2nd-div);
cursor: default;
[/class]
[class="scrollc"]
width: 120%;
height: 240px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]
[class="textboxc"]
--text-color-for-3rd-div: COLOR;
box-sizing: border-box;
max-width: 260px;
font-size: 12px;
text-align: justify;
color: var(--text-color-for-3rd-div);
cursor: default;
[/class]
[script class="bg" on="init"]
addClass aopacity1 a
addClass bopacity1 b
addClass copacity1 c
[/script]
[script class="a" on="click"]
addClass aopacity0 a
addClass bopacity0 b
addClass copacity0 c
addClass textaopacity1 texta
addClass activecursor backa
removeClass aopacity1 a
removeClass bopacity1 b
removeClass copacity1 c
removeClass textaopacity0 texta
removeClass aopacity0 b
removeClass bopacity0 c
removeClass copacity0 a
removeClass textaopacity1 textb
removeClass activecursor backb
removeClass aopacity1 b
removeClass bopacity1 c
removeClass copacity1 a
removeClass textaopacity0 textb
removeClass aopacity0 c
removeClass bopacity0 a
removeClass copacity0 b
removeClass textaopacity1 textc
removeClass activecursor backc
removeClass aopacity1 c
removeClass bopacity1 a
removeClass copacity1 b
removeClass textaopacity0 textc
[/script]
[script class="backa" on="click"]
removeClass aopacity0 a
removeClass bopacity0 b
removeClass copacity0 c
removeClass textaopacity1 texta
removeClass activecursor backa
addClass aopacity1 a
addClass bopacity1 b
addClass copacity1 c
addClass textaopacity0 texta
[/script]
[script class="b" on="click"]
addClass aopacity0 b
addClass bopacity0 c
addClass copacity0 a
addClass textaopacity1 textb
addClass activecursor backb
removeClass aopacity1 b
removeClass bopacity1 c
removeClass copacity1 a
removeClass textaopacity0 textb
removeClass aopacity0 a
removeClass bopacity0 b
removeClass copacity0 c
removeClass textaopacity1 texta
removeClass activecursor backa
removeClass aopacity1 a
removeClass bopacity1 b
removeClass copacity1 c
removeClass textaopacity0 texta
removeClass aopacity0 c
removeClass bopacity0 a
removeClass copacity0 b
removeClass textaopacity1 textc
removeClass activecursor backc
removeClass aopacity1 c
removeClass bopacity1 a
removeClass copacity1 b
removeClass textaopacity0 textc
[/script]
[script class="backb" on="click"]
removeClass aopacity0 b
removeClass bopacity0 c
removeClass copacity0 a
removeClass textaopacity1 textb
removeClass activecursor backb
addClass aopacity1 b
addClass bopacity1 c
addClass copacity1 a
addClass textaopacity0 textb
[/script]
[script class="c" on="click"]
addClass aopacity0 c
addClass bopacity0 a
addClass copacity0 b
addClass textaopacity1 textc
addClass activecursor backc
removeClass aopacity1 c
removeClass bopacity1 a
removeClass copacity1 b
removeClass textaopacity0 textc
removeClass aopacity0 a
removeClass bopacity0 b
removeClass copacity0 c
removeClass textaopacity1 texta
removeClass activecursor backa
removeClass aopacity1 a
removeClass bopacity1 b
removeClass copacity1 c
removeClass textaopacity0 texta
removeClass aopacity0 b
removeClass bopacity0 c
removeClass copacity0 a
removeClass textaopacity1 textb
removeClass activecursor backb
removeClass aopacity1 b
removeClass bopacity1 c
removeClass copacity1 a
removeClass textaopacity0 textb
[/script]
[script class="backc" on="click"]
removeClass aopacity0 c
removeClass bopacity0 a
removeClass copacity0 b
removeClass textaopacity1 textc
removeClass activecursor backc
addClass aopacity1 c
addClass bopacity1 a
addClass copacity1 b
addClass textaopacity0 textc
[/script]
[class="aopacity0"]transition: 1s all ease-out; opacity: 0;[/class]
[class="bopacity0"]transition: 1s all ease-out 0.8s; opacity: 0;[/class]
[class="copacity0"]transition: 1s all ease-out 1.6s; opacity: 0;[/class]
[class="aopacity1"]transition: 1s all ease-out 0.8s; opacity: 1;[/class]
[class="bopacity1"]transition: 1s all ease-out 1.6s; opacity: 1;[/class]
[class="copacity1"]transition: 1s all ease-out 2.4s; opacity: 1;[/class]
[class="textaopacity1"]transition: 1s all ease-out 2.4s; opacity: 1; z-index: 2;[/class]
[class="textaopacity0"]transition: 1s all ease-out; opacity: 0;[/class]
[class="activecursor"]cursor: pointer;[/class]
[div="height: auto; font-size: 8px; width: 280px; text-align: right; margin: auto;"]code by [USER=68743]@fudgecakez[/USER][/div]
[div class="bg"]
[div class="a"]
ABOUT ME
[/div]
[div class="b"]
ABOUT YOU
[/div]
[div class="c"]
ABOUT THE PLOT
[/div]
[COMMENT]i wasn't exactly sure what to substitute the text here ^^^ for so i left it as is. however, feel free to change it as you wish ![/COMMENT]
[div class="texta"]
[div class="backa"]
BACC
[/div]
[COMMENT]the text i have for the "back button"s are simply "BACC" but you can change to whatever you want !
just try not to make the text more than one line long.
this ^^^ applies for the "BACC" in classes "backb" and "backc" as well[/COMMENT]
[div class="hidden"]
[div class="scrolla"]
[div class="textboxa"]
YOUR TEXT FOR THE 1ST DIV HERE. DON'T FORGET TO ADD [BR][/BR] FOR LINE BREAKS
[/div]
[/div]
[/div]
[/div]
[div class="textb"]
[div class="backb"]
BACC
[/div]
[div class="hidden"]
[div class="scrollb"]
[div class="textboxb"]
YOUR TEXT FOR THE 2ND DIV HERE. DON'T FORGET TO ADD [BR][/BR] FOR LINE BREAKS
[/div]
[/div]
[/div]
[/div]
[div class="textc"]
[div class="backc"]
BACC
[/div]
[div class="hidden"]
[div class="scrollc"]
[div class="textboxc"]
YOUR TEXT FOR THE 3RD DIV HERE. DON'T FORGET TO ADD [BR][/BR] FOR LINE BREAKS
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]