Hell0NHighWater
Queen of Hell
[class=base]
--img-w: 3200;
--img-h: 1512;
--bg-color: rgba(26, 0, 0, 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://media.giphy.com/media/10ySCDq1TBfFWo/giphy.gif');
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]Merry[/div][/div]
[div class="right hide"][div class=titleR]Christmas[/div][/div]
[div class="contentL opacity"][div class=scroll style=top:0;]
S a n t a
C a m e
a
l i t t l e
l a t e . . .
[/div][/div]
[div class="contentR opacity"][div class=scroll style=bottom:0;]
B u t
W h a t e v e r,
h e r e ' s
s o m e
g i f t s
[/div][/div][div class=button] [div class=options][div class=Image]View Image[/div][div class=Text]View Text[/div][/div][/div]
[/div][/div]
[div class="left hide"][div class=titleL]Merry[/div][/div]
[div class="right hide"][div class=titleR]Christmas[/div][/div]
[div class="contentL opacity"][div class=scroll style=top:0;]
S a n t a
C a m e
a
l i t t l e
l a t e . . .
[/div][/div]
[div class="contentR opacity"][div class=scroll style=bottom:0;]
B u t
W h a t e v e r,
h e r e ' s
s o m e
g i f t s
Greater Warding of Affliction Greater Warding of Affliction Lesser Warding of Affliction Tome of Blood (adds 2 new blood magic spells of user's choice) Greater Warding of the Blessed Greater Warding of the Blessed Lesser Warding of the Blessed Tome of Night (adds 2 new black magic spells of user's choice) Tome of Day (adds 2 new white magic spells of user's choice) |
[/div][/div][div class=button] [div class=options][div class=Image]View Image[/div][div class=Text]View Text[/div][/div][/div]
[/div][/div]
pen Sans;
color:Black;
padding:20px;
padding-bottom:5px;
background-color:#D3D3D3;
width:85%;
margin: Auto;
// This is the mainly background and the font//
// If the Font does not show up //
// use the typical bbc font tag in one area to make it show up//
// you'll notice I've done so with the Name//
// I don't know why it won't work 100% of the time with out doing this//
// but since its just a simple thing to add//
// I figured it wasn't to much to do to get the font I wanted//
//if you want a more modern look I suggest using the font Anonymous Pro//
//just don't forget to change it in the font tag on the name so it'll work//
[/class]
[class=Line]
border-bottom: 1px SOLID #000000;
//this is the line under each section
// To get the double line I just added a style to it//
//as you'll be able to see below//
[/class]
[div class=Info][Div class="Line" style="border-top: 1px SOLID #000000; height:3px;"][/div]
oiret One;
font-size:1em;
[/class]
[class=bar]
display:flex;
justify-content:space-between;
border-bottom:2px solid #707070;
[/class]
[class=barText]
font-family:Roboto;Light;
font-size:0.8em;
color:white;
padding:0.2em;
[/class]
