CC#12 Journal

CC#12ENC: Journal

CSS

/* Last Update: 02/16/18 */

/* PAGE BACKGROUND AND FONT */
body {
background-image: url();
background-attachment:fixed;
background-repeat:no-repeat;
background-color:#ffe0f6;
font-family: 'Mr Dafoe',script, serif;
font-size:160%;
font-weight:bold;
text-align:center;
}

/* MAIN DISPLAY COLORS */
.color {
background-color:#faebd7;
border-radius:2px;
color:#454343;
box-shadow: 20px 20px 20px #696969;
background-image:url(http://www.extracriticum.com/.a/6a00e5529414a0883401539234e180970b-pi);
background-repeat:no-repeat;
background-size:cover;
}
h3 {
position:relative;
left:10%;
width:80%;
border-bottom:2px solid #454343;
}
a {
text-decoration:none;
color:#9400d3;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#dddddd;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#454343;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#454343;
}

/* CSS MEAT */
#profile {
position:fixed;
top:5%;
left:50%;
bottom:0%;
width:40%;
padding:10px;
overflow-y:auto;
}
#mugshot {
position:fixed;
left:0%;
top:0%;
height:100%;
width:40%;
}
#mugshot img {
height:100%;
}
audio {
max-width:75%;
max-height:40px;
}
#profile img {
max-width:90%;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<style>
@import url('https://fonts.googleapis.com/css?family=Mr+Dafoe');
</style>

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

<div class="color" id="profile">
<img src="MINI IMAGE HERE" alt="" style="height:25%;"/>
<br>
<audio controls controlsList="nodownload">
<source src="http://www.ffextreme.com/media/ff9/music/mp3/cd4/23.mp3" type="audio/mpeg">
</audio>

<h3>Stats</h3>
<p>
Name: Stat here
<br>
Gender: Stat here
<br>
Species: Stat here
<br>
Height: Stat here
<br>
Weight: Stat here
<br>
Orientation: Stat here
</p>

<h3>About</h3>
<p>
Paragraph one.
</p>
<p>
Paragraph two.
</p>
<a href="" target="_blank">Link</a>

<h3>OOC</h3>
<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>

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