[nobr]
[class=containerInfo]
width: 340px;
display: flex;
margin-left: 520px;
justify-content: space-between;
[/class]
[class name=containerInfo maxWidth=450px]
margin-left: 0px;
[/class]
[class=numberPicture]
height: 100px;
width: 100px;
border-radius: 70px 70px 0px 70px;
background-size: cover;
background-image: url('https://i.imgur.com/7jO13Yt.jpg');
padding-left: 35px;
padding-top: 28px;
box-sizing: border-box;
[/class]
[class=number]
font-size: 30px;
color: white;
font-weight: 900;
[/class]
[class=codeInfo]
width: 230px;
height: 150px;
display: flex;
flex-direction: column;
overflow: hidden;
font-size: 13px;
[/class]
[class=codeName]
font-size: 20px;
[/class]
[class=blockInfo]
width: auto;
height: 20px;
padding: 0px 2px 0px 2px;
font-size: 13px;
display: inline-block;
border: 1px solid black;
[/class]
[class=link]
width: 97%;
padding: 0px 2px 0px 2px;
font-size: 13px;
border: 1px solid black;
[/class]
[class=scrollInfo]
overflow-y: scroll;
padding-right: 17px;
width: 100%;
height: 100%;
[/class]
[div class=containerInfo]
[div class=numberPicture][div class=number]
03.[/div][/div]
[div class=codeInfo]
[div class=codeName]
AURUM[/div]
[div class=scrollInfo]
[div=display: flex; justify-content: space-evenly;][div class=blockInfo]mobile-friendly[/div][div class=blockInfo]character sheet[/div][/div]
link: code available here
[br][/br]
A new code (finally)! It's perhaps a bit fickle, though it's still mobile friendly (it's readable on my mobile, and is certainly not going to break the site on mobile). The code won't "break" when your 'name' div has too many characters, however it will affect the design. Beware that use of a certain -webkit property means it might not be compatible on every browser (just the 'aurum' title, though). Every single tab will scroll if your stuff goes over the height. Add paragraph breaks with:
[br][/br][br][/br]
. Feel extremely free to delete any sets of images, or adding more if you so choose. You can also delete tabs if there is too many (I know five can be a lot to fill), but adding them might prove a bit more difficult if you're not so used to editing codes. Also don't forget that you can change the accent color in the entire code by just putting in a different hex code in the first class (named 'variables'). This little code blurb got a bit longer than I intended, oops.
[/div]
[/div]
[/div][/nobr]
[nobr]
[class=variables]
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
--color: #eeb475;
[/class]
[class=codeContainer]
width: 400px;
height: 410px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
[/class]
[class name=codeContainer maxWidth=450px]
width: 350px;
[/class]
[class=top]
width: 400px;
height: 95px;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
[/class]
[class name=top maxWidth=450px]
width: 350px;
[/class]
[class=name]
color: transparent;
font-size: 70px;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--color);
letter-spacing: -2px;
height: 60px;
line-height: 0.9;
transition: 0.5s;
[/class]
[class name=name maxWidth=450px]
font-size: 65px;
line-height: 1;
width: 210px;
overflow: hidden;
[/class]
[class name=name state=hover]
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
color: var(--color);
[/class]
[class name=tab state=hover]
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
[/class]
[class=tabsContainer]
width: 160px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
[/class]
[class name=tabsContainer maxWidth=450px]
width: 140px;
[/class]
[class=tab]
height: 20px;
width: 20px;
border: 2px solid var(--color);
border-radius: 50%;
transition: 0.5s;
display: flex;
justify-content: center;
align-items: center;
[/class]
[class=tabInner]
height: 10px;
width: 10px;
border: 2px solid var(--color);
border-radius: 50%;
transition: 0.5s;
opacity: 0;
[/class]
[class=selected]
background-color: var(--color);
opacity: 1;
[/class]
[class=container]
height: 300px;
width: 390px;
position: relative;
margin: auto;
[/class]
[class name=container maxWidth=450px]
width: 350px;
[/class]
[class=content]
height: 300px;
width: 400px;
overflow: hidden;
opacity: 0;
position: absolute;
transition: 0.5s;
font-size: 12px;
[/class]
[class name=content maxWidth=450px]
width: 350px;
[/class]
[class=show]
z-index: 1;
opacity: 1;
[/class]
[class=imgHome]
background-image: url('https://pmcwwd.files.wordpress.com/2018/06/olivia-holt43147.jpeg?w=930&h=1024');
background-size: cover;
height: 150px;
width: 150px;
[/class]
[class=textHome]
font-size: 20px;
text-transform: uppercase;
text-align: center;
width: 200px;
[/class]
[class=title]
font-weight: 900;
text-transform: uppercase;
text-align: right;
font-size: 16px;
[/class]
[class=block]
width: auto;
padding: 0px 2px 0px 2px;
font-size: 10px;
display: inline-block;
background-color: var(--color);
text-transform: uppercase;
color: white;
[/class]
[class=imgSmallContainer]
width: 100%;
height: 90px;
display: flex;
justify-content: space-evenly;
margin: 10px 10px;
[/class]
[class=imgSmall]
width: 90px;
height: 90px;
background-size: cover;
background-position: 80% 50%;
filter: saturate(100%);
[/class]
[class=scroll]
overflow-y: scroll;
padding-right: 40px;
width: 100%;
height: 100%;
[/class]
[class=indent]
display: inline-block;
width: 20px;
height: 1px;
[/class]
[script class=tab01 on=mouseenter]
addClass show tabInner01
[/script]
[script class=tab01 on=mouseleave]
removeClass show tabInner01
[/script]
[script class=tab02 on=mouseenter]
addClass show tabInner02
[/script]
[script class=tab02 on=mouseleave]
removeClass show tabInner02
[/script]
[script class=tab03 on=mouseenter]
addClass show tabInner03
[/script]
[script class=tab03 on=mouseleave]
removeClass show tabInner03
[/script]
[script class=tab04 on=mouseenter]
addClass show tabInner04
[/script]
[script class=tab04 on=mouseleave]
removeClass show tabInner04
[/script]
[script class=tab05 on=mouseenter]
addClass show tabInner05
[/script]
[script class=tab05 on=mouseleave]
removeClass show tabInner05
[/script]
[script class=name on=click]
removeClass selected tabInner01
removeClass selected tabInner02
removeClass selected tabInner03
removeClass selected tabInner04
removeClass selected tabInner05
addClass show contentHome
removeClass show content01
removeClass show content02
removeClass show content03
removeClass show content04
removeClass show content05
[/script]
[script class=tab01 on=click]
addClass selected tabInner01
removeClass selected tabInner02
removeClass selected tabInner03
removeClass selected tabInner04
removeClass selected tabInner05
addClass show content01
removeClass show contentHome
removeClass show content02
removeClass show content03
removeClass show content04
removeClass show content05
[/script]
[script class=tab02 on=click]
addClass selected tabInner02
removeClass selected tabInner01
removeClass selected tabInner03
removeClass selected tabInner04
removeClass selected tabInner05
addClass show content02
removeClass show contentHome
removeClass show content01
removeClass show content03
removeClass show content04
removeClass show content05
[/script]
[script class=tab03 on=click]
addClass selected tabInner03
removeClass selected tabInner01
removeClass selected tabInner02
removeClass selected tabInner04
removeClass selected tabInner05
addClass show content03
removeClass show contentHome
removeClass show content01
removeClass show content02
removeClass show content04
removeClass show content05
[/script]
[script class=tab04 on=click]
addClass selected tabInner04
removeClass selected tabInner01
removeClass selected tabInner02
removeClass selected tabInner03
removeClass selected tabInner05
addClass show content04
removeClass show contentHome
removeClass show content01
removeClass show content02
removeClass show content03
removeClass show content05
[/script]
[script class=tab05 on=click]
addClass selected tabInner05
removeClass selected tabInner01
removeClass selected tabInner02
removeClass selected tabInner03
removeClass selected tabInner04
addClass show content05
removeClass show contentHome
removeClass show content01
removeClass show content02
removeClass show content03
removeClass show content04
[/script]
[div class=variables]
[div class=codeContainer]
[div class=top]
[div class=name]
aurum[div class=tabBar][/div][/div]
[div class=tabsContainer]
[div class="tab tab01"][div class="tabInner tabInner01"][/div][/div]
[div class="tab tab02"][div class="tabInner tabInner02"][/div][/div]
[div class="tab tab03"][div class="tabInner tabInner03"][/div][/div]
[div class="tab tab04"][div class="tabInner tabInner04"][/div][/div]
[div class="tab tab05"][div class="tabInner tabInner05"][/div][/div]
[/div]
[/div]
[div class=container]
[div class="content contentHome show" style="display: flex; align-items: center; justify-content: space-between;"]
[div class=imgHome][/div]
[div class=textHome]
quote? role? name? lyrics?
[/div]
[/div]
[div class="content content01"]
[div class=scroll]
[div class=title]
REQUISITE[/div]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://i.ibb.co/DMx6RWP/206-32.gif');"][/div]
[div class=imgSmall style="background-image: url('https://i.ibb.co/xjTJjk4/206-39.gif');"][/div]
[div class=imgSmall style="background-image: url('https://i.ibb.co/NSwCn3F/206-36.gif');"][/div]
[/div]
[div class=block]name[/div] name here.
[br][/br]
[div class=block]age[/div] output.
[br][/br]
[div class=block]input[/div] output.
[br][/br]
[div class=block]input[/div] output.
[br][/br]
[div class=block]input[/div] output.
[br][/br]
[div class=block]input[/div] output.
[br][/br]
[div class=block]input[/div] output.
[/div]
[/div]
[div class="content content02"]
[div class=scroll]
[div class=title]
APPEARANCE[/div]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://i.ibb.co/gy8SsyW/206-13.gif');"][/div]
[div class=imgSmall style="background-image: url('https://i.ibb.co/Wcn9JDh/206-14.gif');"][/div]
[div class=imgSmall style="background-image: url('https://i.ibb.co/K9xczCj/206-12.gif');"][/div]
[/div]
[div class=block]height[/div] output.
[br][/br]
[div class=block]hair[/div] output.
[br][/br]
[div class=block]eyes[/div] output.
[br][/br]
[/div]
[/div]
[div class="content content03"]
[div class=scroll]
[div class=title]
PERSONA[/div]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://i.ibb.co/mSYW9y4/206-51.gif'); background-position: 30% 50%;"][/div]
[div class=imgSmall style="background-image: url('https://i.ibb.co/vmdHN1v/206-52.gif'); background-position: 30% 50%;"][/div]
[div class=imgSmall style="background-image: url('https://i.ibb.co/bRp1SCx/206-53.gif'); background-position: 30% 50%;"][/div]
[/div]
[div class=block]personality[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac ligula maximus, rutrum dui sit amet, volutpat felis. Suspendisse vel rhoncus leo, at placerat leo. In porttitor bibendum massa non bibendum. Aenean vitae maximus dui. Proin sollicitudin, erat ac volutpat rutrum, augue justo luctus quam, luctus mattis lorem velit eget purus. Donec varius fringilla massa, vitae cursus turpis finibus sit amet. Donec et vehicula enim.
[br][/br][br][/br]
Donec sit amet dictum dui. Cras id tristique nibh. Morbi sit amet massa risus. Etiam faucibus lorem a metus molestie, sed suscipit est rutrum. Duis sit amet sem eget dolor finibus pulvinar. Nulla nibh ligula, accumsan eu nunc a, venenatis ornare quam. Mauris eu eros id augue maximus porta at ut tortor. Nullam elit mi, gravida at velit vitae, viverra rutrum nisl. Nullam odio nunc, aliquet sit amet eros mollis, dictum tempus mi. Aenean eget metus tellus.
[br][/br]
[div class=block]likes[/div] output.
[br][/br]
[div class=block]dislikes[/div] output.
[br][/br]
[div class=block]fears[/div] output.
[br][/br]
[div class=block]quirks[/div] output.
[br][/br]
[/div]
[/div]
[div class="content content04"]
[div class=scroll]
[div class=title]
INFORMATION[/div]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://i.ibb.co/6R1rHs0/206-179.gif');"][/div]
[div class=imgSmall style="background-image: url('https://i.ibb.co/LzwVTXm/206-178.gif');"][/div]
[div class=imgSmall style="background-image: url('https://i.ibb.co/ZG3PCzZ/206-180.gif');"][/div]
[/div]
[div class=block]input[/div] output.
[br][/br]
[div class=block]list of something[/div] [br][/br]
[div class=indent][/div]
→ list item #1 ; description... this could make a list of powers, skills, inventory etc. do whatever you want.
[br][/br]
[div class=indent][/div]
→ list item #2 ; description
[br][/br]
[br][/br]
[div class=block]input[/div] output.
[br][/br][br][/br][br][/br]
[/div]
[/div]
[div class="content content05"]
[div class=scroll]
[div class=title]
BACKGROUND[/div]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://i.ibb.co/StXDZXG/206-42.gif'); background-position: 50% 50%;"][/div]
[div class=imgSmall style="background-image: url('https://i.ibb.co/NtB7p1C/206-43.gif'); background-position: 50% 50%;"][/div]
[div class=imgSmall style="background-image: url('https://i.ibb.co/xJrr8jw/206-44.gif'); background-position: 50% 50%;"][/div]
[/div]
[div class=block]family[/div][br][/br]
[div class=indent][/div]→ did someone say more lists?
[br][/br]
[div class=indent][/div]→ i think yes
[br][/br]
[div class=indent][/div]→ mhm
[br][/br]
[div class=block]background[/div] Suspendisse vel ligula justo. Phasellus porta euismod tincidunt. Morbi elementum sem sed elit pellentesque, in commodo ante interdum. In volutpat malesuada dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer molestie neque ac felis pretium, vitae volutpat neque fermentum. Nullam hendrerit sem nisi, eu consectetur metus dictum vel.
[br][/br][br][/br]
Maecenas egestas mattis neque, quis rhoncus nisi maximus eu. Donec fermentum ante nibh, a lobortis tortor luctus eu. Nam gravida sollicitudin consectetur. Praesent et metus porttitor, hendrerit felis a, eleifend sapien. Sed eget accumsan tellus, a condimentum orci. In ultricies ex ac semper tempus. Praesent porttitor eros cursus, ultricies lectus in, fermentum sapien. Praesent et viverra dui, id iaculis lacus.
[br][/br][br][/br]
Donec ornare, nisl at pellentesque luctus, mi massa ullamcorper felis, in tristique urna leo sit amet eros. Mauris fermentum turpis nec commodo sagittis. Curabitur euismod pharetra lorem, quis vulputate lacus aliquet eget. Fusce sit amet sodales diam. Phasellus congue iaculis tempus. Aliquam auctor quam ex, quis mollis massa rutrum ut. Aliquam non arcu in nisl porta rhoncus.
[/div]
[/div]
[/div]
[/div]
[/div]
[div=font-size: 9px; text-align: center; opacity: 0.7;]coded by
ShadyAce
.[/div]
[/nobr]