CC#09 Ice Kitten

CC#09MTC: Ice Kitten ++

CSS

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

/* PAGE BACKGROUND AND FONT */
body {
background:#f5f5f5 url('') fixed;
background-size:cover;
font-family:serif;
font-size:105%;
}

/* MAIN DISPLAY COLORS */
.color, .tab, #navbar a {
background-color:#368bc1;
color:#fff;
}
#musicbox, audio {
background-color:#f5f5f5;
}
#navbar a:hover, a {
color:#25495f;
}
b {
color:#a5f2f3;
font-size:105%;
}

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

/* CSS MEAT */
#infobox {
position:fixed;
top:2.5%;
right:3%;
height:95%;
width:49%;
border-radius:10%;
}
#navbar {
position:fixed;
left:43%;
top:20%;
height:60%;
width:20px;
font-weight:bold;
font-size:110%;
text-align:center;
}
#navbar a {
display:block;
width:100%;
padding:1%;
margin-bottom:20px;
border-radius:5px;
text-decoration:none;
}
.switch {
width:45%;
}
#mugshot {
position:fixed;
height:95%;
left:3%;
top:2.5%;
text-align:center;
}
#mugshot img {
border-radius:10%;
height:100%;
}
#out, #in {
transition:0.8s;
-o-transition:0.8s;
-moz-transition:0.8s;
-webkit-transition:0.8s;
}
.switch:hover #out, #in {
opacity:0;
}
.switch:hover #in, #out {
opacity:1;
}
#musicbox {
z-index:1;
position:absolute;
top:1%;
left:25%;
width:50%;
max-height:40px;
height:7%;
border-radius:50%;
overflow:hidden;
text-align:center;
}
#musicbox audio {
max-height:40px;
height:85%;
max-width:100%;
margin-top:1%;
}
.tab {
z-index:2;
position:absolute;
top:8%;
left:4%;
height:88%;
width:92%;
overflow-y:auto;
}
.tab:target {
z-index:4;
}
.tab img {
max-width:100%;
}
h3 {
text-align:center;
}
p {
text-indent:2%;
}

/* CREDIT TAG - set position:static; to move to OOC */
#credit {
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

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

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

<div id="navbar">
<a href="#01">
O
n
e
</a>
<a href="#02">
T
w
o
</a>
<a href="#03">
O
O
C
</a>
</div>

<div class="color" id="infobox">
<div id="musicbox">
<audio controls controlslist="nodownload">
<source src="http://k003.kiwi6.com/hotlink/kkvn3n9bwe/Chasing_Dream.mp3" type="audio/mpeg">
</audio>
</div>

<div class="tab" id="01" style="z-index:3;">
<h3>Full name</h3>
<br/>
<b>Nickname:</b> Stat here
<br/>
<b>Species:</b> Stat here
<br/>
<b>Gender:</b> Stat here
<br/>
<b>Age:</b> Stat here
<br/>
<b>Hair:</b> Stat here
<br/>
<b>Eyes:</b> Stat here
<br/>
<b>Height:</b> Stat here
<br/>
<b>Weight:</b> Stat here
<br/>
<b>Build:</b> Stat here
<br/>
<b>Orientation:</b> Stat here
<br/>
<b>Family:</b>
Father:
<br/>
Mother:
<br/>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>

<div class="tab" id="02">
<h3>Background</h3>
<p>
Paragraph one
</p>
<p>
Paragraph two
</p>

<h3>Abilities</h3>
+ Ability one-
<p>
Description
</p>
+ Ability two-
<p>
Description
</p>
+ Ability three-
<p>
Description
</p>
+ Ability four-
<p>
Description
</p>
<h3>Personality</h3>
<p>
Paragraph one
</p>
<p>
Paragraph two
</p>
</div>

<div class="tab" id="03">
<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>

<a href="http://bitly.com/2vJNCgN" target="_blank" title="CC#09">
<img src="https://dl.dropboxusercontent.com/s/wdgda69ofyw8f2m/mirza_small.png?dl=0" id="credit"/>
</a>
</ul>
</div>

</div>

CC#09MTC: Ice Kitten ++

CSS

HTML

Alternates

Ice Kitten Mirrored