Uxie
ଘ(੭ˊ꒳ˋ)੭* ੈ‧₊❀˖°
[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
blique;
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]SO JANK[/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 ♡
another cs code!
i actually rly liked the palette for this one. it was made for a sadboy rp started by a friend, n this code has like. a rly funky design
not sure if that's a good thing but like. it sure is a challenge using this one LMAO
it's sososososo janky n the first tab honestly. looks like a placeholder
finding the exit button to get out is like a minigame.
in all honesty ? not fun to use but so fun to click around after it's done. tbh
u can try using this one. i won't stop u. but don't say i didn't warn u.
[/div][/div][div class=codeinfosignature][div class=codeinfolink]link[/div]– uxie[/div]
[/div]
[/div]
[div class=container]
age 17
grade/year junior
nationality american
ethnicity chinese
sexuality bisexual
[div class=hpicb][/div]
[div class=buttoncon][div class=button1][/div][div class=button2][/div][div class=button3][/div][/div]
[/div][div class=tab1 style=display:none;][div class=box1][div class=b1hover][/div][/div][div class=box2][div class=b2scroll][div class=b2hover]appearance
↓ scroll ↓ [/div][div class=b2text]height
build/body type
hair color
eye color
body modifications
face claim
[/div][/div][/div][div class=box3][div class=b3scroll][div class=b3hover]persona
↓ scroll ↓ [/div][div class=b3text]habits
hobbies
peeves
quirks/misc
[/div][/div][/div][div class=box4][/div]
[/div][div class=tab2 style=display:none;][div class=tpic1b][div class=tpic1bhover][/div][/div][div class=txt1][div class=tscroll][div class=title1]personality_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed libero nibh. Suspendisse ipsum purus, sodales efficitur imperdiet sed, facilisis et sapien. Donec dignissim libero vitae felis sodales, sit amet rhoncus mauris viverra. Curabitur pulvinar dapibus diam, sit amet vestibulum nisl condimentum eget. Maecenas tincidunt turpis eget ipsum malesuada, eu mollis quam blandit. Nunc egestas tempus nunc, vitae interdum nibh rhoncus sed. Nam egestas mi at erat feugiat, consectetur suscipit nisl eleifend. Nulla sed augue vel turpis vulputate malesuada sit amet id quam.
Fusce eget elementum enim. Nullam condimentum, ligula non pretium eleifend, lacus magna ultrices odio, at varius nisi odio vitae turpis. Nam fringilla neque ut enim vehicula, ultricies eleifend nisi consequat. Nulla ac facilisis justo. Suspendisse egestas lacus nec elit gravida bibendum. Suspendisse convallis scelerisque sem. Morbi consequat posuere lacus ac hendrerit. Etiam erat arcu, congue ac quam non, placerat porttitor mauris. Vestibulum vulputate diam viverra, efficitur quam ac, cursus libero. Sed tempor porttitor lacus vel accumsan.
[/div][/div][div class=tpic2b][/div][div class=tpic3b][/div][div class=tpic4b][/div][div class=txt2][div class=tscroll][div class=title2]history_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed libero nibh. Suspendisse ipsum purus, sodales efficitur imperdiet sed, facilisis et sapien. Donec dignissim libero vitae felis sodales, sit amet rhoncus mauris viverra. Curabitur pulvinar dapibus diam, sit amet vestibulum nisl condimentum eget. Maecenas tincidunt turpis eget ipsum malesuada, eu mollis quam blandit. Nunc egestas tempus nunc, vitae interdum nibh rhoncus sed. Nam egestas mi at erat feugiat, consectetur suscipit nisl eleifend. Nulla sed augue vel turpis vulputate malesuada sit amet id quam.
Fusce eget elementum enim. Nullam condimentum, ligula non pretium eleifend, lacus magna ultrices odio, at varius nisi odio vitae turpis. Nam fringilla neque ut enim vehicula, ultricies eleifend nisi consequat. Nulla ac facilisis justo. Suspendisse egestas lacus nec elit gravida bibendum. Suspendisse convallis scelerisque sem. Morbi consequat posuere lacus ac hendrerit. Etiam erat arcu, congue ac quam non, placerat porttitor mauris. Vestibulum vulputate diam viverra, efficitur quam ac, cursus libero. Sed tempor porttitor lacus vel accumsan.
[/div][/div][div class=tpic5b][/div]
[/div][div class=tab3 style=display:none;][div class=rstabc][div class=rsth]click on any of the icons to access their page in full.[/div][div class=rs1t style=display:none][div class=scroll][div class=title1]angryboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs2t style=display:none][div class=scroll][div class=title1]sadgurl_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs3t style=display:none][div class=scroll][div class=title1]softboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs4t style=display:none][div class=scroll][div class=title1]artboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs5t style=display:none][div class=scroll][div class=title1]dressboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs6t style=display:none][div class=scroll][div class=title1]heartboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs7t style=display:none][div class=scroll][div class=title1]boyboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs8t style=display:none][div class=scroll][div class=title1]leftboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div]
[/div][div class=navi]
[div class=rs3][/div][div class=rs4][/div]
[div class=rs5][/div][div class=rs6][/div]
[div class=rs7][/div][div class=rs8][/div]
[/div][/div]
[/div][/div]
[/div]
[class=container] height:400px; width:400px; margin:auto; position:relative; [/class] [class=home] height:170px; width:300px; background-color:#93fff0; position:absolute; left:50px; top:115px; border-top:2px solid #4dd1d6; border-bottom:2px solid #4dd1d6; border-radius:2px; [/class] [class=hpicb] border:1px solid #FD34A6; height:96px; width:96px; padding:6px; position:relative; left:14px; top:14px; border-radius:50%; transition:0.3s; [/class] [class name=hpicb state=hover] transform:scale(1.06); transition:0.3s; [/class] [class=buttoncon] height:40px; width:110px; position:absolute; top:120px; left:160px; line-height:100%; text-align:left; center; [/class] [class=button1] height:30px; width:30px; border-radius:10px; font-size:28px; text-align:center; padding:3px; padding-top:3px; padding-bottom:3px; padding-left:3px; padding-right:3px; color:#4dd1d6; font-weight:bold; background-color:transparent; transition:0.3s; display:inline-block; [/class] [class name=button1 state=hover] text-shadow:2px 1.5px #FD34A6; transition:0.3s; cursor:pointer; [/class] [script class=button1 on=click] hide home show tab1 [/script] [class=button2] height:30px; width:30px; border-radius:10px; font-size:28px; text-align:center; padding:3px; padding-top:3px; padding-bottom:3px; padding-left:3px; padding-right:3px; color:#4dd1d6; font-weight:bold; background-color:transparent; transition:0.3s; display:inline-block; [/class] [class name=button2 state=hover] text-shadow:2px 1.5px #FD34A6; transition:0.3s; cursor:pointer; [/class] [script class=button2 on=click] hide home show tab2 [/script] [class=button3] height:30px; width:30px; border-radius:10px; font-size:28px; text-align:center; padding:3px; padding-top:3px; padding-bottom:3px; padding-left:3px; padding-right:3px; color:#4dd1d6; font-weight:bold; background-color:transparent; transition:0.3s; display:inline-block; [/class] [class name=button3 state=hover] text-shadow:2px 1.5px #FD34A6; transition:0.3s; cursor:pointer; [/class] [script class=button3 on=click] hide home show tab3 [/script] [class=tab1] height:350px; width:350px; position:absolute; left:25px; top:25px; filter:grayscale(40%); transition:0.8s; [/class] [class name=tab1 state=hover] filter:grayscale(0%); transition:0.8s; [/class] [class=box1] height:170px; width:170px; border-right:5px solid #A6D1FC; border-bottom:5px solid #A6D1FC; background-image:url('https://pbs.twimg.com/media/DkxDuhXW0AIUaEw.jpg'); float:left; background-size:100%; [/class] [class=b1hover] height:50px; width:170px; text-align:center; color:white; opacity:0; font-weight:bold; font-size:40px; letter-spacing:0.5px; line-height:90%; padding-top:70px; transition:0.8s; [/class] [class name=b1hover state=hover] opacity:0.6; transition:0.8s; cursor:pointer; [/class] [script class=b1hover on=click] hide tab1 show home [/script] [class=box2] height:170px; width:170px; border-left:5px solid #ff49e9; border-bottom:5px solid #ff49e9; background-image:url('https://pbs.twimg.com/profile_images/1026294755385372673/VL6A6GVx_400x400.jpg'); float:left; background-size:100%; background-position:50% 50%; overflow:hidden; [/class] [class=b2scroll] height:100%; width:calc(100% + 6px); overflow-y:scroll; padding-right:50px; [/class] [class=b2hover] height:50px; width:170px; text-align:center; color:white; opacity:0; font-weight:bold; font-size:20px; letter-spacing:0.5px; line-height:90%; padding-top:120px; transition:0.8s; [/class] [class name=b2hover state=hover] opacity:0.8; transition:0.8s; cursor:pointer; [/class] [class=b2text] background-color:#ffb5f3; margin-top:170px; min-height:164px; width:164px; padding:3px; color:#7f45cc; font-size:10.5px; [/class] [class=box3] height:170px; width:170px; border-top:5px solid #F6A1FE; border-right:5px solid #F6A1FE; background-image:url('https://pbs.twimg.com/media/DifdrlKXUAApcoy.jpg'); float:left; background-size:100%; background-position:50% 50%; overflow:hidden; [/class] [class=b3scroll] height:100%; width:calc(100% + 6px); overflow-y:scroll; padding-right:50px; position:relative; [/class] [class=b3hover] height:50px; width:170px; text-align:center; color:white; opacity:0; font-weight:bold; font-size:20px; letter-spacing:0.5px; line-height:90%; padding-top:120px; transition:0.8s; [/class] [class name=b3hover state=hover] opacity:0.8; transition:0.8s; cursor:pointer; [/class] [class=b3text] background-color:#8eb4ff; margin-top:170px; min-height:164px; width:164px; padding:3px; color:#BA4DC2; font-size:10.5px; [/class] [class=box4] height:170px; width:170px; border-left:5px solid #C47EEE; border-top:5px solid #C47EEE; background-image:url('https://data.whicdn.com/images/317880748/large.jpg'); float:left; background-size:120%; background-position:center; transition:0.8s; [/class] [class=tab2] height:350px; width:350px; position:absolute; left:25px; top:25px; [/class] [class=txt1] height:210px; width:160px; background:url('https://steamuserimages-a.akamaihd.net/ugc/270598716228579115/72CD26E14B7FCBA028206A06F10548C0D5174CFC/'); background-size:350%; background-position:30% 15%; overflow:hidden; position:relative; top:70px; float:left; border-top:5px solid #c91ab5; border-left:5px solid #c91ab5; [/class] [class=txt2] height:210px; width:160px; background:url('https://steamuserimages-a.akamaihd.net/ugc/270598716228579115/72CD26E14B7FCBA028206A06F10548C0D5174CFC/'); background-size:350%; background-position:75% 0%; overflow:hidden; position:relative; top:70px; float:right; border-bottom:5px solid #c91ab5; border-right:5px solid #c91ab5; [/class] [class=title1] font-size:16px; text-transform:uppercase; font-styleblique;
text-align:left;
position:relative;
left:0px;
font-weight:bold;
letter-spacing:1px;
[/class]
[class=title2]
font-size:20px;
text-transform:uppercase;
font-styleblique;
text-align:right;
position:relative;
left:0px;
font-weight:bold;
letter-spacing:1px;
[/class]
[class=tpic1b]
border:1px solid #10F3FC;
height:60px;
width:60px;
padding:4px;
position:absolute;
left:80px;
top:20px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]
[class name=tpic1b state=hover]
transform:scale(1.06);
transition:0.3s;
[/class]
[class=tpic1bhover]
height:55px;
width:65px;
position:absolute;
border-radius:50%;
transition:0.3s;
padding-top:10px;
z-index:6;
color:white;
text-align:center;
font-size:30px;
opacity:0;
[/class]
[class name=tpic1bhover state=hover]
opacity:0.65;
transition:0.3s;
cursor:pointer;
[/class]
[script class=tpic1bhover on=click]
hide tab2
show home
[/script]
[class=tpic2b]
border:1px solid #10F3FC;
height:50px;
width:50px;
padding:4px;
position:absolute;
left:10px;
top:295px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]
[class name=tpic2b state=hover]
transform:scale(1.06);
transition:0.3s;
[/class]
[class=tpic3b]
border:1px solid #10F3FC;
height:40px;
width:40px;
padding:3px;
position:absolute;
left:50px;
top:280px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]
[class name=tpic3b state=hover]
transform:scale(1.06);
transition:0.3s;
[/class]
[class=tpic4b]
border:1px solid #10F3FC;
height:50px;
width:50px;
padding:4px;
position:absolute;
left:240px;
top:15px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]
[class name=tpic4b state=hover]
transform:scale(1.06);
transition:0.3s;
[/class]
[class=tpic5b]
border:1px solid #10F3FC;
height:70px;
width:70px;
padding:4px;
position:absolute;
left:290px;
top:275px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]
[class name=tpic5b state=hover]
transform:scale(1.06);
transition:0.3s;
[/class]
[class=tscroll]
height:100%;
width:calc(100% + 10px);
padding-right:50px;
overflow-y:scroll;
margin-left:4px;
[/class]
[class name=tscroll]
font-size:9.5px;
color:white;
text-align:justify;
background-color:rgba(0, 0, 0, 0.2);
[/class]
[class=tab3]
height:350px;
width:360px;
left:15px;
top:25px;
position:absolute;
[/class]
[class=navi]
height:300px;
width:190px;
background:url('https://i.pinimg.com/originals/c1/f1/48/c1f1489f4c43e96cf7f1403b4dd97f92.jpg');
background-size:100%;
background-position:50% 50%;
position:absolute;
border-left:3px solid #ff49a4;
border-right:3px solid #ff49a4;
center;
top:25px;
border-radius:2px;
overflow:hidden;
padding:5px;
[/class]
[class=exit3]
position:relative;
left:-6px;
float:right;
color:white;
font-size:20px;
[/class]
[class name=exit3 state=hover]
cursor:pointer;
[/class]
[script class=exit3 on=click]
hide tab3
show home
[/script]
[class=rstabc]
height:180px;
width:146px;
float:right;
position:relative;
top:85px;
border-radius:2px;
border-top:3px solid #A959EB;
border-bottom:3px solid #A959EB;
background-color:#89acf4;
[/class]
[class=scroll]
height:100%;
width:calc(100% + 10px);
padding-right:50px;
overflow-y:auto;
[/class]
[class=rs1]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
margin-left:5px;
[/class]
[class name=rs1 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs1 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs4t
hide rs5t
hide rs6t
hide rs7t
hide rs8t
show rs1t
[/script]
[class=rs2]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
left:15px;
[/class]
[class name=rs2 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs2 on=click]
hide rsth
hide rs1t
hide rs3t
hide rs4t
hide rs5t
hide rs6t
hide rs7t
hide rs8t
show rs2t
[/script]
[class=rs3]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
margin-left:5px;
margin-top:10px;
[/class]
[class name=rs3 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs3 on=click]
hide rsth
hide rs2t
hide rs1t
hide rs4t
hide rs5t
hide rs6t
hide rs7t
hide rs8t
show rs3t
[/script]
[class=rs4]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
left:15px;
margin-top:10px;
[/class]
[class name=rs4 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs4 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs1t
hide rs5t
hide rs6t
hide rs7t
hide rs8t
show rs4t
[/script]
[class=rs5]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
margin-left:5px;
margin-top:10px;
[/class]
[class name=rs5 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs5 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs4t
hide rs1t
hide rs6t
hide rs7t
hide rs8t
show rs5t
[/script]
[class=rs6]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
left:15px;
margin-top:10px;
[/class]
[class name=rs6 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs6 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs4t
hide rs5t
hide rs1t
hide rs7t
hide rs8t
show rs6t
[/script]
[class=rs7]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
margin-left:5px;
margin-top:10px;
margin-bottom:11px;
[/class]
[class name=rs7 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs7 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs4t
hide rs1t
hide rs6t
hide rs5t
hide rs8t
show rs7t
[/script]
[class=rs8]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
left:15px;
margin-top:10px;
margin-bottom:11px;
[/class]
[class name=rs8 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs8 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs4t
hide rs5t
hide rs1t
hide rs7t
hide rs6t
show rs8t
[/script]
[class=rsth]
height:114px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:12px;
text-align:center;
padding-top:60px
[/class]
[class=rs1t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs2t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs3t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs4t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs5t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs6t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs7t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs8t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
blique;
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]SO JANK[/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 ♡another cs code!
i actually rly liked the palette for this one. it was made for a sadboy rp started by a friend, n this code has like. a rly funky design
not sure if that's a good thing but like. it sure is a challenge using this one LMAO
it's sososososo janky n the first tab honestly. looks like a placeholder
finding the exit button to get out is like a minigame.
in all honesty ? not fun to use but so fun to click around after it's done. tbh
u can try using this one. i won't stop u. but don't say i didn't warn u.
[/div][/div][div class=codeinfosignature][div class=codeinfolink]link[/div]– uxie[/div]
[/div]
[/div]
[div class=container]
⠀♡coded by uxie♡
[div class=home]chan kai xun
"call me kai."
age 17
grade/year junior
nationality american
ethnicity chinese
sexuality bisexual
born
to dieborn
to die[div class=buttoncon][div class=button1][/div][div class=button2][/div][div class=button3][/div][/div]
[/div][div class=tab1 style=display:none;][div class=box1][div class=b1hover][/div][/div][div class=box2][div class=b2scroll][div class=b2hover]appearance
↓ scroll ↓ [/div][div class=b2text]height
build/body type
hair color
eye color
body modifications
face claim
[/div][/div][/div][div class=box3][div class=b3scroll][div class=b3hover]persona
↓ scroll ↓ [/div][div class=b3text]habits
hobbies
peeves
quirks/misc
[/div][/div][/div][div class=box4][/div]
[/div][div class=tab2 style=display:none;][div class=tpic1b][div class=tpic1bhover][/div][/div][div class=txt1][div class=tscroll][div class=title1]personality_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed libero nibh. Suspendisse ipsum purus, sodales efficitur imperdiet sed, facilisis et sapien. Donec dignissim libero vitae felis sodales, sit amet rhoncus mauris viverra. Curabitur pulvinar dapibus diam, sit amet vestibulum nisl condimentum eget. Maecenas tincidunt turpis eget ipsum malesuada, eu mollis quam blandit. Nunc egestas tempus nunc, vitae interdum nibh rhoncus sed. Nam egestas mi at erat feugiat, consectetur suscipit nisl eleifend. Nulla sed augue vel turpis vulputate malesuada sit amet id quam.
Fusce eget elementum enim. Nullam condimentum, ligula non pretium eleifend, lacus magna ultrices odio, at varius nisi odio vitae turpis. Nam fringilla neque ut enim vehicula, ultricies eleifend nisi consequat. Nulla ac facilisis justo. Suspendisse egestas lacus nec elit gravida bibendum. Suspendisse convallis scelerisque sem. Morbi consequat posuere lacus ac hendrerit. Etiam erat arcu, congue ac quam non, placerat porttitor mauris. Vestibulum vulputate diam viverra, efficitur quam ac, cursus libero. Sed tempor porttitor lacus vel accumsan.
[/div][/div][div class=tpic2b][/div][div class=tpic3b][/div][div class=tpic4b][/div][div class=txt2][div class=tscroll][div class=title2]history_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed libero nibh. Suspendisse ipsum purus, sodales efficitur imperdiet sed, facilisis et sapien. Donec dignissim libero vitae felis sodales, sit amet rhoncus mauris viverra. Curabitur pulvinar dapibus diam, sit amet vestibulum nisl condimentum eget. Maecenas tincidunt turpis eget ipsum malesuada, eu mollis quam blandit. Nunc egestas tempus nunc, vitae interdum nibh rhoncus sed. Nam egestas mi at erat feugiat, consectetur suscipit nisl eleifend. Nulla sed augue vel turpis vulputate malesuada sit amet id quam.
Fusce eget elementum enim. Nullam condimentum, ligula non pretium eleifend, lacus magna ultrices odio, at varius nisi odio vitae turpis. Nam fringilla neque ut enim vehicula, ultricies eleifend nisi consequat. Nulla ac facilisis justo. Suspendisse egestas lacus nec elit gravida bibendum. Suspendisse convallis scelerisque sem. Morbi consequat posuere lacus ac hendrerit. Etiam erat arcu, congue ac quam non, placerat porttitor mauris. Vestibulum vulputate diam viverra, efficitur quam ac, cursus libero. Sed tempor porttitor lacus vel accumsan.
[/div][/div][div class=tpic5b][/div]
[/div][div class=tab3 style=display:none;][div class=rstabc][div class=rsth]click on any of the icons to access their page in full.[/div][div class=rs1t style=display:none][div class=scroll][div class=title1]angryboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs2t style=display:none][div class=scroll][div class=title1]sadgurl_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs3t style=display:none][div class=scroll][div class=title1]softboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs4t style=display:none][div class=scroll][div class=title1]artboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs5t style=display:none][div class=scroll][div class=title1]dressboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs6t style=display:none][div class=scroll][div class=title1]heartboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs7t style=display:none][div class=scroll][div class=title1]boyboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div][div class=rs8t style=display:none][div class=scroll][div class=title1]leftboi_[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat nisl a gravida molestie. Etiam euismod elit eu turpis feugiat auctor. Curabitur neque nibh, hendrerit sed magna at, finibus condimentum enim. Aliquam erat volutpat. Sed at ex sem. Nam vitae sem rhoncus, imperdiet turpis ut, mattis sapien. Curabitur aliquam ligula vel odio facilisis condimentum. Morbi vehicula dolor odio, nec vestibulum libero tempus gravida. Nam et tincidunt nunc, eget sollicitudin nibh.
Mauris a iaculis ipsum. Proin at nulla sapien. Fusce elit tortor, sagittis nec pretium porta, ornare ut sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam malesuada lectus eget lacus maximus, id viverra urna rhoncus. Nullam sed lectus bibendum sem malesuada euismod. Proin gravida, leo et malesuada laoreet, lacus massa lacinia arcu, eget dignissim leo quam sit amet risus.
[/div][/div]
[/div][div class=navi]
relationships
[/div][div class=rs2][/div]relationships
relationships
[div class=exit3][div class=rs3][/div][div class=rs4][/div]
[div class=rs5][/div][div class=rs6][/div]
[div class=rs7][/div][div class=rs8][/div]
[/div][/div]
[/div][/div]
[/div]
[class=container] height:400px; width:400px; margin:auto; position:relative; [/class] [class=home] height:170px; width:300px; background-color:#93fff0; position:absolute; left:50px; top:115px; border-top:2px solid #4dd1d6; border-bottom:2px solid #4dd1d6; border-radius:2px; [/class] [class=hpicb] border:1px solid #FD34A6; height:96px; width:96px; padding:6px; position:relative; left:14px; top:14px; border-radius:50%; transition:0.3s; [/class] [class name=hpicb state=hover] transform:scale(1.06); transition:0.3s; [/class] [class=buttoncon] height:40px; width:110px; position:absolute; top:120px; left:160px; line-height:100%; text-align:left; center; [/class] [class=button1] height:30px; width:30px; border-radius:10px; font-size:28px; text-align:center; padding:3px; padding-top:3px; padding-bottom:3px; padding-left:3px; padding-right:3px; color:#4dd1d6; font-weight:bold; background-color:transparent; transition:0.3s; display:inline-block; [/class] [class name=button1 state=hover] text-shadow:2px 1.5px #FD34A6; transition:0.3s; cursor:pointer; [/class] [script class=button1 on=click] hide home show tab1 [/script] [class=button2] height:30px; width:30px; border-radius:10px; font-size:28px; text-align:center; padding:3px; padding-top:3px; padding-bottom:3px; padding-left:3px; padding-right:3px; color:#4dd1d6; font-weight:bold; background-color:transparent; transition:0.3s; display:inline-block; [/class] [class name=button2 state=hover] text-shadow:2px 1.5px #FD34A6; transition:0.3s; cursor:pointer; [/class] [script class=button2 on=click] hide home show tab2 [/script] [class=button3] height:30px; width:30px; border-radius:10px; font-size:28px; text-align:center; padding:3px; padding-top:3px; padding-bottom:3px; padding-left:3px; padding-right:3px; color:#4dd1d6; font-weight:bold; background-color:transparent; transition:0.3s; display:inline-block; [/class] [class name=button3 state=hover] text-shadow:2px 1.5px #FD34A6; transition:0.3s; cursor:pointer; [/class] [script class=button3 on=click] hide home show tab3 [/script] [class=tab1] height:350px; width:350px; position:absolute; left:25px; top:25px; filter:grayscale(40%); transition:0.8s; [/class] [class name=tab1 state=hover] filter:grayscale(0%); transition:0.8s; [/class] [class=box1] height:170px; width:170px; border-right:5px solid #A6D1FC; border-bottom:5px solid #A6D1FC; background-image:url('https://pbs.twimg.com/media/DkxDuhXW0AIUaEw.jpg'); float:left; background-size:100%; [/class] [class=b1hover] height:50px; width:170px; text-align:center; color:white; opacity:0; font-weight:bold; font-size:40px; letter-spacing:0.5px; line-height:90%; padding-top:70px; transition:0.8s; [/class] [class name=b1hover state=hover] opacity:0.6; transition:0.8s; cursor:pointer; [/class] [script class=b1hover on=click] hide tab1 show home [/script] [class=box2] height:170px; width:170px; border-left:5px solid #ff49e9; border-bottom:5px solid #ff49e9; background-image:url('https://pbs.twimg.com/profile_images/1026294755385372673/VL6A6GVx_400x400.jpg'); float:left; background-size:100%; background-position:50% 50%; overflow:hidden; [/class] [class=b2scroll] height:100%; width:calc(100% + 6px); overflow-y:scroll; padding-right:50px; [/class] [class=b2hover] height:50px; width:170px; text-align:center; color:white; opacity:0; font-weight:bold; font-size:20px; letter-spacing:0.5px; line-height:90%; padding-top:120px; transition:0.8s; [/class] [class name=b2hover state=hover] opacity:0.8; transition:0.8s; cursor:pointer; [/class] [class=b2text] background-color:#ffb5f3; margin-top:170px; min-height:164px; width:164px; padding:3px; color:#7f45cc; font-size:10.5px; [/class] [class=box3] height:170px; width:170px; border-top:5px solid #F6A1FE; border-right:5px solid #F6A1FE; background-image:url('https://pbs.twimg.com/media/DifdrlKXUAApcoy.jpg'); float:left; background-size:100%; background-position:50% 50%; overflow:hidden; [/class] [class=b3scroll] height:100%; width:calc(100% + 6px); overflow-y:scroll; padding-right:50px; position:relative; [/class] [class=b3hover] height:50px; width:170px; text-align:center; color:white; opacity:0; font-weight:bold; font-size:20px; letter-spacing:0.5px; line-height:90%; padding-top:120px; transition:0.8s; [/class] [class name=b3hover state=hover] opacity:0.8; transition:0.8s; cursor:pointer; [/class] [class=b3text] background-color:#8eb4ff; margin-top:170px; min-height:164px; width:164px; padding:3px; color:#BA4DC2; font-size:10.5px; [/class] [class=box4] height:170px; width:170px; border-left:5px solid #C47EEE; border-top:5px solid #C47EEE; background-image:url('https://data.whicdn.com/images/317880748/large.jpg'); float:left; background-size:120%; background-position:center; transition:0.8s; [/class] [class=tab2] height:350px; width:350px; position:absolute; left:25px; top:25px; [/class] [class=txt1] height:210px; width:160px; background:url('https://steamuserimages-a.akamaihd.net/ugc/270598716228579115/72CD26E14B7FCBA028206A06F10548C0D5174CFC/'); background-size:350%; background-position:30% 15%; overflow:hidden; position:relative; top:70px; float:left; border-top:5px solid #c91ab5; border-left:5px solid #c91ab5; [/class] [class=txt2] height:210px; width:160px; background:url('https://steamuserimages-a.akamaihd.net/ugc/270598716228579115/72CD26E14B7FCBA028206A06F10548C0D5174CFC/'); background-size:350%; background-position:75% 0%; overflow:hidden; position:relative; top:70px; float:right; border-bottom:5px solid #c91ab5; border-right:5px solid #c91ab5; [/class] [class=title1] font-size:16px; text-transform:uppercase; font-style
blique;
text-align:left;
position:relative;
left:0px;
font-weight:bold;
letter-spacing:1px;
[/class]
[class=title2]
font-size:20px;
text-transform:uppercase;
font-styleblique;
text-align:right;
position:relative;
left:0px;
font-weight:bold;
letter-spacing:1px;
[/class]
[class=tpic1b]
border:1px solid #10F3FC;
height:60px;
width:60px;
padding:4px;
position:absolute;
left:80px;
top:20px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]
[class name=tpic1b state=hover]
transform:scale(1.06);
transition:0.3s;
[/class]
[class=tpic1bhover]
height:55px;
width:65px;
position:absolute;
border-radius:50%;
transition:0.3s;
padding-top:10px;
z-index:6;
color:white;
text-align:center;
font-size:30px;
opacity:0;
[/class]
[class name=tpic1bhover state=hover]
opacity:0.65;
transition:0.3s;
cursor:pointer;
[/class]
[script class=tpic1bhover on=click]
hide tab2
show home
[/script]
[class=tpic2b]
border:1px solid #10F3FC;
height:50px;
width:50px;
padding:4px;
position:absolute;
left:10px;
top:295px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]
[class name=tpic2b state=hover]
transform:scale(1.06);
transition:0.3s;
[/class]
[class=tpic3b]
border:1px solid #10F3FC;
height:40px;
width:40px;
padding:3px;
position:absolute;
left:50px;
top:280px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]
[class name=tpic3b state=hover]
transform:scale(1.06);
transition:0.3s;
[/class]
[class=tpic4b]
border:1px solid #10F3FC;
height:50px;
width:50px;
padding:4px;
position:absolute;
left:240px;
top:15px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]
[class name=tpic4b state=hover]
transform:scale(1.06);
transition:0.3s;
[/class]
[class=tpic5b]
border:1px solid #10F3FC;
height:70px;
width:70px;
padding:4px;
position:absolute;
left:290px;
top:275px;
border-radius:50%;
transition:0.3s;
z-index:6;
[/class]
[class name=tpic5b state=hover]
transform:scale(1.06);
transition:0.3s;
[/class]
[class=tscroll]
height:100%;
width:calc(100% + 10px);
padding-right:50px;
overflow-y:scroll;
margin-left:4px;
[/class]
[class name=tscroll]
font-size:9.5px;
color:white;
text-align:justify;
background-color:rgba(0, 0, 0, 0.2);
[/class]
[class=tab3]
height:350px;
width:360px;
left:15px;
top:25px;
position:absolute;
[/class]
[class=navi]
height:300px;
width:190px;
background:url('https://i.pinimg.com/originals/c1/f1/48/c1f1489f4c43e96cf7f1403b4dd97f92.jpg');
background-size:100%;
background-position:50% 50%;
position:absolute;
border-left:3px solid #ff49a4;
border-right:3px solid #ff49a4;
center;
top:25px;
border-radius:2px;
overflow:hidden;
padding:5px;
[/class]
[class=exit3]
position:relative;
left:-6px;
float:right;
color:white;
font-size:20px;
[/class]
[class name=exit3 state=hover]
cursor:pointer;
[/class]
[script class=exit3 on=click]
hide tab3
show home
[/script]
[class=rstabc]
height:180px;
width:146px;
float:right;
position:relative;
top:85px;
border-radius:2px;
border-top:3px solid #A959EB;
border-bottom:3px solid #A959EB;
background-color:#89acf4;
[/class]
[class=scroll]
height:100%;
width:calc(100% + 10px);
padding-right:50px;
overflow-y:auto;
[/class]
[class=rs1]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
margin-left:5px;
[/class]
[class name=rs1 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs1 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs4t
hide rs5t
hide rs6t
hide rs7t
hide rs8t
show rs1t
[/script]
[class=rs2]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
left:15px;
[/class]
[class name=rs2 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs2 on=click]
hide rsth
hide rs1t
hide rs3t
hide rs4t
hide rs5t
hide rs6t
hide rs7t
hide rs8t
show rs2t
[/script]
[class=rs3]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
margin-left:5px;
margin-top:10px;
[/class]
[class name=rs3 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs3 on=click]
hide rsth
hide rs2t
hide rs1t
hide rs4t
hide rs5t
hide rs6t
hide rs7t
hide rs8t
show rs3t
[/script]
[class=rs4]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
left:15px;
margin-top:10px;
[/class]
[class name=rs4 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs4 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs1t
hide rs5t
hide rs6t
hide rs7t
hide rs8t
show rs4t
[/script]
[class=rs5]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
margin-left:5px;
margin-top:10px;
[/class]
[class name=rs5 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs5 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs4t
hide rs1t
hide rs6t
hide rs7t
hide rs8t
show rs5t
[/script]
[class=rs6]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
left:15px;
margin-top:10px;
[/class]
[class name=rs6 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs6 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs4t
hide rs5t
hide rs1t
hide rs7t
hide rs8t
show rs6t
[/script]
[class=rs7]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
margin-left:5px;
margin-top:10px;
margin-bottom:11px;
[/class]
[class name=rs7 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs7 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs4t
hide rs1t
hide rs6t
hide rs5t
hide rs8t
show rs7t
[/script]
[class=rs8]
border:1px solid #FD34A6;
height:65px;
width:65px;
padding:4px;
position:relative;
float:left;
border-radius:50%;
transition:0.3s;
left:15px;
margin-top:10px;
margin-bottom:11px;
[/class]
[class name=rs8 state=hover]
transform:scale(1.06);
transition:0.3s;
cursor:pointer;
[/class]
[script class=rs8 on=click]
hide rsth
hide rs2t
hide rs3t
hide rs4t
hide rs5t
hide rs1t
hide rs7t
hide rs6t
show rs8t
[/script]
[class=rsth]
height:114px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:12px;
text-align:center;
padding-top:60px
[/class]
[class=rs1t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs2t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs3t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs4t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs5t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs6t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs7t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
[class=rs8t]
height:174px;
width:140px;
padding:3px;
overflow:hidden;
position:absolute;
color:white;
font-size:9.5px;
text-align:justify;
left:2px;
[/class]
Last edited:
