Resource shady's shenanigans ; freebies

[ShadyAce]

[nobr]
[class=container]
width: 500px;
height: 400px;
margin: auto;
display: flex;
[/class]

[class=img]
background-image: url('https://i.imgur.com/7jO13Yt.jpg');
background-size: cover;
height: 400px;
width: 200px;
padding-top: 40px;
box-sizing: border-box;
[/class]

[class name=img maxWidth=450px]
width: 150px;
[/class]

[class=title]
color: white;
border-bottom: 2px solid white;
border-top: 2px solid white;
font-size: 16px;
width: 70%;
margin: auto;
text-transform: uppercase;
font-weight: 900;
[/class]

[class=content]
width: 300px;
height: 400px;
padding-left: 10px;
box-sizing: border-box;
font-size: 13px;
overflow: hidden;
[/class]

[class name=content maxWidth=450px]
width: 200px;
[/class]

[class=scroll]
overflow-y: scroll;
padding-right: 17px;
width: 100%;
height: 100%;
[/class]

[class=linkContainer]
width: 100%;
display: flex;
flex-direction: column;
[/class]

[class=link]
width: 100%;
border-bottom: 1px solid #232323;
[/class]

[class name=link state=hover]
cursor: pointer;
[/class]

[div class=container]
[div class=img]
[div class=title]shady's shenanigans[/div]
[/div]

[div class=content]
[div class=scroll]
INTRO
[br][/br]

hey, it's shady! welcome to my lil corner of this insane coding world. i've been coding for a long while, and decided it was about time i set up a place where i can share my codes so others can use them as well.

[br][/br][br][/br]

everything posted here is free for you to use, however you must keep the credit. i put time and effort into my codes, and i do not want them stolen or someone else claiming it as theirs. it would be nice if you could leave some likes on codes you've used as well < 3

[br][/br][br][/br]

also i aim to keep my codes mobile friendly, so unless mentioned otherwise, they should work on pc and mobile!

[br][/br][br][/br]

don't be afraid to ask questions! my pms are always open if you need a hand! though i'd love if this thread stayed tidy LMAO

[br][/br][br][/br]

LINKS

[div class=linkContainer]
[div class=link]shenanigans - this post (pastebin)[/div]
[div class=link]athena - character sheet[/div]
[div class=link]aegis - in-character post[/div]
[div class=link]aurum - character sheet[/div]
[/div]

[/div]
[/div]
[/div]
[div=font-size: 9px; text-align: center; opacity: 0.7;]coded by ShadyAce .[/div]
[/nobr]

 

[ShadyAce]

[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=block]
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]01.[/div][/div]

[div class=codeInfo]
[div class=codeName]ATHENA[/div]
[div class=scrollInfo]
[div=display: flex; justify-content: space-evenly;][div class=block]mobile-friendly[/div][div class=block]character sheet[/div][/div]
link: code available here
[br][/br]
First code! I really love how this one turned out. The tabs are the circles and you can easily change your accent color by just changing it in the 'variables' class. Each tab section has a hidden scroll when you go over the specified height. Add paragraph breaks with: [br][/br][br][/br]. Feel free to mess with where the little pictures are in the code, or where you have titles etc. Let me know if it's not mobile friendly on your screen, I can only confirm it's friendly on my phone.
[/div]
[/div]
[/div][/nobr]

[nobr]
[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://pbs.twimg.com/media/CkJHc2TWsAEQRCe.jpg');
filter: saturate(0%);
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]NAME HERE.[/div]
[div class=textHome]you can put some[br][/br][br][/br]words, quotes or lyrics here[br][/br][br][/br]idk go wild people (not too wild it'll look funky with too many words)[/div]
[/div]

[div class="content content01"]
[div class=scroll]
[div class=title]basics[/div]
[div class=tag]name[/div] here
[br][/br]
[div class=tag]nicknames[/div] here
[br][/br]
[div class=tag]age[/div] here
[br][/br]
[div class=tag]gender[/div] here
[br][/br]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/5c6bdda06395918d539f1a74b461a4be/tumblr_inline_p2n1dpx7Gf1rbm3wd_500.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/237ccb779ff20060aefc3c39dbc184f5/tumblr_inline_p2n1dxKhwx1rbm3wd_500.gif');"][/div]
[/div]
[div class=title]appearance[/div]
[div class=tag]height[/div] five foot, eight inches.
[br][/br]
[div class=tag]question[/div] answer
[br][/br]
[/div]
[/div]


[div class="content content02"]
[div class=scroll]
[div class=title]persona[/div]
[div class=tag]question[/div] answer
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/68ded5bba4c841da1a78817d182c3fbf/tumblr_inline_p2n1dhnFmO1rbm3wd_500.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/5132a61d29baef25ff3bad70a27ca89d/tumblr_inline_p2n1cqTnmk1rbm3wd_500.gif');"][/div]
[/div]
[div class=tag]input/question[/div] output/answer
[br][/br]
[/div]
[/div]


[div class="content content03"]
[div class=scroll]
[div class=title]special[/div]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/958523d0131f3fab9de7b99c9dcfab4e/tumblr_inline_p2n1cxOyQW1rbm3wd_500.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/125340aa07906c00b610fe3888e5936e/tumblr_inline_p2n1d8f6FE1rbm3wd_500.gif');"][/div]
[/div]
[div class=tag]input[/div] output
[br][/br]
[div class=tag]input[/div] output
[br][/br]
[/div]
[/div]


[div class="content content04"]
[div class=scroll]
[div class=title]background[/div]
[div class=tag]input[/div] output
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/442a13a55bfbe3022553b68e25dadf73/tumblr_inline_p2n1feBvAr1rbm3wd_500.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/acb1a84e37ba3c0b6526e617ed806627/tumblr_inline_p2n1fmKjhS1rbm3wd_500.gif');"][/div]
[/div]
[div class=tag]question[/div] answer
[br][/br]
[div class=tag]misc. facts[/div]
[br][/br]
xx → can make a list of things like this, or whatever you want to do with arrows
[br][/br]
xx → etc.
[/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]
[div=font-size: 9px; text-align: center; opacity: 0.7;]coded by ShadyAce .[/div]
[/nobr]

 

[ShadyAce]

[nobr]
[class=containerInfo]
width: 340px;
display: flex;
margin: auto;
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=block]
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]02.[/div][/div]

[div class=codeInfo]
[div class=codeName]AEGIS[/div]
[div=display: flex; justify-content: space-evenly;][div class=block]mobile-friendly[/div][div class=block]ic post[/div][/div]
[div class=scrollInfo]
link: code available here
[br][/br]
An accompanying in-character posting code for the sheet above. Add paragraph breaks with: [br][/br][br][/br]. Again, it's friendly to my mobile so please let me know if it isn't friendly on yours!
[/div]
[/div]
[/div][/nobr]

[nobr]
[class=variables]
--color: #b7cfda;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important
[/class]

[class=container]
width: 530px;
height: 300px;
display: flex;
margin: auto;
flex-wrap: wrap;
[/class]

[class name=container maxWidth=450px]
width: 300px;
height: 100%;
align-items: center;
justify-content: center;
[/class]

[class=left]
height: 300px;
width: 220px;
padding: 15px;
box-sizing: border-box;
font-size: 13px;
overflow: hidden;
[/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=imgContainer]
width: 100%;
height: 90px;
display: flex;
justify-content: space-between;
margin: 10px auto;
[/class]

[class=img]
width: 90px;
height: 90px;
background-size: cover;
background-position: 50% 50%;
filter: saturate(70%);
[/class]

[class=tag]
display: inline-block;
border-bottom: 1px solid var(--color);
height: 15px;
font-size: 10px;
text-transform: uppercase;
[/class]

[class=right]
width: 280px;
height: 300px;
display: flex;
flex-direction: column;
overflow: hidden;
font-size: 12px;
text-align: justify;
padding: 10px;
box-sizing: border-box;
[/class]

[class=leftTagContainer]
width: 100%;
height: 100px;
[/class]

[class=scroll]
width: 100%;
padding-right: 50px;
height: 100%;
overflow-y: scroll;
[/class]

[div class=variables]
[div class=container]
[div class=left]
[div class=imgContainer]
[div class=img style="background-image: url('https://66.media.tumblr.com/e9091855654b087fbd71451efd42d5e0/tumblr_inline_p2nvv5YUPv1rbm3wd_500.gif')"][/div]
[div class=img style="background-image: url('https://66.media.tumblr.com/8a4cb62f9175e9d26014d9ac0a56913d/tumblr_inline_p2nvwc7n2H1rbm3wd_500.gif')"][/div]
[/div]

[div class=name]NAME HERE.[/div]

[div class=leftTagContainer]
[div class=scroll]
[div class=tag]location[/div] a cool place (this will scroll if it has to)
[br][/br]
[div class=tag]interacts[/div] n/a.
[br][/br]
[div class=tag]tags[/div] n/a.
[br][/br]
[div class=tag]outfit[/div] here.
[/div]
[/div]
[/div]

[div class=right]
[div class=scroll]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit pulvinar sem, eget eleifend lacus porta convallis. Vivamus vel sapien libero. Duis efficitur eu arcu quis consectetur. Morbi id urna id felis aliquet scelerisque. Nulla sodales ligula a metus consequat, ac viverra lacus auctor. Morbi vulputate interdum convallis. Donec consequat maximus magna, at tincidunt mauris gravida vel. Nunc eu interdum urna. Pellentesque blandit ipsum eget urna venenatis, vitae molestie orci aliquet. Suspendisse potenti. Mauris tellus nunc, viverra eget sem ac, pharetra ornare odio. Duis dapibus velit sit amet arcu consequat posuere. Ut tempor quam turpis, at dictum dui interdum eu. Phasellus quis viverra quam. Maecenas eros turpis, semper vel enim vel, fermentum semper lectus.

Aliquam erat volutpat. Sed mattis mi vitae justo interdum, in placerat orci venenatis. Praesent porta et quam nec venenatis. Etiam tempor faucibus lorem vitae posuere. Mauris sit amet metus maximus, vulputate tortor eget, condimentum nibh. Vivamus efficitur libero at malesuada euismod. Curabitur congue lorem in leo aliquam feugiat. Ut a porta lorem. Sed condimentum neque nisi, sit amet finibus lorem dapibus a. In in quam sit amet ipsum varius pellentesque vitae ut mauris. In hendrerit mi ante, sed pharetra turpis fringilla eu. Phasellus non volutpat dolor. Donec et efficitur nibh. Mauris congue consequat commodo. Praesent in tellus posuere, volutpat massa id, dapibus erat.

Etiam ultricies massa metus. Nunc in elementum quam. In hac habitasse platea dictumst. Maecenas fringilla eu nisi sed elementum. Aliquam dictum pretium commodo. Suspendisse aliquet nisl eu justo pellentesque, eu suscipit arcu tempor. Suspendisse tincidunt sed lorem id gravida. Praesent aliquet dolor a nibh tristique luctus. Vivamus porttitor viverra erat quis gravida. Morbi a turpis et tortor imperdiet cursus. Aliquam tempus orci erat, in lacinia mauris cursus in. Curabitur dapibus rutrum rutrum. Nullam porttitor ipsum fringilla quam vehicula fermentum. Quisque vulputate metus sem, sit amet pulvinar diam congue vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Suspendisse sed lorem eget est vestibulum accumsan scelerisque vitae nulla. Vestibulum vestibulum rhoncus sodales. Mauris vitae facilisis nisi. Vivamus non tincidunt turpis, eget faucibus est. Suspendisse erat neque, finibus ultrices metus eget, suscipit finibus magna. Integer dignissim eros sem, et dapibus dui vulputate quis. Donec augue metus, scelerisque nec commodo et, egestas sit amet nulla. Integer vel nisi ullamcorper nunc euismod egestas in blandit nulla. Vestibulum id hendrerit nulla.

Nulla facilisi. Nullam tempor consectetur sem tincidunt ornare. Integer dapibus sodales ante, a cursus urna dignissim sed. Nullam blandit leo id risus congue blandit. In feugiat accumsan elit ac finibus. In auctor lobortis sem quis iaculis. Mauris at vehicula ipsum. Curabitur eu rhoncus magna, ut accumsan metus. Fusce imperdiet, orci vitae egestas maximus, tortor felis sagittis velit, id pharetra dolor sapien a augue. Etiam posuere sit amet arcu ut sollicitudin. Praesent cursus scelerisque augue, in tincidunt quam malesuada at. Curabitur eget aliquam ex. Proin ut tempus tellus, sit amet imperdiet diam.
[/div]
[/div]
[/div]
[/div]
[div=font-size: 9px; text-align: center; opacity: 0.7;]coded by ShadyAce .[/div]
[/nobr]

 

[SkyGinge]

Hey! I don't suppose I can use these for Valiance?

 

[ShadyAce]

Hey! I don't suppose I can use these for Valiance?

You can use anything here (and I'd be honored) so feel free! Let me know if you need a hand with anything!

 

[SkyGinge]

Thanks! I'm thinking of using the CS but modifying the contents slightly - I'll let you know if I hit trouble

 

[nios]

[nobr]
[class=containerInfo]
width: 340px;
display: flex;
margin: auto;
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=block]
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]02.[/div][/div]

[div class=codeInfo]
[div class=codeName]AEGIS[/div]
[div=display: flex; justify-content: space-evenly;][div class=block]mobile-friendly[/div][div class=block]ic post[/div][/div]
[div class=scrollInfo]
link: code available here
[br][/br]
An accompanying in-character posting code for the sheet above. Add paragraph breaks with: [br][/br][br][/br]. Again, it's friendly to my mobile so please let me know if it isn't friendly on yours!
[/div]
[/div]
[/div][/nobr]

[nobr]
[class=variables]
--color: #b7cfda;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important
[/class]

[class=container]
width: 530px;
height: 300px;
display: flex;
margin: auto;
[/class]

[class=left]
height: 300px;
width: 220px;
padding: 15px;
box-sizing: border-box;
font-size: 13px;
overflow: hidden;
[/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=imgContainer]
width: 100%;
height: 90px;
display: flex;
justify-content: space-between;
margin: 10px auto;
[/class]

[class=img]
width: 90px;
height: 90px;
background-size: cover;
background-position: 50% 50%;
filter: saturate(70%);
[/class]

[class=tag]
display: inline-block;
border-bottom: 1px solid var(--color);
height: 15px;
font-size: 10px;
text-transform: uppercase;
[/class]

[class=right]
width: 280px;
height: 300px;
display: flex;
flex-direction: column;
overflow: hidden;
font-size: 12px;
text-align: justify;
padding: 10px;
box-sizing: border-box;
[/class]

[class=leftTagContainer]
width: 100%;
height: 100px;
[/class]

[class=scroll]
width: 100%;
padding-right: 50px;
height: 100%;
overflow-y: scroll;
[/class]

[div class=variables]
[div class=container]
[div class=left]
[div class=imgContainer]
[div class=img style="background-image: url('https://66.media.tumblr.com/e9091855654b087fbd71451efd42d5e0/tumblr_inline_p2nvv5YUPv1rbm3wd_500.gif')"][/div]
[div class=img style="background-image: url('https://66.media.tumblr.com/8a4cb62f9175e9d26014d9ac0a56913d/tumblr_inline_p2nvwc7n2H1rbm3wd_500.gif')"][/div]
[/div]

[div class=name]NAME HERE.[/div]

[div class=leftTagContainer]
[div class=scroll]
[div class=tag]location[/div] a cool place (this will scroll if it has to)
[br][/br]
[div class=tag]interacts[/div] n/a.
[br][/br]
[div class=tag]tags[/div] n/a.
[br][/br]
[div class=tag]outfit[/div] here.
[/div]
[/div]
[/div]

[div class=right]
[div class=scroll]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit pulvinar sem, eget eleifend lacus porta convallis. Vivamus vel sapien libero. Duis efficitur eu arcu quis consectetur. Morbi id urna id felis aliquet scelerisque. Nulla sodales ligula a metus consequat, ac viverra lacus auctor. Morbi vulputate interdum convallis. Donec consequat maximus magna, at tincidunt mauris gravida vel. Nunc eu interdum urna. Pellentesque blandit ipsum eget urna venenatis, vitae molestie orci aliquet. Suspendisse potenti. Mauris tellus nunc, viverra eget sem ac, pharetra ornare odio. Duis dapibus velit sit amet arcu consequat posuere. Ut tempor quam turpis, at dictum dui interdum eu. Phasellus quis viverra quam. Maecenas eros turpis, semper vel enim vel, fermentum semper lectus.

Aliquam erat volutpat. Sed mattis mi vitae justo interdum, in placerat orci venenatis. Praesent porta et quam nec venenatis. Etiam tempor faucibus lorem vitae posuere. Mauris sit amet metus maximus, vulputate tortor eget, condimentum nibh. Vivamus efficitur libero at malesuada euismod. Curabitur congue lorem in leo aliquam feugiat. Ut a porta lorem. Sed condimentum neque nisi, sit amet finibus lorem dapibus a. In in quam sit amet ipsum varius pellentesque vitae ut mauris. In hendrerit mi ante, sed pharetra turpis fringilla eu. Phasellus non volutpat dolor. Donec et efficitur nibh. Mauris congue consequat commodo. Praesent in tellus posuere, volutpat massa id, dapibus erat.

Etiam ultricies massa metus. Nunc in elementum quam. In hac habitasse platea dictumst. Maecenas fringilla eu nisi sed elementum. Aliquam dictum pretium commodo. Suspendisse aliquet nisl eu justo pellentesque, eu suscipit arcu tempor. Suspendisse tincidunt sed lorem id gravida. Praesent aliquet dolor a nibh tristique luctus. Vivamus porttitor viverra erat quis gravida. Morbi a turpis et tortor imperdiet cursus. Aliquam tempus orci erat, in lacinia mauris cursus in. Curabitur dapibus rutrum rutrum. Nullam porttitor ipsum fringilla quam vehicula fermentum. Quisque vulputate metus sem, sit amet pulvinar diam congue vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Suspendisse sed lorem eget est vestibulum accumsan scelerisque vitae nulla. Vestibulum vestibulum rhoncus sodales. Mauris vitae facilisis nisi. Vivamus non tincidunt turpis, eget faucibus est. Suspendisse erat neque, finibus ultrices metus eget, suscipit finibus magna. Integer dignissim eros sem, et dapibus dui vulputate quis. Donec augue metus, scelerisque nec commodo et, egestas sit amet nulla. Integer vel nisi ullamcorper nunc euismod egestas in blandit nulla. Vestibulum id hendrerit nulla.

Nulla facilisi. Nullam tempor consectetur sem tincidunt ornare. Integer dapibus sodales ante, a cursus urna dignissim sed. Nullam blandit leo id risus congue blandit. In feugiat accumsan elit ac finibus. In auctor lobortis sem quis iaculis. Mauris at vehicula ipsum. Curabitur eu rhoncus magna, ut accumsan metus. Fusce imperdiet, orci vitae egestas maximus, tortor felis sagittis velit, id pharetra dolor sapien a augue. Etiam posuere sit amet arcu ut sollicitudin. Praesent cursus scelerisque augue, in tincidunt quam malesuada at. Curabitur eget aliquam ex. Proin ut tempus tellus, sit amet imperdiet diam.
[/div]
[/div]
[/div]
[/div]
[div=font-size: 9px; text-align: center; opacity: 0.7;]coded by shady.[/div]
[/nobr]

hello! I'm new to this site and I've never done this before. May I use this layout for my first roleplay group?

 

[ShadyAce]

hello! I'm new to this site and I've never done this before. May I use this layout for my first roleplay group?

sorry for the late response, but of course and welcome to the site! everything in this thread is free for you to use (as long as you keep the credit). if you need any help with the layout don't be afraid to message me!

 

[ShadyAce]

[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]

 

[jasmichelle]

Love all of these! My fave codes to use! Thank you for making these!

 

[ShadyAce]

Love all of these! My fave codes to use! Thank you for making these!

thank you so much!! i'm so so glad you like them, this comment really warmed my heart

 

[DarkiusHeavenstein]

[nobr]
[class=containerInfo]
width: 340px;
display: flex;
margin: auto;
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=block]
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]02.[/div][/div]

[div class=codeInfo]
[div class=codeName]AEGIS[/div]
[div=display: flex; justify-content: space-evenly;][div class=block]mobile-friendly[/div][div class=block]ic post[/div][/div]
[div class=scrollInfo]
link: code available here
[br][/br]
An accompanying in-character posting code for the sheet above. Add paragraph breaks with: [br][/br][br][/br]. Again, it's friendly to my mobile so please let me know if it isn't friendly on yours!
[/div]
[/div]
[/div][/nobr]

[nobr]
[class=variables]
--color: #b7cfda;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important
[/class]

[class=container]
width: 530px;
height: 300px;
display: flex;
margin: auto;
[/class]

[class=left]
height: 300px;
width: 220px;
padding: 15px;
box-sizing: border-box;
font-size: 13px;
overflow: hidden;
[/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=imgContainer]
width: 100%;
height: 90px;
display: flex;
justify-content: space-between;
margin: 10px auto;
[/class]

[class=img]
width: 90px;
height: 90px;
background-size: cover;
background-position: 50% 50%;
filter: saturate(70%);
[/class]

[class=tag]
display: inline-block;
border-bottom: 1px solid var(--color);
height: 15px;
font-size: 10px;
text-transform: uppercase;
[/class]

[class=right]
width: 280px;
height: 300px;
display: flex;
flex-direction: column;
overflow: hidden;
font-size: 12px;
text-align: justify;
padding: 10px;
box-sizing: border-box;
[/class]

[class=leftTagContainer]
width: 100%;
height: 100px;
[/class]

[class=scroll]
width: 100%;
padding-right: 50px;
height: 100%;
overflow-y: scroll;
[/class]

[div class=variables]
[div class=container]
[div class=left]
[div class=imgContainer]
[div class=img style="background-image: url('https://66.media.tumblr.com/e9091855654b087fbd71451efd42d5e0/tumblr_inline_p2nvv5YUPv1rbm3wd_500.gif')"][/div]
[div class=img style="background-image: url('https://66.media.tumblr.com/8a4cb62f9175e9d26014d9ac0a56913d/tumblr_inline_p2nvwc7n2H1rbm3wd_500.gif')"][/div]
[/div]

[div class=name]NAME HERE.[/div]

[div class=leftTagContainer]
[div class=scroll]
[div class=tag]location[/div] a cool place (this will scroll if it has to)
[br][/br]
[div class=tag]interacts[/div] n/a.
[br][/br]
[div class=tag]tags[/div] n/a.
[br][/br]
[div class=tag]outfit[/div] here.
[/div]
[/div]
[/div]

[div class=right]
[div class=scroll]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit pulvinar sem, eget eleifend lacus porta convallis. Vivamus vel sapien libero. Duis efficitur eu arcu quis consectetur. Morbi id urna id felis aliquet scelerisque. Nulla sodales ligula a metus consequat, ac viverra lacus auctor. Morbi vulputate interdum convallis. Donec consequat maximus magna, at tincidunt mauris gravida vel. Nunc eu interdum urna. Pellentesque blandit ipsum eget urna venenatis, vitae molestie orci aliquet. Suspendisse potenti. Mauris tellus nunc, viverra eget sem ac, pharetra ornare odio. Duis dapibus velit sit amet arcu consequat posuere. Ut tempor quam turpis, at dictum dui interdum eu. Phasellus quis viverra quam. Maecenas eros turpis, semper vel enim vel, fermentum semper lectus.

Aliquam erat volutpat. Sed mattis mi vitae justo interdum, in placerat orci venenatis. Praesent porta et quam nec venenatis. Etiam tempor faucibus lorem vitae posuere. Mauris sit amet metus maximus, vulputate tortor eget, condimentum nibh. Vivamus efficitur libero at malesuada euismod. Curabitur congue lorem in leo aliquam feugiat. Ut a porta lorem. Sed condimentum neque nisi, sit amet finibus lorem dapibus a. In in quam sit amet ipsum varius pellentesque vitae ut mauris. In hendrerit mi ante, sed pharetra turpis fringilla eu. Phasellus non volutpat dolor. Donec et efficitur nibh. Mauris congue consequat commodo. Praesent in tellus posuere, volutpat massa id, dapibus erat.

Etiam ultricies massa metus. Nunc in elementum quam. In hac habitasse platea dictumst. Maecenas fringilla eu nisi sed elementum. Aliquam dictum pretium commodo. Suspendisse aliquet nisl eu justo pellentesque, eu suscipit arcu tempor. Suspendisse tincidunt sed lorem id gravida. Praesent aliquet dolor a nibh tristique luctus. Vivamus porttitor viverra erat quis gravida. Morbi a turpis et tortor imperdiet cursus. Aliquam tempus orci erat, in lacinia mauris cursus in. Curabitur dapibus rutrum rutrum. Nullam porttitor ipsum fringilla quam vehicula fermentum. Quisque vulputate metus sem, sit amet pulvinar diam congue vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Suspendisse sed lorem eget est vestibulum accumsan scelerisque vitae nulla. Vestibulum vestibulum rhoncus sodales. Mauris vitae facilisis nisi. Vivamus non tincidunt turpis, eget faucibus est. Suspendisse erat neque, finibus ultrices metus eget, suscipit finibus magna. Integer dignissim eros sem, et dapibus dui vulputate quis. Donec augue metus, scelerisque nec commodo et, egestas sit amet nulla. Integer vel nisi ullamcorper nunc euismod egestas in blandit nulla. Vestibulum id hendrerit nulla.

Nulla facilisi. Nullam tempor consectetur sem tincidunt ornare. Integer dapibus sodales ante, a cursus urna dignissim sed. Nullam blandit leo id risus congue blandit. In feugiat accumsan elit ac finibus. In auctor lobortis sem quis iaculis. Mauris at vehicula ipsum. Curabitur eu rhoncus magna, ut accumsan metus. Fusce imperdiet, orci vitae egestas maximus, tortor felis sagittis velit, id pharetra dolor sapien a augue. Etiam posuere sit amet arcu ut sollicitudin. Praesent cursus scelerisque augue, in tincidunt quam malesuada at. Curabitur eget aliquam ex. Proin ut tempus tellus, sit amet imperdiet diam.
[/div]
[/div]
[/div]
[/div]
[div=font-size: 9px; text-align: center; opacity: 0.7;]coded by shady.[/div]
[/nobr]

Not here to nitpick or anything. But I see your coding being used often (as it should, because it is pretty) but this specific one is not mobile friendly for me. It could just be my phone though XD But the text gets cut off and I always have to switch my phone to desktop mode to read them. So just wanted to let you know! Again not to nitpick or anything, (I know my coding ain't mobile friendly a lot of times, so yeah... )

 

[ShadyAce]

Not here to nitpick or anything. But I see your coding being used often (as it should, because it is pretty) but this specific one is not mobile friendly for me. It could just be my phone though XD But the text gets cut off and I always have to switch my phone to desktop mode to read them. So just wanted to let you know! Again not to nitpick or anything, (I know my coding ain't mobile friendly a lot of times, so yeah... )

thank you so so much for letting me know! i'm always worried about if it works for everyone. i've now updated the code and it should be more mobile friendly? the preview and link to copy the code should both be updated.

 

[DarkiusHeavenstein]

thank you so so much for letting me know! i'm always worried about if it works for everyone. i've now updated the code and it should be more mobile friendly? the preview and link to copy the code should both be updated.

Yes! Fully mobile friendly for my phone as well!

 

[ShadyAce]

[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]04.[/div][/div]

[div class=codeInfo]
[div class=codeName]MINIMAL[/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]
I really love the simplicity of this one. It's not really 'new' though, I've had this sitting in my workshop for a while and I've only used it once or twice, so enjoy! Every single tab will scroll if your stuff goes over the height. Add paragraph breaks with: [br][/br][br][/br]. You can change the colour from this dark-gray/black if you want, especially if you're on dark mode and it's a little too hard to see (I think it's fine but I know everyone has their preferences!)
[/div]
[/div]
[/div][/nobr]

[nobr]
[class=variables]
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
--color: #141414;
[/class]

[class=container]
width: 350px;
display: flex;
margin: auto;
flex-direction: column;
justify-content: flex-start;
[/class]

[class=name]
font-size: 40px;
font-weight: 900;
line-height: 0.7;
color: var(--color);
[/class]

[class=tabsContainer]
width: 350px;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
[/class]

[class=title]
font-size: 20px;
border: 1px solid var(--color);
padding: 3px;
box-sizing: border-box;
line-height: 1;
letter-spacing: 2px;
transition: 1s;
[/class]

[class name=title state=hover]
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
background-color: var(--color);
color: white;
[/class]

[class=bigGap]
flex-grow: 3;
[/class]

[class=gap]
flex-grow: 2;
[/class]

[class=tab]
text-shadow: -1px -1px 0 var(--color), 1px -1px 0 var(--color), -1px 1px 0 var(--color), 1px 1px 0 var(--color);
font-size: 30px;
color: white;
transition: 1s;
flex-basis: auto;
[/class]

[class name=tab state=hover]
cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
color: var(--color);
[/class]

[class=contentContainer]
height: 350px;
width: 350px;
position: relative;
[/class]

[class=content]
height: 350px;
width: 350px;
opacity: 0;
position: absolute;
transition: 1s;
padding: 10px;
box-sizing: border-box;
font-size: 12px;
overflow: hidden;
[/class]

[class=scroll]
overflow-y: scroll;
padding-right: 40px;
width: 100%;
height: 100%;
[/class]

[class=bigImg]
height: 330px;
width: 330px;
background-image: url('https://img.buzzfeed.com/buzzfeed-static/static/2017-01/2/16/asset/buzzfeed-prod-web-11/sub-buzz-13797-1483392917-1.jpg?downsize=1040:*&output-format=auto&output-quality=auto');
background-size: cover;
[/class]

[class=tag]
width: auto;
height: 16px;
padding: 0px 2px 0px 2px;
display: inline-block;
border: 1px solid var(--color);
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;
[/class]

[class=show]
z-index: 1;
opacity: 1;
[/class]

[class=titleSelected]
background-color: var(--color);
color: white;
[/class]

[class=selected]
color: var(--color);
[/class]

[script class=title on=click]
addClass show contentHome
removeClass show content01
removeClass show content02
removeClass show content03

addClass titleSelected title
removeClass selected tab01
removeClass selected tab02
removeClass selected tab03
[/script]

[script class=tab01 on=click]
addClass show content01
removeClass show contentHome
removeClass show content02
removeClass show content03

addClass selected tab01
removeClass titleSelected title
removeClass selected tab02
removeClass selected tab03
[/script]

[script class=tab02 on=click]
addClass show content02
removeClass show contentHome
removeClass show content01
removeClass show content03

addClass selected tab02
removeClass titleSelected title
removeClass selected tab01
removeClass selected tab03
[/script]

[script class=tab03 on=click]
addClass show content03
removeClass show contentHome
removeClass show content01
removeClass show content02

addClass selected tab03
removeClass titleSelected title
removeClass selected tab01
removeClass selected tab02
[/script]


[div class=variables]
[div class=container]
[div class=name]name here[/div]
[div class=tabsContainer]
[div class="title titleSelected"]ROLE?[/div]
[div class=bigGap][/div]
[div class="tab tab01"]01.[/div]
[div class=gap][/div]
[div class="tab tab02"]02.[/div]
[div class=gap][/div]
[div class="tab tab03"]03.[/div]
[/div]

[div class=contentContainer]
[div class="content contentHome show"]
[div class=bigImg][/div]
[/div]

[div class="content content01"]
[div class=scroll]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/fddf535c408ac6eeba44dcd97959fa64/tumblr_inline_pdtkc8rBD31uzz54f_1280.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/b45b8e6e2e93dc02f32ca9c96503cd3d/tumblr_inline_pdtkcqwvia1uzz54f_1280.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/1ee8fc0cbf3b7f25ed687c554d6a3674/tumblr_inline_pdtkct5uyG1uzz54f_1280.gif');"][/div]
[/div]
[div class=tag]name[/div] name here
[br][/br]
[div class=tag]nickname[/div] etc.
[br][/br]
[div class=tag]age[/div]
[br][/br]
[div class=tag]pob[/div]
[br][/br]
[div class=tag]dob[/div]
[br][/br]
[div class=tag]input[/div] output
[br][/br]
[div class=tag]input[/div] output
[/div]
[/div]

[div class="content content02"]
[div class=scroll]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/3e555714a27f9e21f7b903f3a2174465/tumblr_inline_pdtjzwRbnu1uzz54f_1280.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/a3de78ad594c425c8be85a3ddd3229b4/tumblr_inline_pdtjzf0NYd1uzz54f_1280.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/a9c1e1018f92e73cad51e1a1ace298e4/tumblr_inline_pdtk01872k1uzz54f_1280.gif');"][/div]
[/div]
[div class=tag]vices[/div] (4+)
[br][/br]
[div class=tag]virtues[/div] (4+)
[br][/br]
[div class=tag]surely by now[/div] you get the idea
[/div]
[/div]

[div class="content content03"]
[div class=scroll]
[div class=imgSmallContainer]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/e2019bc5f08d13b8da0432ae1deca7c2/tumblr_inline_pcdp1dkhJP1uzz54f_540.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/01d012e794a3b6ae7d21406be18a5aec/tumblr_inline_pcdp1eetJb1uzz54f_540.gif');"][/div]
[div class=imgSmall style="background-image: url('https://66.media.tumblr.com/87989a3cbfcf06fb008336867a7f2be3/tumblr_inline_pcdp1gn1vv1uzz54f_540.gif');"][/div]
[/div]
[div class=tag]theme song[/div]
[br][/br]
[div class=tag]misc[/div]
[/div]
[/div]

[/div]
[/div]
[/div]
[div=font-size: 9px; text-align: center; opacity: 0.7;]coded by ShadyAce .[/div]
[/nobr]

 

[The Imperial Flame]

I am using this code and I just wanted to thank you a million times for how easy it was to format. You are so talented! ShadyAce

 

[ShadyAce]

I am using this code and I just wanted to thank you a million times for how easy it was to format. You are so talented! @ShadyAce

i didn't get a notification for this, ahh! thank you so much!! i do put in a lot of effort to keep my codes tidy and as easy to understand as possible (mostly for my own sanity, haha). i'm glad you love them and my work!!