boo.
keep precious things
[class=bkgd]
--highlight: #fff;
--lowlight: #4A3F3D;
--color1: #DEDEDE;
--color2: #c1d7db;
--color3: #225566;
--color4: #4C727A;
--color5: #6E99A3;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 4px;
width: 500px;
height: 350px;
background-color: var(--color2);
overflow: hidden;
border-radius: 10px;
box-shadow: 5px 5px 0px var(--color3);
cursor: url('https://i.imgur.com/FMvuswx.png'), auto;
[/class]
[class=splash]
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color5);
[/class]
[class=splashpic]
position: absolute;
width: 200px;
height: 200px;
top: 65px;
left: 150px;
background: url(https://i.pinimg.com/564x/09/bc/fc/09bcfc258040a430ea401e15dc87facc.jpg);
background-size: 130%;
background-position: 50% 50%;
border-radius: 10px;
[/class]
[class=splashpicshadow]
position: absolute;
width: 195px;
height: 195px;
top: 75px;
left: 160px;
border: 5px solid var(--color1);
border-radius: 10px;
[/class]
[class=splashname]
position: absolute;
width: 100%;
height: auto;
top: 35px;
padding-left: 80px;
text-align: left;
font-size: 30px;
color: var(--highlight);
text-shadow: 3px 3px 0px var(--color4);
font-weight: 700;
font-style: italic;
text-transform: lowercase;
[/class]
[class=splashrole]
position: absolute;
width: 85%;
height: auto;
top: 250px;
text-align: right;
font-size: 27px;
color: var(--lowlight);
text-shadow: 3px 3px 0px var(--color1);
font-weight: 700;
font-style: italic;
text-transform: lowercase;
[/class]
[class=pic]
position: absolute;
width: 150px;
height: 150px;
top: 25px;
left: 30px;
background: url(https://i.pinimg.com/564x/93/81/fc/9381fcc4ed73573485959bb23a6ef76d.jpg);
background-size: 180%;
background-position: 50% 50%;
border-radius: 10px;
transition-duration: 0.3s;
[/class]
[class name=pic state=hover]
background: url(https://i.pinimg.com/564x/22/61/07/226107e7c6125b2d66e1c44442b9eab6.jpg);
background-size: 145%;
background-position: 100% 60%;
transition-duration: 0.3s;
[/class]
[class=picshadow]
position: absolute;
width: 145px;
height: 145px;
top: 30px;
left: 35px;
border: 4px solid var(--color1);
border-radius: 10px;
[/class]
[class=name]
position: absolute;
width: 150px;
height: auto;
top: 190px;
left: 30px;
text-align: center;
font-size: 20px;
line-height: 20px;
color: var(--highlight);
text-shadow: 3px 3px 0px var(--color4);
font-weight: 700;
font-style: italic;
text-transform: lowercase;
[/class]
[class=tab]
position: absolute;
width: 130px;
height: 16px;
background: var(--color5);
border-radius: 5px;
transition-duration: 0.3s;
color: var(--highlight);
font-size: 12px;
line-height: 16px;
font-weight: 700;
text-transform: lowercase;
text-align: center;
font-style: italic;
box-shadow: 2px 2px 0px var(--color1);
[/class]
[class name=tab state=hover]
background: var(--color3);
transition-duration: 0.3s;
[/class]
[class=textcontainer]
position: absolute;
width: 300px;
height: 300px;
left: 220px;
top: 30px;
overflow: hidden;
[/class]
[class=text]
position: relative;
width: 260px;
height: 100%;
overflow: auto;
color: var(--lowlight);
font-size: 10px;
line-height: 12px;
text-align: justify;
padding-right: 100px;
white-space: pre-wrap;
padding-top: 2px;
[/class]
[class=tag]
position: relative;
overflow: visible;
display: inline;
width: auto;
height: auto;
font-size: 9px;
text-align: center;
margin-right: 5px;
padding: 1px 3px 1px 3px;
text-transform: lowercase;
border: 2px solid var(--color1);
border-radius: 3px;
color: var(--color3);
font-weight: 700;
letter-spacing: 0px;
[/class]
[class=credit]
position: relative;
overflow: hidden;
width: 100%;
height: 10px;
text-align: center;
font-style: normal;
font-weight: normal;
font-size: 8px;
color: #dedede;
opacity: 0.2;
[/class]
[script class=button on=click]
addClass slideleft splash
[/script]
[class=slideleft]
animation-name: {post_id}sleft;
animation-duration: 1.7s;
animation-fill-mode: forwards;
[/class]
[animation=sleft]
[keyframe=0]transform: translateX(0%);[/keyframe]
[keyframe=100]transform: translateX(-100%);visibility:hidden;[/keyframe]
[/animation]
[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} intro) (fadeIn 400 tabsContent1)
if (eq ${currentTab} characters) (fadeIn 400 tabsContent2)
if (eq ${currentTab} links) (fadeIn 400 tabsContent3)
if (eq ${currentTab} extras) (fadeIn 400 tabsContent4)
[/script]
[class=hidden]
display:none;
[/class]
[div class=bkgd]
[div class=picshadow][/div]
[div class=pic][/div]
[div class=name]the abandoned.[/div]
[div class=tab style="top: 245px; left: 40px;"]intro[/div]
[div class=tab style="top: 267px; left: 40px;"]characters[/div]
[div class=tab style="top: 289px; left: 40px;"]links[/div]
[div class=tab style="top: 311px; left: 40px;"]extras[/div]
[div class="textcontainer tabsContent tabsContent1"][div class=text]hey all! i'll be posting updates and announcements here. this is kind of an alternative for our discord page, so this way you can still be up-to-date on everything that happens. feel free to chat below, ask questions, post memes, whatever you feel like!
[/div][/div]
[div class="textcontainer tabsContent tabsContent2 hidden"][div class=text][div class=tag]Akuji Barnes[/div] played by
boo.
; cs here
[div class=tag]Elliot Lance[/div] played by
boo.
; cs here
[div class=tag]Evan[/div] played by
Huntertabbysandshark3
; cs here
[div class=tag]Rashaad Travers[/div] played by
Triforce
; cs here
[div class=tag]Ruby Rose[/div] played by
Jigajig
; cs here
[div class=tag]Linavis Finkorish[/div] played by
Peckinou
; cs here
[div class=tag]Seung Ji-Yoo[/div] played by
Nenma Takashi
; cs here
[div class=tag]Arya Aoyama[/div] played by
Stale Biscuit
; cs here
[div class=tag]Mori[/div] played by
spookie
; cs here
[/div][/div]
[div class="textcontainer tabsContent tabsContent3 hidden"][div class=text][div class=tag]old search thread[/div] here
[div class=tag]cs thread[/div] here
[div class=tag]ic thread[/div] here
[div class=tag]discord[/div] here
[div class=tag]new search thread[/div] here
[/div][/div]
[div class="textcontainer tabsContent tabsContent4 hidden"][div class=text]
[/div][/div]
[div class="splash button"]
[div class=splashpicshadow][/div]
[div class=splashpic][/div]
[div class=splashname]akuji's orphanage[/div]
[div class=splashrole]out of character[/div]
[/div]
[/div]
[div class=credit]code by [COLOR=#dedede]sox[/COLOR][/div]
Last edited: