Uxie
ଘ(੭ˊ꒳ˋ)੭* ੈ‧₊❀˖°
[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"] [div class="btooltip 1btt"]introduction[/div][/div]
[div class="button 2btn"] [div class="btooltip 2btt"]t-o-u[/div][/div]
[div class="button 3btn"] [div class="btooltip 3btt"]codes[/div][/div]
[div class="button 4btn"] [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
blique;
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-styleblique;
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-styleblique;
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]
[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
blique;
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-styleblique;
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-styleblique;
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:
