CC#08 Envelope

CC#08MNC: Envelope

CSS

/* Last Update: 03/21/19 */

/* PAGE BACKGROUND AND FONT */
body {
background:#faebd7 url('https://sojo.net/sites/default/files/blog/shutterstock_79908817.jpg') fixed;
background-size:cover;
font-family:Sniglet,serif;
font-size:14px;
}
h2, h3, a, i, b {
font-family:'Seaweed Script',script,serif;
font-size:125%;
}

/* MAIN DISPLAY COLORS */
.color {
background:#ffdead url('https://dl.dropboxusercontent.com/s/mklb9kzjehgtp1z/natural-paper.png');
color:#333;
}
#mugshot {
border-top:5px dotted #f00;
border-left:5px dotted #f00;
border-right:5px dotted #1e90ff;
border-bottom:5px dotted #1e90ff;
}
b {
color:#000;
}
a {
text-decoration:none;
color:#1e90ff;
}
a:hover {
color:#696969;
}
i {
color:#f00;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:4px;
height:4px;
background-color:#ffdead;
}
::-webkit-scrollbar-thumb {
background-color:#333;
}

/* CSS MEAT */
#envelope, h2, h3 {
border-radius:5px;
}
#envelope {
position:fixed;
top:50%;
left:50%;
min-height:325px;
min-width:630px;
height:80%;
width:70%;
padding:1%;
text-align:left;
transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
#statbox, #infobox, #obox {
position:absolute;
overflow-y:auto;
}
#statbox {
z-index:4;
height:45%;
width:25%;
}
#infobox {
z-index:3;
top:27.5%;
left:26%;
height:50%;
width:48%;
text-align:center;
}
#obox {
z-index:2;
bottom:0;
height:10%;
width:100%;
}
#mugshot {
z-index:1;
position:absolute;
right:1%;
height:40%;
}
#stamp {
z-index:2;
position:absolute;
top:10%;
right:15%;
height:20%;
}
img {
max-height:90%;
}
#obox li, #obox h3 {
float:left;
margin:0 0.5vw;
}
#credit {
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Sniglet|Seaweed+Script" rel="stylesheet"/>

<div class="color" id="envelope">
<img src="IMAGE URL HERE" alt="" id="mugshot"/>

<img src="http://www.clker.com/cliparts/e/e/h/N/R/5/squiggles-for-postage-stamp-hi.png" alt="three quiggly lines that mail is stamped with" id="stamp"/>

<div id="statbox">
<i>Name:</i> Stat here
<br/>
<i>Species:</i> Stat here
<br/>
<i>Gender:</i> Stat here
<br/>
<i>Age:</i> Stat here
<br/>
<i>Hair:</i> Stat here
<br/>
<i>Eyes:</i> Stat here
<br/>
<i>Height:</i> Stat here
<br/>
<i>Weight:</i> Stat here
<br/>
<i>Build:</i> Stat here
<br/>
<i>Orientation:</i> Stat here
</div>

<div id="infobox">
<h3>Title one</h3>
<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>
<p>
Paragraph Two <b>Bold</b> <a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</p>
<h3>Title two</h3>
<p>
Paragraph One
</p>
<p>
Paragraph Two
</p>
</div>

<div id="obox">
<h3>OOC:</h3>
<li>Bullet One</li>
<li>Bullet Two</li>
<li>Bullet Three</li>
<li>Bullet Four</li>
<li>Bullet Five</li>
</div>
</div>

<a href="http://wix.cera-nore.com/" target="_blank" title="CC#08">
<img src="https://dl.dropboxusercontent.com/s/axygmef294cpp97/credit.png" id="credit"/>
</a>