[nobr]
[class="container"]
height: 490px;
max-width: 600px;
margin: auto;
display: flex;
background: transparent;
cursor: default;
position: relative;
[/class]
[class="bg"]
--color-for-the-bg: COLOR;
flex: 1;
height: 450px;
background: var(--color-for-the-bg);
position: relative;
z-index: 0;
top: 20px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0px 10px 0px 10px;
[/class]
[class="bookmark"]
--color-for-left-bar: COLOR;
--color-for-box-shadow: COLOR;
width: 100px !important;
height: 470px;
background: var(--color-for-left-bar);
position: relative;
box-shadow: 0 0 15px var(--color-for-box-shadow);
z-index: 1;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 10px 0 10px 0;
margin-right: 10px;
[/class]
[class="image1"]
--url-for-1st-pic-in-bar: url('URL');
position: relative;
width: 80px;
height: 100px;
background: var(--url-for-1st-pic-in-bar);
background-size: COVER | #% | #px | ETC;
background-position: #% #% | CENTER | #px #px | ETC;
cursor: pointer;
[/class]
[class="image2"]
--url-for-2nd-pic-in-bar: url('URL');
position: relative;
width: 80px;
height: 100px;
background: var(--url-for-2nd-pic-in-bar);
background-size: COVER | #% | #px | ETC;
background-position: #% #% | CENTER | #px #px | ETC;
cursor: pointer;
[/class]
[class="textcontainer"]
--url-for-bg-pic-on-right: url('URL');
position: relative;
height: 430px;
flex: 1;
background: var(--url-for-bg-pic-on-right);
background-size: COVER | #% | #px | ETC;
background-position: #% #% | CENTER | #px #px | ETC;
box-sizing: border-box;
overflow: hidden;
[/class]
[class="bbutton"]
--color-for-button-text: COLOR;
font-size: 14px;
font-variant: small-caps;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]
[class name="bbutton" state="hover"]
--color-for-button-hover: COLOR;
--color-for-button-shadow: COLOR;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]
[class="lbutton"]
--color-for-button-text: COLOR;
font-size: 14px;
font-variant: small-caps;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;[/class]
[class name="lbutton" state="hover"]
--color-for-button-hover: COLOR;
--color-for-button-shadow: COLOR;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]
[class="pbutton"]
--color-for-button-text: COLOR;
font-size: 14px;
font-variant: small-caps;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]
[class name="pbutton" state="hover"]
--color-for-button-hover: COLOR;
--color-for-button-shadow: COLOR;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]
[class="abutton"]
--color-for-button-text: COLOR;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
cursor: pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]
[class name="abutton" state="hover"]
--color-for-button-hover: COLOR;
--color-for-button-shadow: COLOR;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]
[class="tbutton"]
--color-for-button-text: COLOR;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
cursor: pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]
[class name="tbutton" state="hover"]
--color-for-button-hover: COLOR;
--color-for-button-shadow: COLOR;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]
[class="book"]
position: relative;
height: auto;
width: 100%;
transition: 2s all ease;
[/class]
[class="ogpage"]
position: absolute;
height: 430px;
width: 100%;
display: inline-block;
[/class]
[class="fa"]
--color-for-big-title: COLOR;
--color-for-shadow-around-border: COLOR;
position: relative;
height: auto;
display: inline-block;
font-weight: bold;
text-align: center;
text-transform: uppercase;
font-size: 160%;
font-family: Times New Roman;
box-sizing: border-box;
padding: 10px;
border: 6px solid var(--color-for-big-title);
color: var(--color-for-big-title);
text-shadow: 2px 2px 15px TEXT-SHADOW-COLOR, -2px -2px 15px TEXT-SHADOW-COLOR, 2px -2px 15px TEXT-SHADOW-COLOR, -2px 2px 15px TEXT-SHADOW-COLOR;
cursor: default;
box-shadow: 0 0 15px var(--color-for-shadow-around-border);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
[/class]
[class="bpage"]
--color-for-slider-page: rgba(#, #, #, #);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 150%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]
[comment]so you see the "--color-for-slider-page: rgba(#, #, #, #);" you have to fill out ? it's for the background colour you want to give your slider page e.g. mine was a white w opacity 0.1 so it was very light.
furthermore the fourth "#" in "--color-for-slider-page: rgba(#, #, #, #);" is to be substituted for any value bw 0 and 1 (where 0 means transparent and 1 means opaque)
^^^all of this true for the next few classes too where we define the details for the "pages" or slides (that each "button" takes you to)[/comment]
[class="lpage"]
--color-for-slider-page: rgba(#, #, #, #);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 300%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]
[class="ppage"]
--color-for-slider-page: rgba(#, #, #, #);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 450%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]
[class="tpage"]
--color-for-slider-page: rgba(#, #, #, #);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 600%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]
[class="apage"]
--color-for-slider-page: rgba(#, #, #, #);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 750%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]
[script class="image1" on="click"]
removeClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]
[script class="image2" on="click"]
removeClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]
[script class="bbutton" on="click"]
addClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
addClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]
[script class="lbutton" on="click"]
addClass active lbutton
removeClass active bbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
addClass move2 book
removeClass move1 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]
[script class="pbutton" on="click"]
addClass active pbutton
removeClass active bbutton
removeClass active lbutton
removeClass active abutton
removeClass active tbutton
addClass move3 book
removeClass move1 book
removeClass move2 book
removeClass move4 book
removeClass move5 book
[/script]
[script class="abutton" on="click"]
addClass active abutton
removeClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active tbutton
addClass move4 book
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move5 book
[/script]
[script class="tbutton" on="click"]
addClass active tbutton
removeClass active bbutton
removeClass active lbutton
removeClass active abutton
removeClass active pbutton
addClass move5 book
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
[/script]
[class="move1"]
transform: translate(-150%, 0%);
[/class]
[class="move2"]
transform: translate(-300%, 0%);
[/class]
[class="move3"]
transform: translate(-450%, 0%);
[/class]
[class="move4"]
transform: translate(-750%, 0%);
[/class]
[class="move5"]
transform: translate(-600%, 0%);
[/class]
[class="active"]
--color-for-button-shadow: COLOR;
--color-for-button-hover: COLOR;
color: var(--color-for-button-hover);
letter-spacing: 3px;
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]
[class="scroll"]
height: 100%;
width: 100%;
background: transparent;
overflow-y: scroll;
box-sizing: border-box;
padding-right: 10px;
[/class]
[class="flex"]
display: flex;
justify-content: space-between;
align-items: flex-start;
[/class]
[class="align"]
display: flex;
flex-direction: column;
align-items: flex-end;
[/class]
[class="heading"]
--color-for-heading-text: COLOR;
--color-for-heading-bg: rgba(#, #, #, 0.6);
font-weight: bolder;
font-size: 12px;
color: var(--color-for-heading-text);
box-sizing: border-box;
border: 3px solid var(--color-for-heading-text);
display: inline-block;
padding: 2px 6px 2px 6px;
background: var(--color-for-heading-bg);
position: relative;
margin-right: 10px;
letter-spacing: -0.5px;
font-family: Archivo Black;
text-transform: uppercase;
text-align: center;
[/class]
[class="answer"]
--color-for-details-bg: rgba(#, #, #, 0.9);
--color-for-details-text: COLOR;
display: inline-block;
background: var(--color-for-details-bg);
color: var(--color-for-details-text);
padding: 1px 7px 3px 7px;
font-size: 12px;
position: relative;
margin-bottom: 3px;
[/class]
[COMMENT]it looks super aesthetic when the colour values for "--color-for-heading-text: COLOR;" and "--color-for-details-bg: rgba(#, #, #, 0.9);" are the same (except one's in hex and the other's in rgb.)
also i explain how to use these last four classes ("flex" "align" "heading" and "answer") in my "text" spoiler but just so you have an idea:
the "heading" class is for those "NAME" "NICKNAME" "ZODIAC" texts.
the "answer" class is for said texts answers like "marcel" "marcie" "sagittarius"[/COMMENT]
[div class="container"]
[div="text-align: right; font-size: 8px; position: absolute; right: 0; top: 8px;"]code by @fudgecakez[/div]
[div class="bg"]
[div class="bookmark"]
[div class="image1"][/div]
[div class="bbutton"]
BASICS
[/div]
[div class="lbutton"]
LOOKS
[/div]
[div class="pbutton"]
PSYCHE
[/div]
[div class="tbutton"]
TIES
[/div]
[div class="abutton"]
ACCOUNT
[/div]
[comment]for these few divs ^^^ try not to make the words for the button too long. if you choose to use this as a cs, i would recommend you keep the words i've input here instead of switching them out for smth else.[/comment]
[div class="image2"][/div]
[/div]
[div class="textcontainer"]
[div class="book"]
[div class="ogpage"]
[div class="fa"]
NAME OF CHARA OR ROLE HERE
[/div]
[/div]
[div class="bpage"]
[div class="scroll"]
YOUR TEXT FOR THE "BASICS" SLIDE HERE.
FOR LINE BREAKS, YOU WILL NEED TO ADD [br][/br] TAGS
[/div]
[/div]
[div class="lpage"]
[div class="scroll"]
YOUR TEXT FOR THE "LOOKS" SLIDE HERE.
FOR LINE BREAKS, YOU WILL NEED TO ADD [br][/br] TAGS
[/div]
[/div]
[div class="ppage"]
[div class="scroll"]
YOUR TEXT FOR THE "PSYCHE" SLIDE HERE.
FOR LINE BREAKS, YOU WILL NEED TO ADD [br][/br] TAGS
[/div]
[/div]
[div class="apage"]
[div class="scroll"]
YOUR TEXT FOR THE "ACCOUNT" SLIDE HERE.
FOR LINE BREAKS, YOU WILL NEED TO ADD [br][/br] TAGS
[/div]
[/div]
[div class="tpage"]
[div class="scroll"]
YOUR TEXT FOR THE "TIES" SLIDE HERE.
FOR LINE BREAKS, YOU WILL NEED TO ADD [br][/br] TAGS
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]