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

Resource yucksie (uxie's codes)

Uxie

ニャー

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,



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



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.




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.


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.


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:

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 here u go this is for u




 
Last edited:

Uxie

ニャー
uxie ®
code features
mobile-friendly
animation
scrolls
cool button
basic
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

– uxie










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.


⠀♡coded by uxie♡


 
Last edited:

Uxie

ニャー
uxie ®
code features
NOT mobile-friendly
tabs
peek scrolls
aesthetic???
janky
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 !!

– uxie




name here


♥ 桜ミルク ♥
click the flowers





⠀♡coded by uxie♡



 
Last edited:

FloatingAroundSpace

Three Thousand Club
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!
 

Uxie

ニャー
uxie ®
code features
NOT mobile-friendly
hovers
hidden scrolls
basic
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 !
– uxie




⠀♡coded by uxie♡




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.


haha

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.


haha

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.


haha






 
Last edited:

Uxie

ニャー
uxie ®
code features
NOT mobile-friendly
hidden scrolls
div tabs
advanced
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!
– uxie





ayaka
hayami
"i drink to forget, but i always end up remembering."
⠀♡coded by uxie♡

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










 
Last edited:

Pandaskel

Stock Image
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

⠀♡coded by uxie♡

it's a name

BASICS
PERSONA
HISTORY




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

Mio

(´• ω •`)
bruh this shit was crazy im on a code roll LOL
free 2 use, not mobile/tablet friendly, read 'OPENME' before use



name here



LOOKS


PERSONA


BIO


OPENME



X
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.



X

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.


X

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.


X

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.


X
uxie♡

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 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!!
 

qwq

New Member
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)
 

Uxie

ニャー
uxie ®
code features
not mobile-friendly
tabs
hidden scrolls
hovers
lil janky
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
– uxie




⠀♡coded by uxie♡
name
here
princess? please, honey. it's
queen
.❞
1.
2.
3.
4.



basics.
full name
nickname(s)
age
gender
sexual orientation
trope
appearance.
height
weight
hair colour
eye colour
ethnicity
faceclaim




 
Last edited:

cherub.

𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳
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

⠀♡coded by uxie♡
name
here
princess? please, honey. it's
queen
.❞
1.
2.
3.
4.



basics.
full name
nickname(s)
age
gender
sexual orientation
trope

appearance.
height
weight
hair colour
eye colour
ethnicity
faceclaim








[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 (Users: 0, Guests: 1)

Top