[nobr]
[class="credits"]
margin: auto;
width: 310px;
height: auto;
font-size: 8px;
text-align: right;
[/class]
[class="tab1"]
--bg-color-around-big-picture: COLOR;
width: 310px;
height: 320px;
box-sizing: border-box;
padding: 20px;
background: var(--bg-color-around-big-picture);
margin: auto;
cursor: default;
[/class]
[COMMENT]i mention this for now and for wherever it pops up in other parts of the code as well: the "COLOR" value in "--bg-color-around-big-picture: COLOR;" needs to substituted with either a colour name (such as green, blue, orange.) note that names such as light blue, baby pink, etc may not work in which case you will need a hex colour value (which you can easily copy and paste from any colour picker.) an example of a hex colour value is #FFFFFF (white)[/COMMENT]
[class="tab2"]
width: 310px;
height: auto;
margin: auto;
display: none;
cursor: default;
[/class]
[class="tab3"]
width: 310px;
height: auto;
margin: auto;
display: none;
cursor: default;
[/class]
[class="tab4"]
width: 310px;
height: auto;
margin: auto;
display: none;
cursor: default;
[/class]
[class="tab1pic"]
--url-for-big-picture: url('URL');
--border-around-big-pic: COLOR;
width: 270px;
height: 280px;
background: var(--url-for-big-picture);
background-size: #% | COVER | #px | ETC;
background-position: CENTER | #% #% | LEFT | ETC;
transition: 0.5s;
box-sizing: border-box;
padding: 0 0 30px 20px;
border: 1px solid var(--border-around-big-pic);
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: flex-end;
[/class]
[class name="tab1pic" state="hover"]
opacity: 0.8;
[/class]
[script class="tab1pic" on="click"]
hide tab1
show tab2
hide tab3
hide tab4
[/script]
[class="tab1pictext"]
--how-much-you-want-to-rotate-quote: rotate(#deg);
--text-color-for-quote: COLOR;
width: 250px;
position: relative;
transform: var(--how-much-you-want-to-rotate-quote);
font-size: 15px;
letter-spacing: 2px;
color: var(--text-color-for-quote);
text-align: left;
[/class]
[COMMENT]ok listen
depending on much your text is rotated (mine was -5deg) you will have to adjust the "padding: 0 0 30px 20px;" in the "tab1pic" class. the "30px" defines padding on the bottom, and the "20px" defines it for the left side.
also, i'd recommend adding the same colour values for "--text-color-for-quote: COLOR;" and "--border-around-big-pic: COLOR;" because it looks nicer[/COMMENT]
[class="imgcontainer"]
--bg-color-around-3-pics: COLOR;
width: 120px;
height: 320px;
background: var(--bg-color-around-3-pics);
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
[/class]
[COMMENT]i would suggest having the colour for "--bg-color-around-3-pics: COLOR;" and "--bg-color-around-big-picture: COLOR;" (in the "tab1" class) the same[/COMMENT]
[class="img1"]
--url-for-1st-smol-pic: url('URL');
--border-around-smol-pic: COLOR;
background: var(--url-for-1st-smol-pic);
background-size: #% | COVER | #px | ETC;
height: 80px;
width: 80px;
position: relative;
box-sizing: border-box;
border: 1px solid var(--border-around-smol-pic);
background-position: CENTER | #% #% | LEFT | ETC;
transition: 0.5s all ease-out;
cursor: pointer;
[/class]
[class name="img1" state="hover"]
opacity: 0.8;
[/class]
[script class="img1" on="click"]
show tab2
hide tab3
hide tab4
[/script]
[class="img2"]
--url-for-2nd-smol-pic: url('URL');
--border-around-smol-pic: COLOR;
background: var(--url-for-2nd-smol-pic);
background-size: #% | COVER | #px | ETC;
height: 80px;
width: 80px;
position: relative;
box-sizing: border-box;
border: 1px solid var(--border-around-smol-pic);
background-position: CENTER | #% #% | LEFT | ETC;
transition: 0.5s;
cursor: pointer;
[/class]
[class name="img2" state="hover"]
opacity: 0.8;
[/class]
[script class="img2" on="click"]
hide tab2
show tab3
hide tab4
[/script]
[class="img3"]
--url-for-3rd-smol-pic: url('URL');
--border-around-smol-pic: COLOR;
background: var(--url-for-3rd-smol-pic);
background-size: #% | COVER | #px | ETC;
height: 80px;
width: 80px;
position: relative;
box-sizing: border-box;
border: 1px solid var(--border-around-smol-pic);
background-position: CENTER | #% #% | LEFT | ETC;
transition: 0.5s;
cursor: pointer;
[/class]
[class name="img3" state="hover"]
opacity: 0.8;
[/class]
[script class="img3" on="click"]
hide tab2
hide tab3
show tab4
[/script]
[class="detaildiv"]
--bg-for-text: COLOR;
width: 190px;
height: 320px;
background: var(--bg-for-text);
[/class]
[class="name"]
--bg-for-name: COLOR;
--text-color-for-name: COLOR;
width: 190px;
height: 25px;
background: var(--bg-for-text);
text-align: center;
line-height: 25px;
font-size: 23px;
color: var(--text-color-for-name);
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2px;
transition: 0.5s;
cursor: pointer;
[/class]
[COMMENT]whatever colour/hex you input for "--bg-for-name: COLOR;" should be the same for "--bg-for-text: COLOR;" (in the "detaildiv" class)[/COMMENT]
[class name="name" state="hover"]
--color-for-name-hover: COLOR;
color: var(--color-for-name-hover);
[/class]
[script class="name" on="click"]
show tab1
hide tab2
hide tab3
hide tab4
[/script]
[class="postscroll"]
overflow: hidden;
width: 100%;
height: 290px;
border: 2px solid transparent;
[/class]
[class="post"]
width: 120%;
height: 290px;
overflow-y: scroll;
overflow-x: hidden;
[/class]
[class="text"]
--color-for-general-text: COLOR;
max-width: 185px;
font-size: 10px;
line-height: 11px;
text-align: justify;
color: var(--color-for-general-text);
[/class]
[div class="credits"]
code by [user=68743]@fudgecakez[/user]
[/div]
[div class="tab1"]
[div class="tab1pic"]
[div class="tab1pictext"]
[font='Homemade Apple']ADD YOUR QUOTE (on top of big pic) HERE.[/font]
[/div]
[/div]
[/div]
[div class="tab2"]
[div="display: flex; justify-content: center;"]
[div class="imgcontainer"]
[div class="img1"][/div]
[div class="img2"][/div]
[div class="img3"][/div]
[/div]
[div class="detaildiv"]
[div class="name"]
YC'S NAME HERE
[COMMENT]add only the first name or a short nickname. you don't want the text to overflow from the given because then it makes everything else look wonky[/COMMENT]
[/div]
[div class="postscroll"]
[div class="post"]
[div class="text"]
YOUR SMOL-PIC-1 DETAIL TEXT HERE
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="tab3"]
[div="display: flex; justify-content: center;"]
[div class="imgcontainer"]
[div class="img1"][/div]
[div class="img2"][/div]
[div class="img3"][/div]
[/div]
[div class="detaildiv"]
[div class="name"]
YC'S NAME HERE
[/div]
[div class="postscroll"]
[div class="post"]
[div class="text"]
YOUR SMOL-PIC-2 DETAIL TEXT HERE
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="tab4"]
[div="display: flex; justify-content: center;"]
[div class="imgcontainer"]
[div class="img1"][/div]
[div class="img2"][/div]
[div class="img3"][/div]
[/div]
[div class="detaildiv"]
[div class="name"]
YC'S NAME HERE
[/div]
[div class="postscroll"]
[div class="post"]
[div class="text"]
YOUR SMOL-PIC-3 DETAIL TEXT HERE
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]