magnadeus
professional fifthist
[class=variables]
--color: #b7cfda;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important
[/class]
[class=container]
width: 460px;
height: 300px;
display: flex;
margin: auto;
[/class]
[class=left]
background-color: var(--color);
height: 300px;
width: 220px;
padding: 10px;
box-sizing: border-box;
[/class]
[class name=left maxWidth=450px]
width: 135px;
padding: 5px;
height: 290px;
[/class]
[class=img]
height: 280px;
width: 200px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/36/Blue_girl.jpg');
filter: saturate(50%);
background-size: cover;
padding: 20px;
box-sizing: border-box;
background-position: 50% 50%;
[/class]
[class name=img maxWidth=450px]
width: 125px;
[/class]
[class=brackets]
height: 100%;
width: 100%;
background:
linear-gradient(to right, white 2px, transparent 2px) 0 100%,
linear-gradient(to left, white 2px, transparent 2px) 100% 0,
linear-gradient(to bottom, white 2px, transparent 2px) 100% 0,
linear-gradient(to top, white 2px, transparent 2px) 0 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
[/class]
[class name=brackets maxWidth=450px]
opacity: 0;
[/class]
[class=right]
width: 240px;
height: 300px;
display: flex;
flex-direction: column;
[/class]
[class=contentContainer]
position: relative;
width: 240px;
height: 270px;
[/class]
[class name=contentContainer maxWidth=450px]
left: -5px;
[/class]
[class=content]
position: absolute;
opacity: 0;
transition: 0.5s;
width: 240px;
height: 270px;
font-size: 12px;
padding-left: 10px;
box-sizing: border-box;
overflow: hidden;
[/class]
[class=scroll]
width: 100%;
padding-right: 150px;
height: 100%;
overflow-y: scroll;
[/class]
[class=name]
font-weight: 900;
text-align: center;
border-bottom: 4px solid var(--color);
width: 120px;
display: block;
margin: 10% auto;
font-size: 18px;
position: relative;
[/class]
[class=textHome]
font-size: 12px;
text-align: center;
text-transform: uppercase;
width: 200px;
margin: 0 6.5%;
[/class]
[class=title]
text-align: center;
font-size: 16px;
text-transform: uppercase;
font-weight: 900;
[/class]
[class=tag]
display: inline-block;
border-bottom: 1px solid var(--color);
height: 15px;
font-size: 10px;
text-transform: uppercase;
[/class]
[class=imgSmallContainer]
width: 80%;
height: 70px;
display: flex;
justify-content: space-between;
margin: 10px auto;
[/class]
[class=imgSmall]
width: 70px;
height: 70px;
background-size: cover;
background-position: 50% 50%;
filter: saturate(70%);
[/class]
[class=tabs]
display: flex;
width: 150px;
margin: 0 23%;
justify-content: space-between;
[/class]
[class name=tabs maxWidth=450px]
position: relative;
left: -10px;
[/class]
[class=tab]
border-radius: 50%;
height: 20px;
width: 20px;
border: 1px solid black;
transition: 0.5s;
[/class]
[class name=tab state=hover]
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
border: 1px solid var(--color);
[/class]
[class=show]
z-index: 1;
opacity: 1;
[/class]
[class=click]
border: 1px solid var(--color);
background-color: var(--color);
[/class]
[script class=tab01 on=click]
addClass click tab01
removeClass click tab02
removeClass click tab03
removeClass click tab04
addClass show content01
removeClass show content02
removeClass show content03
removeClass show content04
removeClass show contentHome
[/script]
[script class=tab02 on=click]
addClass click tab02
removeClass click tab01
removeClass click tab03
removeClass click tab04
addClass show content02
removeClass show content01
removeClass show content03
removeClass show content04
removeClass show contentHome
[/script]
[script class=tab03 on=click]
addClass click tab03
removeClass click tab01
removeClass click tab02
removeClass click tab04
addClass show content03
removeClass show content01
removeClass show content02
removeClass show content04
removeClass show contentHome
[/script]
[script class=tab04 on=click]
addClass click tab04
removeClass click tab01
removeClass click tab02
removeClass click tab03
addClass show content04
removeClass show content01
removeClass show content02
removeClass show content03
removeClass show contentHome
[/script]
[div class=variables]
[div class=container]
[div class=left]
[div class=img]
[div class=brackets][/div]
[/div]
[/div]
[div class=right]
[div class=contentContainer]
[div class="show content contentHome"]
[div class=name]ALIAS HERE.[/div]
[div class=textHome]quotes/lyrics
(optional)
[/div] [/div] [div class="content content01"] [div class=scroll] [div class=title]basics[/div] [div class=tag]name[/div] here
[div class=tag]nicknames[/div] here, (optional)
[div class=tag]age[/div] here
[div class=tag]gender[/div] here
[div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Claudette_1979.JPG');"][/div] [div class=imgSmall style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/0f/Doubleslit3Dspectrum-blue.gif');"][/div] [/div] [div class=title]appearance[/div] [div class=tag]height[/div] here
[div class=tag]description[/div] used if one has no faceclaim
[/div] [/div] [div class="content content02"] [div class=scroll] [div class=title]DESCRIPTION[/div] [div class=tag]quote[/div] from the character
[div class=tag]personality[/div] give enough of a description to work off of [div class=title]ABILITIES[/div] [div class=tag]natural skills[/div] what your character is generally good at [div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/%28Elevations_of%29_1st_and_2nd_floors%2C_south%2C_east%2C_west%2C_north_%28elevations%29%2C_details_of_frame%2C_door%2C_and_hall_to_closet_%28GGUSC-BlackerR-5353%29.jpg/207px-%28Elevations_of%29_1st_and_2nd_floors%2C_south%2C_east%2C_west%2C_north_%28elevations%29%2C_details_of_frame%2C_door%2C_and_hall_to_closet_%28GGUSC-BlackerR-5353%29.jpg');"][/div] [div class=imgSmall style="background-image: url('https://images.pexels.com/photos/1326930/pexels-photo-1326930.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');"][/div] [/div] [div class=tag]supernatural skills[/div] what abilities your character has been gifted
[/div] [/div] [div class="content content03"] [div class=scroll] [div class=title]bio[/div] [div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://images.pexels.com/photos/414062/pexels-photo-414062.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');"][/div] [div class=imgSmall style="background-image: url('https://images.pexels.com/photos/247676/pexels-photo-247676.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');"][/div] [/div] [div class=tag]history[/div] childhood, growing up
[div class=tag]relationships[/div] friends, family, enemies
[/div] [/div] [div class="content content04"] [div class=scroll] [div class=title]miscellaneous[/div] [div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://images.pexels.com/photos/23273/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');"][/div] [div class=imgSmall style="background-image: url('https://images.pexels.com/photos/719396/pexels-photo-719396.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');"][/div] [/div] [div class=tag]misc. facts[/div]
xx → favourite song, zodiac sign, etc.
xx → anything not listed in previous sections [/div] [/div] [/div] [div class=tabs] [div class="tab tab01"][/div] [div class="tab tab02"][/div] [div class="tab tab03"][/div] [div class="tab tab04"][/div] [/div] [/div] [/div] [/div]
(optional)
[/div] [/div] [div class="content content01"] [div class=scroll] [div class=title]basics[/div] [div class=tag]name[/div] here
[div class=tag]nicknames[/div] here, (optional)
[div class=tag]age[/div] here
[div class=tag]gender[/div] here
[div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Claudette_1979.JPG');"][/div] [div class=imgSmall style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/0f/Doubleslit3Dspectrum-blue.gif');"][/div] [/div] [div class=title]appearance[/div] [div class=tag]height[/div] here
[div class=tag]description[/div] used if one has no faceclaim
[/div] [/div] [div class="content content02"] [div class=scroll] [div class=title]DESCRIPTION[/div] [div class=tag]quote[/div] from the character
[div class=tag]personality[/div] give enough of a description to work off of [div class=title]ABILITIES[/div] [div class=tag]natural skills[/div] what your character is generally good at [div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/%28Elevations_of%29_1st_and_2nd_floors%2C_south%2C_east%2C_west%2C_north_%28elevations%29%2C_details_of_frame%2C_door%2C_and_hall_to_closet_%28GGUSC-BlackerR-5353%29.jpg/207px-%28Elevations_of%29_1st_and_2nd_floors%2C_south%2C_east%2C_west%2C_north_%28elevations%29%2C_details_of_frame%2C_door%2C_and_hall_to_closet_%28GGUSC-BlackerR-5353%29.jpg');"][/div] [div class=imgSmall style="background-image: url('https://images.pexels.com/photos/1326930/pexels-photo-1326930.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');"][/div] [/div] [div class=tag]supernatural skills[/div] what abilities your character has been gifted
[/div] [/div] [div class="content content03"] [div class=scroll] [div class=title]bio[/div] [div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://images.pexels.com/photos/414062/pexels-photo-414062.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');"][/div] [div class=imgSmall style="background-image: url('https://images.pexels.com/photos/247676/pexels-photo-247676.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');"][/div] [/div] [div class=tag]history[/div] childhood, growing up
[div class=tag]relationships[/div] friends, family, enemies
[/div] [/div] [div class="content content04"] [div class=scroll] [div class=title]miscellaneous[/div] [div class=imgSmallContainer] [div class=imgSmall style="background-image: url('https://images.pexels.com/photos/23273/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');"][/div] [div class=imgSmall style="background-image: url('https://images.pexels.com/photos/719396/pexels-photo-719396.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');"][/div] [/div] [div class=tag]misc. facts[/div]
xx → favourite song, zodiac sign, etc.
xx → anything not listed in previous sections [/div] [/div] [/div] [div class=tabs] [div class="tab tab01"][/div] [div class="tab tab02"][/div] [div class="tab tab03"][/div] [div class="tab tab04"][/div] [/div] [/div] [/div] [/div]
coded by shady.
Last edited: