Alteras

[class=base] --img-w: 3200; --img-h: 1512; --bg-color: rgba(182, 0, 48, 0.8); width: 100%; padding-top: calc( var(--img-h)/var(--img-w) * 100%); margin: 0 auto; box-sizing: border-box; border: 5px solid black; border-radius: 20px; background-image: url('https://www.rpnation.com/media/58839975_p0_waifu2x_art_scale_tta_1-png.34526/full'); background-size: cover; position: relative; overflow: hidden; [/class] [class=container] position: absolute; top: 0; width: 100%; height: 100%; color: white; [/class] [class=left] background-color: var(--bg-color); width: 39.75%; height: 100%; border-right: 5px solid white; box-sizing: border-box; overflow:hidden; top:0; position: absolute; transform-origin: top right; transform: skewX(-30deg); transition: all 1.5s ease-in-out; [/class] [class=titleL] height: auto; right: 0; position: absolute; writing-mode: vertical-rl; box-sizing: border-box; text-align: right; font-size: 5vw; transform: skewX(30deg) rotate(-150deg); [/class] [class=right] background-color: var(--bg-color); width: 62%; height: 100%; border-left: 5px solid white; box-sizing: border-box; overflow:hidden; bottom: 0; right: 0; position: absolute; transform-origin: bottom left; transform: skewX(-30deg); transition: all 1.5s ease-in-out; [/class] [class=titleR] height: auto; left: 0; bottom:0; position: absolute; writing-mode: vertical-rl; box-sizing: border-box; text-align: left; font-size: 5vw; transform: skewX(30deg) rotate(-150deg); [/class] [class=contentR] bottom: 0; right: 0; position: absolute; width: 33.5%; height: 100%; padding: 5px; box-sizing: border-box; overflow:hidden; transition: all .5s ease-in-out 1s; [/class] [class=contentL] top: 0; left: 0; position: absolute; height: 50%; width: 21%; padding: 5px; box-sizing: border-box; overflow:hidden; transition: all .5s ease-in-out 1s; [/class] [class=scroll] width: 100%; height: 100%; padding-right: 150px; overflow-y:scroll; position: relative; [/class] [class=opacity] opacity:0; transition: all .5s ease-in-out; [/class] [class=hide] width: 0; [/class] [class=button] color: white; position: absolute; bottom: 0; left: 0; padding: 5px; cursor: pointer; [/class] [class=options] display: inline; width: 100px; [/class] [class=Image] opacity:0; position: absolute; display:inline; left:0 width: 0; transition: all .3s ease-in-out; white-space: nowrap; [/class] [class=Text] opacity:0; position: absolute; display: inline; left:0 width: 0; transition: all .3s ease-in-out; white-space: nowrap; [/class] [class=buttonShow] opacity: 1; width: 70px; [/class] [script=button] set IsText 1 removeClass opacity contentL removeClass opacity contentR removeClass hide left removeClass hide right [/script] [script class=button on=mouseenter] if (eq ${IsText} 1) (addClass buttonShow Image) (addClass buttonShow Text) [/script] [script class=button on=mouseleave] removeClass buttonShow Image removeClass buttonShow Text [/script] [script class=button on=click] if (eq ${IsText} 1) (addClass opacity contentL) if (eq ${IsText} 1) (addClass opacity contentR) if (eq ${IsText} 1) (addClass hide left) if (eq ${IsText} 1) (addClass hide right) if (eq ${IsText} 1) (removeClass buttonShow Image) if (eq ${IsText} 0) (removeClass opacity contentL) if (eq ${IsText} 0) (removeClass opacity contentR) if (eq ${IsText} 0) (removeClass hide left) if (eq ${IsText} 0) (removeClass hide right) if (eq ${IsText} 0) (removeClass buttonShow Text) if (eq ${IsText} 1) (set IsText 0) (set IsText 1) [/script] [div class=base][div class=container]
[div class="left hide"][div class=titleL]User:[/div][/div]
[div class="right hide"][div class=titleR]Alteras[/div][/div]
[div class="contentL opacity"][div class=scroll style=top:0;]User ID:
 Alteras
Title:
 The Sleepy One
Interests:
 BBcode
 Anime
 Manga
 Japanese Electronica
 J-Jazz
 Artcore
 Games
 Sleep
[/div][/div]
[div class="contentR opacity"][div class=scroll style=bottom:0;]

BBcode:
Currently in a Collab BBcode with @sugarvine (  ¬ FEVERDREAMS ⸥ alt × sugar)
Currently has one active BBcode Workshop (Star of Arcadia)
Has one closed BBcode Workshop (Dreams of Arcadia)
Will accept requests to make BBcode
Will teach others how to make BBcode
Loves new BBcode+ and BBscript
In ongoing war against [List] tags

All Time Favorite Anime:
Steins;Gate
Code Geass
Acchi Kocchi
Baccano!
Joker Game
Barakamon
Gosick
Angel Beats!
My Teen Romantic Comedy SNAFU

Music Groups and Artists:
Sakuyzo
Hatsunetsumiko's
AVTechNO

Games:
Minecraft
Legend of Zelda: Breath of the Wild
Celeste
Mario Odyssey
Settlers of Catan

Devices Used When Coding:
17" MacBook Pro Early 2011
iPhone 6s

Image: バトルフィールド | Bae.C / 裴.C [pixiv]​

[/div][/div][div class=button] [div class=options][div class=Image]View Image[/div][div class=Text]View Text[/div][/div][/div]
[/div][/div]