• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource yucksie (uxie's codes)

[div class=container]
aster asked me for a tutorial on how to do hovers so i thought i'd put it here too
im not very good at explaining but yes i hope u get the general idea


feel free to skip down to "tutorial starts here" if u already know how classes work


so first off – classes
to put it very simply, they're kinda like
neater divs, in a sense. imagine if u were studying for an exam in history or something and it was always the same topic but u make a single note each year,, that's kinda like having individual divs
with classes you can sorta reference them each time. it maybe makes it easier on the eyes???? im probably not explaining this right at all but i dont actually know shit abt coding i just google "function css" everytime so yea
thats a good backup if you dont get how a function works cause most of bbcode+ are css/html/javascript things im p sure

but yeah so anyways CLASSEs. while they make coding a lot easier to look at, they also allow u to add in functionalities like scripts n hovers (!!!) big wowie. scripts are a whole other story but like, hoenstly once u get the hang of it it gets way easier from there,,, honestly im still like ????? abt so many functions but yes. eventually u will become a god with enough time n practice

so to start it off, you're gonna want to make a class for ur img. it'll basc look like any image div but you can line break within the class so instead of:

[div=height:50px;width:50px;background:url('https://data.whicdn.com/images/289553123/large.jpg');margin:auto;background-size:100%;][/div]

you have:

[class=img]
height:150px;
width:150px;
background:url('https://data.whicdn.com/images/289553123/large.jpg');
margin:auto;
background-size:100%;
position:relative;
[/class]

to have ur class appear in the actual code itself, you reference it with [div class=nameofclass][/div] btw you can name ur class like almost anything as long as there r no spaces i think??? iirc underscores work too but
so referencing it,

[div class=img][/div]

it's basc the same thing as if you wrote out the whole div. (: useful if you're going to be using the same code multiple times. so that's a simple class summary ig
btw to keep things neat, i'd recommend keeping all your classes below your actual code itself where you're referencing everything, within either a tag which removes all line breaks and thus removes extra white space, or a [div=display:none][/div] which basc hides it. both work, lyro recommended the nobr one but its up to u (:

--tutorial starts here

so we have our cool image from earlier here

[div class=img][/div]

now to make a hover class!
basc you make a different class to with the components that you want to show when you hover over the image
you can put nearly anything in, change an image or have a colour or text show up, whatever yknow. go crazy
going simple n for aster's sake bc this what they asked for
the example hover i'll have is one a change in image.

so my class is gonna look like this:
[class=imghover]
height:150px;
width:150px;
background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg');
background-size:100%;
position:relative;
[/class]


and here it is below our original kermit. we'll call this one kermit 2 and the other one kermit 1.

[div class=img][/div]
[div class=imghover][/div]

note you can use position:absolute; instead, im just using position:relative; here bc im too lazy to make an extra container just for these imgs. when a div has position:absolute; added to it, it kinda ignores all other divs and goes where it pleases. having position:relative; also works as well, but i prefer position:absolute; just bc it makes life easier bc i dont have to add top: or left: values as much lol.
take note that position:absolute; on its own may fuck up a lot bc it rlly does go as it pleases and it'll be kinda sitting on the page regardless of what u tell it
to control this, what i usually do anyways to work w dimensions is to have a container box with position:relative; people usually call this the parent div
so bc the parent div has position:relative; the child div kinda takes it on and will only have position:absolute; within the position:relative; div. is this confusing? if it is just use position:relative; LOL

so anyways, now we gotta shift imghover onto img. w position:relative; values. using negative values in left: or top: makes it go in the opposite direction, aka upwards, which is what we want now. now we see kermit 2 slowly eat up kermit 1.

[div class=img]
[div class=imghover]
[/div][/div]
[div class=img]
[div class=imghover]
[/div][/div]
[div class=img]
[div class=imghover]
[/div][/div]
for this one i had to move it up 150px, which makes sense bc thats how big the photos are. so now that kermit 2 has taken over kermit 1, we need to actlly make him hover. so to do that, we reduce his opacity to 0 by adding opacity:0; to his class (imghover). bye kermit 2. hello kermit 1.

[div class=img][/div]
[div class=imghover]
[/div]
now how do we get kermit 2 to show up when we hover over kermit 1?
since kermit 2 is still where kermit 1 is, just that we cant see him, we just have to add a hover state to his class, like this:
[class name=imghover state=hover]
just dump that right below ur imghover div

and within that, we're gonna put in what we want to change about kermit 2 when we hover over. we want kermit 2 to appear, so we add in opacity:1; , like so:
[class name=imghover state=hover]
opacity:1;
[/class]
if you want kermit 2 to appear very suddenly as a surprise, you can leave it as it is, but most of the time we want a smoother transition. just for this one, we're gonna specify a transition timing with transition: (duration);
so let's have kermit 2 appear gradually after half a second. we add that in.

[class name=imghover state=hover]
opacity:1;
transition:1s;
[/class]

to allow kermit 2 to have as smooth a departure as his arrival, we're gonna pop that same transition:1s; into his class div as well, so he leaves in style as well. so right now, your classes should look like this.

[class=img]
height:150px;
width:150px;
background:url('https://data.whicdn.com/images/289553123/large.jpg');
background-size:100%;
[/class]

[class=imghover]
height:150px;
width:150px;
background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg');
background-size:120%;
position:relative;
top:-150px;
opacity:0;
transition:1s;
[/class]

[class name=imghover state=hover]
opacity:1;
transition:0.5s;
[/class]


pretty fine and dandy. all that should look like this when you plug it in:

[div class=img][/div][div class=imghover2][/div] remember to make use of the preview button when you're changing this to fit whatever youre making to make sure everything's good. preview button is every bbcoder's best friend (:
there r a lot of different divs u can do, ones that kinda zero into ur picture, or hover in as a colour or make some cool text appear, but this is the very basic. figuring out the others shouldn't be too hard from here on out

hope this helped and im sorry i type sO DAMN MUCH LMAO. i hope it was at least entertaining. that's all from kermits 1 and 2 thank u and goodbye hope u learnt something from this long ass read xx

Aster Aster here u go this is for u


[/div]

[class=container] overflow-y:scroll; height:500px; position:relative; margin:auto; width:60%; padding:10px; [/class] [class=img] height:150px; width:150px; background:url('https://data.whicdn.com/images/289553123/large.jpg'); background-size:100%; [/class] [class=imghover] height:150px; width:150px; background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg'); background-size:120%; position:relative; [/class] [class=imghover2] height:150px; width:150px; background:url('https://pm1.narvii.com/6535/042b2eb6487417c009fa1a46dddd164570dbbb80_hq.jpg'); background-size:120%; position:relative; top:-150px; opacity:0; transition:1s; [/class] [class name=imghover2 state=hover] opacity:1; transition:1s; [/class]
 
Last edited:
[class=codeinfocontainer] --color-1: #D6B1AB; --color-2: #F7E1E4; --color-3: #FDC9D6; --color-4: #2a2b28; width:28%; height:25vh; background-color: var(--color-1); margin:auto; display:flex; flex-flow: row wrap; box-sizing:border-box; padding:10px; [/class] [class name=codeinfocontainer maxWidth="500px"] width:55vw; height:52vh; flex-flow: column; padding-bottom:12px; [/class] [class name=codeinfoleftside] height:100%; width:38%; box-sizing:border-box; padding:5px; position:relative; [/class] [class name=codeinfoleftside maxWidth="500px"] height:58%; width:100%; [/class] [class=codeinfotrademark] font-size:9px; color: var(--color-2); float:right; position:relative; top:-7px; left:4px; [/class] [class=codeinfoicon] height:75px; width:75px; border:3px solid var(--color-3); background:url('https://www.rpnation.com/data/avatars/l/30/30903.jpg?1546322140'); background-size:100%; border-radius:50%; margin:auto; [/class] [class=codeinfotitle] font-size:13px; text-transform:uppercase; color: var(--color-1); text-shadow:2px 2px var(--color-3); text-align:center; margin-top:2%; font-weight:bold; letter-spacing:1px; [/class] [class name=codeinfotitle maxWidth="500px"] font-size:15px; [/class] [class=codeinfotagcon] height:33%; width:100%; display:flex; flex-flow:row wrap; line-height:120%; text-align:center; margin-top:5%; [/class] [class name=codeinfotagcon maxWidth="500px"] min-height:20%; max-height:35%; width:100%; [/class] [class=codeinfotag] background-color: var(--color-2); padding:2px; padding-left:3px; padding-right:3px; font-size:10px; letter-spacing:0.8px; border-radius:3px; color: var(--color-1); display:inline-block; color:black; box-sizing:border-box; height:15px; line-height:120%; [/class] [class name=codeinfotag maxWidth="500px"] font-size:10px; [/class] [class=codeinfotext] height:82%; width:55%; margin-left:5%; background-color: var(--color-2); align-self: center; [/class] [class name=codeinfotext maxWidth="500px"] height:43.5%; width:100%; align-self:flex-start; margin-left:0%; margin-top:0%; [/class] [class=codeinfotextcontent] height:85%; width:100%; padding:5px; box-sizing:border-box; overflow:hidden; font-size:10px; color: var(--color-4); text-align:justify; [/class] [class=codeinfoscroll] height:100%; width:100%; padding-right:80px; overflow-y:scroll; [/class] [class=codeinfosignature] height:15%; width:100%; font-size:18px; color: var(--color-3); text-shadow: 1.5px 1.5px var(--color-1); letter-spacing:1.5px; text-align:right; box-sizing:border-box; padding-right:5px; font-weight:bold; font-style:oblique; line-height:90%; [/class] [class=codeinfolink] float:left; font-size:11px; font-style:normal; font-weight:normal; margin-left: 2%; text-shadow:none; margin-top:1%; letter-spacing:normal; background-color: var(--color-3); padding-right:4px; padding-left:4px; border-radius:1px; [/class] [class name=codeinfolink maxWidth="539px"] font-size:10px; [/class] [div class=codeinfocontainer][div class=codeinfoleftside] [div class=codeinfotrademark]uxie ®[/div] [div class=codeinfoicon][/div] [div class=codeinfotitle]code features[/div] [div class=codeinfotagcon] [div class=codeinfotag]mobile-friendly[/div] [div class=codeinfotag]animation[/div] [div class=codeinfotag]scrolls[/div] [div class=codeinfotag]cool button[/div] [div class=codeinfotag]basic[/div] [/div] [/div][div class=codeinfotext][div class=codeinfotextcontent][div class=codeinfoscroll]this code is free to use like all other codes unless otherwise stated as long as you do not remove the credit. i'd also appreciate it if you leave a like ♡

really simple/basic cs/ic code i made for a friend! mobile/tablet friendly!
open the code by clicking that funny little leaf thing in the middle. kinda like unlocking something lmao

little sad part is that depending on how fast your internet is? the picture covering the code might not load and it just. ruins the animation and the whole unlocking thing. it's there in function but ): yknow

[/div][/div][div class=codeinfosignature][div class=codeinfolink]link[/div]– uxie[/div]
[/div]
[/div]

[div class=container][div class=bgimg]
[div class=open][div class=opentext][/div][/div][/div]

[div class=textbg][/div][div class=textbox]


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim convallis nunc, vitae placerat ipsum egestas ut. Suspendisse ornare, quam gravida feugiat hendrerit, dolor dui maximus tortor, sit amet commodo nisi erat a ipsum. Fusce in iaculis ipsum, in cursus ligula. Sed pulvinar justo vel risus dictum vulputate. Ut mollis sem eu suscipit dictum. Aliquam ac nulla sit amet est ullamcorper elementum eu eu nisi. Praesent pellentesque diam quis tellus faucibus, vitae dignissim justo aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas vestibulum sapien, vel ultricies lectus tincidunt sed. Sed convallis, turpis quis rhoncus tristique, nibh elit interdum ipsum, sit amet varius tortor enim sit amet nulla. Integer elementum rutrum sem. Mauris maximus tellus at euismod aliquam.

Integer lorem tellus, iaculis in iaculis vehicula, interdum eget nibh. Sed finibus eu ipsum eget eleifend. Duis laoreet erat mi, lacinia imperdiet ex feugiat ut. Integer est justo, posuere eget tincidunt vel, fermentum nec eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque id velit hendrerit nisi condimentum laoreet. Mauris tempor dapibus tellus quis consequat.

Nulla arcu lorem, pretium vitae bibendum ac, sollicitudin sit amet leo. Nunc faucibus non sem at accumsan. Sed vitae condimentum nibh. Fusce sit amet condimentum diam. Donec sit amet eros mollis, elementum sem sit amet, maximus mi. Integer lobortis sapien vel erat consectetur, non aliquam metus bibendum. Vivamus nec neque faucibus, mattis orci nec, fermentum neque. Curabitur sem mauris, dignissim tempus sollicitudin ut, tempus ut nibh. Vestibulum sed massa orci. Maecenas sollicitudin eu dolor et pharetra. Donec lacinia ipsum in ligula varius condimentum.
[/div]
[/div]
⠀♡coded by uxie♡


[class=container] height:400px; width:320px; margin:auto; position:relative; overflow:hidden; [/class] [class=textbg] height:400px; width:320px; background:url('https://data.whicdn.com/images/304709469/large.jpg'); background-size:130%; opacity:0.3; position:absolute; top:0px; left:-1px; [/class] [class=textbox] height:390px; width:310px; position:absolute; top:0px; left:0px; overflow-y:scroll; padding:5px; [/class] [class name=textbox] font-size:12px; text-align:justify; color:black; [/class] [class=bgimg] height:400px; width:320.5px; position:absolute; left:-0.5px; background:url('https://78.media.tumblr.com/fb0fc803387c9eccd01a904f7787448f/tumblr_ov2f1hbQoD1w6n4tao1_500.jpg'); background-size:101%; z-index:6; [/class] [class=open] height:70px; width:70px; border:5px solid #fff0b7; background-color:white; border-radius:50%; margin:auto; position:relative; top:140px; opacity:0.95; cursor:pointer; z-index:6; [/class] [class=opentext] font-size:30px; color:#92dba5; text-align:center; position:relative; top:12.5px; z-index:6; [/class] [script class=open on=click] addClass slideUp1 bgimg addClass slideUp2 open [/script] [class=slideUp1] animation-name: {post_id}slideUp; animation-duration:1.7s; animation-fill-mode:forwards; [/class] [class=slideUp2] animation-name: {post_id}slideUp; animation-duration:5.7s; animation-fill-mode:forwards; [/class] [animation=slideUp] [keyframe=0] transform: translateY(0px); [/keyframe] [keyframe=100] transform: translateY(-450px); [/keyframe] [/animation]
 
Last edited:
[class=codeinfocontainer] --color-1: #D6B1AB; --color-2: #F7E1E4; --color-3: #FDC9D6; --color-4: #2a2b28; width:28%; height:25vh; background-color: var(--color-1); margin:auto; display:flex; flex-flow: row wrap; box-sizing:border-box; padding:10px; [/class] [class name=codeinfocontainer maxWidth="500px"] width:55vw; height:52vh; flex-flow: column; padding-bottom:12px; [/class] [class name=codeinfoleftside] height:100%; width:38%; box-sizing:border-box; padding:5px; position:relative; [/class] [class name=codeinfoleftside maxWidth="500px"] height:58%; width:100%; [/class] [class=codeinfotrademark] font-size:9px; color: var(--color-2); float:right; position:relative; top:-7px; left:4px; [/class] [class=codeinfoicon] height:75px; width:75px; border:3px solid var(--color-3); background:url('https://www.rpnation.com/data/avatars/l/30/30903.jpg?1546322140'); background-size:100%; border-radius:50%; margin:auto; [/class] [class=codeinfotitle] font-size:13px; text-transform:uppercase; color: var(--color-1); text-shadow:2px 2px var(--color-3); text-align:center; margin-top:2%; font-weight:bold; letter-spacing:1px; [/class] [class name=codeinfotitle maxWidth="500px"] font-size:15px; [/class] [class=codeinfotagcon] height:33%; width:100%; display:flex; flex-flow:row wrap; line-height:120%; text-align:center; margin-top:5%; [/class] [class name=codeinfotagcon maxWidth="500px"] min-height:20%; max-height:35%; width:100%; [/class] [class=codeinfotag] background-color: var(--color-2); padding:2px; padding-left:3px; padding-right:3px; font-size:10px; letter-spacing:0.8px; border-radius:3px; color: var(--color-1); display:inline-block; color:black; box-sizing:border-box; height:15px; line-height:120%; [/class] [class name=codeinfotag maxWidth="500px"] font-size:10px; [/class] [class=codeinfotext] height:82%; width:55%; margin-left:5%; background-color: var(--color-2); align-self: center; [/class] [class name=codeinfotext maxWidth="500px"] height:43.5%; width:100%; align-self:flex-start; margin-left:0%; margin-top:0%; [/class] [class=codeinfotextcontent] height:85%; width:100%; padding:5px; box-sizing:border-box; overflow:hidden; font-size:10px; color: var(--color-4); text-align:justify; [/class] [class=codeinfoscroll] height:100%; width:100%; padding-right:80px; overflow-y:scroll; [/class] [class=codeinfosignature] height:15%; width:100%; font-size:18px; color: var(--color-3); text-shadow: 1.5px 1.5px var(--color-1); letter-spacing:1.5px; text-align:right; box-sizing:border-box; padding-right:5px; font-weight:bold; font-style:oblique; line-height:90%; [/class] [class=codeinfolink] float:left; font-size:11px; font-style:normal; font-weight:normal; margin-left: 2%; text-shadow:none; margin-top:1%; letter-spacing:normal; background-color: var(--color-3); padding-right:4px; padding-left:4px; border-radius:1px; [/class] [class name=codeinfolink maxWidth="539px"] font-size:10px; [/class] [div class=codeinfocontainer][div class=codeinfoleftside] [div class=codeinfotrademark]uxie ®[/div] [div class=codeinfoicon][/div] [div class=codeinfotitle]code features[/div] [div class=codeinfotagcon] [div class=codeinfotag]NOT mobile-friendly[/div] [div class=codeinfotag]tabs[/div] [div class=codeinfotag]peek scrolls[/div] [div class=codeinfotag]aesthetic???[/div] [div class=codeinfotag]janky[/div] [/div] [/div][div class=codeinfotext][div class=codeinfotextcontent][div class=codeinfoscroll]this code is free to use like all other codes unless otherwise stated as long as you do not remove the credit. i'd also appreciate it if you leave a like ♡

this code was adapted from a tumblr theme by eggdesigns
their codes are actually super pretty! !! check them out

this code is supposed to be like. aesthetic and cute kinda. i like it but i'll probably never use it
it takes like. forever to load and the functionality isn't really there but
the design is !! i hope

the pictures also take a while to load bc this code is MASSIVE there r so many classes fhdjshkjf

hope you like it !!

[/div][/div][div class=codeinfosignature][div class=codeinfolink]link[/div]– uxie[/div]
[/div]
[/div]

[div class=container][div class=milktop][div class=milktoptext] name here [/div][/div] [div class=milkbridge] [div class=optionbox] [div class=option1bg][/div][div class=option1][/div][div class=option2bg][/div][div class=option2][/div][div class=option3bg][/div][div class=option3][/div]
[/div]
[/div] [div class=milkbody][div class=placeholderbg][div class=placeholder]♥ 桜ミルク ♥[div class=instructions]click the flowers[/div]
[/div][/div]
[div class=tab1 style=display:none][div class=tab1scroll]
サクラ


tab1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac tortor et neque consequat sollicitudin. Curabitur vestibulum purus eu metus tincidunt varius. Nulla tincidunt arcu a sapien fermentum, sed iaculis felis vestibulum. Pellentesque porta quis lorem quis vehicula. Cras rutrum posuere sem, ac finibus felis imperdiet sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis diam eleifend, malesuada libero eu, ornare magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut massa ac lacus venenatis pulvinar. Maecenas bibendum id dui vel volutpat.

Aliquam erat volutpat. Ut tincidunt laoreet auctor. Proin tincidunt nisl in eros pellentesque, id ultrices risus consequat. Pellentesque pretium velit ac erat iaculis, et rutrum magna feugiat. Quisque non efficitur tortor, sed sollicitudin arcu. Quisque ultrices orci ac ultricies ullamcorper. Mauris ex velit, malesuada rhoncus enim lacinia, lobortis aliquet est. Maecenas sollicitudin eros diam, eu ultricies elit congue nec. Suspendisse nec euismod tortor. Quisque accumsan sem sit amet arcu pretium efficitur. Donec auctor accumsan risus, at ullamcorper nunc pulvinar nec. Quisque quis arcu neque.

Morbi pellentesque, nunc sit amet posuere ullamcorper, nisl lacus tincidunt justo, et consectetur dolor mi ac massa. Donec a odio non justo iaculis aliquet id nec nisi. Aenean imperdiet mi dui, id egestas magna laoreet quis. Donec ullamcorper, elit sed maximus tincidunt, elit leo gravida turpis, quis viverra sem sapien luctus augue. Donec non ultrices purus. Mauris viverra tortor vitae turpis condimentum tempor. Phasellus tempus convallis odio vitae consectetur. Sed maximus, purus ut viverra ultricies, felis metus ultrices purus, id bibendum libero justo nec magna. Quisque sit amet sem elementum, bibendum orci ut, vestibulum metus. Cras cursus dolor ante, eget egestas justo mollis non. Pellentesque eu venenatis dui, vitae tempus dui. Integer ullamcorper felis ut arcu blandit, sit amet congue dolor faucibus. Donec nec erat in leo pharetra dapibus. In bibendum dui vel mauris feugiat, sagittis auctor enim sollicitudin. Proin venenatis sed tortor eget maximus. Nam suscipit purus eget velit posuere, vitae imperdiet nibh rutrum.
[/div][/div] [div class=tab2 style=display:none][div class=tab2scroll]




tab2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac tortor et neque consequat sollicitudin. Curabitur vestibulum purus eu metus tincidunt varius. Nulla tincidunt arcu a sapien fermentum, sed iaculis felis vestibulum. Pellentesque porta quis lorem quis vehicula. Cras rutrum posuere sem, ac finibus felis imperdiet sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis diam eleifend, malesuada libero eu, ornare magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut massa ac lacus venenatis pulvinar. Maecenas bibendum id dui vel volutpat.

Aliquam erat volutpat. Ut tincidunt laoreet auctor. Proin tincidunt nisl in eros pellentesque, id ultrices risus consequat. Pellentesque pretium velit ac erat iaculis, et rutrum magna feugiat. Quisque non efficitur tortor, sed sollicitudin arcu. Quisque ultrices orci ac ultricies ullamcorper. Mauris ex velit, malesuada rhoncus enim lacinia, lobortis aliquet est. Maecenas sollicitudin eros diam, eu ultricies elit congue nec. Suspendisse nec euismod tortor. Quisque accumsan sem sit amet arcu pretium efficitur. Donec auctor accumsan risus, at ullamcorper nunc pulvinar nec. Quisque quis arcu neque.

Morbi pellentesque, nunc sit amet posuere ullamcorper, nisl lacus tincidunt justo, et consectetur dolor mi ac massa. Donec a odio non justo iaculis aliquet id nec nisi. Aenean imperdiet mi dui, id egestas magna laoreet quis. Donec ullamcorper, elit sed maximus tincidunt, elit leo gravida turpis, quis viverra sem sapien luctus augue. Donec non ultrices purus. Mauris viverra tortor vitae turpis condimentum tempor. Phasellus tempus convallis odio vitae consectetur. Sed maximus, purus ut viverra ultricies, felis metus ultrices purus, id bibendum libero justo nec magna. Quisque sit amet sem elementum, bibendum orci ut, vestibulum metus. Cras cursus dolor ante, eget egestas justo mollis non. Pellentesque eu venenatis dui, vitae tempus dui. Integer ullamcorper felis ut arcu blandit, sit amet congue dolor faucibus. Donec nec erat in leo pharetra dapibus. In bibendum dui vel mauris feugiat, sagittis auctor enim sollicitudin. Proin venenatis sed tortor eget maximus. Nam suscipit purus eget velit posuere, vitae imperdiet nibh rutrum.
[/div][/div] [div class=tab3 style=display:none][div class=tab3scroll]
バナーナー

ストローブレ


tab3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac tortor et neque consequat sollicitudin. Curabitur vestibulum purus eu metus tincidunt varius. Nulla tincidunt arcu a sapien fermentum, sed iaculis felis vestibulum. Pellentesque porta quis lorem quis vehicula. Cras rutrum posuere sem, ac finibus felis imperdiet sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis diam eleifend, malesuada libero eu, ornare magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ut massa ac lacus venenatis pulvinar. Maecenas bibendum id dui vel volutpat.

Aliquam erat volutpat. Ut tincidunt laoreet auctor. Proin tincidunt nisl in eros pellentesque, id ultrices risus consequat. Pellentesque pretium velit ac erat iaculis, et rutrum magna feugiat. Quisque non efficitur tortor, sed sollicitudin arcu. Quisque ultrices orci ac ultricies ullamcorper. Mauris ex velit, malesuada rhoncus enim lacinia, lobortis aliquet est. Maecenas sollicitudin eros diam, eu ultricies elit congue nec. Suspendisse nec euismod tortor. Quisque accumsan sem sit amet arcu pretium efficitur. Donec auctor accumsan risus, at ullamcorper nunc pulvinar nec. Quisque quis arcu neque.

Morbi pellentesque, nunc sit amet posuere ullamcorper, nisl lacus tincidunt justo, et consectetur dolor mi ac massa. Donec a odio non justo iaculis aliquet id nec nisi. Aenean imperdiet mi dui, id egestas magna laoreet quis. Donec ullamcorper, elit sed maximus tincidunt, elit leo gravida turpis, quis viverra sem sapien luctus augue. Donec non ultrices purus. Mauris viverra tortor vitae turpis condimentum tempor. Phasellus tempus convallis odio vitae consectetur. Sed maximus, purus ut viverra ultricies, felis metus ultrices purus, id bibendum libero justo nec magna. Quisque sit amet sem elementum, bibendum orci ut, vestibulum metus. Cras cursus dolor ante, eget egestas justo mollis non. Pellentesque eu venenatis dui, vitae tempus dui. Integer ullamcorper felis ut arcu blandit, sit amet congue dolor faucibus. Donec nec erat in leo pharetra dapibus. In bibendum dui vel mauris feugiat, sagittis auctor enim sollicitudin. Proin venenatis sed tortor eget maximus. Nam suscipit purus eget velit posuere, vitae imperdiet nibh rutrum.
[/div][/div]

[/div]
⠀♡coded by uxie♡

[/div]

[class=container] height:520px; width:420px; margin:auto; background-color:#dcecf5; padding:10px; [/class] [class=milktop] height:50px; width:250px; background-color:white; margin:auto; border-bottom:1px dashed #dce2e5; border-top-left-radius:1.5px; border-top-right-radius:1.5px; [/class] [class=milktoptext] font-size:25px; color:#FFA9BA; text-align:center; position:relative; top:15px; text-transform:uppercase; font-style:oblique; font-weight:bold; [/class] [class=milkbridge] height:85px; width:400px; background-color:white; clip-path: polygon(18.6% 0%, 81.4% 0%, 100% 100%, 0 100%); border-bottom:1px dashed #dce2e5; margin:auto; [/class] [class=optionbox] height:40px; width:220px; position:relative; top:20px; margin:auto; [/class] [class=option1] height:40px; width:40px; background:url('https://images.emojiterra.com/mozilla/512px/1f338.png'); background-size:100%; position:absolute; top:5px; left:5px; cursor:pointer; [/class] [class=option2] height:40px; width:40px; background:url('https://images.emojiterra.com/mozilla/512px/1f338.png'); background-size:100%; position:absolute; cursor:pointer; top:5px; left:90px; [/class] [class=option3] height:40px; width:40px; background:url('https://images.emojiterra.com/mozilla/512px/1f338.png'); background-size:100%; position:absolute; cursor:pointer; top:5px; left:175px; [/class] [class=option1bg] background-color:#fcd4ec; height:50px; width:50px; border-radius:5px; float:left; margin-right:35px; visibility:hidden; [/class] [class=option2bg] background-color:#fcd4ec; height:50px; width:50px; border-radius:5px; float:left; margin-right:35px; visibility:hidden; [/class] [class=option3bg] background-color:#fcd4ec; height:50px; width:50px; border-radius:5px; float:left; visibility:hidden; [/class] [class=optionselect] visibility:visible; [/class] [class=milkbody] height:370px; width:400px; background-color:white; border-bottom-left-radius:1.5px; border-bottom-right-radius:1.5px; margin:auto; position:relative; [/class] [class=placeholderbg] height:320px; width:350px; background-color:#FFA9BA; position:relative; margin:Auto; top:25px; [/class] [class=placeholder] height:110px; width:350px; margin:auto; position:absolute; top:90px; padding-top:25px; z-index:6; background-color:white; [/class] [class name=placeholder] font-size:50px; color:#FFA9BA; font-weight:bold; text-align:center; letter-spacing:5px; [/class] [class=instructions] font-size:12px; font-style:oblique; color:white; font-weight:bold; text-shadow:1px 1.5px #FFA9BA; text-align:center; letter-spacing:0.5px; [/class] [class=tab1] height:330px; width:360px; margin:auto; position:absolute; overflow:hidden; top:20px; left:20px; [/class] [class=tab1scroll] overflow-y:scroll; height: calc(100% - 16.5px); width: calc(100% - 3.5px); padding:8px; [/class] [class name=tab1scroll] font-size:12px; color:black; text-align:justify; [/class] [class=tab1space] [/class] [class=tab2] height:330px; width:360px; margin:auto; position:absolute; overflow:hidden; top:20px; left:20px; [/class] [class=tab2scroll] overflow-y:scroll; height: calc(100% - 16.5px); width: calc(100% - 3.5px); padding:8px; [/class] [class name=tab2scroll] font-size:12px; color:black; text-align:justify; [/class] [class=tab3] height:330px; width:360px; margin:auto; position:absolute; overflow:hidden; top:20px; left:20px; [/class] [class=tab3scroll] overflow-y:scroll; height: calc(100% - 16.5px); width: calc(100% - 3.5px); padding:8px; [/class] [class name=tab3scroll] font-size:12px; color:black; text-align:justify; [/class] [script class=option1 on=click] hide placeholderbg hide placeholder removeClass optionselect option2bg removeClass optionselect option3bg hide tab2 hide tab3 addClass optionselect option1bg show tab1 [/script] [script class=option2 on=click] hide placeholderbg hide placeholder removeClass optionselect option1bg removeClass optionselect option3bg hide tab1 hide tab3 addClass optionselect option2bg show tab2 [/script] [script class=option3 on=click] hide placeholderbg hide placeholder removeClass optionselect option1bg removeClass optionselect option2bg hide tab1 hide tab2 addClass optionselect option3bg show tab3 [/script]
 
Last edited:
Hello, these are absolutely beautiful codes! I was wondering if you would be ok with us modifying some parts of it? The code would stay intact, I just wanted to cut out a fade. Thanks!
 
[class=codeinfocontainer] --color-1: #D6B1AB; --color-2: #F7E1E4; --color-3: #FDC9D6; --color-4: #2a2b28; width:28%; height:25vh; background-color: var(--color-1); margin:auto; display:flex; flex-flow: row wrap; box-sizing:border-box; padding:10px; [/class] [class name=codeinfocontainer maxWidth="500px"] width:55vw; height:52vh; flex-flow: column; padding-bottom:12px; [/class] [class name=codeinfoleftside] height:100%; width:38%; box-sizing:border-box; padding:5px; position:relative; [/class] [class name=codeinfoleftside maxWidth="500px"] height:58%; width:100%; [/class] [class=codeinfotrademark] font-size:9px; color: var(--color-2); float:right; position:relative; top:-7px; left:4px; [/class] [class=codeinfoicon] height:75px; width:75px; border:3px solid var(--color-3); background:url('https://www.rpnation.com/data/avatars/l/30/30903.jpg?1546322140'); background-size:100%; border-radius:50%; margin:auto; [/class] [class=codeinfotitle] font-size:13px; text-transform:uppercase; color: var(--color-1); text-shadow:2px 2px var(--color-3); text-align:center; margin-top:2%; font-weight:bold; letter-spacing:1px; [/class] [class name=codeinfotitle maxWidth="500px"] font-size:15px; [/class] [class=codeinfotagcon] height:33%; width:100%; display:flex; flex-flow:row wrap; line-height:120%; text-align:center; margin-top:5%; [/class] [class name=codeinfotagcon maxWidth="500px"] min-height:20%; max-height:35%; width:100%; [/class] [class=codeinfotag] background-color: var(--color-2); padding:2px; padding-left:3px; padding-right:3px; font-size:10px; letter-spacing:0.8px; border-radius:3px; color: var(--color-1); display:inline-block; color:black; box-sizing:border-box; height:15px; line-height:120%; [/class] [class name=codeinfotag maxWidth="500px"] font-size:10px; [/class] [class=codeinfotext] height:82%; width:55%; margin-left:5%; background-color: var(--color-2); align-self: center; [/class] [class name=codeinfotext maxWidth="500px"] height:43.5%; width:100%; align-self:flex-start; margin-left:0%; margin-top:0%; [/class] [class=codeinfotextcontent] height:85%; width:100%; padding:5px; box-sizing:border-box; overflow:hidden; font-size:10px; color: var(--color-4); text-align:justify; [/class] [class=codeinfoscroll] height:100%; width:100%; padding-right:80px; overflow-y:scroll; [/class] [class=codeinfosignature] height:15%; width:100%; font-size:18px; color: var(--color-3); text-shadow: 1.5px 1.5px var(--color-1); letter-spacing:1.5px; text-align:right; box-sizing:border-box; padding-right:5px; font-weight:bold; font-style:oblique; line-height:90%; [/class] [class=codeinfolink] float:left; font-size:11px; font-style:normal; font-weight:normal; margin-left: 2%; text-shadow:none; margin-top:1%; letter-spacing:normal; background-color: var(--color-3); padding-right:4px; padding-left:4px; border-radius:1px; [/class] [class name=codeinfolink maxWidth="539px"] font-size:10px; [/class] [div class=codeinfocontainer][div class=codeinfoleftside] [div class=codeinfotrademark]uxie ®[/div] [div class=codeinfoicon][/div] [div class=codeinfotitle]code features[/div] [div class=codeinfotagcon] [div class=codeinfotag]NOT mobile-friendly[/div] [div class=codeinfotag]hovers[/div] [div class=codeinfotag]hidden scrolls[/div] [div class=codeinfotag]basic[/div] [/div] [/div][div class=codeinfotext][div class=codeinfotextcontent][div class=codeinfoscroll]this code is free to use like all other codes unless otherwise stated as long as you do not remove the credit. i'd also appreciate it if you leave a like ♡

pretty simple code, nice for aesthetics i guess ??
but the scroll area is SUPER small so it's not v functional.

i have adapted it to be a cs before so i guess it's possible. soft aesthetics should work well with this one x
the whole thing's a hidden scroll + the lil white things are hidden scrolls too

hover over the images beside the white things for some text to appear! a cool hover !
[/div][/div][div class=codeinfosignature][div class=codeinfolink]link[/div]– uxie[/div]
[/div]
[/div]

[div class=container]
⠀♡coded by uxie♡

[div class=scrollbg][/div][div class=scroll]

[div class=post1]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam egestas sem consectetur fringilla. Aenean rhoncus sit amet nisi nec suscipit. Phasellus mollis condimentum efficitur. Nunc sit amet magna nec ligula dignissim vulputate sed at nisl. Suspendisse facilisis semper varius. Etiam lobortis elit massa, eu finibus sem mollis sed. Etiam faucibus leo id nibh dapibus dictum. Vivamus sed felis vulputate, imperdiet felis ac, placerat urna. Aenean quis odio facilisis, rutrum arcu vitae, vestibulum mi. Nullam euismod auctor metus, sit amet pharetra velit hendrerit nec. In ut augue neque.

Suspendisse consequat turpis nunc. Sed tortor neque, pellentesque eu ligula non, pellentesque laoreet velit. Aenean pulvinar, risus eu interdum egestas, dolor mi dignissim sapien, in suscipit lorem dolor a velit. Maecenas fringilla gravida purus, et placerat magna luctus vitae. Nullam sed nulla ac odio tempor luctus in vel neque. Suspendisse non magna id ligula dignissim ornare nec in lectus. Proin scelerisque pellentesque nisi, a venenatis arcu iaculis tempor. Morbi facilisis imperdiet nisl, ut sodales dolor tincidunt ut. Aliquam varius pharetra mauris in venenatis. Curabitur sit amet fermentum felis, a feugiat mauris. Cras sed neque et ex ullamcorper finibus. Fusce quis lectus at neque vulputate feugiat ut eget nisl. Etiam nec suscipit lectus. In non sapien vel libero feugiat fermentum et sit amet justo.


[div class=img1][div class=img1text]haha[/div][/div][/div] [div class=post2]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam egestas sem consectetur fringilla. Aenean rhoncus sit amet nisi nec suscipit. Phasellus mollis condimentum efficitur. Nunc sit amet magna nec ligula dignissim vulputate sed at nisl. Suspendisse facilisis semper varius. Etiam lobortis elit massa, eu finibus sem mollis sed. Etiam faucibus leo id nibh dapibus dictum. Vivamus sed felis vulputate, imperdiet felis ac, placerat urna. Aenean quis odio facilisis, rutrum arcu vitae, vestibulum mi. Nullam euismod auctor metus, sit amet pharetra velit hendrerit nec. In ut augue neque.

Suspendisse consequat turpis nunc. Sed tortor neque, pellentesque eu ligula non, pellentesque laoreet velit. Aenean pulvinar, risus eu interdum egestas, dolor mi dignissim sapien, in suscipit lorem dolor a velit. Maecenas fringilla gravida purus, et placerat magna luctus vitae. Nullam sed nulla ac odio tempor luctus in vel neque. Suspendisse non magna id ligula dignissim ornare nec in lectus. Proin scelerisque pellentesque nisi, a venenatis arcu iaculis tempor. Morbi facilisis imperdiet nisl, ut sodales dolor tincidunt ut. Aliquam varius pharetra mauris in venenatis. Curabitur sit amet fermentum felis, a feugiat mauris. Cras sed neque et ex ullamcorper finibus. Fusce quis lectus at neque vulputate feugiat ut eget nisl. Etiam nec suscipit lectus. In non sapien vel libero feugiat fermentum et sit amet justo.


[div class=img2][div class=img2text]haha[/div][/div][/div] [div class=post3]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam egestas sem consectetur fringilla. Aenean rhoncus sit amet nisi nec suscipit. Phasellus mollis condimentum efficitur. Nunc sit amet magna nec ligula dignissim vulputate sed at nisl. Suspendisse facilisis semper varius. Etiam lobortis elit massa, eu finibus sem mollis sed. Etiam faucibus leo id nibh dapibus dictum. Vivamus sed felis vulputate, imperdiet felis ac, placerat urna. Aenean quis odio facilisis, rutrum arcu vitae, vestibulum mi. Nullam euismod auctor metus, sit amet pharetra velit hendrerit nec. In ut augue neque.

Suspendisse consequat turpis nunc. Sed tortor neque, pellentesque eu ligula non, pellentesque laoreet velit. Aenean pulvinar, risus eu interdum egestas, dolor mi dignissim sapien, in suscipit lorem dolor a velit. Maecenas fringilla gravida purus, et placerat magna luctus vitae. Nullam sed nulla ac odio tempor luctus in vel neque. Suspendisse non magna id ligula dignissim ornare nec in lectus. Proin scelerisque pellentesque nisi, a venenatis arcu iaculis tempor. Morbi facilisis imperdiet nisl, ut sodales dolor tincidunt ut. Aliquam varius pharetra mauris in venenatis. Curabitur sit amet fermentum felis, a feugiat mauris. Cras sed neque et ex ullamcorper finibus. Fusce quis lectus at neque vulputate feugiat ut eget nisl. Etiam nec suscipit lectus. In non sapien vel libero feugiat fermentum et sit amet justo.


[div class=img3][div class=img3text]haha[/div][/div][/div]



[/div][/div]

[class=container] height:350px; width:480px; margin:auto; position:relative; overflow:hidden; padding:10px; [/class] [class=scroll] overflow-y:scroll; padding-right:100px; height:100%; width:100%; position:absolute; [/class] [class=scrollbg] height:360px; width:490px; background:url('https://scontent-sit4-1.cdninstagram.com/vp/c16fc41adb17a06a3122b5222d0a644a/5B91EB95/t51.2885-15/e35/30076632_210939682998039_7044027312135733248_n.jpg'); background-size:100%; opacity:0.5; position:absolute; z-index:1; pointer-events:none; border-radius:2.5px; [/class] [class=post1] height:200px; width:320px; position:relative; margin-top:35px; left:85px; z-index:6; [/class] [class=img1] height:200px; width:200px; background:url('https://scontent-sit4-1.cdninstagram.com/vp/0bb64e42c7d71570a3b6323815a064cf/5B8BDD04/t51.2885-15/e35/33336145_168967470441083_258053742656487424_n.jpg'); background-size:100%; float:left; border-top-right-radius:5px; border-bottom-right-radius:5px; [/class] [class=img1text] font-size:23px; color:white; font-style:oblique; text-transform:lowercase; position:relative; top:45.5px; left:100px; text-align:right; font-weight:bold; margin-right:10px; opacity:0; [/class] [class=post2] height:200px; width:320px; position:relative; margin-top:140px; left:85px; z-index:6; [/class] [class=img2] height:200px; width:200px; background:url('https://scontent-sit4-1.cdninstagram.com/vp/01620305c03123a0aee78e319bca4896/5B904E6B/t51.2885-15/e35/32098248_2092620420995850_5622884137821011968_n.jpg'); background-size:100%; float:left; border-top-right-radius:5px; border-bottom-right-radius:5px; [/class] [class=img2text] font-size:23px; color:white; font-style:oblique; text-transform:lowercase; position:relative; top:45.5px; left:100px; text-align:right; font-weight:bold; margin-right:10px; opacity:0; [/class] [class=post3] height:200px; width:320px; position:relative; margin-top:140px; left:85px; z-index:6; margin:bottom:70px; [/class] [class=img3] height:200px; width:200px; background:url('https://scontent-sit4-1.cdninstagram.com/vp/3e5a74f1b1270380b4003fd659c6b8f5/5BBFED5E/t51.2885-15/e35/25019039_160680237882066_1441368149541781504_n.jpg'); background-size:100%; float:left; border-top-right-radius:5px; border-bottom-right-radius:5px; [/class] [class=img3text] font-size:23px; color:white; font-style:oblique; text-transform:lowercase; position:relative; top:45.5px; left:100px; text-align:right; font-weight:bold; margin-right:10px; opacity:0; [/class] [script class=img1 on=mouseenter] removeClass slideOut img1text addClass slideIn img1text [/script] [script class=img1 on=mouseleave] removeClass slideIn img1text addClass slideOut img1text [/script] [script class=img2 on=mouseenter] removeClass slideOut img2text addClass slideIn img2text [/script] [script class=img2 on=mouseleave] removeClass slideIn img2text addClass slideOut img2text [/script] [script class=img3 on=mouseenter] removeClass slideOut img3text addClass slideIn img3text [/script] [script class=img3 on=mouseleave] removeClass slideIn img3text addClass slideOut img3text [/script] [class=slideIn] animation-name: {post_id}slidein; animation-duration:0.5s; animation-fill-mode:forwards; [/class] [class=slideOut] animation-name: {post_id}slideout; animation-duration:0.5s; animation-fill-mode:forwards; [/class] [animation=slidein] [keyframe=0] opacity:0; transform:translateX(0px); [/keyframe] [keyframe=60] opacity:1; [/keyframe] [keyframe=100] opacity:1; transform:translateX(-100px); [/keyframe] [/animation] [animation=slideout] [keyframe=0] opacity:1; transform:translateX(-100px); [/keyframe] [keyframe=50] opacity:0; [/keyframe] [keyframe=100] opacity:0; transform:translateX(0px); [/keyframe] [/animation]
 
Last edited:
[class=codeinfocontainer] --color-1: #D6B1AB; --color-2: #F7E1E4; --color-3: #FDC9D6; --color-4: #2a2b28; width:28%; height:25vh; background-color: var(--color-1); margin:auto; display:flex; flex-flow: row wrap; box-sizing:border-box; padding:10px; [/class] [class name=codeinfocontainer maxWidth="500px"] width:55vw; height:52vh; flex-flow: column; padding-bottom:12px; [/class] [class name=codeinfoleftside] height:100%; width:38%; box-sizing:border-box; padding:5px; position:relative; [/class] [class name=codeinfoleftside maxWidth="500px"] height:58%; width:100%; [/class] [class=codeinfotrademark] font-size:9px; color: var(--color-2); float:right; position:relative; top:-7px; left:4px; [/class] [class=codeinfoicon] height:75px; width:75px; border:3px solid var(--color-3); background:url('https://www.rpnation.com/data/avatars/l/30/30903.jpg?1546322140'); background-size:100%; border-radius:50%; margin:auto; [/class] [class=codeinfotitle] font-size:13px; text-transform:uppercase; color: var(--color-1); text-shadow:2px 2px var(--color-3); text-align:center; margin-top:2%; font-weight:bold; letter-spacing:1px; [/class] [class name=codeinfotitle maxWidth="500px"] font-size:15px; [/class] [class=codeinfotagcon] height:33%; width:100%; display:flex; flex-flow:row wrap; line-height:120%; text-align:center; margin-top:5%; [/class] [class name=codeinfotagcon maxWidth="500px"] min-height:20%; max-height:35%; width:100%; [/class] [class=codeinfotag] background-color: var(--color-2); padding:2px; padding-left:3px; padding-right:3px; font-size:10px; letter-spacing:0.8px; border-radius:3px; color: var(--color-1); display:inline-block; color:black; box-sizing:border-box; height:15px; line-height:120%; [/class] [class name=codeinfotag maxWidth="500px"] font-size:10px; [/class] [class=codeinfotext] height:82%; width:55%; margin-left:5%; background-color: var(--color-2); align-self: center; [/class] [class name=codeinfotext maxWidth="500px"] height:43.5%; width:100%; align-self:flex-start; margin-left:0%; margin-top:0%; [/class] [class=codeinfotextcontent] height:85%; width:100%; padding:5px; box-sizing:border-box; overflow:hidden; font-size:10px; color: var(--color-4); text-align:justify; [/class] [class=codeinfoscroll] height:100%; width:100%; padding-right:80px; overflow-y:scroll; [/class] [class=codeinfosignature] height:15%; width:100%; font-size:18px; color: var(--color-3); text-shadow: 1.5px 1.5px var(--color-1); letter-spacing:1.5px; text-align:right; box-sizing:border-box; padding-right:5px; font-weight:bold; font-style:oblique; line-height:90%; [/class] [class=codeinfolink] float:left; font-size:11px; font-style:normal; font-weight:normal; margin-left: 2%; text-shadow:none; margin-top:1%; letter-spacing:normal; background-color: var(--color-3); padding-right:4px; padding-left:4px; border-radius:1px; [/class] [class name=codeinfolink maxWidth="539px"] font-size:10px; [/class] [div class=codeinfocontainer][div class=codeinfoleftside] [div class=codeinfotrademark]uxie ®[/div] [div class=codeinfoicon][/div] [div class=codeinfotitle]code features[/div] [div class=codeinfotagcon] [div class=codeinfotag]NOT mobile-friendly[/div] [div class=codeinfotag]hidden scrolls[/div] [div class=codeinfotag]div tabs[/div] [div class=codeinfotag]advanced[/div] [/div] [/div][div class=codeinfotext][div class=codeinfotextcontent][div class=codeinfoscroll]this code is free to use like all other codes unless otherwise stated as long as you do not remove the credit. i'd also appreciate it if you leave a like ♡

SO MANY HIDDEN SCROLLS!!!!! i'd advise u to just try and scroll EVERYTHIng to find them all
otherwise, a nice little cs code that i made for an rp about superpowers! (if you couldn't tell)

it's moderately confusing so if ur not super familiar w bbcode n r just looking for something simple to edit, this code may not be for u !

i like this code so i'll probably end up updating it to make it mobile friendly sometime in the future, but not sure when just yet.
for now, enjoy it in it's cool (?) edgy form on pc!
[/div][/div][div class=codeinfosignature][div class=codeinfolink]link[/div]– uxie[/div]
[/div]
[/div]

[div class=container][div class=profile]
[div class=infobox]
ayaka
hayami
"i drink to forget, but i always end up remembering."
⠀♡coded by uxie♡
[/div]
[/div][div class=group][div class=pg1][div class=scroll]
requisite
birth name
ayaka hayami

x12 inmate number
54

current name
ayaka hayami

birthday
15 april 1998 (20 years)

sexuality
asexual

appearance
faceclaim
mei tanaka

height
158cm

weight
49.2kg

eye colour
dark brown

hair colour
black
[/div]

[/div][div class=pg2 style=display:none][div class=scroll]
personality
[div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat ullamcorper dui, quis vestibulum ante aliquam ac. Mauris vitae viverra purus, at pellentesque sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac odio in odio suscipit hendrerit vel quis leo. Donec sit amet sapien eget metus suscipit sodales. Nulla rhoncus eros a ipsum tempor ullamcorper. Sed tincidunt vehicula tempus. Nulla suscipit id nibh sit amet tempus. Mauris ut ex in nulla pretium venenatis.

Cras cursus fringilla nunc, ut lacinia dui semper quis. Nullam vitae eros mi. Morbi vehicula lacus eget nisl luctus, eget dictum magna elementum. Vestibulum vitae nisl ante. Curabitur rutrum dapibus purus, sit amet bibendum tortor egestas et. Aliquam convallis enim non ipsum dictum, a semper massa efficitur. Donec mollis venenatis tortor, id dignissim sem ultricies et. Donec a diam augue. Fusce at lectus consequat, efficitur sem sed, faucibus arcu. Nulla blandit sed velit quis sollicitudin. Pellentesque tincidunt ac orci et sodales.






likes
[div class=scroll]thing 1
thing 2
thing 3
thing 4
thing 5
thing 6
thing 7
thing 8
[/div]

dislikes
[div class=scroll]thing 1
thing 2
thing 3
thing 4
thing 5
thing 6
thing 7
thing 8
[/div]
[/div]

superpower
[div class=scroll]ayaka is a healer who draws on her own inner energy to heal her own or other wounds. she requires physical contact in some form to be able to use her ability on others and at the moment, a good amount of uninterrupted focus. ayaka cannot undo death, and her target must still be alive by the time she finishes healing them, or else her power is null. she is currently at the basic level.

taken from powerlisting wikia

basic level
+ can heal minor wounds such as cuts, bruises and light burns
+ recovering from minor to moderate blood loss
- critical wounds such as lost of limbs or damaged nerves and internal organs cannot be healed, but wounds can be closed
- cells that are fatally damaged, such as by burning, cannot be healed, resulting in permanent scarring

expert level
+ can heal external wounds, including fractured bones and deeper burns, disregarding of severity
+ lost limbs can be reattached
- minor damaged internal organs may healed, but more severity may be beyond repair and may take more time to heal
- nerves may remain damaged

advanced level
+ lost limbs and internal organs are completely healed
+ damaged nerves can be healed to a certain extent
+ critically and fatally damaged cells can regenerate, preventing scars
+ heal the mind from mental illnesses, reversing the effects of mental tampering and restoring the mind to an optimal state

master level
+ semi-immortality by rejuvenating cells to keep them at their optimal prime
+ youth inducement by reversing the effects of aging

at this current stage, ayaka takes approximately 6 minutes to completely heal a minor wound and/or repair minor to moderate blood loss, but the duration of it will keep decreasing as she trains her ability. she cannot fully control it either, and occasionally is unable to activate the ability.




[/div]

[/div][/div][div class=pg3 style=display:none]
biography
[div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu purus sed sapien dignissim vehicula. Integer et elit vitae sem porttitor viverra non a lectus. Nunc maximus leo eget arcu condimentum, sit amet porta nisi pulvinar. Vivamus nec tellus et mauris consequat imperdiet id non ante. Vestibulum nec odio eu sapien tristique luctus sed ac elit. Nunc rutrum velit sed vestibulum commodo. Pellentesque in finibus dolor. Cras eget nisi nibh. Vestibulum ullamcorper tempus gravida. Fusce varius quam vitae velit cursus ullamcorper. Praesent cursus dolor eleifend tortor aliquam egestas. Aliquam id ligula bibendum, tempus ex eget, rhoncus lacus. Phasellus vitae vestibulum libero. Proin lacinia egestas massa eu scelerisque.

Pellentesque justo diam, aliquam at nulla nec, tristique sagittis lorem. Integer maximus sem sit amet iaculis tincidunt. Quisque aliquet dictum risus sit amet aliquam. Fusce et elit aliquet, commodo metus vitae, iaculis tellus. Nulla facilisis rutrum ex nec euismod. Quisque interdum, metus iaculis posuere aliquet, massa nisl semper augue, id laoreet diam nisl mollis augue. Mauris quis magna erat. Suspendisse nulla lectus, accumsan sit amet nunc malesuada, facilisis pharetra nibh. Nam eu elementum sapien, eget rhoncus velit. Nunc magna est, auctor a auctor nec, faucibus vitae ex. Maecenas ultricies, odio sed fermentum mattis, tortor tellus maximus justo, id iaculis ipsum ante in lectus. Aenean semper risus ac lorem tristique, ut auctor urna scelerisque. Ut placerat eros ante, quis pellentesque magna malesuada non. Pellentesque sit amet diam sed massa faucibus convallis.
[/div]
extra
[div class=scroll]✧ her favourite colour is pink
✧ she can speak two languages (english and japanese)
✧ she thinks pineapple on pizza is a sin
✧ her favourite animals are foxes
✧ she can't stand the smell of perfume
✧ also this
[/div]

[/div][div class=pg4 style=display:none]
relationships
[div class=scroll]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu purus sed sapien dignissim vehicula. Integer et elit vitae sem porttitor viverra non a lectus. Nunc maximus leo eget arcu condimentum, sit amet porta nisi pulvinar. Vivamus nec tellus et mauris consequat imperdiet id non ante. Vestibulum nec odio eu sapien tristique luctus sed ac elit. Nunc rutrum velit sed vestibulum commodo. Pellentesque in finibus dolor. Cras eget nisi nibh. Vestibulum ullamcorper tempus gravida. Fusce varius quam vitae velit cursus ullamcorper. Praesent cursus dolor eleifend tortor aliquam egestas. Aliquam id ligula bibendum, tempus ex eget, rhoncus lacus. Phasellus vitae vestibulum libero. Proin lacinia egestas massa eu scelerisque.


name here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu purus sed sapien dignissim vehicula. Integer et elit vitae sem porttitor viverra non a lectus. Nunc maximus leo eget arcu condimentum, sit amet porta nisi pulvinar. Vivamus nec tellus et mauris consequat imperdiet id non ante. Vestibulum nec odio eu sapien tristique luctus sed ac elit. Nunc rutrum velit sed vestibulum commodo. Pellentesque in finibus dolor. Cras eget nisi nibh. Vestibulum ullamcorper tempus gravida. Fusce varius quam vitae velit cursus ullamcorper. Praesent cursus dolor eleifend tortor aliquam egestas. Aliquam id ligula bibendum, tempus ex eget, rhoncus lacus. Phasellus vitae vestibulum libero. Proin lacinia egestas massa eu scelerisque.


name here


Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu purus sed sapien dignissim vehicula. Integer et elit vitae sem porttitor viverra non a lectus. Nunc maximus leo eget arcu condimentum, sit amet porta nisi pulvinar. Vivamus nec tellus et mauris consequat imperdiet id non ante. Vestibulum nec odio eu sapien tristique luctus sed ac elit. Nunc rutrum velit sed vestibulum commodo. Pellentesque in finibus dolor. Cras eget nisi nibh. Vestibulum ullamcorper tempus gravida. Fusce varius quam vitae velit cursus ullamcorper. Praesent cursus dolor eleifend tortor aliquam egestas. Aliquam id ligula bibendum, tempus ex eget, rhoncus lacus. Phasellus vitae vestibulum libero. Proin lacinia egestas massa eu scelerisque.


name here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu purus sed sapien dignissim vehicula. Integer et elit vitae sem porttitor viverra non a lectus. Nunc maximus leo eget arcu condimentum, sit amet porta nisi pulvinar. Vivamus nec tellus et mauris consequat imperdiet id non ante. Vestibulum nec odio eu sapien tristique luctus sed ac elit. Nunc rutrum velit sed vestibulum commodo. Pellentesque in finibus dolor. Cras eget nisi nibh. Vestibulum ullamcorper tempus gravida. Fusce varius quam vitae velit cursus ullamcorper. Praesent cursus dolor eleifend tortor aliquam egestas. Aliquam id ligula bibendum, tempus ex eget, rhoncus lacus. Phasellus vitae vestibulum libero. Proin lacinia egestas massa eu scelerisque.


name here


Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu purus sed sapien dignissim vehicula. Integer et elit vitae sem porttitor viverra non a lectus. Nunc maximus leo eget arcu condimentum, sit amet porta nisi pulvinar. Vivamus nec tellus et mauris consequat imperdiet id non ante. Vestibulum nec odio eu sapien tristique luctus sed ac elit. Nunc rutrum velit sed vestibulum commodo. Pellentesque in finibus dolor. Cras eget nisi nibh. Vestibulum ullamcorper tempus gravida. Fusce varius quam vitae velit cursus ullamcorper. Praesent cursus dolor eleifend tortor aliquam egestas. Aliquam id ligula bibendum, tempus ex eget, rhoncus lacus. Phasellus vitae vestibulum libero. Proin lacinia egestas massa eu scelerisque.


name here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu purus sed sapien dignissim vehicula. Integer et elit vitae sem porttitor viverra non a lectus. Nunc maximus leo eget arcu condimentum, sit amet porta nisi pulvinar. Vivamus nec tellus et mauris consequat imperdiet id non ante. Vestibulum nec odio eu sapien tristique luctus sed ac elit. Nunc rutrum velit sed vestibulum commodo. Pellentesque in finibus dolor. Cras eget nisi nibh. Vestibulum ullamcorper tempus gravida. Fusce varius quam vitae velit cursus ullamcorper. Praesent cursus dolor eleifend tortor aliquam egestas. Aliquam id ligula bibendum, tempus ex eget, rhoncus lacus. Phasellus vitae vestibulum libero. Proin lacinia egestas massa eu scelerisque.


name here




[/div]

[/div]

[/div][div class=tab1][/div][div class=tab2][/div][div class=tab3][/div][div class=tab4][/div]



[/div]

[class=container] height:380px; width:620px; margin:auto; position:relative; [/class] [class=profile] height:380px; width:260px; position:absolute; top:-0.5px; left:-1px; background:url('https://images.unsplash.com/photo-1497704628914-8772bb97f450?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1886ee8844a0e5e06d323aa007c96f7c&w=1000&q=80'); background-size:300%; background-position:50% 50%; border-top-left-radius:4px; border-bottom-left-radius:4px; clip-path: polygon(90% 0%, 75% 50%, 90% 100%, 0 100%, 0% 50%, 0 0); z-index:6; [/class] [class=infobox] height:180px; width:130px; font-size:9px; color:#bf7699; text-align:center; position:relative; left:32px; [/class] [class=group] height:359.5px; width:315px; position:absolute; left:189px; background-color:#21303d; z-index:3; padding:10px; padding-left:50px; border-top-right-radius:4px; border-bottom-right-radius:4px; [/class] [class=scroll] height:100%; width:100%; padding-right:50px; overflow-y:auto; [/class] [class=pg1] height:350px; width:305px; position:absolute; overflow:hidden; [/class] [class=pg2] height:350px; width:305px; position:absolute; overflow:hidden; [/class] [class=pg3] height:350px; width:305px; position:absolute; overflow:hidden; [/class] [class=pg4] height:350px; width:305px; position:absolute; overflow:hidden; [/class] [class=tab1] height:37px; width:39px; background-color:#FCDEEA; border-top-right-radius:5px; border-bottom-right-radius:5px; position:absolute; top:10px; left:535px; transition:0.3s; cursor:pointer; color:#00172C; font-size:25px; padding-left:46px; padding-top:3px; [/class] [class name=tab1 state=hover] transform: translateX(15px); transition:0.3s; [/class] [script class=tab1 on=click] hide pg2 hide pg3 hide pg4 show pg1 [/script] [class=tab2] height:37px; width:40px; background-color:#F2BAD7; border-top-right-radius:5px; border-bottom-right-radius:5px; position:absolute; top:65px; left:535px; transition:0.3s; cursor:pointer; color:#00172C; font-size:25px; padding-left:45px; padding-top:3px; [/class] [class name=tab2 state=hover] transform: translateX(15px); transition:0.3s; [/class] [script class=tab2 on=click] hide pg1 hide pg3 hide pg4 show pg2 [/script] [class=tab3] height:37px; width:40px; background-color:#EE9EC5; border-top-right-radius:5px; border-bottom-right-radius:5px; position:absolute; top:120px; left:535px; transition:0.3s; cursor:pointer; color:#00172C; font-size:25px; padding-left:45px; padding-top:3px; [/class] [class name=tab3 state=hover] transform: translateX(15px); transition:0.3s; [/class] [script class=tab3 on=click] hide pg1 hide pg2 hide pg4 show pg3 [/script] [class=tab4] height:37px; width:40px; background-color:#E56997; border-top-right-radius:5px; border-bottom-right-radius:5px; position:absolute; top:175px; left:535px; transition:0.3s; cursor:pointer; font-size:25px; padding-left:45px; padding-top:3px; [/class] [class name=tab4 state=hover] transform: translateX(15px); transition:0.3s; [/class] [script class=tab4 on=click] hide pg1 hide pg2 hide pg3 show pg4 [/script]
 
Last edited:
i swear all my codes r cs' codes LOL but yes here's another one
3 pictures are tab buttons, each tab has a hidden scroll

[div class=container]
⠀♡coded by uxie♡

[div class=title][div class=titletext]it's a name
[/div][/div][div class=tabcontainer]
[div class=tab1][div class=tabtitlec1][div class=tabtitle1]BASICS[/div][/div][/div][div class=tab2][div class=tabtitlec2][div class=tabtitle2]PERSONA[/div][/div][/div][div class=tab3][div class=tabtitlec3][div class=tabtitle3]HISTORY[/div][/div][/div]

[/div]
[div class=contentcontainer][div class=tabcontent1]
tab1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus magna vel vestibulum sollicitudin. Aenean fringilla velit ut mattis ultrices. Aliquam erat volutpat. Proin fringilla mattis erat eget volutpat. In velit nibh, ornare eget velit nec, lacinia facilisis orci. Ut varius commodo dui vitae tristique. Sed non turpis ultricies, pellentesque lorem ac, mattis dolor. Vestibulum dignissim lacus eget condimentum pharetra.

Quisque in volutpat mi. Nullam leo tellus, imperdiet at felis vitae, lobortis pellentesque augue. Nunc aliquet, neque sed ultricies elementum, sem sapien varius turpis, eget commodo odio velit nec velit. Curabitur ut metus arcu. In aliquet eu justo nec feugiat. Praesent ut viverra lectus. Donec tempor bibendum elit, tincidunt lobortis leo lacinia in. Quisque consequat urna sit amet felis mollis posuere. Nunc tristique nulla quis tellus eleifend ornare. Mauris in posuere urna. Ut facilisis sit amet felis vel cursus. Suspendisse ac quam commodo, pellentesque nibh eget, mattis eros. Vivamus non finibus metus, quis pharetra augue. Aenean quis bibendum ex.

Donec mauris risus, eleifend scelerisque pharetra ut, posuere ac elit. Morbi at egestas nisi, quis lobortis libero. Sed ac imperdiet purus. In lacus neque, vestibulum vitae purus sit amet, sagittis mollis sapien. Donec nec dolor quis ex malesuada laoreet vitae eu tortor. Fusce eros sem, tempor et risus sit amet, cursus euismod nibh. Aliquam molestie ac felis eu egestas. Vivamus ac enim mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/div] [div class=tabcontent2 style=display:none]
tab2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus magna vel vestibulum sollicitudin. Aenean fringilla velit ut mattis ultrices. Aliquam erat volutpat. Proin fringilla mattis erat eget volutpat. In velit nibh, ornare eget velit nec, lacinia facilisis orci. Ut varius commodo dui vitae tristique. Sed non turpis ultricies, pellentesque lorem ac, mattis dolor. Vestibulum dignissim lacus eget condimentum pharetra.

Quisque in volutpat mi. Nullam leo tellus, imperdiet at felis vitae, lobortis pellentesque augue. Nunc aliquet, neque sed ultricies elementum, sem sapien varius turpis, eget commodo odio velit nec velit. Curabitur ut metus arcu. In aliquet eu justo nec feugiat. Praesent ut viverra lectus. Donec tempor bibendum elit, tincidunt lobortis leo lacinia in. Quisque consequat urna sit amet felis mollis posuere. Nunc tristique nulla quis tellus eleifend ornare. Mauris in posuere urna. Ut facilisis sit amet felis vel cursus. Suspendisse ac quam commodo, pellentesque nibh eget, mattis eros. Vivamus non finibus metus, quis pharetra augue. Aenean quis bibendum ex.

Donec mauris risus, eleifend scelerisque pharetra ut, posuere ac elit. Morbi at egestas nisi, quis lobortis libero. Sed ac imperdiet purus. In lacus neque, vestibulum vitae purus sit amet, sagittis mollis sapien. Donec nec dolor quis ex malesuada laoreet vitae eu tortor. Fusce eros sem, tempor et risus sit amet, cursus euismod nibh. Aliquam molestie ac felis eu egestas. Vivamus ac enim mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/div] [div class=tabcontent3 style=display:none]
tab3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus magna vel vestibulum sollicitudin. Aenean fringilla velit ut mattis ultrices. Aliquam erat volutpat. Proin fringilla mattis erat eget volutpat. In velit nibh, ornare eget velit nec, lacinia facilisis orci. Ut varius commodo dui vitae tristique. Sed non turpis ultricies, pellentesque lorem ac, mattis dolor. Vestibulum dignissim lacus eget condimentum pharetra.

Quisque in volutpat mi. Nullam leo tellus, imperdiet at felis vitae, lobortis pellentesque augue. Nunc aliquet, neque sed ultricies elementum, sem sapien varius turpis, eget commodo odio velit nec velit. Curabitur ut metus arcu. In aliquet eu justo nec feugiat. Praesent ut viverra lectus. Donec tempor bibendum elit, tincidunt lobortis leo lacinia in. Quisque consequat urna sit amet felis mollis posuere. Nunc tristique nulla quis tellus eleifend ornare. Mauris in posuere urna. Ut facilisis sit amet felis vel cursus. Suspendisse ac quam commodo, pellentesque nibh eget, mattis eros. Vivamus non finibus metus, quis pharetra augue. Aenean quis bibendum ex.

Donec mauris risus, eleifend scelerisque pharetra ut, posuere ac elit. Morbi at egestas nisi, quis lobortis libero. Sed ac imperdiet purus. In lacus neque, vestibulum vitae purus sit amet, sagittis mollis sapien. Donec nec dolor quis ex malesuada laoreet vitae eu tortor. Fusce eros sem, tempor et risus sit amet, cursus euismod nibh. Aliquam molestie ac felis eu egestas. Vivamus ac enim mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/div]

[/div][/div]
[class=container] height:530px; width:370px; margin:auto; cursor:default; background-color:white; [/class] [class=contentcontainer] height:218px; width:348px; margin:auto; position:relative; top:-17px; overflow:hidden; padding:10px; border-bottom:1px solid #e2e2e2; border-right:1px solid #e2e2e2; border-left:1px solid #e2e2e2; [/class] [class=tabcontent1] overflow-y:scroll; height:100%; width:100%; padding-right:50px; margin-left:8px; [/class] [class name=tabcontent1] font-size:12px; color:black; text-align:justify; [/class] [class=tabcontent2] overflow-y:scroll; height:100%; width:100%; padding-right:50px; margin-left:8px; [/class] [class name=tabcontent2] font-size:12px; color:black; text-align:justify; [/class] [class=tabcontent3] overflow-y:scroll; height:100%; width:100%; padding-right:50px; margin-left:8px; [/class] [class name=tabcontent3] font-size:12px; color:black; text-align:justify; [/class] [class=title] height:45px; width:140px; background-color:white; margin:auto; position:relative; top:45px; left:108px; display:inline-block; padding:8px; border-radius:1.8px; [/class] [class name=titletext] font-size:40px; color:#3a3a44; text-align:center; font-weight:bold; text-shadow: 1px 2px #b37aba; font-style:italic; position:relative; top:-8px; left:-1px; [/class] [class=tabcontainer] height:100px; width:370px; position: relative; left:0px; top:-17px; [/class] [class=tab1] height:100px; width:120px; background:url('https://78.media.tumblr.com/b5e323acec891d5fd88737fe99410849/tumblr_p3ffigzFzG1u64t9ho2_1280.jpg'); background-size:100%; position-relative; margin-right:5px; background-position: 0% 90%; display:inline-block; cursor:pointer; [/class] [class=tabtitlec1] height:100px; width:120px; display:inline-block; opacity:0; transition:0.7s; position:relative; [/class] [class name=tabtitlec1 state=hover] opacity:0.87; [/class] [class=tabtitle1] height:22px; width:66px; background-color:white; position-relative; left:25px; padding:4px; font-size:14px; color:dimgray; font-stretch:condensed; text-align:center; position:absolute; top:35px; left:21.5px; border-radius:1.8px; [/class] [class=tab2] height:100px; width:120px; background:url('https://78.media.tumblr.com/a4266b2ec216dd7615cf76d7cd4b6084/tumblr_p3je25wSN51u64t9ho3_1280.jpg'); background-size:100%; position-relative; margin-right:5px; background-position: 0% 40%; display:inline-block; cursor:pointer; [/class] [class=tabtitlec2] height:100px; width:120px; display:inline-block; opacity:0; transition:0.7s; position:relative; [/class] [class name=tabtitlec2 state=hover] opacity:0.87; [/class] [class=tabtitle2] height:22px; width:72px; background-color:white; position-relative; left:25px; padding:4px; font-size:14px; color:dimgray; font-stretch:condensed; text-align:center; position:absolute; top:35px; left:19.5px; border-radius:1.8px; [/class] [class=tab3] height:100px; width:120px; background:url('https://78.media.tumblr.com/f04ef520f64247dfbd1e17e6434473b9/tumblr_p3ffigzFzG1u64t9ho3_1280.jpg'); background-size:100%; position-relative; background-position: 10% 20%; display:inline-block; cursor:pointer; [/class] [class=tabtitlec3] height:100px; width:120px; display:inline-block; opacity:0; transition:0.7s; position:relative; [/class] [class name=tabtitlec3 state=hover] opacity:0.87; [/class] [class=tabtitle3] height:22px; width:70px; background-color:white; position-relative; left:25px; padding:4px; font-size:14px; color:dimgray; font-stretch:condensed; text-align:center; position:absolute; top:35px; left:21.2px; border-radius:1.8px; [/class] [script class=tab1 on=click] hide tabcontent2 hide tabcontent3 show tabcontent1 [/script] [script class=tab2 on=click] hide tabcontent1 hide tabcontent3 show tabcontent2 [/script] [script class=tab3 on=click] hide tabcontent1 hide tabcontent2 show tabcontent3 [/script]



[div class=container][div=height:3px;width:100px;position:relative;z-index:6;left:-6px;][font=Open Sans][COLOR=dimgray][SIZE=2]⠀♡coded by uxie♡[/SIZE][/COLOR][/font][/div]
[div=width:370px;height:150px;background:url('https://78.media.tumblr.com/b3ec6af440b608618a5fb11ed2dc2c40/tumblr_o1zb6lIX821u64t9ho1_500.gif');background-size:100%;position:relative;top:-1px;][div class=title][div class=titletext][font=Cookie]it's a name[/font][/div][/div][/div][div class=tabcontainer]
[div class=tab1][div class=tabtitlec1][div class=tabtitle1][font=Quicksand]BASICS[/font][/div][/div][/div][div class=tab2][div class=tabtitlec2][div class=tabtitle2][font=Quicksand]PERSONA[/font][/div][/div][/div][div class=tab3][div class=tabtitlec3][div class=tabtitle3][font=Quicksand]HISTORY[/font][/div][/div][/div]

[/div]
[div class=contentcontainer][div class=tabcontent1][font=Karla]
tab1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus magna vel vestibulum sollicitudin. Aenean fringilla velit ut mattis ultrices. Aliquam erat volutpat. Proin fringilla mattis erat eget volutpat. In velit nibh, ornare eget velit nec, lacinia facilisis orci. Ut varius commodo dui vitae tristique. Sed non turpis ultricies, pellentesque lorem ac, mattis dolor. Vestibulum dignissim lacus eget condimentum pharetra.

Quisque in volutpat mi. Nullam leo tellus, imperdiet at felis vitae, lobortis pellentesque augue. Nunc aliquet, neque sed ultricies elementum, sem sapien varius turpis, eget commodo odio velit nec velit. Curabitur ut metus arcu. In aliquet eu justo nec feugiat. Praesent ut viverra lectus. Donec tempor bibendum elit, tincidunt lobortis leo lacinia in. Quisque consequat urna sit amet felis mollis posuere. Nunc tristique nulla quis tellus eleifend ornare. Mauris in posuere urna. Ut facilisis sit amet felis vel cursus. Suspendisse ac quam commodo, pellentesque nibh eget, mattis eros. Vivamus non finibus metus, quis pharetra augue. Aenean quis bibendum ex.

Donec mauris risus, eleifend scelerisque pharetra ut, posuere ac elit. Morbi at egestas nisi, quis lobortis libero. Sed ac imperdiet purus. In lacus neque, vestibulum vitae purus sit amet, sagittis mollis sapien. Donec nec dolor quis ex malesuada laoreet vitae eu tortor. Fusce eros sem, tempor et risus sit amet, cursus euismod nibh. Aliquam molestie ac felis eu egestas. Vivamus ac enim mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/font][/div][nobr]

[/nobr][div class=tabcontent2 style=display:none][font=Karla]
tab2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus magna vel vestibulum sollicitudin. Aenean fringilla velit ut mattis ultrices. Aliquam erat volutpat. Proin fringilla mattis erat eget volutpat. In velit nibh, ornare eget velit nec, lacinia facilisis orci. Ut varius commodo dui vitae tristique. Sed non turpis ultricies, pellentesque lorem ac, mattis dolor. Vestibulum dignissim lacus eget condimentum pharetra.

Quisque in volutpat mi. Nullam leo tellus, imperdiet at felis vitae, lobortis pellentesque augue. Nunc aliquet, neque sed ultricies elementum, sem sapien varius turpis, eget commodo odio velit nec velit. Curabitur ut metus arcu. In aliquet eu justo nec feugiat. Praesent ut viverra lectus. Donec tempor bibendum elit, tincidunt lobortis leo lacinia in. Quisque consequat urna sit amet felis mollis posuere. Nunc tristique nulla quis tellus eleifend ornare. Mauris in posuere urna. Ut facilisis sit amet felis vel cursus. Suspendisse ac quam commodo, pellentesque nibh eget, mattis eros. Vivamus non finibus metus, quis pharetra augue. Aenean quis bibendum ex.

Donec mauris risus, eleifend scelerisque pharetra ut, posuere ac elit. Morbi at egestas nisi, quis lobortis libero. Sed ac imperdiet purus. In lacus neque, vestibulum vitae purus sit amet, sagittis mollis sapien. Donec nec dolor quis ex malesuada laoreet vitae eu tortor. Fusce eros sem, tempor et risus sit amet, cursus euismod nibh. Aliquam molestie ac felis eu egestas. Vivamus ac enim mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/font][/div][nobr]

[/nobr][div class=tabcontent3 style=display:none][font=Karla]
tab3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus magna vel vestibulum sollicitudin. Aenean fringilla velit ut mattis ultrices. Aliquam erat volutpat. Proin fringilla mattis erat eget volutpat. In velit nibh, ornare eget velit nec, lacinia facilisis orci. Ut varius commodo dui vitae tristique. Sed non turpis ultricies, pellentesque lorem ac, mattis dolor. Vestibulum dignissim lacus eget condimentum pharetra.

Quisque in volutpat mi. Nullam leo tellus, imperdiet at felis vitae, lobortis pellentesque augue. Nunc aliquet, neque sed ultricies elementum, sem sapien varius turpis, eget commodo odio velit nec velit. Curabitur ut metus arcu. In aliquet eu justo nec feugiat. Praesent ut viverra lectus. Donec tempor bibendum elit, tincidunt lobortis leo lacinia in. Quisque consequat urna sit amet felis mollis posuere. Nunc tristique nulla quis tellus eleifend ornare. Mauris in posuere urna. Ut facilisis sit amet felis vel cursus. Suspendisse ac quam commodo, pellentesque nibh eget, mattis eros. Vivamus non finibus metus, quis pharetra augue. Aenean quis bibendum ex.

Donec mauris risus, eleifend scelerisque pharetra ut, posuere ac elit. Morbi at egestas nisi, quis lobortis libero. Sed ac imperdiet purus. In lacus neque, vestibulum vitae purus sit amet, sagittis mollis sapien. Donec nec dolor quis ex malesuada laoreet vitae eu tortor. Fusce eros sem, tempor et risus sit amet, cursus euismod nibh. Aliquam molestie ac felis eu egestas. Vivamus ac enim mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/font][/div]
[div=color:black;width:300px;height:10px;][divide][/divide][/div]

[/div][/div]
[nobr]

[class=container]
height:530px;
width:370px;
margin:auto;
cursor:default;
background-color:white;
[/class]

[class=contentcontainer]
height:218px;
width:348px;
margin:auto;
position:relative;
top:-17px;
overflow:hidden;
padding:10px;
border-bottom:1px solid #e2e2e2;
border-right:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
[/class]

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

[class name=tabcontent1]
font-size:12px;
color:black;
text-align:justify;
[/class]

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

[class name=tabcontent2]
font-size:12px;
color:black;
text-align:justify;
[/class]

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

[class name=tabcontent3]
font-size:12px;
color:black;
text-align:justify;
[/class]


[class=title]
height:45px;
width:140px;
background-color:white;
margin:auto;
position:relative;
top:45px;
left:108px;
display:inline-block;
padding:8px;
border-radius:1.8px;
[/class]

[class name=titletext]
font-size:40px;
color:#3a3a44;
text-align:center;
font-weight:bold;
text-shadow: 1px 2px #b37aba;
font-style:italic;
position:relative;
top:-8px;
left:-1px;
[/class]

[class=tabcontainer]
height:100px;
width:370px;
position: relative;
left:0px;
top:-17px;
[/class]

[class=tab1]
height:100px;
width:120px;
background:url('https://78.media.tumblr.com/b5e323acec891d5fd88737fe99410849/tumblr_p3ffigzFzG1u64t9ho2_1280.jpg');
background-size:100%;
position-relative;
margin-right:5px;
background-position: 0% 90%;
display:inline-block;
cursor:pointer;
[/class]

[class=tabtitlec1]
height:100px;
width:120px;
display:inline-block;
opacity:0;
transition:0.7s;
position:relative;
[/class]

[class name=tabtitlec1 state=hover]
opacity:0.87;
[/class]

[class=tabtitle1]
height:22px;
width:66px;
background-color:white;
position-relative;
left:25px;
padding:4px;
font-size:14px;
color:dimgray;
font-stretch:condensed;
text-align:center;
position:absolute;
top:35px;
left:21.5px;
border-radius:1.8px;
[/class]

[class=tab2]
height:100px;
width:120px;
background:url('https://78.media.tumblr.com/a4266b2ec216dd7615cf76d7cd4b6084/tumblr_p3je25wSN51u64t9ho3_1280.jpg');
background-size:100%;
position-relative;
margin-right:5px;
background-position: 0% 40%;
display:inline-block;
cursor:pointer;
[/class]

[class=tabtitlec2]
height:100px;
width:120px;
display:inline-block;
opacity:0;
transition:0.7s;
position:relative;
[/class]

[class name=tabtitlec2 state=hover]
opacity:0.87;
[/class]

[class=tabtitle2]
height:22px;
width:72px;
background-color:white;
position-relative;
left:25px;
padding:4px;
font-size:14px;
color:dimgray;
font-stretch:condensed;
text-align:center;
position:absolute;
top:35px;
left:19.5px;
border-radius:1.8px;
[/class]

[class=tab3]
height:100px;
width:120px;
background:url('https://78.media.tumblr.com/f04ef520f64247dfbd1e17e6434473b9/tumblr_p3ffigzFzG1u64t9ho3_1280.jpg');
background-size:100%;
position-relative;
background-position: 10% 20%;
display:inline-block;
cursor:pointer;
[/class]

[class=tabtitlec3]
height:100px;
width:120px;
display:inline-block;
opacity:0;
transition:0.7s;
position:relative;
[/class]

[class name=tabtitlec3 state=hover]
opacity:0.87;
[/class]

[class=tabtitle3]
height:22px;
width:70px;
background-color:white;
position-relative;
left:25px;
padding:4px;
font-size:14px;
color:dimgray;
font-stretch:condensed;
text-align:center;
position:absolute;
top:35px;
left:21.2px;
border-radius:1.8px;
[/class]

[comment]scripts[/comment]

[script class=tab1 on=click]
hide tabcontent2
hide tabcontent3
show tabcontent1
[/script]

[script class=tab2 on=click]
hide tabcontent1
hide tabcontent3
show tabcontent2
[/script]

[script class=tab3 on=click]
hide tabcontent1
hide tabcontent2
show tabcontent3
[/script]

[/nobr]
Used this for a new RP I'm GMing, thank you for making such a dope code!
WOODSIDE - kids with powers on the run from the government and stuff
 
bruh this shit was crazy im on a code roll LOL
free 2 use, not mobile/tablet friendly, read 'OPENME' before use

[div class=container]

[div class=bigimage][div class=bigimghover]
name here
[/div]
[/div]

[div class=window1Open]
LOOKS

[/div]
[div class=window2Open]
PERSONA

[/div]
[div class=window3Open]
BIO

[/div]
[div class=window4Open]
OPENME

[/div]

[div class=wcontainer0][div class=window0Close][div class=windowX]X[/div][/div][div class=window0][div class=scroll0] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.

Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.

[/div][/div][/div]

[div class=wcontainer1][div class=window1Close][div class=windowX]X[/div][/div][div class=window1][div class=scroll1]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.

Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.
[/div][/div][/div]

[div class=wcontainer2][div class=window2Close][div class=windowX]X[/div][/div][div class=window2][div class=scroll2]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.

Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.
[/div][/div][/div]

[div class=wcontainer3][div class=window3Close][div class=windowX]X[/div][/div][div class=window3][div class=scroll3]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.

Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.
[/div][/div][/div]

[div class=wcontainer4][div class=window4Close][div class=windowX]X[/div][/div][div class=window4][div class=scroll4] [div class=fancy]uxie♡[/div]
uxie, back at it again with another messy cs code
(why do u only do cs codes)
i can't really say i tried something that new this time but i've been slowly figuring it out. this one only took me like, what, 5 hours? haha. ): the layout and general aesthetic (is there even one) is credited to my good friend /u/roommate. her ideas r fresh and great and good for me bc im uncreative af
ive been harassing her 2 give me layout ideas as of late bc she's p new to coding while i am (???) not. so it's fun.

she's getting p good at it actually monkaS

anyways, as always, this code is free to use as long as you keep this cool little thing here. notice i always do this 4 the ones i spend way too much time on lol. it might be a bit laggy when ur editing it bc there's so much text oops. have fun with it, try not to edit too much it might break? i hope not. i've been trying to get mine to break less • ͜ > •
for the background i lit just googled vaporwave background LOL
palette used (w/ a few edits from me ofc)
ya
enjoy!

disclaimer: this code isn't mobile friendly nor tablet-friendly (bIG SAD) bc the dimensions are way too big!! the stuff itself might not fuck up, but a lot of things'll be cut off, so it's recommended it only be viewed on pc. then again, you couldn't see this part if you were on mobile or tablet, i'm p sure ?

[/div][/div][/div]

[/div]

[class=container] height:450px; width:500px; background:url('https://i.pinimg.com/originals/19/d2/94/19d294b86b157c57856ecd786461b8d2.jpg'); background-size:160%; background-position: 40% 20%; margin:auto; position:relative; [/class] [class=bigimage] height:250px; width:350px; background:url('https://i.pinimg.com/736x/ba/cb/11/bacb11047a9b3afcade21503ead60f65--s-anime-retro-anime.jpg'); background-size:100%; border:8px solid #c773d1; [/class] [class=bigimghover] height:250px; width:350px; background-color:#8795E8; position:absolute; opacity:0; transition:0.8s; [/class] [class name=bigimghover state=hover] opacity:0.8; transition:0.8s; [/class] [class=wcontainer0] height:140px; width:290px; position:absolute; top:270px; left:100px; [/class] [class=window0Close] height:17px; width:17px; background-color:#e53d3d; position:absolute; top:2.3px; left:274.5px; z-index:6; border-radius:1.8px; [/class] [class=window0] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:120px; width:280px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34); [/class] [class=scroll0] padding-right:7.6px; margin-top:2.5px; height:127px; width:277px; overflow-y:scroll; [/class] [class name=scroll0] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer1] height:160px; width:290px; position:absolute; left:420px; top:15px; transform: scale(0.1,0.1); opacity:0; [/class] [class=window1] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:130px; width:280px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34) [/class] [class=scroll1] padding-right:7.6px; margin-top:2.5px; height:127px; width:277px; overflow-y:scroll; [/class] [class name=scroll1] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer2] height:230px; width:215px; position:absolute; left:-218px; top:128px; transform: scale(0.1,0.1); opacity:0; [/class] [class=window2] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:200px; width:215px; border-radius:1.5px; overflow:hidden; position:relative; padding:3px; background:white; [/class] [class=scroll2] padding-right:7px; margin-top:2.5px; height:197px; width:212px; overflow-y:scroll; [/class] [class name=scroll2] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer3] height:200px; width:290px; position:absolute; left:480px; top:198px; transform: scale(0.1,0.1); opacity:0; [/class] [class=window3] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:170px; width:280px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34) [/class] [class=scroll3] padding-right:7.6px; margin-top:2.5px; height:167px; width:277px; overflow-y:scroll; [/class] [class name=scroll3] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer4] height:170px; width:280px; position:absolute; left:180px; top:120px; transform: scale(0.1,0.1); opacity:0; z-index:6; [/class] [class=window4] border:5px solid #cedae5; border-top:22px solid #cedae5; height:160px; width:160px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34) [/class] [class=scroll4] padding-right:8px; margin-top:2.5px; height:157px; width:157px; overflow-y:scroll; [/class] [class name=scroll4] font-size:10.5px; color:black; text-align:justify; [/class] [class name=fancy] font-size:35px; color:#ff9ee3; text-shadow:1.5px 2px #cd6cd8; position:absolute; left:-15px; top:165px; font-style:oblique; font-weight:bold; letter-spacing:1px; [/class] [class=boxshadow] box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34) [/class] [class=window1Close] height:17px; width:17px; background-color:#e53d3d; position:absolute; top:2.3px; left:274.5px; z-index:6; border-radius:1.8px; [/class] [class=window2Close] height:17px; width:17px; background-color:#e53d3d; position:absolute; top:2.8px; left:209.5px; z-index:6; border-radius:1.8px; [/class] [class=window3Close] height:17px; width:17px; background-color:#e53d3d; position:absolute; top:2.3px; left:274.5px; z-index:6; border-radius:1.8px; [/class] [class=window4Close] height:17px; width:17px; background-color:#e53d3d; position:absolute; top:2.3px; left:155px; z-index:6; border-radius:1.8px; [/class] [class=windowX] font-size:15px; color:white; font-weight:bold; position:relative; left:3.3px; top:-2.5px; cursor:pointer; [/class] [class=window1Open] height:60px; width:60px; cursor:pointer; position:relative; margin-left:25px; top:-60px; [/class] [class=window2Open] height:60px; width:60px; cursor:pointer; position:relative; margin-left:25px; top:-60px; [/class] [class=window3Open] height:60px; width:60px; cursor:pointer; position:relative; margin-left:25px; top:-60px; [/class] [class=window4Open] height:60px; width:60px; cursor:pointer; position:relative; margin-left:25px; top:-60px; [/class] [script class=window1Open on=click] addClass windowOpen wcontainer1 addClass boxshadow window1 removeClass windowClose wcontainer1 [/script] [script class=window2Open on=click] addClass windowOpen wcontainer2 addClass boxshadow window2 removeClass windowClose wcontainer2 [/script] [script class=window3Open on=click] addClass windowOpen wcontainer3 addClass boxshadow window3 removeClass windowClose wcontainer3 [/script] [script class=window4Open on=click] addClass windowOpen wcontainer4 addClass boxshadow window4 removeClass windowClose wcontainer4 [/script] [script class=window1Close on=click] addClass windowClose wcontainer1 removeClass windowOpen wcontainer1 removeClass boxshadow window1 [/script] [script class=window2Close on=click] addClass windowClose wcontainer2 removeClass windowOpen wcontainer2 removeClass boxshadow window2 [/script] [script class=window3Close on=click] addClass windowClose wcontainer3 removeClass windowOpen wcontainer3 removeClass boxshadow window3 [/script] [script class=window4Close on=click] addClass windowClose wcontainer4 removeClass windowOpen wcontainer4 removeClass boxshadow window4 [/script] [class=windowOpen] animation-name: {post_id}windowOpen; animation-duration:0.8s; animation-fill-mode:forwards; [/class] [class=windowClose] animation-name: {post_id}windowClose; animation-duration:0.5s; animation-fill-mode:forwards; [/class] [animation=windowOpen] [keyframe=0] opacity:0; transform: scale(0.05,0.05); [/keyframe] [keyframe=1] opacity:1; [/keyframe] [keyframe=100] opacity:1; transform: scale(1,1); [/keyframe] [/animation] [animation=windowClose] [keyframe=0] opacity:1; transform: scale(1,1); [/keyframe] [keyframe=99] opacity:0; [/keyframe] [keyframe=100] opacity:0; transform: scale(0.05,0.05); [/keyframe] [/animation]



[div class=container]

[div=border:1px solid #200BAD;height:265.25px;width:365.25px;position:relative;float:right;left:-12px;top:-20px;][div class=bigimage][div class=bigimghover][div=font-size:28px;font-style:oblique;font-weight:bold;color:#e0d7f4;letter-spacing:1px;position:relative;top:110px;left:100px;]name here[/div][/div][/div]
[/div]

[div class=window1Open][div=font-size:41px;color:#AD8CFF;position:absolute;left:12.5px;top:-6px;][fa]fa-file-image[/fa][/div][nobr]
[/nobr][div=font-size:13px;color:white;position:absolute;font-weight:bold;left:9px;top:32.5px;][fa]fa-external-link[/fa][/div][nobr]
[/nobr][div=font-size:12px;color:#e0d7f4;position:absolute;left:9.5px;top:45px;letter-spacing:0.5px;][font=Quicksand]LOOKS[/font][/div]
[/div]
[div class=window2Open][div=font-size:40px;color:#8795E8;position:absolute;left:13px;top:-6px;][fa]fa-file-alt[/fa][/div][nobr]
[/nobr][div=font-size:13px;color:white;position:absolute;font-weight:bold;left:9px;top:32.5px;][fa]fa-external-link[/fa][/div][nobr]
[/nobr][div=font-size:12px;color:#e0d7f4;position:absolute;left:1px;top:45px;letter-spacing:0.5px;][font=Quicksand]PERSONA[/font][/div]
[/div]
[div class=window3Open][div=font-size:40.5px;color:#C774E8;position:absolute;left:12.5px;top:-6px;][fa]fa-file-archive[/fa][/div][nobr]
[/nobr][div=font-size:13px;color:white;position:absolute;font-weight:bold;left:9.5px;top:32.5px;][fa]fa-external-link[/fa][/div][nobr]
[/nobr][div=font-size:12px;color:#e0d7f4;position:absolute;left:19.5px;top:45px;letter-spacing:0.5px;][font=Quicksand]BIO[/font][/div]
[/div]
[div class=window4Open][div=font-size:40.5px;color:#FF6AD5;position:absolute;left:10px;top:-6px;][fa]fa-heart[/fa][/div][nobr]
[/nobr][div=font-size:13px;color:white;position:absolute;font-weight:bold;left:9px;top:32.5px;][fa]fa-external-link[/fa][/div][nobr]
[/nobr][div=font-size:12px;color:#e0d7f4;position:absolute;left:5px;top:45px;letter-spacing:0.5px;][font=Quicksand]OPENME[/font][/div]
[/div]

[div class=wcontainer0][div class=window0Close][div class=windowX][font=Nunito]X[/font][/div][/div][div class=window0][div class=scroll0][nobr]
[/nobr]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.

Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.

[/div][/div][/div]

[div class=wcontainer1][div class=window1Close][div class=windowX][font=Nunito]X[/font][/div][/div][div class=window1][div class=scroll1][nobr]
[/nobr][div=height:125.5px;width:264.6px;background:url('https://i.pinimg.com/736x/0c/a2/fa/0ca2fafd4b41c9dece82c80535395597.jpg');background-size:100%;margin:auto;][/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.

Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.
[/div][/div][/div]
[nobr][/nobr]
[div class=wcontainer2][div class=window2Close][div class=windowX][font=Nunito]X[/font][/div][/div][div class=window2][div class=scroll2][nobr]
[/nobr][div=height:200px;width:198.5px;background:url('https://i.pinimg.com/736x/0c/a2/fa/0ca2fafd4b41c9dece82c80535395597.jpg');background-size:140%;margin:auto;][/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.

Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.
[/div][/div][/div]
[nobr][/nobr]
[div class=wcontainer3][div class=window3Close][div class=windowX][font=Nunito]X[/font][/div][/div][div class=window3][div class=scroll3][nobr]
[/nobr][div=height:165.5px;width:264.6px;background:url('https://i.pinimg.com/736x/0c/a2/fa/0ca2fafd4b41c9dece82c80535395597.jpg');background-size:100%;margin:auto;][/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae bibendum ligula. Fusce et est maximus leo fringilla tempor a in felis. Etiam in auctor ligula. Integer id lorem elit. Donec vitae rutrum lorem. Curabitur mi arcu, elementum ut mollis id, volutpat et sem. Quisque maximus sed arcu eu hendrerit. Nam in lobortis ipsum, et mollis dolor. Nulla facilisi. Morbi sit amet purus malesuada, lobortis urna eu, bibendum nibh. Praesent dapibus justo eget nibh malesuada tincidunt. Praesent id ante tellus. Maecenas feugiat nisi vel orci hendrerit suscipit. Etiam egestas eros enim, ut rhoncus ante viverra sed. Mauris malesuada sagittis eros, non dignissim turpis egestas ut. Praesent in semper est.

Mauris eget nunc sit amet nisi pretium porta. Curabitur vulputate ut nibh ac bibendum. Suspendisse non suscipit nunc. Vivamus aliquam mauris vestibulum feugiat condimentum. Maecenas ac eros non ex hendrerit tempus. Vivamus quis congue lorem. Proin elit tellus, interdum posuere ultricies ornare, pretium at magna. Nulla rutrum tellus eget dolor euismod, at scelerisque est commodo. Morbi molestie imperdiet felis, ut ornare diam lacinia ut. Nulla sollicitudin odio eget justo lacinia lacinia. Donec volutpat consectetur vestibulum. Mauris laoreet lacus eget nisi efficitur pellentesque. Phasellus et dolor ac augue viverra hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet tempor mi, eget dictum sem.
[/div][/div][/div]
[nobr][/nobr]
[div class=wcontainer4][div class=window4Close][div class=windowX][font=Nunito]X[/font][/div][/div][div class=window4][div class=scroll4][nobr]
[/nobr][div class=fancy]uxie♡[/div]
[font=IBM Plex Sans]uxie, back at it again with another messy cs code
(why do u only do cs codes)
i can't really say i tried something that new this time but i've been slowly figuring it out. this one only took me like, what, 5 hours? haha. ): the layout and general aesthetic (is there even one) is credited to my good friend /u/roommate. her ideas r fresh and great and good for me bc im uncreative af
ive been harassing her 2 give me layout ideas as of late bc she's p new to coding while i am (???) not. so it's fun.

she's getting p good at it actually monkaS

anyways, as always, this code is free to use as long as you keep this cool little thing here. notice i always do this 4 the ones i spend way too much time on lol. it might be a bit laggy when ur editing it bc there's [b]so much text[/b] oops. have fun with it, try not to edit too much it might break? i hope not. i've been trying to get mine to break less • ͜ > •
for the background i lit just googled vaporwave background LOL
[url='http://www.colourlovers.com/palette/3636765/seapunk_vaporwave']palette used[/url] (w/ a few edits from me ofc)
ya
enjoy!

[size=9px]disclaimer: this code isn't mobile friendly nor tablet-friendly (bIG SAD) bc the dimensions are way too big!! the stuff itself might not fuck up, but a lot of things'll be cut off, so it's recommended it only be viewed on pc. then again, you couldn't see this part if you were on mobile or tablet, i'm p sure ?[/size]
[/font]
[/div][/div][/div]

[/div]

[nobr]

[class=container]
height:450px;
width:500px;
background:url('https://i.pinimg.com/originals/19/d2/94/19d294b86b157c57856ecd786461b8d2.jpg');
background-size:160%;
background-position: 40% 20%;
margin:auto;
position:relative;
[/class]

[class=bigimage]
height:250px;
width:350px;
background:url('https://i.pinimg.com/736x/ba/cb/11/bacb11047a9b3afcade21503ead60f65--s-anime-retro-anime.jpg');
background-size:100%;
border:8px solid #c773d1;
[/class]

[class=bigimghover]
height:250px;
width:350px;
background-color:#8795E8;
position:absolute;
opacity:0;
transition:0.8s;
[/class]

[class name=bigimghover state=hover]
opacity:0.8;
transition:0.8s;
[/class]

[comment]windows[/comment]

[class=wcontainer0]
height:140px;
width:290px;
position:absolute;
top:270px;
left:100px;
[/class]

[class=window0Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.3px;
left:274.5px;
z-index:6;
border-radius:1.8px;
[/class]

[class=window0]
border:5px solid #d5d6f2;
border-top:22px solid #d5d6f2;
height:120px;
width:280px;
border-radius:1.5px;
overflow:hidden;
padding:3px;
background:white;
box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34);
[/class]

[class=scroll0]
padding-right:7.6px;
margin-top:2.5px;
height:127px;
width:277px;
overflow-y:scroll;
[/class]

[class name=scroll0]
font-size:10.5px;
color:black;
text-align:justify;
[/class]


[class=wcontainer1]
height:160px;
width:290px;
position:absolute;
left:420px;
top:15px;
transform: scale(0.1,0.1);
opacity:0;
[/class]

[class=window1]
border:5px solid #d5d6f2;
border-top:22px solid #d5d6f2;
height:130px;
width:280px;
border-radius:1.5px;
overflow:hidden;
padding:3px;
background:white;
box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34)
[/class]

[class=scroll1]
padding-right:7.6px;
margin-top:2.5px;
height:127px;
width:277px;
overflow-y:scroll;
[/class]

[class name=scroll1]
font-size:10.5px;
color:black;
text-align:justify;
[/class]

[class=wcontainer2]
height:230px;
width:215px;
position:absolute;
left:-218px;
top:128px;
transform: scale(0.1,0.1);
opacity:0;
[/class]

[class=window2]
border:5px solid #d5d6f2;
border-top:22px solid #d5d6f2;
height:200px;
width:215px;
border-radius:1.5px;
overflow:hidden;
position:relative;
padding:3px;
background:white;
[/class]

[class=scroll2]
padding-right:7px;
margin-top:2.5px;
height:197px;
width:212px;
overflow-y:scroll;
[/class]

[class name=scroll2]
font-size:10.5px;
color:black;
text-align:justify;
[/class]

[class=wcontainer3]
height:200px;
width:290px;
position:absolute;
left:480px;
top:198px;
transform: scale(0.1,0.1);
opacity:0;
[/class]

[class=window3]
border:5px solid #d5d6f2;
border-top:22px solid #d5d6f2;
height:170px;
width:280px;
border-radius:1.5px;
overflow:hidden;
padding:3px;
background:white;
box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34)
[/class]

[class=scroll3]
padding-right:7.6px;
margin-top:2.5px;
height:167px;
width:277px;
overflow-y:scroll;
[/class]

[class name=scroll3]
font-size:10.5px;
color:black;
text-align:justify;
[/class]

[class=wcontainer4]
height:170px;
width:280px;
position:absolute;
left:180px;
top:120px;
transform: scale(0.1,0.1);
opacity:0;
z-index:6;
[/class]

[class=window4]
border:5px solid #cedae5;
border-top:22px solid #cedae5;
height:160px;
width:160px;
border-radius:1.5px;
overflow:hidden;
padding:3px;
background:white;
box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34)
[/class]

[class=scroll4]
padding-right:8px;
margin-top:2.5px;
height:157px;
width:157px;
overflow-y:scroll;
[/class]

[class name=scroll4]
font-size:10.5px;
color:black;
text-align:justify;
[/class]

[class name=fancy]
font-size:35px;
color:#ff9ee3;
text-shadow:1.5px 2px #cd6cd8;
position:absolute;
left:-15px;
top:165px;
font-style:oblique;
font-weight:bold;
letter-spacing:1px;
[/class]


[class=boxshadow]
box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34)
[/class]

[comment]buttons[/comment]

[class=window1Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.3px;
left:274.5px;
z-index:6;
border-radius:1.8px;
[/class]

[class=window2Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.8px;
left:209.5px;
z-index:6;
border-radius:1.8px;
[/class]

[class=window3Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.3px;
left:274.5px;
z-index:6;
border-radius:1.8px;
[/class]

[class=window4Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.3px;
left:155px;
z-index:6;
border-radius:1.8px;
[/class]

[class=windowX]
font-size:15px;
color:white;
font-weight:bold;
position:relative;
left:3.3px;
top:-2.5px;
cursor:pointer;
[/class]

[class=window1Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]

[class=window2Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]

[class=window3Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]

[class=window4Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]

[comment]button scripts[/comment]

[script class=window1Open on=click]
addClass windowOpen wcontainer1
addClass boxshadow window1
removeClass windowClose wcontainer1
[/script]

[script class=window2Open on=click]
addClass windowOpen wcontainer2
addClass boxshadow window2
removeClass windowClose wcontainer2
[/script]

[script class=window3Open on=click]
addClass windowOpen wcontainer3
addClass boxshadow window3
removeClass windowClose wcontainer3
[/script]

[script class=window4Open on=click]
addClass windowOpen wcontainer4
addClass boxshadow window4
removeClass windowClose wcontainer4
[/script]


[script class=window1Close on=click]
addClass windowClose wcontainer1
removeClass windowOpen wcontainer1
removeClass boxshadow window1
[/script]

[script class=window2Close on=click]
addClass windowClose wcontainer2
removeClass windowOpen wcontainer2
removeClass boxshadow window2
[/script]

[script class=window3Close on=click]
addClass windowClose wcontainer3
removeClass windowOpen wcontainer3
removeClass boxshadow window3
[/script]

[script class=window4Close on=click]
addClass windowClose wcontainer4
removeClass windowOpen wcontainer4
removeClass boxshadow window4
[/script]

[comment]animations[/comment]

[class=windowOpen]
animation-name: {post_id}windowOpen;
animation-duration:0.8s;
animation-fill-mode:forwards;
[/class]

[class=windowClose]
animation-name: {post_id}windowClose;
animation-duration:0.5s;
animation-fill-mode:forwards;
[/class]

[animation=windowOpen]
[keyframe=0]
opacity:0;
transform: scale(0.05,0.05);
[/keyframe]
[keyframe=1]
opacity:1;
[/keyframe]
[keyframe=100]
opacity:1;
transform: scale(1,1);
[/keyframe]
[/animation]

[animation=windowClose]
[keyframe=0]
opacity:1;
transform: scale(1,1);
[/keyframe]
[keyframe=99]
opacity:0;
[/keyframe]
[keyframe=100]
opacity:0;
transform: scale(0.05,0.05);
[/keyframe]
[/animation]

[/nobr]

hello! <3 I just wanted to let you know that I used this code here:
Realistic/Modern - Imperfect CS

I love your cs sheets, and just your coding in general. everything is so aesthetically pleasing;
it's all a literal blessing to my eyes LOL

I don't think I saw your credit on the original code, so I just mentioned it on the top of my post.
hopefully you don't mind! ; v ;

anyways, thank you for such gorgeous freebies!!
 
reeEEEEEEEEE they're so aesthetic 111 will be using the 4th one the cs (tho tbh im prolly using all o f them at some point)
 
[class=codeinfocontainer] --color-1: #D6B1AB; --color-2: #F7E1E4; --color-3: #FDC9D6; --color-4: #2a2b28; width:28%; height:25vh; background-color: var(--color-1); margin:auto; display:flex; flex-flow: row wrap; box-sizing:border-box; padding:10px; [/class] [class name=codeinfocontainer maxWidth="500px"] width:55vw; height:52vh; flex-flow: column; padding-bottom:12px; [/class] [class name=codeinfoleftside] height:100%; width:38%; box-sizing:border-box; padding:5px; position:relative; [/class] [class name=codeinfoleftside maxWidth="500px"] height:58%; width:100%; [/class] [class=codeinfotrademark] font-size:9px; color: var(--color-2); float:right; position:relative; top:-7px; left:4px; [/class] [class=codeinfoicon] height:75px; width:75px; border:3px solid var(--color-3); background:url('https://www.rpnation.com/data/avatars/l/30/30903.jpg?1546322140'); background-size:100%; border-radius:50%; margin:auto; [/class] [class=codeinfotitle] font-size:13px; text-transform:uppercase; color: var(--color-1); text-shadow:2px 2px var(--color-3); text-align:center; margin-top:2%; font-weight:bold; letter-spacing:1px; [/class] [class name=codeinfotitle maxWidth="500px"] font-size:15px; [/class] [class=codeinfotagcon] height:33%; width:100%; display:flex; flex-flow:row wrap; line-height:120%; text-align:center; margin-top:5%; [/class] [class name=codeinfotagcon maxWidth="500px"] min-height:20%; max-height:35%; width:100%; [/class] [class=codeinfotag] background-color: var(--color-2); padding:2px; padding-left:3px; padding-right:3px; font-size:10px; letter-spacing:0.8px; border-radius:3px; color: var(--color-1); display:inline-block; color:black; box-sizing:border-box; height:15px; line-height:120%; [/class] [class name=codeinfotag maxWidth="500px"] font-size:10px; [/class] [class=codeinfotext] height:82%; width:55%; margin-left:5%; background-color: var(--color-2); align-self: center; [/class] [class name=codeinfotext maxWidth="500px"] height:43.5%; width:100%; align-self:flex-start; margin-left:0%; margin-top:0%; [/class] [class=codeinfotextcontent] height:85%; width:100%; padding:5px; box-sizing:border-box; overflow:hidden; font-size:10px; color: var(--color-4); text-align:justify; [/class] [class=codeinfoscroll] height:100%; width:100%; padding-right:80px; overflow-y:scroll; [/class] [class=codeinfosignature] height:15%; width:100%; font-size:18px; color: var(--color-3); text-shadow: 1.5px 1.5px var(--color-1); letter-spacing:1.5px; text-align:right; box-sizing:border-box; padding-right:5px; font-weight:bold; font-style:oblique; line-height:90%; [/class] [class=codeinfolink] float:left; font-size:11px; font-style:normal; font-weight:normal; margin-left: 2%; text-shadow:none; margin-top:1%; letter-spacing:normal; background-color: var(--color-3); padding-right:4px; padding-left:4px; border-radius:1px; [/class] [class name=codeinfolink maxWidth="539px"] font-size:10px; [/class] [div class=codeinfocontainer][div class=codeinfoleftside] [div class=codeinfotrademark]uxie ®[/div] [div class=codeinfoicon][/div] [div class=codeinfotitle]code features[/div] [div class=codeinfotagcon] [div class=codeinfotag]not mobile-friendly[/div] [div class=codeinfotag]tabs[/div] [div class=codeinfotag]hidden scrolls[/div] [div class=codeinfotag]hovers[/div] [div class=codeinfotag]lil janky[/div] [/div] [/div][div class=codeinfotext][div class=codeinfotextcontent][div class=codeinfoscroll]this code is free to use like all other codes unless otherwise stated as long as you do not remove the credit. i'd also appreciate it if you leave a like ♡

the code for this one is pretty massive n janky, but simple to edit if you sorta know what to do. not really for intro-level bbcoders though!
the navigation bar to find the tabs can be found on the left by the big circle pic. hovering into that general area should already show u the menu!!
each tab features a hidden scroll !!
and there are so many little hovers. not really functional but just for fun. i think it's cute when u mouse over n it grows slightly LOL

another code that i may update in the future to be mobile friendly or at least a little more functional? i'll probably end up working on vers.2 instead since i like it better!

alternate/updated version can be found here
[/div][/div][div class=codeinfosignature][div class=codeinfolink]link[/div]– uxie[/div]
[/div]
[/div]

[div class=container]
⠀♡coded by uxie♡
[div class=navi][div class=bigborder]
[/div][div class=bigname]name
here
[/div][div class=quote]princess? please, honey. it's
queen
.❞
[/div][div class=buttoncon][div class=button1]1.[/div][div class=button2]2.[/div][div class=button3]3.[/div][div class=button4]4.[/div]

[/div]
[/div][div class=tabcon][div class=border1]
[/div][div class=border2]
[/div][div class=tab1]
basics.
full name
nickname(s)
age
gender
sexual orientation
trope
appearance.
height
weight
hair colour
eye colour
ethnicity
faceclaim

[/div][div class=tab2 style=display:none][div class=scroll]
personality
[div class=scroll]Sed est tellus, iaculis id orci id, interdum tincidunt sapien. Cras eu enim imperdiet, convallis nibh vel, lacinia ex. Proin arcu metus, pellentesque sit amet aliquam consequat, iaculis nec nisi. Ut facilisis et ante ut commodo. Sed quam massa, eleifend id mi sodales, facilisis consequat enim. Cras lacinia neque sit amet nulla laoreet luctus. Aliquam eleifend pulvinar porttitor. Suspendisse potenti. Cras sapien dolor, suscipit et magna eu, blandit euismod tortor. Nam at tincidunt est, suscipit ullamcorper mauris. Nulla gravida malesuada felis, id dapibus ex pharetra vitae. Duis cursus dolor eget elit aliquet consequat. Suspendisse auctor fringilla gravida. Donec non tellus a nibh lacinia consequat. Nulla id consequat nunc, ac viverra nulla.
[/div]
likes.
[div class=scroll]like 1
like 2
like 3
like 4
like 5
[/div]
dislikes.
[div class=scroll]like 1
like 2
like 3
like 4
like 5

[/div]
[/div][/div][div class=tab3 style=display:none][div class=scroll]
misc.
brief history

why you're in detention

extra



[/div][/div][div class=tab4 style=display:none][div class=scroll]
relationships.
name here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper varius eros eu venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pulvinar dignissim lobortis. Duis nunc sapien, suscipit at dolor nec, varius placerat diam. Suspendisse fringilla efficitur euismod. Aliquam sollicitudin ipsum ut erat congue imperdiet. Donec nulla augue, tincidunt eget massa quis, euismod porta ex. Ut a finibus augue, at rhoncus ex. Sed rutrum libero ut rhoncus rhoncus. Etiam aliquet pretium magna eget tristique. Donec venenatis mollis lacinia. Sed convallis, diam vitae efficitur facilisis, sapien mauris faucibus enim, condimentum varius ex quam a neque. Sed sit amet tortor porttitor, varius sem sed, semper erat. Sed euismod fermentum augue, id molestie dui finibus id. Quisque euismod, neque id luctus pharetra, risus mi imperdiet nunc, id ullamcorper dolor diam vitae neque. Integer commodo elit eu nibh congue, in tincidunt mauris fringilla.

Duis efficitur imperdiet sapien, quis imperdiet diam pharetra vel. Duis tortor risus, viverra id orci et, vestibulum lacinia ante. Praesent id volutpat lorem. Fusce sodales, lorem ultrices cursus porta, risus felis iaculis turpis, a convallis mauris magna a odio. Mauris neque justo, blandit non aliquet eget, ultricies nec leo. Vivamus facilisis et diam ut ornare. Proin semper auctor erat, in pretium orci eleifend sed. Proin et dui sed ante tristique facilisis in quis nisl.


name here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper varius eros eu venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pulvinar dignissim lobortis. Duis nunc sapien, suscipit at dolor nec, varius placerat diam. Suspendisse fringilla efficitur euismod. Aliquam sollicitudin ipsum ut erat congue imperdiet. Donec nulla augue, tincidunt eget massa quis, euismod porta ex. Ut a finibus augue, at rhoncus ex. Sed rutrum libero ut rhoncus rhoncus. Etiam aliquet pretium magna eget tristique. Donec venenatis mollis lacinia. Sed convallis, diam vitae efficitur facilisis, sapien mauris faucibus enim, condimentum varius ex quam a neque. Sed sit amet tortor porttitor, varius sem sed, semper erat. Sed euismod fermentum augue, id molestie dui finibus id. Quisque euismod, neque id luctus pharetra, risus mi imperdiet nunc, id ullamcorper dolor diam vitae neque. Integer commodo elit eu nibh congue, in tincidunt mauris fringilla.

Duis efficitur imperdiet sapien, quis imperdiet diam pharetra vel. Duis tortor risus, viverra id orci et, vestibulum lacinia ante. Praesent id volutpat lorem. Fusce sodales, lorem ultrices cursus porta, risus felis iaculis turpis, a convallis mauris magna a odio. Mauris neque justo, blandit non aliquet eget, ultricies nec leo. Vivamus facilisis et diam ut ornare. Proin semper auctor erat, in pretium orci eleifend sed. Proin et dui sed ante tristique facilisis in quis nisl.


[/div][/div]

[/div]
[class=container] height:360px; width:480px; background-color:#f9d1ed; margin:auto; position:Relative; border-radius:4px; [/class] [class=navi] height:270px; width:190px; float:left; position:relative; cursor:default; [/class] [script class=navi on=mouseenter] addClass reveal bigborder addClass namech bigname addClass namech quote addClass appear buttoncon removeClass hide bigborder removeClass disappear buttoncon [/script] [script class=navi on=mouseleave] removeClass reveal bigborder removeClass namech bigname removeClass namech quote removeClass appear buttoncon addClass disappear buttoncon addClass hide bigborder [/script] [class=bigborder] height:110px; width:110px; border:1px solid #cf98d3; padding:8px; position:absolute; left:36.5px; top:25px; border-radius:50%; transition:0.3s; z-index:6; [/class] [class=bigname] font-size:31px; color:white; text-shadow:2px 1px #cf98d3; transition:0.4s; letter-spacing:1px; line-height:70%; text-align:justify; position:relative; top:143px; margin-left:45px; transform:rotate(-10deg); z-index:7; [/class] [class=quote] font-size:8px; color:#cf98d3; text-align:justify; max-width:175px; transform:rotate(-10deg); z-index:7; margin-left:27px; letter-spacing:0.5ps; transition:0.4s; position:relative; top:160px; text-transform:uppercase; [/class] [class=namech] transform:scale(1.1) rotate(-15deg); transition:0.4s; [/class] [class=reveal] animation-name: {post_id}reveal; animation-duration:0.4s; animation-fill-mode:forwards; [/class] [class=hide] animation-name: {post_id}hide; animation-duration:0.4s; animation-fill-mode:forwards; [/class] [animation=reveal] [keyframe=0] transform: scale(1) translateX(0px); [/keyframe] [keyframe=100] transform: scale(1.05) translateX(15px); [/keyframe] [/animation] [animation=hide] [keyframe=0] transform: scale(1.05) translateX(15px); [/keyframe] [keyframe=100] transform: scale(1) translateX(0px); [/keyframe] [/animation] [class=buttoncon] height:120px; width:40px; position:absolute; top:30px; left:15px; line-height:100%; text-align:center; opacity:0; transform:scale(0.2); [/class] [class=button1] height:23px; width:23px; border-radius:10px; font-size:24px; text-align:center; padding:3px; padding-top:5px; padding-bottom:1px; color:#f9d1ed; font-weight:bold; text-shadow:2px 2px white; background-color:transparent; transition:0.4s; [/class] [class name=button1 state=hover] background-color:#cf98d3; transform:rotate(10deg); color:#cf98d3; transition:0.4s; cursor:pointer; [/class] [script class=button1 on=click] hide tab2 hide tab3 hide tab4 show tab1 [/script] [class=button2] height:23px; width:23px; border-radius:10px; font-size:24px; text-align:center; padding:3px; padding-top:5px; padding-bottom:1px; color:#f9d1ed; font-weight:bold; text-shadow:2px 2px white; background-color:transparent; transition:0.4s; [/class] [class name=button2 state=hover] background-color:#cf98d3; transform:rotate(10deg); color:#cf98d3; transition:0.4s; cursor:pointer; [/class] [script class=button2 on=click] hide tab1 hide tab3 hide tab4 show tab2 [/script] [class=button3] height:23px; width:23px; border-radius:10px; font-size:24px; text-align:center; padding:3px; padding-top:5px; padding-bottom:1px; color:#f9d1ed; font-weight:bold; text-shadow:2px 2px white; background-color:transparent; transition:0.4s; [/class] [class name=button3 state=hover] background-color:#cf98d3; transform:rotate(10deg); color:#cf98d3; transition:0.4s; cursor:pointer; [/class] [script class=button3 on=click] hide tab1 hide tab2 hide tab4 show tab3 [/script] [class=button4] height:23px; width:23px; border-radius:10px; font-size:24px; text-align:center; padding:3px; padding-top:5px; padding-bottom:1px; color:#f9d1ed; font-weight:bold; text-shadow:2px 2px white; background-color:transparent; transition:0.4s; [/class] [class name=button4 state=hover] background-color:#cf98d3; transform:rotate(10deg); color:#cf98d3; transition:0.4s; cursor:pointer; [/class] [script class=button4 on=click] hide tab1 hide tab2 hide tab3 show tab4 [/script] [class=appear] animation-name: {post_id}appear; animation-duration:0.5s; animation-fill-mode:forwards; [/class] [class=disappear] animation-name: {post_id}disappear; animation-duration:0.5s; animation-fill-mode:forwards; [/class] [animation=appear] [keyframe=0] transform:translateX(10px) scale(0.2); opacity:0; [/keyframe] [keyframe=1] transform:translateX(10px) scale(0.2); opacity:1; [/keyframe] [keyframe=100] transform:translateX(0px) scale(1); opacity:1; [/keyframe] [/animation] [animation=disappear] [keyframe=0] transform:translateX(0px) scale(1); opacity:1; [/keyframe] [keyframe=99] transform:translateX(9px) scale(0.21); opacity:0; [/keyframe] [keyframe=100] transform:translateX(10px) scale(0.2); opacity:0; [/keyframe] [/animation] [class=tabcon] height:240px; width:255px; display:inline-block; position:relative; left:5px; padding:15px; [/class] [class=border1] height:75px; width:75px; border:1px solid #cf98d3; padding:5px; position:absolute; left:135px; top:-55px; border-radius:50%; z-index:7; transition:0.4s; [/class] [class name=border1 state=hover] transform:scale(1.1); transition:0.4s; [/class] [class=border2] height:45px; width:45px; border:1px solid #cf98d3; padding:5px; position:absolute; left:208px; top:-45px; border-radius:50%; z-index:7; transition:0.4s; [/class] [class name=border2 state=hover] transform:scale(1.1); transition:0.4s; [/class] [class=scroll] height:100%; width:100%; overflow-y:auto; padding-right:50px; position:relative; [/class] [class=tab1] height:230px; width:245px; border-radius:5px; position:absolute; padding:5px; background-color:#ffeaff; overflow:hidden; [/class] [class=tab2] height:230px; width:245px; border-radius:5px; position:absolute; padding:5px; background-color:#ffeaff; overflow:hidden; [/class] [class=tab3] height:230px; width:245px; border-radius:5px; position:absolute; padding:5px; background-color:#ffeaff; overflow:hidden; [/class] [class=tab4] height:230px; width:245px; border-radius:5px; position:absolute; padding:5px; overflow:hidden; [/class]
[/div]
 
Last edited:
ya.....this is something ig.....
simple-ish cs code? bc i always make cs codes haha u kno me!!!!
not mobile friendly, tons of hidden scrolls as always
navigation bar cn be found by hovering over the Left Side (near the big pic)
free 2 use w credit xx

[div class=container]
⠀♡coded by uxie♡
[div class=navi][div class=bigborder]
[/div][div class=bigname]name
here
[/div][div class=quote]princess? please, honey. it's
queen
.❞
[/div][div class=buttoncon][div class=button1]1.[/div][div class=button2]2.[/div][div class=button3]3.[/div][div class=button4]4.[/div]

[/div]
[/div][div class=tabcon][div class=border1]
[/div][div class=border2]
[/div][div class=tab1]
basics.
full name
nickname(s)
age
gender
sexual orientation
trope

appearance.
height
weight
hair colour
eye colour
ethnicity
faceclaim


[/div][div class=tab2 style=display:none][div class=scroll]
personality
[div class=scroll]Sed est tellus, iaculis id orci id, interdum tincidunt sapien. Cras eu enim imperdiet, convallis nibh vel, lacinia ex. Proin arcu metus, pellentesque sit amet aliquam consequat, iaculis nec nisi. Ut facilisis et ante ut commodo. Sed quam massa, eleifend id mi sodales, facilisis consequat enim. Cras lacinia neque sit amet nulla laoreet luctus. Aliquam eleifend pulvinar porttitor. Suspendisse potenti. Cras sapien dolor, suscipit et magna eu, blandit euismod tortor. Nam at tincidunt est, suscipit ullamcorper mauris. Nulla gravida malesuada felis, id dapibus ex pharetra vitae. Duis cursus dolor eget elit aliquet consequat. Suspendisse auctor fringilla gravida. Donec non tellus a nibh lacinia consequat. Nulla id consequat nunc, ac viverra nulla.
[/div]
likes.
[div class=scroll]like 1
like 2
like 3
like 4
like 5
[/div]
dislikes.
[div class=scroll]like 1
like 2
like 3
like 4
like 5

[/div]
[/div][/div][div class=tab3 style=display:none][div class=scroll]
misc.
brief history

why you're in detention

extra



[/div][/div][div class=tab4 style=display:none][div class=scroll]
relationships.
name here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper varius eros eu venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pulvinar dignissim lobortis. Duis nunc sapien, suscipit at dolor nec, varius placerat diam. Suspendisse fringilla efficitur euismod. Aliquam sollicitudin ipsum ut erat congue imperdiet. Donec nulla augue, tincidunt eget massa quis, euismod porta ex. Ut a finibus augue, at rhoncus ex. Sed rutrum libero ut rhoncus rhoncus. Etiam aliquet pretium magna eget tristique. Donec venenatis mollis lacinia. Sed convallis, diam vitae efficitur facilisis, sapien mauris faucibus enim, condimentum varius ex quam a neque. Sed sit amet tortor porttitor, varius sem sed, semper erat. Sed euismod fermentum augue, id molestie dui finibus id. Quisque euismod, neque id luctus pharetra, risus mi imperdiet nunc, id ullamcorper dolor diam vitae neque. Integer commodo elit eu nibh congue, in tincidunt mauris fringilla.

Duis efficitur imperdiet sapien, quis imperdiet diam pharetra vel. Duis tortor risus, viverra id orci et, vestibulum lacinia ante. Praesent id volutpat lorem. Fusce sodales, lorem ultrices cursus porta, risus felis iaculis turpis, a convallis mauris magna a odio. Mauris neque justo, blandit non aliquet eget, ultricies nec leo. Vivamus facilisis et diam ut ornare. Proin semper auctor erat, in pretium orci eleifend sed. Proin et dui sed ante tristique facilisis in quis nisl.


name here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper varius eros eu venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pulvinar dignissim lobortis. Duis nunc sapien, suscipit at dolor nec, varius placerat diam. Suspendisse fringilla efficitur euismod. Aliquam sollicitudin ipsum ut erat congue imperdiet. Donec nulla augue, tincidunt eget massa quis, euismod porta ex. Ut a finibus augue, at rhoncus ex. Sed rutrum libero ut rhoncus rhoncus. Etiam aliquet pretium magna eget tristique. Donec venenatis mollis lacinia. Sed convallis, diam vitae efficitur facilisis, sapien mauris faucibus enim, condimentum varius ex quam a neque. Sed sit amet tortor porttitor, varius sem sed, semper erat. Sed euismod fermentum augue, id molestie dui finibus id. Quisque euismod, neque id luctus pharetra, risus mi imperdiet nunc, id ullamcorper dolor diam vitae neque. Integer commodo elit eu nibh congue, in tincidunt mauris fringilla.

Duis efficitur imperdiet sapien, quis imperdiet diam pharetra vel. Duis tortor risus, viverra id orci et, vestibulum lacinia ante. Praesent id volutpat lorem. Fusce sodales, lorem ultrices cursus porta, risus felis iaculis turpis, a convallis mauris magna a odio. Mauris neque justo, blandit non aliquet eget, ultricies nec leo. Vivamus facilisis et diam ut ornare. Proin semper auctor erat, in pretium orci eleifend sed. Proin et dui sed ante tristique facilisis in quis nisl.


[/div][/div]

[/div]
[class=container] height:360px; width:480px; background-color:#f9d1ed; margin:auto; position:Relative; border-radius:4px; [/class] [class=navi] height:270px; width:190px; float:left; position:relative; cursor:default; [/class] [script class=navi on=mouseenter] addClass reveal bigborder addClass namech bigname addClass namech quote addClass appear buttoncon removeClass hide bigborder removeClass disappear buttoncon [/script] [script class=navi on=mouseleave] removeClass reveal bigborder removeClass namech bigname removeClass namech quote removeClass appear buttoncon addClass disappear buttoncon addClass hide bigborder [/script] [class=bigborder] height:110px; width:110px; border:1px solid #cf98d3; padding:8px; position:absolute; left:36.5px; top:25px; border-radius:50%; transition:0.3s; z-index:6; [/class] [class=bigname] font-size:31px; color:white; text-shadow:2px 1px #cf98d3; transition:0.4s; letter-spacing:1px; line-height:70%; text-align:justify; position:relative; top:143px; margin-left:45px; transform:rotate(-10deg); z-index:7; [/class] [class=quote] font-size:8px; color:#cf98d3; text-align:justify; max-width:175px; transform:rotate(-10deg); z-index:7; margin-left:27px; letter-spacing:0.5ps; transition:0.4s; position:relative; top:160px; text-transform:uppercase; [/class] [class=namech] transform:scale(1.1) rotate(-15deg); transition:0.4s; [/class] [class=reveal] animation-name: {post_id}reveal; animation-duration:0.4s; animation-fill-mode:forwards; [/class] [class=hide] animation-name: {post_id}hide; animation-duration:0.4s; animation-fill-mode:forwards; [/class] [animation=reveal] [keyframe=0] transform: scale(1) translateX(0px); [/keyframe] [keyframe=100] transform: scale(1.05) translateX(15px); [/keyframe] [/animation] [animation=hide] [keyframe=0] transform: scale(1.05) translateX(15px); [/keyframe] [keyframe=100] transform: scale(1) translateX(0px); [/keyframe] [/animation] [class=buttoncon] height:120px; width:40px; position:absolute; top:30px; left:15px; line-height:100%; text-align:center; opacity:0; transform:scale(0.2); [/class] [class=button1] height:23px; width:23px; border-radius:10px; font-size:24px; text-align:center; padding:3px; padding-top:5px; padding-bottom:1px; color:#f9d1ed; font-weight:bold; text-shadow:2px 2px white; background-color:transparent; transition:0.4s; [/class] [class name=button1 state=hover] background-color:#cf98d3; transform:rotate(10deg); color:#cf98d3; transition:0.4s; cursor:pointer; [/class] [script class=button1 on=click] hide tab2 hide tab3 hide tab4 show tab1 [/script] [class=button2] height:23px; width:23px; border-radius:10px; font-size:24px; text-align:center; padding:3px; padding-top:5px; padding-bottom:1px; color:#f9d1ed; font-weight:bold; text-shadow:2px 2px white; background-color:transparent; transition:0.4s; [/class] [class name=button2 state=hover] background-color:#cf98d3; transform:rotate(10deg); color:#cf98d3; transition:0.4s; cursor:pointer; [/class] [script class=button2 on=click] hide tab1 hide tab3 hide tab4 show tab2 [/script] [class=button3] height:23px; width:23px; border-radius:10px; font-size:24px; text-align:center; padding:3px; padding-top:5px; padding-bottom:1px; color:#f9d1ed; font-weight:bold; text-shadow:2px 2px white; background-color:transparent; transition:0.4s; [/class] [class name=button3 state=hover] background-color:#cf98d3; transform:rotate(10deg); color:#cf98d3; transition:0.4s; cursor:pointer; [/class] [script class=button3 on=click] hide tab1 hide tab2 hide tab4 show tab3 [/script] [class=button4] height:23px; width:23px; border-radius:10px; font-size:24px; text-align:center; padding:3px; padding-top:5px; padding-bottom:1px; color:#f9d1ed; font-weight:bold; text-shadow:2px 2px white; background-color:transparent; transition:0.4s; [/class] [class name=button4 state=hover] background-color:#cf98d3; transform:rotate(10deg); color:#cf98d3; transition:0.4s; cursor:pointer; [/class] [script class=button4 on=click] hide tab1 hide tab2 hide tab3 show tab4 [/script] [class=appear] animation-name: {post_id}appear; animation-duration:0.5s; animation-fill-mode:forwards; [/class] [class=disappear] animation-name: {post_id}disappear; animation-duration:0.5s; animation-fill-mode:forwards; [/class] [animation=appear] [keyframe=0] transform:translateX(10px) scale(0.2); opacity:0; [/keyframe] [keyframe=1] transform:translateX(10px) scale(0.2); opacity:1; [/keyframe] [keyframe=100] transform:translateX(0px) scale(1); opacity:1; [/keyframe] [/animation] [animation=disappear] [keyframe=0] transform:translateX(0px) scale(1); opacity:1; [/keyframe] [keyframe=99] transform:translateX(9px) scale(0.21); opacity:0; [/keyframe] [keyframe=100] transform:translateX(10px) scale(0.2); opacity:0; [/keyframe] [/animation] [class=tabcon] height:240px; width:255px; display:inline-block; position:relative; left:5px; padding:15px; [/class] [class=border1] height:75px; width:75px; border:1px solid #cf98d3; padding:5px; position:absolute; left:135px; top:-55px; border-radius:50%; z-index:7; transition:0.4s; [/class] [class name=border1 state=hover] transform:scale(1.1); transition:0.4s; [/class] [class=border2] height:45px; width:45px; border:1px solid #cf98d3; padding:5px; position:absolute; left:208px; top:-45px; border-radius:50%; z-index:7; transition:0.4s; [/class] [class name=border2 state=hover] transform:scale(1.1); transition:0.4s; [/class] [class=scroll] height:100%; width:100%; overflow-y:auto; padding-right:50px; position:relative; [/class] [class=tab1] height:230px; width:245px; border-radius:5px; position:absolute; padding:5px; background-color:#ffeaff; overflow:hidden; [/class] [class=tab2] height:230px; width:245px; border-radius:5px; position:absolute; padding:5px; background-color:#ffeaff; overflow:hidden; [/class] [class=tab3] height:230px; width:245px; border-radius:5px; position:absolute; padding:5px; background-color:#ffeaff; overflow:hidden; [/class] [class=tab4] height:230px; width:245px; border-radius:5px; position:absolute; padding:5px; overflow:hidden; [/class]
[/div]


[div class=container][div=border-top-left-radius:4px;border-top-right-radius:4px;height:90px;width:481px;position:relative;top:0px;left:0px;margin:auto;center;background:url('https://78.media.tumblr.com/b5f3b47ab1780d6edbfeee3aeef3cad1/tumblr_o2vmljvgf51uxyv31o3_1280.png');background-size:100%;background-position:50% 50%;][div=height:3px;width:100px;position:relative;top:-5px;left:-5px;z-index:6;opacity:0.8;][font=Open Sans][COLOR=#cf98d3][SIZE=10px]⠀♡coded by uxie♡[/SIZE][/COLOR][/font][/div][font=Open Sans][/font][/div][font=Open Sans][div class=navi][div class=bigborder][div=height:110px;width:110px;background:url('https://scontent-sit4-1.cdninstagram.com/vp/88fe5f1823ff1ab76d63b29c6d3f6f73/5BECE435/t51.2885-15/e35/27579842_157713725024231_3853580245793767424_n.jpg');background-size:110%;background-position:50% 30%;border-radius:50%;border:0px solid transparent;][/div][/div][div class=bigname][font=Mr Dafoe]name
[div=position:relative;left:5px;top:-3px;]here[/div][/font][/div][div class=quote][font=Inconsolata]❝[color=#f268c8]princess[/color]? please, honey. it's [div=display:inline-block;color:white;font-weight:bold;background-color:#f268c8;padding:2px;padding-top:1px;padding-bottom:1px;letter-spacing:0.5px;]queen[/div].❞[/font][/div][div class=buttoncon][div class=button1]1.[/div][div class=button2]2.[/div][div class=button3]3.[/div][div class=button4]4.[/div]

[/div]
[/div][div class=tabcon][div class=border1][div=height:75px;width:75px;background:url('https://scontent-sit4-1.cdninstagram.com/vp/dbe8edb7bad908e5c84d1a029975451d/5BF505F0/t51.2885-15/e35/26151858_133395314131158_636294959611248640_n.jpg');background-size:100%;border-radius:50%;][/div][/div][div class=border2][div=height:45px;width:45px;background:url('https://scontent-sit4-1.cdninstagram.com/vp/ee9882e062df0494643e3d3860ee5ee3/5C016FBB/t51.2885-15/e35/19932379_1843565632628021_4133740915267207168_n.jpg');background-size:100%;border-radius:50%;][/div][/div][div class=tab1][div=height:22px;font-size:21px;color:white;text-shadow:2px 1px #cf98d3;letter-spacing:0.8px;position:relative;left:5px;top:-5px;margin-bottom:3px;][font=Cedarville Cursive]basics.[/font][/div][div=font-size:10px;color:#463649;margin-left:5px;text-align:justify;][font=Nunito Sans][b]full name
nickname(s)
age
gender
sexual orientation
trope[/b]
[/font][/div][div=margin-top:3px;height:22px;font-size:21px;color:white;text-shadow:2px 1px #cf98d3;letter-spacing:0.8px;position:relative;left:5px;top:-5px;margin-bottom:3px;][font=Cedarville Cursive]appearance.[/font][/div][div=font-size:10px;color:#463649;margin-left:5px;text-align:justify;][font=Nunito Sans][b]height
weight
hair colour
eye colour
ethnicity
faceclaim[/b]
[/font][/div]
[/div][div class=tab2 style=display:none][div class=scroll][div=height:22px;font-size:21px;color:white;text-shadow:2px 1px #cf98d3;letter-spacing:0.8px;position:relative;left:5px;top:-5px;margin-bottom:3px;][font=Cedarville Cursive]personality[/font][/div][div=margin-bottom:5px;height:169px;width:240px;padding:2.5px;font-size:10px;color:#463649;margin-left:5px;text-align:justify;overflow:hidden;][div class=scroll][font=Nunito Sans]Sed est tellus, iaculis id orci id, interdum tincidunt sapien. Cras eu enim imperdiet, convallis nibh vel, lacinia ex. Proin arcu metus, pellentesque sit amet aliquam consequat, iaculis nec nisi. Ut facilisis et ante ut commodo. Sed quam massa, eleifend id mi sodales, facilisis consequat enim. Cras lacinia neque sit amet nulla laoreet luctus. Aliquam eleifend pulvinar porttitor. Suspendisse potenti. Cras sapien dolor, suscipit et magna eu, blandit euismod tortor. Nam at tincidunt est, suscipit ullamcorper mauris. Nulla gravida malesuada felis, id dapibus ex pharetra vitae. Duis cursus dolor eget elit aliquet consequat. Suspendisse auctor fringilla gravida. Donec non tellus a nibh lacinia consequat. Nulla id consequat nunc, ac viverra nulla.
[/font][/div][/div][div=height:94px;width:110px;float:left;position:relative;left:5px;][div=height:19px;font-size:18px;color:white;text-shadow:2px 1px #cf98d3;letter-spacing:0.8px;position:relative;left:5px;top:-5px;margin-bottom:3px;][font=Cedarville Cursive]likes.[/font][/div][div=overflow:hidden;height:105px;width:110px;padding:2.5px;font-size:9px;color:#463649;margin-left:5px;text-align:justify;][div class=scroll][font=Nunito Sans]like 1
like 2
like 3
like 4
like 5
[/font][/div][/div][/div][div=height:94px;width:110px;float:left;position:relative;left:15px;][div=height:19px;font-size:18px;color:white;text-shadow:2px 1px #cf98d3;letter-spacing:0.8px;position:relative;left:5px;top:-5px;margin-bottom:3px;][font=Cedarville Cursive]dislikes.[/font][/div][div=overflow:hidden;height:105px;width:110px;padding:2.5px;font-size:9px;color:#463649;margin-left:5px;text-align:justify;][div class=scroll][font=Nunito Sans]like 1
like 2
like 3
like 4
like 5

[/font][/div][/div][/div]
[/div][/div][div class=tab3 style=display:none][div class=scroll][div=height:22px;font-size:21px;color:white;text-shadow:2px 1px #cf98d3;letter-spacing:0.8px;position:relative;left:5px;top:-5px;margin-bottom:3px;][font=Cedarville Cursive]misc.[/font][/div][div=font-size:10px;color:#463649;margin-left:5px;text-align:justify;][font=Nunito Sans][b]brief history[/b]

[b]why you're in detention[/b]

[b]extra[/b]
[/font][/div]


[/div][/div][div class=tab4 style=display:none][div class=scroll][div=font-size:21px;color:white;text-shadow:2px 1px #cf98d3;letter-spacing:0.8px;position:relative;left:5px;top:-5px;margin-bottom:3px;][font=Cedarville Cursive]relationships.[/font][/div][div=border-radius:50%;height:65px;width:65px;padding:5px;border:1px solid white;margin-left:5px;position:absolute;z-index:6;][div=background:url('https://i.pinimg.com/736x/fd/dc/99/fddc99d0034524ceed97cfd3d8abe43f--emmy-rossum-beautiful-people.jpg');background-size:100%;height:65px;width:65px;border-radius:50%;][/div][/div][div=height:28px;width:85px;background-color:#f268c8;position:relative;top:15px;left:65px;padding-left:25px;border-top-right-radius:1px;border-bottom-right-radius:1px;padding-right:5px;][div=font-size:19px;color:white;font-weight:bold;font-variant:small-caps;position:absolute;top:4px;][font=Roboto]name here[/font][/div][/div][div=background-color:#ffeaff;border-radius:1px;height:75px;width:144px;position:relative;left:65px;top:20.5px;color:#463649;padding:3px;padding-left:22px;font-size:9px;overflow:hidden;text-align:justify;][div=overflow-y:auto;height:75px;width:148px;padding-right:50px;][font=Inconsolata]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper varius eros eu venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pulvinar dignissim lobortis. Duis nunc sapien, suscipit at dolor nec, varius placerat diam. Suspendisse fringilla efficitur euismod. Aliquam sollicitudin ipsum ut erat congue imperdiet. Donec nulla augue, tincidunt eget massa quis, euismod porta ex. Ut a finibus augue, at rhoncus ex. Sed rutrum libero ut rhoncus rhoncus. Etiam aliquet pretium magna eget tristique. Donec venenatis mollis lacinia. Sed convallis, diam vitae efficitur facilisis, sapien mauris faucibus enim, condimentum varius ex quam a neque. Sed sit amet tortor porttitor, varius sem sed, semper erat. Sed euismod fermentum augue, id molestie dui finibus id. Quisque euismod, neque id luctus pharetra, risus mi imperdiet nunc, id ullamcorper dolor diam vitae neque. Integer commodo elit eu nibh congue, in tincidunt mauris fringilla.

Duis efficitur imperdiet sapien, quis imperdiet diam pharetra vel. Duis tortor risus, viverra id orci et, vestibulum lacinia ante. Praesent id volutpat lorem. Fusce sodales, lorem ultrices cursus porta, risus felis iaculis turpis, a convallis mauris magna a odio. Mauris neque justo, blandit non aliquet eget, ultricies nec leo. Vivamus facilisis et diam ut ornare. Proin semper auctor erat, in pretium orci eleifend sed. Proin et dui sed ante tristique facilisis in quis nisl.
[/font][/div][/div]

[div=border-radius:50%;height:65px;width:65px;padding:5px;border:1px solid white;margin-left:160px;position:absolute;z-index:6;][div=background:url('https://78.media.tumblr.com/fd275de9bb1d036a54e92e8bc2e2a606/tumblr_oktertUsSE1vkk23fo1_250.png');background-size:100%;height:65px;width:65px;border-radius:50%;][/div][/div][div=height:28px;width:90px;background-color:#f268c8;position:relative;top:15px;left:60px;padding-left:15px;border-top-right-radius:1px;border-bottom-right-radius:1px;padding-right:10px;][div=font-size:19px;color:white;font-weight:bold;font-variant:small-caps;position:absolute;top:4px;text-align:right;][font=Roboto]name here[/font][/div][/div][div=background-color:#ffeaff;border-radius:1px;height:75px;width:148px;position:relative;left:11px;top:20.5px;color:#463649;padding:3px;padding-left:18px;font-size:9px;overflow:hidden;text-align:justify;][div=overflow-y:auto;height:75px;width:148px;padding-right:50px;][font=Inconsolata]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper varius eros eu venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pulvinar dignissim lobortis. Duis nunc sapien, suscipit at dolor nec, varius placerat diam. Suspendisse fringilla efficitur euismod. Aliquam sollicitudin ipsum ut erat congue imperdiet. Donec nulla augue, tincidunt eget massa quis, euismod porta ex. Ut a finibus augue, at rhoncus ex. Sed rutrum libero ut rhoncus rhoncus. Etiam aliquet pretium magna eget tristique. Donec venenatis mollis lacinia. Sed convallis, diam vitae efficitur facilisis, sapien mauris faucibus enim, condimentum varius ex quam a neque. Sed sit amet tortor porttitor, varius sem sed, semper erat. Sed euismod fermentum augue, id molestie dui finibus id. Quisque euismod, neque id luctus pharetra, risus mi imperdiet nunc, id ullamcorper dolor diam vitae neque. Integer commodo elit eu nibh congue, in tincidunt mauris fringilla.

Duis efficitur imperdiet sapien, quis imperdiet diam pharetra vel. Duis tortor risus, viverra id orci et, vestibulum lacinia ante. Praesent id volutpat lorem. Fusce sodales, lorem ultrices cursus porta, risus felis iaculis turpis, a convallis mauris magna a odio. Mauris neque justo, blandit non aliquet eget, ultricies nec leo. Vivamus facilisis et diam ut ornare. Proin semper auctor erat, in pretium orci eleifend sed. Proin et dui sed ante tristique facilisis in quis nisl.
[/font][/div][/div]

[/div][/div]

[/div]
[nobr]
[class=container]
height:360px;
width:480px;
background-color:#f9d1ed;
margin:auto;
position:Relative;
border-radius:4px;
[/class]

[class=navi]
height:270px;
width:190px;
float:left;
position:relative;
cursor:default;
[/class]

[script class=navi on=mouseenter]
addClass reveal bigborder
addClass namech bigname
addClass namech quote
addClass appear buttoncon
removeClass hide bigborder
removeClass disappear buttoncon
[/script]

[script class=navi on=mouseleave]
removeClass reveal bigborder
removeClass namech bigname
removeClass namech quote
removeClass appear buttoncon
addClass disappear buttoncon
addClass hide bigborder
[/script]

[class=bigborder]
height:110px;
width:110px;
border:1px solid #cf98d3;
padding:8px;
position:absolute;
left:36.5px;
top:25px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]

[class=bigname]
font-size:31px;
color:white;
text-shadow:2px 1px #cf98d3;
transition:0.4s;
letter-spacing:1px;
line-height:70%;
text-align:justify;
position:relative;
top:143px;
margin-left:45px;
transform:rotate(-10deg);
z-index:7;
[/class]

[class=quote]
font-size:8px;
color:#cf98d3;
text-align:justify;
max-width:175px;
transform:rotate(-10deg);
z-index:7;
margin-left:27px;
letter-spacing:0.5ps;
transition:0.4s;
position:relative;
top:160px;
text-transform:uppercase;
[/class]

[class=namech]
transform:scale(1.1) rotate(-15deg);
transition:0.4s;
[/class]

[class=reveal]
animation-name: {post_id}reveal;
animation-duration:0.4s;
animation-fill-mode:forwards;
[/class]

[class=hide]
animation-name: {post_id}hide;
animation-duration:0.4s;
animation-fill-mode:forwards;
[/class]

[animation=reveal]
[keyframe=0]
transform: scale(1) translateX(0px);
[/keyframe]
[keyframe=100]
transform: scale(1.05) translateX(15px);
[/keyframe]
[/animation]

[animation=hide]
[keyframe=0]
transform: scale(1.05) translateX(15px);
[/keyframe]
[keyframe=100]
transform: scale(1) translateX(0px);
[/keyframe]
[/animation]

[class=buttoncon]
height:120px;
width:40px;
position:absolute;
top:30px;
left:15px;
line-height:100%;
text-align:center;
opacity:0;
transform:scale(0.2);
[/class]

[class=button1]
height:23px;
width:23px;
border-radius:10px;
font-size:24px;
text-align:center;
padding:3px;
padding-top:5px;
padding-bottom:1px;
color:#f9d1ed;
font-weight:bold;
text-shadow:2px 2px white;
background-color:transparent;
transition:0.4s;
[/class]

[class name=button1 state=hover]
background-color:#cf98d3;
transform:rotate(10deg);
color:#cf98d3;
transition:0.4s;
cursor:pointer;
[/class]

[script class=button1 on=click]
hide tab2
hide tab3
hide tab4
show tab1
[/script]

[class=button2]
height:23px;
width:23px;
border-radius:10px;
font-size:24px;
text-align:center;
padding:3px;
padding-top:5px;
padding-bottom:1px;
color:#f9d1ed;
font-weight:bold;
text-shadow:2px 2px white;
background-color:transparent;
transition:0.4s;
[/class]

[class name=button2 state=hover]
background-color:#cf98d3;
transform:rotate(10deg);
color:#cf98d3;
transition:0.4s;
cursor:pointer;
[/class]

[script class=button2 on=click]
hide tab1
hide tab3
hide tab4
show tab2
[/script]

[class=button3]
height:23px;
width:23px;
border-radius:10px;
font-size:24px;
text-align:center;
padding:3px;
padding-top:5px;
padding-bottom:1px;
color:#f9d1ed;
font-weight:bold;
text-shadow:2px 2px white;
background-color:transparent;
transition:0.4s;
[/class]

[class name=button3 state=hover]
background-color:#cf98d3;
transform:rotate(10deg);
color:#cf98d3;
transition:0.4s;
cursor:pointer;
[/class]

[script class=button3 on=click]
hide tab1
hide tab2
hide tab4
show tab3
[/script]

[class=button4]
height:23px;
width:23px;
border-radius:10px;
font-size:24px;
text-align:center;
padding:3px;
padding-top:5px;
padding-bottom:1px;
color:#f9d1ed;
font-weight:bold;
text-shadow:2px 2px white;
background-color:transparent;
transition:0.4s;
[/class]

[class name=button4 state=hover]
background-color:#cf98d3;
transform:rotate(10deg);
color:#cf98d3;
transition:0.4s;
cursor:pointer;
[/class]

[script class=button4 on=click]
hide tab1
hide tab2
hide tab3
show tab4
[/script]

[class=appear]
animation-name: {post_id}appear;
animation-duration:0.5s;
animation-fill-mode:forwards;
[/class]

[class=disappear]
animation-name: {post_id}disappear;
animation-duration:0.5s;
animation-fill-mode:forwards;
[/class]

[animation=appear]
[keyframe=0]
transform:translateX(10px) scale(0.2);
opacity:0;
[/keyframe]
[keyframe=1]
transform:translateX(10px) scale(0.2);
opacity:1;
[/keyframe]
[keyframe=100]
transform:translateX(0px) scale(1);
opacity:1;
[/keyframe]
[/animation]

[animation=disappear]
[keyframe=0]
transform:translateX(0px) scale(1);
opacity:1;
[/keyframe]
[keyframe=99]
transform:translateX(9px) scale(0.21);
opacity:0;
[/keyframe]
[keyframe=100]
transform:translateX(10px) scale(0.2);
opacity:0;
[/keyframe]
[/animation]

[class=tabcon]
height:240px;
width:255px;
display:inline-block;
position:relative;
left:5px;
padding:15px;
[/class]

[class=border1]
height:75px;
width:75px;
border:1px solid #cf98d3;
padding:5px;
position:absolute;
left:135px;
top:-55px;
border-radius:50%;
z-index:7;
transition:0.4s;
[/class]

[class name=border1 state=hover]
transform:scale(1.1);
transition:0.4s;
[/class]

[class=border2]
height:45px;
width:45px;
border:1px solid #cf98d3;
padding:5px;
position:absolute;
left:208px;
top:-45px;
border-radius:50%;
z-index:7;
transition:0.4s;
[/class]

[class name=border2 state=hover]
transform:scale(1.1);
transition:0.4s;
[/class]

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

[class=tab1]
height:230px;
width:245px;
border-radius:5px;
position:absolute;
padding:5px;
background-color:#ffeaff;
overflow:hidden;
[/class]

[class=tab2]
height:230px;
width:245px;
border-radius:5px;
position:absolute;
padding:5px;
background-color:#ffeaff;
overflow:hidden;
[/class]

[class=tab3]
height:230px;
width:245px;
border-radius:5px;
position:absolute;
padding:5px;
background-color:#ffeaff;
overflow:hidden;
[/class]

[class=tab4]
height:230px;
width:245px;
border-radius:5px;
position:absolute;
padding:5px;
overflow:hidden;
[/class]

[/nobr][/font][/div]
i love this so much
you're literally jesus if he was on rpn
 

Users who are viewing this thread

Back
Top