ALT#03 Earthen Blizzard

ALT#03MTI: Earthen Blizzard

CSS

/* Last Update: 02/23/19 */

/* PAGE BACKGROUND AND FONT */
body {
background:#3a281e url('http://coolvibe.com/wp-content/uploads/2010/05/organicmountains.jpg') no-repeat fixed;
background-size:cover;
font-family:Iceberg,serif;
}

/* MAIN DISPLAY COLORS */
.color, #navbar a {
background:#47352B url('https://dl.dropboxusercontent.com/s/neiyvwgw4qesrhd/cartographer.png');
background-size:250px auto;
border:5px solid #f7ede9;
box-shadow:0 0 5px inset #000;
color:#f7ede9;
text-shadow:1px 1px 2px #000;
opacity:0;
}
.color:hover, #navbar a:hover {
opacity:1;
}
h2 {
background-color:#f7ede9;
box-shadow:0 0 5px #000;
color:#47352b;
}
a {
text-decoration:none;
color:#000;
text-shadow:0 0 5px #f7ede9;
}

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

/* TRANSITION SPEED */
#infobox, .mugshot, #navbar a {
-webkit-transition:2s;
-moz-transition:2s;
-o-transition:2s;
transition:2s;
}

/* CSS MEAT */
#infobox, .mugshot, #navbar {
position:fixed;
}
#infobox{
top:45%;
left:28%;
height:45%;
width:55%;
border-radius: 5px 50px 25px 5px;
text-align:left;
padding:1%;
overflow:hidden;
}
.mugshot {
top:10%;
left:1%;
height:80%;
overflow:hidden;
}
.mugshot img {
height:100%;
}
#navbar {
top:0;
right:2.5%;
height:100%;
width:10%;
}
#navbar a {
display:inline-block;
height:25%;
width:100%;
margin:15% 0;
border-radius:5px 25px 25px 5px;
}
.tab {
height:100%;
width:100%;
overflow-y:auto;
}
h2 {
position:relative;
left:4%;
width:92%;
}
img {
max-height:100%;
}
h2, p {
text-indent:5%;
}
#credit {
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Iceberg" rel="stylesheet">

<div class="mugshot color" style="border-radius:25px 5px 5px 25px;">
<img src="IMAGE URL ONE" alt=""/>
</div>

<div class="mugshot color" style="top:5%;left:30%;border-radius:5px 5px 5px 5px;">
<img src="IMAGE URL TWO" alt=""/>
</div>

<div class="mugshot color" style="top:5%;left:59%;border-radius:5px 25px 25px 5px;">
<img src="IMAGE URL THREE" alt=""/>
</div>

<div id="navbar">
<a href="#01"></a>
<a href="#02"></a>
<a href="#03"></a>
</div>

<div class="color" id="infobox">
<div class="tab" style="overflow:hidden;">

<div class="tab" id="01">
<h2>About</h2>
<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>
</div>

<div class="tab" id="02">
<h2>Friends</h2>
<p>
<b>Bold</b> <a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</p>
</div>

<div class="tab" id="03">
<h2>OOC</h2>
<ul>
<li>Bullet one</li>
<li>Bullet two</li>
<li>Bullet three</li>
<li>Bullet four</li>
<li>Bullet five</li>
<li>Bullet six</li>
<li>Bullet seven</li>
<li>Bullet eight</li>
</ul>
</div>

</div>
</div>

<a href="https://tinyurl.com/y76p2uef" target="_blank" title="CC#03">
<img src="https://dl.dropboxusercontent.com/s/m6ocjb7kbe99so7/small.png" id="credit"/>
</a>

Roleplay Layouts by Cera Nore

ALT#03MTI: Earthen Blizzard

CSS

HTML

Alternates

Blizzard