CC#04 Flame

CC#04HNS: Flame +

CSS

/* Last Update: 02/04/19 */

/* PAGE BACKGROUNDS AND FONTS */
body {
background:#8b0000 url(http://wallpapercave.com/wp/QKgBmix.jpg) center no-repeat fixed;
background-size:cover;
font-family:'Milonga',serif;
text-align:center;
}
.title {
font-family:'Metamorphous';
}
a {
font-family:'Almendra Display';
font-weight:bold;
}

/* MAIN DISPLAY COLORS */
.color, .mugshot, .mugshot .title {
border:1.25vw solid rgba(0,0,0,0.6);
}
.color, .mugshot {
background:url(https://ubisafe.org/images/transparent-backgrounds-fire-2.png) top no-repeat;
background-size:cover;
border-bottom:none;
box-shadow:5px 0 15px #000,
	5px 0 15px inset #000,
	5px 0 15px inset #000;
color:#fcd200;
}
.left .banner {
background:rgba(0,0,0,0.6) url(https://ubisafe.org/images/transparent-backgrounds-fire-2.png) top no-repeat;
background-size:cover;
}
.right .banner {
background:rgba(0,0,0,0.6) url(https://ubisafe.org/images/transparent-backgrounds-fire-2.png) top no-repeat;
background-size:cover;
}
.banner, .text, .mugshot .title {
box-shadow:5px 0 15px inset #000,
	5px 0 15px inset #000;
}
.mugshot .title {
background-color:rgba(0,0,0,0.2);
text-shadow:0 0 10px #000;
}
.infobox .title, .text {
background-color:rgba(0,0,0,0.6);
}
.title, a {
text-decoration:none;
color:#ff8c00;
}
a:hover {
color:#200;
text-shadow:0 0 2px #200;
}
b {
color:#ffd700;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background-color:#fcd200;
}

/* TRANSITION SPEED */
.color, #in, #out {
transition:1s;
-o-transition:1s;
-ms-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}

/* CSS MEAT */
.mugshot, .mugshot img, .infobox, .banner {
border-radius:500px 500px 0 0;
}
#switch {
z-index:3;
position:fixed;
top:0;
left:20%;
height:100%;
width:60%;
}
#out, #switch:hover #in, .infobox:hover {
opacity:1;
}
#in, #switch:hover #out, .infobox {
opacity:0;
}
.mugshot {
position:absolute;
bottom:0;
left:50%;
height:90%;
padding:2%;
overflow:hidden;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.mugshot img {
z-index:2;
height:100%;
}
.title {
position:absolute;
left:0;
right:0;
bottom:8%;
z-index:3;
font-size:5.5vh;
}
.infobox .title {
font-size:4vh;
}
.infobox {
z-index:4;
position:fixed;
height:88%;
width:24%;
bottom:0;
}
.left {
left:1.5%;
}
.right {
right:1.5%;
}
.banner {
position:absolute;
top:3%;
left:5%;
right:5%;
height:28%;
overflow:hidden;
}
.text {
position:absolute;
top:34%;
bottom:0;
left:5%;
right:5%;
padding:1%;
overflow-y:auto;
}
.infobox img {
max-width:100%;
}
#credit {
z-index:5;
position:fixed;
height:17px;
right:1%;
bottom:0;
background-color:#fff;
border-radius:5px;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Almendra+Display|Metamorphous|Milonga" rel="stylesheet">

<body>
<div id="switch">
<div class="mugshot" id="out">
<img src="IMAGE URL ONE" alt=""/>
<div class="title">
Flame Princess
</div>
</div>

<div class="mugshot" id="in">
<img src="IMAGE URL TWO" alt=""/>
<div class="title">
"Burn the World"
</div>
</div>
</div>

<div class="color left infobox">
<div class="banner">
<div class="title">
Stats
</div>
</div>
<div class="text">
<p>
<b>Full Name:</b> Stat here
<br/>
<b>Gender:</b> Stat here
<br/>
<b>Species:</b> Stat here
<br/>
<b>Age:</b> Stat here
<br/>
<b>Height:</b> Stat here
<br/>
<b>Weight:</b> Stat here
<br/>
<b>Hair:</b> Stat here
<br>
<b>Eyes:</b> Stat here
<br/>
<b>Orientation:</b> Stat here
</p>
</div>
</div>

<div class="color right infobox">
<div class="banner">
<div class="title">
About
</div>
</div>
<div class="text">
<p>
Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
</p>
<b>Bold</b> <a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>

<a href="http://wix.cera-nore.com/" target="_blank" title="CC#04">
<img src="https://orig00.deviantart.net/9a8a/f/2017/256/c/d/cera_by_cera_nore-dbncbii.png" id="credit"/>
</a>

CC#04HNS: Flame +

CSS

HTML

Alternates

Forest Flame