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

Uxie

ଘ(੭ˊ꒳ˋ)੭* ੈ‧₊❀˖°
fontcall
[div class=container] [div class=header] [div class=icon style=font-size:0;]1#[/div] [div class=title]yucksie [div class=tooltip]click to enter ![/div] [div class=addition]❛ uxie's codes ❟[/div] [div class="tabic 1tabi"]introduction[/div] [div class="tabic 2tabi"]terms of use[/div] [div class="tabic 3tabi"]code masterlist[/div] [div class="tabic 4tabi"]update log[/div] [/div] [/div] [div class=body style=display:none;] [div class=buttonc] [div class="button 1btn"]
1#
[div class="btooltip 1btt"]introduction[/div][/div] [div class="button 2btn"]
2#
[div class="btooltip 2btt"]t-o-u[/div][/div] [div class="button 3btn"]
3#
[div class="btooltip 3btt"]codes[/div][/div] [div class="button 4btn"]
4#
[div class="btooltip 4btt"]updates[/div][/div] [/div] [div class=tabc] [div class="tabs 1tab wrap" style=display:none;][div class=scroll][div class=h1]hey, i'm uxie![/div] welcome to my coding workshop! this is just a place for me to post some of the stuff i work on. i like experimenting with bbcode/bbscript a lot, and i'm slowly shifting towards making mobile-friendly codes! soon. hopefully. feel free to drop suggestions/tips/critique here, and/or point out a bug you've spotted with my codes! i'd especially love it if you could leave a like if you're using the code or just appreciate it! it means a lot :"") if you have any questions regarding any of my codes too, feel free to post it in this thread as well! if you're here for the freebies, please read the next page before use!!! [/div][/div] [div class="tabs 2tab wrap" style=display:none;][div class=scroll]i have some rules regarding the use of my codes! i know bbcodes are creative commons, but i've spent a lot of time on most of these, so i would greatly appreciate if you read through this thoroughly before using any of my codes. all my codes are free to use, but [div class=h2]please do not remove the credit![/div] i spent a lot of time on these codes and i'd appreciate if you respect the credit and avoid editing or removing the watermark if you were to use/reference it. do not claim any of these codes as your own. [div class=h2]don't use non-freebies![/div] if i didn't post the code here, please do not use it! i choose not to post certain codes on here both because i would prefer for them to only be for my own personal use and/or there are parts of the code that require further explanation/editing. i have my own reasons as to why i choose not to upload them as freebies or in this workshop, so please respect them, and refrain from using codes you've seen me use but are not posted on this thread. [div class=h2]don't be a thief![/div] there's a big difference between learning/reference/inspiration and plagiarism! please avoid altering any part of my codes and then passing it off as your own. in your use, you may edit the colours, images, even parts of the layout to your liking, as long as you do not claim it as your own. i'm all for learning off of my codes, but i would greatly prefer if you don't straight-up copy section(s) of my code or use it as a base code and then call it your own. [/div][/div] [div class="tabs 3tab" style=display:none;][div class=masterlist] [div class=codeb1][div class=scroll] [div class=h3]character sheets[/div] [div class=codec style=margin-top:5px;] [div class=number]01.[/div] [div class=codet][div class=codeh]witchy[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]02.[/div] [div class=codet][div class=codeh]desktop[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]03.[/div] [div class=codet][div class=codeh]milk[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]04.[/div] [div class=codet][div class=codeh]peekaboo[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]05.[/div] [div class=codet][div class=codeh]aurora[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]06.[/div] [div class=codet][div class=codeh]princess[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]07.[/div] [div class=codet][div class=codeh]2d[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]08.[/div] [div class=codet][div class=codeh]pixie[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]09.[/div] [div class=codet][div class=codeh]rose[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]10.[/div] [div class=codet][div class=codeh]latte[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]11.[/div] [div class=codet][div class=codeh]hearts[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]12.[/div] [div class=codet][div class=codeh]opportunity[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]13.[/div] [div class=codet][div class=codeh]two-faced[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [/div][/div] [div class=codeb2c][div class=scroll] [div class=h3]ic/placeholders[/div] [div class=codec style=margin-top:5px;] [div class=number]01.[/div] [div class=codet][div class=codeh]daisy[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]02.[/div] [div class=codet][div class=codeh]pixie dust[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]03.[/div] [div class=codet][div class=codeh]sunflower[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [div class=codec] [div class=number]04.[/div] [div class=codet][div class=codeh]lilies[/div][div class=codeth][div class=codel]link[/div][/div][/div] [/div] [/div][/div] [/div][/div] [div class="tabs 4tab wrap" style=display:none;][div class=scroll][div class=h1]all dates are dd/mm/yy[/div] 3/7/18 - updated a very small portion of this code to make the title more user-friendly with the min-width value 18/7/18 - updated the code of my computer-looking code to get rid of this border around the big image 18/8/18 - new cs code: princess! found here 4/9/18 - new cs code: 2d! found here 6/10/18 - updated this to fix watermark placement + added code spoiler 16/11/18 - new cs code: latte! found here 17/3/19 - updated all of the code infos + put codes on pastebin (´。• ◡ •。`) 17/3/19 - new cs code: hearts! found here 2/11/19 - new ic code: sunflower, but totally not back yet lmao ! found here 25/12/19 - new ic code: lilies! found here 11/2/20 - new cs code: opportunity! found here 9/3/20 - new cs code: two-faced! found here 12/3/20 - updated the code for the workshop opening post! [/div][/div] [/div] [/div] [/div]

[class=container] --icon: url('https://www.rpnation.com/data/avatars/l/30/30903.jpg?1581690366'); --color-1: #FDC9D6; --color-2: #D6B1AB; --color-3: #ffaabf; height:350px; width:450px; margin:auto; position:relative; padding:10px; box-sizing: border-box; display:flex; flex-flow: row wrap; background-color: #fff; [/class] [class=header] height:100%; width:100%; position:relative; display:flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; padding:20px; box-sizing:border-box; transition: 1s ease-in-out; [/class] [class=hshrink] height:20%; width:100%; transition: 1s ease-in-out; padding:10px; padding-left:5px; padding-right:0px; justify-content: flex-start; [/class] [class=tshrink] animation-name: {post_id}tshrink; animation-duration: .5s; animation-fill-mode: forwards; [/class] [class=ishrink] animation-name: {post_id}ishrink; animation-duration: .5s; animation-fill-mode: forwards; pointer-events: none; [/class] [class=icon] height:120px; width:120px; background: var(--icon); border-radius: 100%; background-size:100%; border:5px solid var(--color-1); z-index:9; position:relative; display:Flex; [/class] [class name=icon state=hover] cursor:pointer; [/class] [class=title] height:fit-content; flex-grow: 1; transform: translate(-11px, -10px); background-color: var(--color-1); padding:3px; color: #fff; text-transform: uppercase; font-family: 'Archivo', sans-serif; font-weight:bold; text-align:right; letter-spacing:2px; font-size:25px; padding-right:10px; position:relative; [/class] [class=addition] position:absolute; bottom:-17px; font-size:10px; font-style:oblique; font-family: 'Nunito', sans-serif; text-transform: lowercase; color: black; font-weight: normal; letter-spacing:1px; right:5px; [/class] [class=tooltip] height:fit-content; width: fit-content; padding-left:3px; padding-right:3px; background-color: var(--color-2); font-family: 'Nunito', sans-serif; color: #000; text-transform:uppercase; font-size:9px; opacity:0; position:absolute; top:-18px; border-radius:6px; letter-spacing:0; font-weight:normal; transition: 0.3s ease-in-out; [/class] [class=tooltipappear] opacity:0.8; transition: 0.3s ease-in-out; [/class] [script class=icon on=mouseenter] addClass tooltipappear tooltip [/script] [script class=icon on=mouseleave] removeClass tooltipappear tooltip [/script] [script class=icon on=click version=2] (= Header (index (split (getText) "#") 0)) (if (== openedHeader Header) (stop)) (addClass "hshrink" "header") (addClass "ishrink" "icon") (addClass "tshrink" "title") (setTimeout 1.3 (fadeIn 1000 "body")) (setTimeout 1.3 (fadeIn 1000 (+ Header "tabi"))) (= openedHeader Header) (= Header currentTab) [/script] [animation=ishrink] [keyframe=0] height:120px; width:120px; border: 5px solid var(--color-1); [/keyframe] [keyframe=100] height:80px; width:80px; top:5px; border: 3px solid var(--color-1); [/keyframe] [/animation] [animation=tshrink] [keyframe=0] font-size:25px; padding:3px; padding-right:10px; [/keyframe] [keyframe=100] font-size:14px; padding:2px; padding-right:5px; [/keyframe] [/animation] [class=body] height:80%; width:100%; display:flex; flex-flow: row wrap; box-sizing:border-box; justify-content: space-between; [/class] [class=buttonc] height:55%; width:8%; margin-top:15px; padding-top:20px; box-sizing:border-box; margin-left:7.2%; display:flex; flex-flow: row wrap; align-items: space-between; [/class] [class=button] height:fit-content; width:100%; justify-content: center; display:flex; align-items: center; align-content: center; color: var(--color-3); font-size:13px; position:relative; transition: .3s ease-in-out; [/class] [class name=button state=hover] cursor:pointer; font-size:16px; transition: .3s ease-in-out; [/class] [script class=button on=mouseenter version="2"] (= currentButton (index (split (getText) "#") 0)) (fadeIn 300 (+ currentButton "btt")) [/script] [script class=button on=mouseleave] fadeOut 300 btooltip [/script] [script class=button on=click version="2"] (= currentTab (index (split (getText) "#" ) 0)) (if (== openedTab currentTab) (stop)) (hide "tabs") (hide "tabic") (slideDown 800 (+ currentTab "tab")) (fadeIn 300 (+ currentTab "tabi")) (= openedTab currentTab) [/script] [class=btooltip] position:absolute; width:fit-content; height:fit-content; right:100%; font-size:8px; font-family: 'Nunito', sans-serif; letter-spacing:0.1px; background-color: var(--color-2); border-radius:7px; padding-left:3.5px; padding-right:3.5px; color: #000; text-transform:uppercase; line-height:180%; display:none; [/class] [class=scroll] height:100%; width:105%; overflow-y: scroll; padding-right:40px; [/class] [class=tabic] height:fit-content; width:fit-content; font-size:11px; text-transform:uppercase; font-style: oblique; position:absolute; left:5%; bottom: -25px; font-weight:bold; font-family: 'Archivo', sans-serif; color: #000; display:none; [/class] [class=tabc] height:100%; width:80%; margin-right:3%; position:relative; [/class] [class=tabs] height:100%; width:100%; box-sizing:border-box; padding:15px; bottom: 0; overflow:hidden; font-size:10px; font-family: 'Nunito', sans-serif; color: #000; text-align: justify; line-height:150%; [/class] [class=wrap] white-space: pre-wrap; [/class] [class=h1] font-size:18px; color: var(--color-3); background-color: #fff; font-family: 'Playfair Display', display; font-weight:bold; position:sticky; width:100%; top:0px; letter-spacing:1px; font-style:oblique; text-align:right; box-sizing:border-box; padding-bottom:3px; [/class] [class=h2] font-size:18px; color: var(--color-3); background-color: #fff; font-family: 'Playfair Display', display; font-weight:bold; width:100%; letter-spacing:1px; font-style:oblique; text-align:right; box-sizing:border-box; [/class] [class=h3] font-size:11px; background-color: var(--color-1); font-family: 'Archivo', display; font-weight:bold; position:sticky; width:100%; top:0px; letter-spacing:1px; text-align: center; box-sizing:border-box; color: #fff; padding:2px; text-transform:uppercase; line-height:150%; border-radius:3px; z-index:6; [/class] [class=masterlist] height:95%; width:100%; display:flex; flex-flow: row wrap; [/class] [class=codeb1] height:100%; width:50%; box-sizing:border-box; padding:3px; overflow:hidden; [/class] [class=codec] width:100%; box-sizing:border-box; text-align:center; display:flex; flex-flow: row nowrap; align-items: center; align-content: center; margin-top:10px; [/class] [class=number] height:100%; width:30%; line-height:100%; color: var(--color-3); font-size:30px; font-weight:bold; font-family: 'Playfair Display', display; text-align:left; [/class] [class=codet] height: fit-content; flex-grow:1; margin-left:10px; line-height:150%; align-self: flex-end; margin-bottom:0px; color: var(--color-2); font-weight:bold; text-align:left; text-transform: uppercase; font-family: 'Archivo', sans-serif; font-size:12px; letter-spacing:1px; position:relative; [/class] [class=codeth] font-size:18px line-height:150%; height:100%; width:100%; background-color: #fff; opacity:0; position:absolute; top:0; left:0; padding-left: 10px; box-sizing: border-box; letter-spacing:2px; transition: .2s; [/class] [class name=codeth state=hover] font-size:15px line-height:150%; height:100%; width:100%; background-color: #fff; opacity:1; transition: .3s; [/class] [class=codel] color: var(--color-2); font-weight:bold; text-align:left; text-transform: uppercase; font-family: 'Archivo', sans-serif; font-size:12px; letter-spacing:1px; display:inline; [/class] [class=codeb2c] height:100%; width:50%; padding:3px; box-sizing:border-box; overflow:hidden; [/class]
 
Last edited:
wowie its rpn

User
status
Last seen: 10 minutes ago

Joined
MMM DD, YYYY
Messages
3,046
Ratings
4,539
Follow
Ignore
Start conversation
Find⠀
Profile posts
Latest activity
Postings
About
here are some random facts about me! maybe even some basic information! you can go crazy here with any font or size you'd like- edit the height to fit all ur stuff, perhaps throw in an image here!
Birthday:
Location:
Gender:

Occupation:
MMM D, YYYY (Age: 63)
Random Place
Chair

trashcan
Contact
Conversation:

Start Conversation
Signature


Following

... and 19 more.
Followers

... and 43 more.

⠀♡coded by uxie♡




[div=width:650px;height:550px;border:1px solid #D2D2D2;margin:auto;overflow:hidden][div=overflow-y:scroll;height:550px;width:700px;][div=width:650px;height:75px;background-color:#FCFCFC;border-bottom:1px solid #F2F2F2;center;][div=position:relative;left:170px;top:3px;center;height:60px;width:450px;float:left;][font=Open Sans][color=#2980BB][size=20px]User[/size][/color]
[size=12px][color=#1d1d1d]status[/color]
[color=#9DAAC8]Last seen:[/color][color=#1d1d1d] 10 minutes ago [/color][/size][color=#1d1d1d]
[/color][/font][color=#1d1d1d][/color][/div][color=#1d1d1d][div=background:url('https://78.media.tumblr.com/a9279309a2ea742df27fbfee5a821c1e/tumblr_op3hqvKPCF1uxqwayo3_500.png');background-size:100%;height:150px;width:150px;position:relative;top:7px;left:7px;border-radius:2px][/div][/color][/div][div=position:relative;left:80px;width:480px;height:45px;background-color:white;border-bottom:1px solid #F2F2F2;center;margin-left:80px][div=width:100px;height:30px;text-align:center;display:inline-block][font=Open Sans][color=#9D9D9D][size=11px]Joined[/size][/color]
[color=#1D1D1D][size=13px]MMM DD, YYYY[/size][/color][/font][/div][div=width:100px;height:30px;text-align:center;display:inline-block;margin-left:90px][font=Open Sans][color=#9D9D9D][size=11px]Messages[/size][/color]
[color=#1D1D1D][size=13px]3,046[/size][/color][/font][/div][div=width:100px;height:30px;text-align:center;display:inline-block;margin-left:90px][font=Open Sans][color=#9D9D9D][size=11px]Ratings[/size][/color]
[color=#2A658E][size=13px]4,539[/size][/color][/font][/div][/div][div=width:480px;height:45px;background-color:white;center;][div=height:25px;width:55px;border:1px solid #D2D2D2;background-color:white;border-bottom-left-radius:4px;border-top-left-radius:4px;float:left;position:relative;left:170px;top:7px;text-align:center;display:inline-block][font=Open Sans][size=12px][color=#2980B9]Follow[/color][/size][/font][size=12px][/size][/div][div=height:25px;width:55px;border:1px solid #D2D2D2;background-color:white;border-bottom-right-radius:4px;border-top-right-radius:4px;float:left;position:relative;left:170px;top:7px;text-align:center;display:inline-block][font=Open Sans][size=12px][color=#2980B9]Ignore[/color][/size][/font][size=12px][/size][/div][div=margin-left:5px;height:25px;width:115px;border:1px solid #D2D2D2;background-color:white;border-bottom-left-radius:4px;border-top-left-radius:4px;float:left;position:relative;left:170px;top:7px;text-align:center;display:inline-block][font=Open Sans][size=12px][color=#2980B9]Start conversation[/color][/size][/font][size=12px][color=#2980B9][/color][/size][/div][div=height:25px;width:55px;border:1px solid #D2D2D2;background-color:white;border-bottom-right-radius:4px;border-top-right-radius:4px;float:left;position:relative;left:170px;top:7px;text-align:center;display:inline-block][font=Open Sans][size=12px][color=#2980B9]Find⠀[fa]fa-sort-down[/fa][/color][/size][/font][size=12px][color=#2980B9][/color][/size][/div][/div][div=width:650px;height:40px;background-color:#2980B9;center;][div=height:24px;width:100px;display:inline-block;text-align:center;position:relative;top:7px;padding:3px][div=font-size:13px;margin-left:7px;text-align:center][color=white][font=Open Sans]Profile posts[/font][/color][/div][/div][div=height:24px;width:100px;display:inline-block;text-align:center;position:relative;top:7px;padding:3px][div=font-size:13px;margin-left:7px;text-align:center][color=white][font=Open Sans]Latest activity[/font][/color][/div][/div][div=height:24px;width:80px;display:inline-block;text-align:center;position:relative;top:7px;padding:3px][div=font-size:13px;margin-left:2px;text-align:center][color=white][font=Open Sans]Postings[/font][/color][/div][/div][div=height:24px;width:60px;display:inline-block;text-align:center;position:relative;top:7px;border-bottom: 3px solid white;padding:3px][div=font-size:13px;margin-left:3px;text-align:center][color=white][font=Open Sans]About[/font][/color][/div][/div][/div][div=background-color:white;height:200px;width:650px;border-bottom:1px solid #F2F2F2;center][div=height:100%;width:625px;margin-left:10px;margin-top:15px][font=Open Sans][size=12px]here are some random facts about me! maybe even some basic information! you can go crazy here with any font or size you'd like- edit the height to fit all ur stuff, perhaps throw in an image here![/size][/font][/div][/div][div=background-color:white;height:120px;width:650px;border-bottom:1px solid #F2F2F2;center][row][column=span2][div=font-size:14px;text-align:left;margin-left:5px;margin-top:10px;color:#9D9D9D][font=Open Sans]Birthday:
Location:
Gender:

Occupation:[/font][/div][/column][column=span6][div=font-size:14px;text-align:left;margin-left:25px;margin-top:10px;color:#1d1d1d][font=Open Sans]MMM D, YYYY (Age: 63)
Random Place
Chair

trashcan[/font][/div][/column][div=font-size:14px;text-align:left;margin-left:25px;margin-top:10px;color:#1d1d1d][/div][/row][div=font-size:14px;text-align:left;margin-left:25px;margin-top:10px;color:#1d1d1d][/div][/div][div=background-color:white;height:60px;width:650px;border-bottom:1px solid #F2F2F2;center;line-height:20px][row][column=span2][div=font-size:14px;text-align:left;margin-left:5px;margin-top:10px;][font=Open Sans][color=#3687BD]Contact[/color]
[color=#9D9D9D]Conversation:[/color][/font][/div][/column][column=span6][div=font-size:14px;text-align:left;margin-left:25px;margin-top:10px;color:#3687BD][font=Open Sans]
Start Conversation[/font][/div][/column][div=font-size:14px;text-align:left;margin-left:25px;margin-top:10px;color:#3687BD][/div][/row][div=font-size:14px;text-align:left;margin-left:25px;margin-top:10px;color:#3687BD][/div][/div][div=background-color:white;width:650px;border-bottom:1px solid #F2F2F2;center;][div=font-size:14px;text-align:left;margin-left:11px;margin-top:10px;][font=Open Sans][color=#3687BD]Signature[/color]
[/font][/div][div=font-size:14px;text-align:center;margin:auto;center;color:#1d1d1d;][font=Open Sans]
♚[/font][/div]
[/div][div=background-color:white;height:105px;width:650px;border-bottom:1px solid #F2F2F2;center;][div=font-size:14px;text-align:left;color:#3687BD;margin-left:11px;margin-top:10px][font=Open Sans]Following[/font][/div][div=background:url('https://www.rpnation.com/data/avatars/l/30/30903.jpg?1519973099');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:10px;margin-top:7px][/div][div=background:url('https://www.rpnation.com/data/avatars/l/3/3827.jpg?1521653391');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://www.rpnation.com/data/avatars/l/54/54312.jpg?1521742661');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://www.rpnation.com/data/avatars/s/47/47539.jpg?1491871944');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://www.rpnation.com/data/avatars/l/34/34131.jpg?1518462152');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://i.redd.it/rsf9z7oil8c01.jpg');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://pm1.narvii.com/6582/e0c2316af04d9c85831462b8d3734fe7f87bf396_hq.jpg');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://i.pinimg.com/originals/d8/b9/8e/d8b98e0d67506b6db957c39cc807c05a.jpg');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://78.media.tumblr.com/6a2e89385a2126ba46330b3b789574a8/tumblr_ovtdv4q8nM1wzk6ljo2_400.png');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div]
[div=font-size:14px;text-align:left;color:#3687BD;margin-left:11px][font=Open Sans]... and 19 more.[/font][/div][/div][div=background-color:white;height:105px;width:650px;border-bottom:1px solid #F2F2F2;center;][div=font-size:14px;text-align:left;color:#3687BD;margin-left:11px;margin-top:10px][font=Open Sans]Followers[/font][/div][div=background:url('https://78.media.tumblr.com/6a2e89385a2126ba46330b3b789574a8/tumblr_ovtdv4q8nM1wzk6ljo2_400.png');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:10px;margin-top:7px][/div][div=background:url('https://78.media.tumblr.com/62951a484fbf50a0f14d44af6f841e2a/tumblr_olqlwg2I1G1tvsbazo4_r2_1280.jpg');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://pbs.twimg.com/media/DXYSazfX4AIh6jH.jpg');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://www.rpnation.com/data/avatars/s/47/47539.jpg?1491871944');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://www.rpnation.com/data/avatars/l/34/34131.jpg?1518462152');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://i.redd.it/rsf9z7oil8c01.jpg');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://pm1.narvii.com/6582/e0c2316af04d9c85831462b8d3734fe7f87bf396_hq.jpg');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://i.pinimg.com/originals/d8/b9/8e/d8b98e0d67506b6db957c39cc807c05a.jpg');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div][div=background:url('https://www.rpnation.com/data/avatars/l/3/3827.jpg?1521653391');background-size:100%;height:50px;width:50px;border-radius:2px;display:inline-block;margin-left:5px;margin-top:7px][/div]
[div=font-size:14px;text-align:left;color:#3687BD;margin-left:11px][font=Open Sans]... and 43 more.[/font][/div][/div]
[font=Open Sans][color=#9DAAC8][size=10px]⠀♡coded by uxie♡[/size][/color][/font][/div][/div]
 
Last edited:
and now it's twitter oh jeez wowie

Following



Tweets
10.4K
Following
286
Followers
3,792
Likes
14.2K

Name
@username
hello my name is


location
Joined Month Year

Tweet To
Message



782 Photos and Videos






Name @username · 1h
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra erat augue, sed mollis augue auctor at. Duis mollis vitae nisl a rhoncus. Nulla viverra dictum urna sed cursus. Vivamus euismod ac est nec pellentesque. Duis augue sem, convallis ut purus in, efficitur consequat felis. Aenean aliquet neque diam, vel porttitor mi tincidunt convallis. Mauris ante leo, feugiat nec hendrerit ac, pretium ac est. Curabitur dictum sollicitudin ornare. Nam nec pellentesque dolor. Etiam vitae magna convallis, faucibus nisl id, auctor ex.

Etiam tristique fermentum odio et gravida. Cras vitae sem dapibus, consectetur nibh sed, volutpat arcu. Donec accumsan euismod arcu nec euismod. Praesent lorem sem, pharetra eget finibus eu, commodo a nisl. Curabitur interdum tincidunt condimentum. Praesent accumsan libero cursus aliquam suscipit. Proin at lacus non metus auctor scelerisque. Donec non velit erat. Proin vulputate mauris dolor. Etiam ut cursus orci, a tincidunt nisl. Donec lacinia mauris et facilisis accumsan. Praesent vestibulum eu orci sed dapibus. Maecenas pharetra tortor quis eros commodo, sed congue lacus aliquet.


Name @username · 23h
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra erat augue, sed mollis augue auctor at. Duis mollis vitae nisl a rhoncus. Nulla viverra dictum urna sed cursus. Vivamus euismod ac est nec pellentesque. Duis augue sem, convallis ut purus in, efficitur consequat felis. Aenean aliquet neque diam, vel porttitor mi tincidunt convallis. Mauris ante leo, feugiat nec hendrerit ac, pretium ac est. Curabitur dictum sollicitudin ornare. Nam nec pellentesque dolor. Etiam vitae magna convallis, faucibus nisl id, auctor ex.

Etiam tristique fermentum odio et gravida. Cras vitae sem dapibus, consectetur nibh sed, volutpat arcu. Donec accumsan euismod arcu nec euismod. Praesent lorem sem, pharetra eget finibus eu, commodo a nisl. Curabitur interdum tincidunt condimentum. Praesent accumsan libero cursus aliquam suscipit. Proin at lacus non metus auctor scelerisque. Donec non velit erat. Proin vulputate mauris dolor. Etiam ut cursus orci, a tincidunt nisl. Donec lacinia mauris et facilisis accumsan. Praesent vestibulum eu orci sed dapibus. Maecenas pharetra tortor quis eros commodo, sed congue lacus aliquet.


Name @username · MMM DD
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra erat augue, sed mollis augue auctor at. Duis mollis vitae nisl a rhoncus. Nulla viverra dictum urna sed cursus. Vivamus euismod ac est nec pellentesque. Duis augue sem, convallis ut purus in, efficitur consequat felis. Aenean aliquet neque diam, vel porttitor mi tincidunt convallis. Mauris ante leo, feugiat nec hendrerit ac, pretium ac est. Curabitur dictum sollicitudin ornare. Nam nec pellentesque dolor. Etiam vitae magna convallis, faucibus nisl id, auctor ex.

Etiam tristique fermentum odio et gravida. Cras vitae sem dapibus, consectetur nibh sed, volutpat arcu. Donec accumsan euismod arcu nec euismod. Praesent lorem sem, pharetra eget finibus eu, commodo a nisl. Curabitur interdum tincidunt condimentum. Praesent accumsan libero cursus aliquam suscipit. Proin at lacus non metus auctor scelerisque. Donec non velit erat. Proin vulputate mauris dolor. Etiam ut cursus orci, a tincidunt nisl. Donec lacinia mauris et facilisis accumsan. Praesent vestibulum eu orci sed dapibus. Maecenas pharetra tortor quis eros commodo, sed congue lacus aliquet.


Name @username · MMM DD
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra erat augue, sed mollis augue auctor at. Duis mollis vitae nisl a rhoncus. Nulla viverra dictum urna sed cursus. Vivamus euismod ac est nec pellentesque. Duis augue sem, convallis ut purus in, efficitur consequat felis. Aenean aliquet neque diam, vel porttitor mi tincidunt convallis. Mauris ante leo, feugiat nec hendrerit ac, pretium ac est. Curabitur dictum sollicitudin ornare. Nam nec pellentesque dolor. Etiam vitae magna convallis, faucibus nisl id, auctor ex.

Etiam tristique fermentum odio et gravida. Cras vitae sem dapibus, consectetur nibh sed, volutpat arcu. Donec accumsan euismod arcu nec euismod. Praesent lorem sem, pharetra eget finibus eu, commodo a nisl. Curabitur interdum tincidunt condimentum. Praesent accumsan libero cursus aliquam suscipit. Proin at lacus non metus auctor scelerisque. Donec non velit erat. Proin vulputate mauris dolor. Etiam ut cursus orci, a tincidunt nisl. Donec lacinia mauris et facilisis accumsan. Praesent vestibulum eu orci sed dapibus. Maecenas pharetra tortor quis eros commodo, sed congue lacus aliquet.




⠀♡coded by uxie♡




[div=position:relative;top:247px;left:880px;background-color:#F5ABB5;height:30px;width:90px;border-radius:80px;line-height:20px;display: inline-block;][div=margin:auto;position:relative;top:4px][font=Segoe UI][size=12px][color=white][center][b]Following[/b][/center][/color][/size][/font][size=12px][/size][/div][/div]
[div=height:200px;width:650px;background:url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');background-size:100%;center;margin:auto;]
[div=height:140px;width:140px;z-index:90;background:url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');background-size:100%;border: 4px solid white;border-radius:50%;position:relative;top:110px;left:40px;][/div]
[/div][div=height:60px;width:650px;background-color:white;center;margin:auto][row][column=span2][div=center;height:50px;padding:4px;width:60px;position:relative;left:220px;border-bottom:2px solid #F5ABB5][div=text-align:center!important;font-weight:Bold;letter-spacing:1px][font=Segoe UI][size=10px][color=#7E8790]Tweets[/color][/size]
[size=18px][color=#F5ABB5]10.4K[/color][/size][/font][/div][/div][/column][column=span2][div=height:40px;padding:4px;width:80px;position:relative;left:120px;][div=text-align:center!important;color:#7E8790;font-weight:Bold;letter-spacing:1px][font=Segoe UI][size=10px]Following[/size]
[size=18px]286[/size][/font][/div][/div][/column][column=span2][div=height:40px;padding:4px;width:80px;position:relative;left:28px;][div=text-align:center!important;color:#7E8790;font-weight:Bold;letter-spacing:1px][font=Segoe UI][size=10px]Followers[/size]
[size=18px]3,792[/size][/font][/div][/div][/column][column=span2][div=height:40px;padding:4px;width:80px;position:relative;right:70px][div=text-align:center!important;color:#7E8790;font-weight:Bold;letter-spacing:1px][font=Segoe UI][size=10px]Likes[/size]
[size=18px] 14.2K[/size][/font][/div][/div][/column][/row][/div][div=height:400px;width:650px;background-color:#E6ECF0;margin:auto;center;overflow:hidden;][div=overflow-y:scroll;height:400px;][row][column=span2]
[div=height:30px;width:150px;font-weight:bold;color:#14171a;text-align:left;font-size:20px;position:relative;left:45px;][font=Segoe UI]Name[/font][/div][div=height:30px;width:150px;;color:#99A5B0;text-align:left;font-size:12px;position:relative;left:45px;][font=Segoe UI][b]@[/b]username[/font][/div][div=height:50px;width:200px;font-size:12px;text-align:left;position:relative;left:45px;][font=Segoe UI][color=#14171a]hello my name is[/color][/font][/div][font=Segoe UI]

[div=font-size:12px;text-align:left;position:relative;left:45px;height:230px;width:200px;][div=line-height: 2.1][color=#99A5B0][fa]fa-map-marker[/fa] location
[fa]fa-calendar-alt[/fa] Joined Month Year[/color][/div]
[div=background-color:#F5ABB5;height:30px;width:75px;border-radius:80px;line-height:20px;float:left][div=margin:auto;position:relative;top:4px][font=Segoe UI][size=11px][color=white][center][b]Tweet To[/b][/center][/color][/size][/font][size=11px][/size][/div][/div][div=margin-left:5px;background-color:#F5ABB5;height:30px;width:75px;border-radius:80px;line-height:20px;float:left][div=margin:auto;position:relative;top:4px][font=Segoe UI][size=11px][color=white][center][b]Message[/b][/center][/color][/size][/font][size=11px][/size][/div][/div]


[color=#99A5B0][fa]fa-image[/fa][/color][color=#F5ABB5] 782 Photos and Videos[/color]
[div=position:relative;top:3px;width:50px;height:50px;background:url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');background-size:100%;border-radius:2px;float:left][/div][div=position:relative;top:3px;left:3px;width:50px;height:50px;background:url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');background-size:100%;border-radius:2px;float:left][/div][div=position:relative;top:3px;left:6px;width:50px;height:50px;background:url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');background-size:100%;border-radius:2px;float:left][/div]
[div=display:none][/div]

[/div][/font][div=font-size:12px;text-align:left;position:relative;left:45px;height:230px;width:200px;][/div]

[/column][column=span6]
[div=background-color:white;height:800px;padding:6px;width:380px;position:relative;left:60px][div=height:180px;width:360px;border-bottom:1px solid #d3d3d3;overflow:hidden;padding:10px][div=overflow-y:auto;height:180px;width:100%;padding-right:150px][div=background:url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');background-size:100%;border-radius:50%;height:50px;width:50px;position:relative;left:10px;float:left][/div][div=float:right][fa]fa-angle-down[/fa][/div][div=position:relative;left:30px][font=Segoe UI][size=13px][b]Name[/b] [color=gray][i]@[/i]username · 1h[/color][/size][color=gray][/color][/font][/div][font=Segoe UI][div=font-size:12px;margin-left:80px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra erat augue, sed mollis augue auctor at. Duis mollis vitae nisl a rhoncus. Nulla viverra dictum urna sed cursus. Vivamus euismod ac est nec pellentesque. Duis augue sem, convallis ut purus in, efficitur consequat felis. Aenean aliquet neque diam, vel porttitor mi tincidunt convallis. Mauris ante leo, feugiat nec hendrerit ac, pretium ac est. Curabitur dictum sollicitudin ornare. Nam nec pellentesque dolor. Etiam vitae magna convallis, faucibus nisl id, auctor ex.

Etiam tristique fermentum odio et gravida. Cras vitae sem dapibus, consectetur nibh sed, volutpat arcu. Donec accumsan euismod arcu nec euismod. Praesent lorem sem, pharetra eget finibus eu, commodo a nisl. Curabitur interdum tincidunt condimentum. Praesent accumsan libero cursus aliquam suscipit. Proin at lacus non metus auctor scelerisque. Donec non velit erat. Proin vulputate mauris dolor. Etiam ut cursus orci, a tincidunt nisl. Donec lacinia mauris et facilisis accumsan. Praesent vestibulum eu orci sed dapibus. Maecenas pharetra tortor quis eros commodo, sed congue lacus aliquet.[/div][/font][div=font-size:12px;margin-left:80px;][/div]

[/div][/div][div=height:180px;width:360px;border-bottom:1px solid #d3d3d3;overflow:hidden;padding:10px][div=overflow-y:auto;height:180px;width:100%;padding-right:150px][div=background:url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');background-size:100%;border-radius:50%;height:50px;width:50px;position:relative;left:10px;float:left][/div][div=float:right][fa]fa-angle-down[/fa][/div][div=position:relative;left:30px][font=Segoe UI][size=13px][b]Name[/b] [color=gray][i]@[/i]username · 23h[/color][/size][color=gray][/color][/font][/div][font=Segoe UI][div=font-size:12px;margin-left:80px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra erat augue, sed mollis augue auctor at. Duis mollis vitae nisl a rhoncus. Nulla viverra dictum urna sed cursus. Vivamus euismod ac est nec pellentesque. Duis augue sem, convallis ut purus in, efficitur consequat felis. Aenean aliquet neque diam, vel porttitor mi tincidunt convallis. Mauris ante leo, feugiat nec hendrerit ac, pretium ac est. Curabitur dictum sollicitudin ornare. Nam nec pellentesque dolor. Etiam vitae magna convallis, faucibus nisl id, auctor ex.

Etiam tristique fermentum odio et gravida. Cras vitae sem dapibus, consectetur nibh sed, volutpat arcu. Donec accumsan euismod arcu nec euismod. Praesent lorem sem, pharetra eget finibus eu, commodo a nisl. Curabitur interdum tincidunt condimentum. Praesent accumsan libero cursus aliquam suscipit. Proin at lacus non metus auctor scelerisque. Donec non velit erat. Proin vulputate mauris dolor. Etiam ut cursus orci, a tincidunt nisl. Donec lacinia mauris et facilisis accumsan. Praesent vestibulum eu orci sed dapibus. Maecenas pharetra tortor quis eros commodo, sed congue lacus aliquet.[/div][/font][div=font-size:12px;margin-left:80px;][/div]

[/div][/div][div=height:180px;width:360px;border-bottom:1px solid #d3d3d3;overflow:hidden;padding:10px][div=overflow-y:auto;height:180px;width:100%;padding-right:150px][div=background:url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');background-size:100%;border-radius:50%;height:50px;width:50px;position:relative;left:10px;float:left][/div][div=float:right][fa]fa-angle-down[/fa][/div][div=position:relative;left:30px][font=Segoe UI][size=13px][b]Name[/b] [color=gray][i]@[/i]username · MMM DD[/color][/size][color=gray][/color][/font][/div][font=Segoe UI][div=font-size:12px;margin-left:80px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra erat augue, sed mollis augue auctor at. Duis mollis vitae nisl a rhoncus. Nulla viverra dictum urna sed cursus. Vivamus euismod ac est nec pellentesque. Duis augue sem, convallis ut purus in, efficitur consequat felis. Aenean aliquet neque diam, vel porttitor mi tincidunt convallis. Mauris ante leo, feugiat nec hendrerit ac, pretium ac est. Curabitur dictum sollicitudin ornare. Nam nec pellentesque dolor. Etiam vitae magna convallis, faucibus nisl id, auctor ex.

Etiam tristique fermentum odio et gravida. Cras vitae sem dapibus, consectetur nibh sed, volutpat arcu. Donec accumsan euismod arcu nec euismod. Praesent lorem sem, pharetra eget finibus eu, commodo a nisl. Curabitur interdum tincidunt condimentum. Praesent accumsan libero cursus aliquam suscipit. Proin at lacus non metus auctor scelerisque. Donec non velit erat. Proin vulputate mauris dolor. Etiam ut cursus orci, a tincidunt nisl. Donec lacinia mauris et facilisis accumsan. Praesent vestibulum eu orci sed dapibus. Maecenas pharetra tortor quis eros commodo, sed congue lacus aliquet.[/div][/font][div=font-size:12px;margin-left:80px;][/div]

[/div][/div][div=height:180px;width:355px;overflow:hidden;padding:10px][div=overflow-y:auto;height:180px;width:100%;padding-right:150px][div=background:url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');background-size:100%;border-radius:50%;height:50px;width:50px;position:relative;left:10px;float:left][/div][div=float:right][fa]fa-angle-down[/fa][/div][div=position:relative;left:30px][font=Segoe UI][size=13px][b]Name[/b] [color=gray][i]@[/i]username · MMM DD[/color][/size][color=gray][/color][/font][/div][font=Segoe UI][div=font-size:12px;margin-left:80px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra erat augue, sed mollis augue auctor at. Duis mollis vitae nisl a rhoncus. Nulla viverra dictum urna sed cursus. Vivamus euismod ac est nec pellentesque. Duis augue sem, convallis ut purus in, efficitur consequat felis. Aenean aliquet neque diam, vel porttitor mi tincidunt convallis. Mauris ante leo, feugiat nec hendrerit ac, pretium ac est. Curabitur dictum sollicitudin ornare. Nam nec pellentesque dolor. Etiam vitae magna convallis, faucibus nisl id, auctor ex.

Etiam tristique fermentum odio et gravida. Cras vitae sem dapibus, consectetur nibh sed, volutpat arcu. Donec accumsan euismod arcu nec euismod. Praesent lorem sem, pharetra eget finibus eu, commodo a nisl. Curabitur interdum tincidunt condimentum. Praesent accumsan libero cursus aliquam suscipit. Proin at lacus non metus auctor scelerisque. Donec non velit erat. Proin vulputate mauris dolor. Etiam ut cursus orci, a tincidunt nisl. Donec lacinia mauris et facilisis accumsan. Praesent vestibulum eu orci sed dapibus. Maecenas pharetra tortor quis eros commodo, sed congue lacus aliquet.[/div][/font][div=font-size:12px;margin-left:80px;][/div]

[/div][/div]
[/div]
[/column][/row]
[size=10px][color=#99A5B0][font=Segoe UI]⠀♡coded by uxie♡[/font][/color][/size]
[/div][/div]
 
Last edited:
this code is mobile friendly (:
take note that only options is not a clickable option. please read through the credits before use

[div class=container]
[div class=overlay][div class=pay][div class=insertcoin]INSERT COIN TO PLAY[/div]
[div class=coin]
[/div]
[/div][/div]
[div class=menu][div class=overlay]
[div class=container1]
[div class=start]GAME START[/div][div class=arrow1] ◀[/div]

[div class=options]OPTIONS[/div][div class=arrow2] ◀[/div]

[div class=credits]CREDITS[/div][div class=arrow3] ◀[/div]
[/div]
[/div][/div]

[div class=overlay][div class=basic]
[div class=home1][/div]
[div class=img1][div class=img1hover]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum tristique pharetra. Maecenas convallis, nisl quis pretium imperdiet, metus sapien commodo ex, vel luctus tellus purus id mauris. Aenean faucibus libero nec euismod accumsan. Nunc egestas ipsum et sapien tempor suscipit. Duis eros nisi, blandit et eleifend quis, cursus sit amet orci. Ut ut mi id est bibendum commodo. Suspendisse eleifend orci eu leo sollicitudin, eget imperdiet mauris tincidunt. Nam sit amet quam non leo egestas tincidunt vitae eget dui. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[div class=img2][div class=img2hover]
[/div]Cras sit amet tristique justo. Ut venenatis, mi vestibulum elementum consequat, mauris justo suscipit sem, sit amet aliquam ex purus id arcu. Aliquam venenatis ante eget nunc dictum, id mollis urna suscipit. Vestibulum et pellentesque nibh, eu tincidunt enim. Sed sit amet odio ac lectus imperdiet hendrerit vel id massa. Ut porta eros nulla, vel cursus nibh efficitur in. Vivamus vestibulum odio nisi. Ut ultricies leo non lacus tincidunt, eget mollis nisi euismod. Proin sed libero quis libero ultrices congue aliquam imperdiet est. Proin eu sem ex.

Vivamus id nisi eleifend, condimentum nisl ut, vehicula tellus. Fusce a varius quam. Aenean in lobortis ex, a aliquam urna. Aenean tristique suscipit viverra. Ut est dui, imperdiet sed ipsum ac, pellentesque lacinia est. Pellentesque eu ipsum eget magna interdum efficitur et sit amet dolor. Nunc ante mi, mollis in pulvinar ut, imperdiet sit amet metus. In hac habitasse platea dictumst. Quisque venenatis lacus non magna vulputate, nec pharetra nunc tempus. Aenean luctus facilisis nisl non cursus. Suspendisse tristique faucibus arcu sed tristique.

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

[div class=signature][div class=overlay][div class=home2][/div]
-uxie
[div class=signaturetext]
hello, hello!
i'm trying something almost entirely new to me with this one; after learning divs a while back i think im on a roll now, and i've successfully (i think) managed to figure out classes, somewhat, almost all by myself :")
almost, because a lot of the self-learning came from staring and referencing various of /u/altera's codes as well as the code that was used in his and /u/sugarvine's collaborative code workshop, fever dreams

they're both amazing coders, bless their work, and go check them out if you haven't. esp altera's sortof lessons on some of the crazier parts of bbcode+, i think anyone could learn a lot from that.

i feel like this idea is super unoriginal, so apologies in advance to anyone who may have done something similar in the past, but i promise u i didn't take the idea from any existing code that i've seen or know of! i'm sure ur code is really good!

i think i might come back one day and freshen this up a lil, but i'm lowkey way too tired to try and improve it rn lmao
this code is free to use for anyone who can figure it out through this mess, but please do not remove this tab or edit it in any way, bc this code, like all other codes, took a lot of my time!!! a stupid amount of time tbh lmao so yeah! i'd appreciate if this credit was kept!

artist of the background:
tumblr
twitter

note for use:
majority of the code is within the display:none div! try not to make any super major edits in case the code breaks, unless you're sure that you can fix it / adjust it without it breaking!! i have tried to separate and list areas with comments, so i hope that helps at all in organisation lolol. again, pls dont remove the credit thank u!! hope u like this (:

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





[class=overlay]
cursor: pointer;
[/class]

[class=container]
height:470px;
width: 340px;
border: 3px solid #deacae;
background:url('https://78.media.tumblr.com/646c8c7e397e4691f70a5f9dd3cffa7d/tumblr_p0z30p8Twr1tlgv32o2_500.gif');
background-size:140%;
margin:auto;
padding:5px;
position:relative;
[/class]

[class=menu]
height: 470px;
width: 340px;
margin:auto;
position:absolute;
visibility:hidden;
[/class]

[class=container1]
height: 250px;
width: 300px;
margin-top: 45px;
[/class]

[class=pay]
height:470px;
width:340px;
margin:auto;
position:absolute;
[/class]

[class=insertcoin]
position:absolute;
top:180px;
left:58px;
font-size:12px;
color:#ffd6e5;
[/class]

[class=coin]
height:18px;
width:62px;
border-radius:5px;
background-color:#fcb7b7;
padding:5px;
position:absolute;
top:218px;
left:135px;
[/class]

[class name=coin state=hover]
background-color:#c287c6
[/class]

[class=signature]
height: 470px;
width: 340px;
visibility:hidden;
[/class]

[class=signaturetext]
background-color:white;
height:200px;
width:200px;
overflow:hidden;
position:absolute;
left:70px;
top:130px;
padding:2px;
border-radius:4px;
[/class]

[class=basic]
height: 370px;
width: 340px;
position:absolute;
visibility:hidden;
[/class]

[class=img1]
height:120px;
width:120px;
background:url('https://data.whicdn.com/images/306531852/large.jpg?t=1517594867');
background-size:100%;
margin-right:8px;
border-radius:4px;
float:left;
position:relative;
top: 5px;
[/class]

[class=img1hover]
height:120px;
width:120px;
border-radius:4px;
background-color: #ffd5ef;
opacity:0;
transition:1s;
[/class]

[class name=img1hover state=hover]
opacity:0.8;
[/class]

[class=img2]
height:120px;
width:120px;
background:url('https://data.whicdn.com/images/305528338/superthumb.jpg');
background-size:100%;
margin-left:8px;
border-radius:4px;
float:right;
position:relative;
top: 5px;
[/class]

[class=img2hover]
height:120px;
width:120px;
border-radius:4px;
background-color: #ffd5ef;
opacity:0;
transition:1s;
[/class]

[class name=img2hover state=hover]
opacity:0.8;
[/class]

[class=noclick]
pointer-events:none;
[/class]



[class=start]
position: relative;
left: 112px;
display: inline-block;
color:#ffe0e4;
font-size:12px;
letter-spacing: 2px
display: inline-block;
[/class]

[class=options]
position: relative;
left: 123px;
display: inline-block;
color: #ffe0e4;
font-size:12px;
letter-spacing: 2px
[/class]

[class=credits]
position: relative;
left: 123px;
display: inline-block;
color: #ffe0e4;
font-size:12px;
letter-spacing: 2px
[/class]

[class=home1]
color:#ffd6e5;
position:absolute;
left:300px;
top:-75px;
font-size:30px;
[/class]

[class=home2]
color:#ffd6e5;
position:relative;
left:300px;
top:-145px;
font-size:30px;
[/class]



[script class=coin on=click]
addClass flash coin
addClass hideScreens pay
addClass showScreens menu
addClass noclick pay
[/script]

[class=flash]
animation-name: {post_id}Flash;
animation-duration: 15s;
[/class]

[class name=insertcoin]
animation-name: {post_id}coinFlash;
animation-duration: 2s;
animation-iteration-count:infinite;
[/class]

[animation=coinFlash]
[keyframe=0]
color:#ffd6e5;
[/keyframe]
[keyframe=50]
color:#ffd6e5;
[/keyframe]
[keyframe=51]
color:#f47fbd;
[/keyframe]
[keyframe=100]
color:#f47fbd;
[/keyframe]
[/animation]


[animation=Flash]
[keyframe=0]
background-color:#fcb7b7
[/keyframe]
[keyframe=1]
background-color:#c287c6
[/keyframe]
[keyframe=2]
background-color:#fcb7b7
[/keyframe]
[keyframe=3]
background-color:#c287c6
[/keyframe]
[/animation]

[animation=flashing]
[keyframe=0]
color:#ffd6e5;
[/keyframe]
[keyframe=1]
color:#ffc8d0;
[/keyframe]
[keyframe=2]
color:#ffd6e5;
[/keyframe]
[keyframe=3]
color:#ffc8d0;
[/keyframe]
[/animation]

[class=hideScreens]
animation-name: {post_id}hideScreens;
animation-duration: 3.2s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]

[class=showScreens]
animation-name: {post_id}showScreens;
animation-duration: 3.2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
[/class]

[animation=showScreens]
[keyframe=0]
visibility:hidden;
[/keyframe]
[keyframe=50]
visibility:hidden;
[/keyframe]
[keyframe=51]
visibility:visible;
[/keyframe]
[keyframe=100]
visibility:visible;
[/keyframe]
[/animation]

[animation=hideScreens]
[keyframe=0]
visibility:visible;
[/keyframe]
[keyframe=50]
visibility:visible;
[/keyframe]
[keyframe=51]
visibility:hidden;
[/keyframe]
[keyframe=100]
visibility:hidden;
[/keyframe]
[/animation]

[script class=start on=click]
addClass blink
removeClass showScreens menu
addClass hideScreens menu
addClass showScreens basic
removeClass hideScreens basic
addClass noclick menu
removeClass blink home1
[/script]

[script class=credits on=click]
addClass blink
removeClass showScreens menu
addClass hideScreens menu
removeClass hideScreens signature
addClass showScreens signature
addClass noclick menu
removeClass blink home2
[/script]

[script class=home2 on=click]
addClass blink
addClass hideScreens signature
removeClass showScreens signature
removeClass hideScreens menu
addClass showScreens menu
removeClass blink credits
removeClass noclick menu
[/script]

[script class=home1 on=click]
addClass blink
addClass hideScreens basic
removeClass showScreens basic
removeClass hideScreens menu
addClass showScreens menu
removeClass blink start
removeClass noclick menu
[/script]



[class=arrow1]
opacity:0;
color: #ffc8d0;
text-align:center;
display: inline-block;
margin-left: 114px;
[/class]

[class=arrow2]
opacity:0;
color: #ffc8d0;
text-align:center;
display: inline-block;
margin-left: 123px;
[/class]

[class=arrow3]
opacity:0;
color: #ffc8d0;
text-align:center;
display: inline-block;
margin-left: 123px;
[/class]

[script class=start on=mouseenter]
addClass appear arrow1
[/script]

[script class=start on=mouseleave]
removeClass appear arrow1
[/script]

[script class=options on=mouseenter]
addClass appear arrow2
[/script]

[script class=options on=mouseleave]
removeClass appear arrow2
[/script]

[script class=credits on=mouseenter]
addClass appear arrow3
[/script]

[script class=credits on=mouseleave]
removeClass appear arrow3
[/script]

[class=appear]
cursor: pointer;
opacity:1.0;
transition: opacity 0s;
[/class]

[animation=Blink]
[keyframe=0]
opacity:1;
[/keyframe]
[keyframe=1]
opacity:0;
[/keyframe]
[keyframe=2]
opacity:1;
[/keyframe]
[keyframe=3]
opacity:0;
[/keyframe]
[keyframe=4]
opacity:1;
[/keyframe]
[/animation]

[class=blink]
animation-name: {post_id}Blink;
animation-duration:15s;
[/class]

[/div]



[div class=container]
[div class=overlay][div class=pay][div class=insertcoin][font=Press Start 2P]INSERT COIN TO PLAY[/font][/div]
[div class=coin]
[div=background:url('https://thumbs.gfycat.com/DarlingAcceptableHapuku-max-1mb.gif');height:22px;width:22px;background-size:100%;position:relative;top:-22px;left:21px;][/div][/div]
[/div][/div]
[div class=menu][div class=overlay]
[div=margin:auto;center;height:160px;width:160px;border:4px solid #ffc8d0;border-radius:50%;background:url('https://ih1.redbubble.net/image.470656325.7127/flat,800x800,075,f.jpg');background-size:100%;][/div][div class=container1]
[div class=start][font=Press Start 2P]GAME START[/font][/div][div class=arrow1] ◀[/div]

[div class=options][font=Press Start 2P]OPTIONS[/font][/div][div class=arrow2] ◀[/div]

[div class=credits][font=Press Start 2P]CREDITS[/font][/div][div class=arrow3] ◀[/div]
[/div]
[/div][/div]

[div class=overlay][div class=basic][div=float:left;height:35px;width:35px;background:url('https://orig00.deviantart.net/8baa/f/2012/058/0/5/8_bit_heart_stock_by_xquatrox-d4r844m.png');position:absolute;top:-70px;left:10px;background-size:100%][/div][div=float:left;height:35px;width:35px;background:url('https://orig00.deviantart.net/8baa/f/2012/058/0/5/8_bit_heart_stock_by_xquatrox-d4r844m.png');position:absolute;top:-70px;left:50px;background-size:100%][/div][div=float:left;height:35px;width:35px;background:url('https://orig00.deviantart.net/8baa/f/2012/058/0/5/8_bit_heart_stock_by_xquatrox-d4r844m.png');position:absolute;top:-70px;left:90px;background-size:100%][/div][div class=home1][fa]fa-home[/fa][/div][div=height:415px;width:340px;overflow:hidden;position:absolute;top:-22px;left:-4px;padding:10px;center;margin-bottom:5px;][div=padding-right:150px;height:400px;width:335px;overflow-y:scroll;center;margin:auto;][div=text-align:justify;font-size:12px;color:white;][div class=img1][div class=img1hover][/div][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum tristique pharetra. Maecenas convallis, nisl quis pretium imperdiet, metus sapien commodo ex, vel luctus tellus purus id mauris. Aenean faucibus libero nec euismod accumsan. Nunc egestas ipsum et sapien tempor suscipit. Duis eros nisi, blandit et eleifend quis, cursus sit amet orci. Ut ut mi id est bibendum commodo. Suspendisse eleifend orci eu leo sollicitudin, eget imperdiet mauris tincidunt. Nam sit amet quam non leo egestas tincidunt vitae eget dui. Interdum et malesuada fames ac ante ipsum primis in faucibus.

[div class=img2][div class=img2hover][/div][/div]Cras sit amet tristique justo. Ut venenatis, mi vestibulum elementum consequat, mauris justo suscipit sem, sit amet aliquam ex purus id arcu. Aliquam venenatis ante eget nunc dictum, id mollis urna suscipit. Vestibulum et pellentesque nibh, eu tincidunt enim. Sed sit amet odio ac lectus imperdiet hendrerit vel id massa. Ut porta eros nulla, vel cursus nibh efficitur in. Vivamus vestibulum odio nisi. Ut ultricies leo non lacus tincidunt, eget mollis nisi euismod. Proin sed libero quis libero ultrices congue aliquam imperdiet est. Proin eu sem ex.

Vivamus id nisi eleifend, condimentum nisl ut, vehicula tellus. Fusce a varius quam. Aenean in lobortis ex, a aliquam urna. Aenean tristique suscipit viverra. Ut est dui, imperdiet sed ipsum ac, pellentesque lacinia est. Pellentesque eu ipsum eget magna interdum efficitur et sit amet dolor. Nunc ante mi, mollis in pulvinar ut, imperdiet sit amet metus. In hac habitasse platea dictumst. Quisque venenatis lacus non magna vulputate, nec pharetra nunc tempus. Aenean luctus facilisis nisl non cursus. Suspendisse tristique faucibus arcu sed tristique.

[/div][/div][/div]
[/div][/div]
[color=transparent]placeholder[/color]

[div class=signature][div class=overlay][div class=home2][fa]fa-home[/fa][/div][div=color: #ffd6e5;font-size:40px;text-shadow:1px 2px #FB9999;position:absolute;left:180px;top:300px;z-index:5;float:left;font-weight:bold;font-style:italic;]-uxie[/div][div class=signaturetext][div=height:200px;width:200px;overflow-y:scroll;padding-right:100px;center;position:relative;left:5px;][div=font-size:12px;color:black;text-align:justify;][font=Nunito]hello, hello!
i'm trying something almost entirely new to me with this one; after learning divs a while back i think im on a roll now, and i've successfully (i think) managed to figure out classes, somewhat, almost all by myself :")
almost, because a lot of the self-learning came from staring and referencing various of /u/altera's codes as well as the code that was used in his and /u/sugarvine's collaborative code workshop, [url='https://www.rpnation.com/threads/%E2%80%83%E2%80%83%C2%AC-feverdreams-%E2%B8%A5%E2%80%83alt-%F0%90%84%82-sugar.398388/']fever dreams[/url]

they're both amazing coders, bless their work, and go check them out if you haven't. esp altera's sortof lessons on some of the crazier parts of bbcode+, i think anyone could learn a lot from that.

i feel like this idea is super unoriginal, so apologies in advance to anyone who may have done something similar in the past, but i promise u i didn't take the idea from any existing code that i've seen or know of! i'm sure ur code is really good!

i think i might come back one day and freshen this up a lil, but i'm lowkey way too tired to try and improve it rn lmao
this code is [b]free to use[/b] for anyone who can figure it out through this mess, but [b]please do not remove this tab or edit it in any way[/b], bc this code, like all other codes, took a lot of my time!!! a stupid amount of time tbh lmao so yeah![b] i'd appreciate if this credit was kept![/b]
[div=display:none][USER=30903]@Uxie[/USER][/div]
artist of the background:
[url='http://8pxl.tumblr.com/']tumblr[/url]
[url='https://twitter.com/16pxl/']twitter[/url]

note for use:
majority of the code is within the [b]display:none div[/b]! try not to make any super major edits in case the code breaks, unless you're sure that you can fix it / adjust it without it breaking!! i have tried to separate and list areas with comments, so i hope that helps at all in organisation lolol. again, pls dont remove the credit thank u!! hope u like this (:

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


[div=display:none]
[comment]screens[/comment]

[class=overlay]
cursor: pointer;
[/class]

[class=container]
height:470px;
width: 340px;
border: 3px solid #deacae;
background:url('https://78.media.tumblr.com/646c8c7e397e4691f70a5f9dd3cffa7d/tumblr_p0z30p8Twr1tlgv32o2_500.gif');
background-size:140%;
margin:auto;
padding:5px;
position:relative;
[/class]

[class=menu]
height: 470px;
width: 340px;
margin:auto;
position:absolute;
visibility:hidden;
[/class]

[class=container1]
height: 250px;
width: 300px;
margin-top: 45px;
[/class]

[class=pay]
height:470px;
width:340px;
margin:auto;
position:absolute;
[/class]

[class=insertcoin]
position:absolute;
top:180px;
left:58px;
font-size:12px;
color:#ffd6e5;
[/class]

[class=coin]
height:18px;
width:62px;
border-radius:5px;
background-color:#fcb7b7;
padding:5px;
position:absolute;
top:218px;
left:135px;
[/class]

[class name=coin state=hover]
background-color:#c287c6
[/class]

[class=signature]
height: 470px;
width: 340px;
visibility:hidden;
[/class]

[class=signaturetext]
background-color:white;
height:200px;
width:200px;
overflow:hidden;
position:absolute;
left:70px;
top:130px;
padding:2px;
border-radius:4px;
[/class]

[class=basic]
height: 370px;
width: 340px;
position:absolute;
visibility:hidden;
[/class]

[class=img1]
height:120px;
width:120px;
background:url('https://data.whicdn.com/images/306531852/large.jpg?t=1517594867');
background-size:100%;
margin-right:8px;
border-radius:4px;
float:left;
position:relative;
top: 5px;
[/class]

[class=img1hover]
height:120px;
width:120px;
border-radius:4px;
background-color: #ffd5ef;
opacity:0;
transition:1s;
[/class]

[class name=img1hover state=hover]
opacity:0.8;
[/class]

[class=img2]
height:120px;
width:120px;
background:url('https://data.whicdn.com/images/305528338/superthumb.jpg');
background-size:100%;
margin-left:8px;
border-radius:4px;
float:right;
position:relative;
top: 5px;
[/class]

[class=img2hover]
height:120px;
width:120px;
border-radius:4px;
background-color: #ffd5ef;
opacity:0;
transition:1s;
[/class]

[class name=img2hover state=hover]
opacity:0.8;
[/class]

[class=noclick]
pointer-events:none;
[/class]

[comment]buttons[/comment]

[class=start]
position: relative;
left: 112px;
display: inline-block;
color:#ffe0e4;
font-size:12px;
letter-spacing: 2px
display: inline-block;
[/class]

[class=options]
position: relative;
left: 123px;
display: inline-block;
color: #ffe0e4;
font-size:12px;
letter-spacing: 2px
[/class]

[class=credits]
position: relative;
left: 123px;
display: inline-block;
color: #ffe0e4;
font-size:12px;
letter-spacing: 2px
[/class]

[class=home1]
color:#ffd6e5;
position:absolute;
left:300px;
top:-75px;
font-size:30px;
[/class]

[class=home2]
color:#ffd6e5;
position:relative;
left:300px;
top:-145px;
font-size:30px;
[/class]

[comment]transitions[/comment]

[script class=coin on=click]
addClass flash coin
addClass hideScreens pay
addClass showScreens menu
addClass noclick pay
[/script]

[class=flash]
animation-name: {post_id}Flash;
animation-duration: 15s;
[/class]

[class name=insertcoin]
animation-name: {post_id}coinFlash;
animation-duration: 2s;
animation-iteration-count:infinite;
[/class]

[animation=coinFlash]
[keyframe=0]
color:#ffd6e5;
[/keyframe]
[keyframe=50]
color:#ffd6e5;
[/keyframe]
[keyframe=51]
color:#f47fbd;
[/keyframe]
[keyframe=100]
color:#f47fbd;
[/keyframe]
[/animation]


[animation=Flash]
[keyframe=0]
background-color:#fcb7b7
[/keyframe]
[keyframe=1]
background-color:#c287c6
[/keyframe]
[keyframe=2]
background-color:#fcb7b7
[/keyframe]
[keyframe=3]
background-color:#c287c6
[/keyframe]
[/animation]

[animation=flashing]
[keyframe=0]
color:#ffd6e5;
[/keyframe]
[keyframe=1]
color:#ffc8d0;
[/keyframe]
[keyframe=2]
color:#ffd6e5;
[/keyframe]
[keyframe=3]
color:#ffc8d0;
[/keyframe]
[/animation]

[class=hideScreens]
animation-name: {post_id}hideScreens;
animation-duration: 3.2s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]

[class=showScreens]
animation-name: {post_id}showScreens;
animation-duration: 3.2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
[/class]

[animation=showScreens]
[keyframe=0]
visibility:hidden;
[/keyframe]
[keyframe=50]
visibility:hidden;
[/keyframe]
[keyframe=51]
visibility:visible;
[/keyframe]
[keyframe=100]
visibility:visible;
[/keyframe]
[/animation]

[animation=hideScreens]
[keyframe=0]
visibility:visible;
[/keyframe]
[keyframe=50]
visibility:visible;
[/keyframe]
[keyframe=51]
visibility:hidden;
[/keyframe]
[keyframe=100]
visibility:hidden;
[/keyframe]
[/animation]

[script class=start on=click]
addClass blink
removeClass showScreens menu
addClass hideScreens menu
addClass showScreens basic
removeClass hideScreens basic
addClass noclick menu
removeClass blink home1
[/script]

[script class=credits on=click]
addClass blink
removeClass showScreens menu
addClass hideScreens menu
removeClass hideScreens signature
addClass showScreens signature
addClass noclick menu
removeClass blink home2
[/script]

[script class=home2 on=click]
addClass blink
addClass hideScreens signature
removeClass showScreens signature
removeClass hideScreens menu
addClass showScreens menu
removeClass blink credits
removeClass noclick menu
[/script]

[script class=home1 on=click]
addClass blink
addClass hideScreens basic
removeClass showScreens basic
removeClass hideScreens menu
addClass showScreens menu
removeClass blink start
removeClass noclick menu
[/script]

[comment]arrow[/comment]

[class=arrow1]
opacity:0;
color: #ffc8d0;
text-align:center;
display: inline-block;
margin-left: 114px;
[/class]

[class=arrow2]
opacity:0;
color: #ffc8d0;
text-align:center;
display: inline-block;
margin-left: 123px;
[/class]

[class=arrow3]
opacity:0;
color: #ffc8d0;
text-align:center;
display: inline-block;
margin-left: 123px;
[/class]

[script class=start on=mouseenter]
addClass appear arrow1
[/script]

[script class=start on=mouseleave]
removeClass appear arrow1
[/script]

[script class=options on=mouseenter]
addClass appear arrow2
[/script]

[script class=options on=mouseleave]
removeClass appear arrow2
[/script]

[script class=credits on=mouseenter]
addClass appear arrow3
[/script]

[script class=credits on=mouseleave]
removeClass appear arrow3
[/script]

[class=appear]
cursor: pointer;
opacity:1.0;
transition: opacity 0s;
[/class]

[animation=Blink]
[keyframe=0]
opacity:1;
[/keyframe]
[keyframe=1]
opacity:0;
[/keyframe]
[keyframe=2]
opacity:1;
[/keyframe]
[keyframe=3]
opacity:0;
[/keyframe]
[keyframe=4]
opacity:1;
[/keyframe]
[/animation]

[class=blink]
animation-name: {post_id}Blink;
animation-duration:15s;
[/class]

[/div][/div]
 
Last edited:
Small tip: instead of using "display: none", use the [nobr][/nobr] tag. It removes all line breaks, so you don't have to worry about excessive space. Within those tags, if you want to use a line break, you can use [br][/br]. It makes it easier to write everything, since you can then space out all your code as much as you want, not just the classes.
 
[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]f2u w/ credit[/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 ♡

a cool cs code!
it's a relatively simple code i think? but my codes tend to be super messy to the point i don't even really fully understand them sometimes looking back LOL

though this code fits on your mobile screen (or at least it does on my iphone), the scroll cuts off b/c i wanted it to look nice on desktop LOL
which is why it's listed as not mobile-friendly !
i think it works on tablets? but i'm not 100% sure.
[/div][/div][div class=codeinfosignature][div class=codeinfolink]link[/div]– uxie[/div]
[/div]
[/div]

[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; min-width:90px; max-width:350px; background-color:white; margin:auto; position:relative; top:45px; left:108px; display:inline-block; padding:10px; padding-right:12px; border-radius:1.8px; padding-top:8px; line-height:222%; [/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; [/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]
 
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]
wait is this code free to use ?
 
[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 (windows?!)[/div] [div class=codeinfotag]1 big hover[/div] [div class=codeinfotag]janky af[/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 ♡

READ OPENME
this code was a concept given to me by the lovely roommate roommate when i harrassed her to give me ideas for coding when i was super bored!!
it's a desktop screen inspired thing if you couldn't tell, and clicking on each of the files will open up a cool new window for you to put stuff in. pretty cool.

as for the openme, in this update i think i'll just say that you'll be allowed to remove it if you really need that last window, but if you could put my cute lil ♡coded by uxie♡ somewhere visible or leave the -uxie♡ there. it'd mean a lot since i worked especially hard on this one and it was difficult for me at the time.

hope you like it!
[/div][/div][div class=codeinfosignature][div class=codeinfolink]link[/div]– uxie[/div]
[/div]
[/div]

[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]
 
Last edited:
WHATTTTTTTTTTTTTTTTTTT THE FUCK THAT’S
iPjLM8L.png
 
i cant find the code s why i asked lmaoo

i always expected people to just reply and use that to get the code bc thats what i do LOL

added spoiler codes, beware some of them are really long bc i cba to try and control the height rn lmao
 
Best tip for any bbcoder. The preview button is your friend. For better or worse use the preview button and watch your hard work unfold. Or throw up everywhere lol. The beauty of it is no one will know because only you see it lol. Major time saver
 

Users who are viewing this thread

Back
Top