CC#06 Scales

CC#06ATC: Scales +

CSS

/* Last Update: 03/09/19 */

/* PAGE BACKGROUND AND FONT */
body, .c, .color::before, .color::after {
background:#8d0c4c url('https://dl.dropboxusercontent.com/s/w4ssgo1z8qw3sx2/buried.png') fixed;
font-family:'Milonga',serif;
font-size:15px;
}
h2 {
font-family:'Macondo Swash Caps';
}

/* MAIN DISPLAY COLORS */
.color {
background-color:#bf70bf;
background:url('https://dl.dropboxusercontent.com/s/3heiaxm7tq7gzk9/black-scales.png'), radial-gradient(#bf70bf,transparent);
background:url('https://dl.dropboxusercontent.com/s/3heiaxm7tq7gzk9/black-scales.png'), -o-radial-gradient(#bf70bf,transparent);
background:url('https://dl.dropboxusercontent.com/s/3heiaxm7tq7gzk9/black-scales.png'), -moz-radial-gradient(#bf70bf,transparent);
background:url('https://dl.dropboxusercontent.com/s/3heiaxm7tq7gzk9/black-scales.png'), -webkit-radial-gradient(#bf70bf,transparent);
border-color:rgba(88,0,88,0.6) rgba(17,0,17,0.6) rgba(17,0,17,0.6) rgba(88,0,88,0.6);
color:#250025;
}
.color::before {
border-bottom:5px solid rgba(88,0,88,0.6);
border-right:5px solid rgba(88,0,88,0.6);
border-radius:0 50% 50%;
}
.color::after {
border-top:5px solid rgba(17,0,17,0.6);
border-left:5px solid rgba(17,0,17,0.6);
border-radius:50% 50% 0;
}
.t.r {
border-left:5px solid rgba(88,0,88,0.6);
box-shadow:0 -5px 0 inset rgba(17,0,17,0.6);
border-radius:50% 0 50% 50%;
}
.b.l {
border-top:5px solid rgba(88,0,88,0.6);
box-shadow:-5px 0 0 inset rgba(17,0,17,0.6);
border-radius:50% 50% 50% 0;
}
#navbar a, h2 {
border:4px inset #580058;
background-color:#580058;
}
#navbar a {
background:url('https://dl.dropboxusercontent.com/s/w4ssgo1z8qw3sx2/buried.png');
}
#navbar a:hover {
background-color:#7a007a;
}
h2 {
background:url('https://dl.dropboxusercontent.com/s/w4ssgo1z8qw3sx2/buried.png'),linear-gradient(to right,#580058,#250025,#580058);
background:url('https://dl.dropboxusercontent.com/s/w4ssgo1z8qw3sx2/buried.png'),-o-linear-gradient(to right,#580058,#250025,#580058);
background:url('https://dl.dropboxusercontent.com/s/w4ssgo1z8qw3sx2/buried.png'),-moz-linear-gradient(to right,#580058,#250025,#580058);
background:url('https://dl.dropboxusercontent.com/s/w4ssgo1z8qw3sx2/buried.png'),-webkit-linear-gradient(to right,#580058,#250025,#580058);
}
h2, b, a:hover {
color:#e8d3e8;
}
a {
text-decoration:none;
color:#ffc200;
}
i {
color:#2ba;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:rgba(255,255,255,0.4);
}
::-webkit-scrollbar-thumb {
width:0;
height:0;
border:4px outset rgba(88,0,88,0.8);
}

/* CORNER CUTS */
.c, .color::before, .color::after {
content:"";
z-index:10;
position:absolute;
height:3vw;
width:4vw;
margin:-4px;
}
.t, .color::before {
top:0;
}
.b, .color::after {
bottom:0;
}
.l, .color::before {
left:0;
text-align:right;
}
.r, .color::after {
right:0;
}

/* OUTER CSS MEAT */
#mug1, #mug2, #infobox, #obox {
position:fixed;
border-width:4px;
border-style:solid;
border-radius:2px;
}
#mug1, #mug2 {
width:26.5%;
bottom:4%;
line-height:0;
}
#mug1, #obox {
top:4%;
}
#mug1 {
left:2%;
}
#mug2 {
height:50%;
right:2%;
}
#infobox, #obox {
padding:1%;
}
#infobox {
top:7.5%;
bottom:7.5%;
left:31%;
right:31%;
}
#obox {
height:32%;
width:20%;
right:4%;
}

/* INNER CSS MEAT */
.cut, #mug2 img, #navbar, #info, .tab {
position:relative;
width:100%;
}
.cut, .tab, #mug1 img {
height:100%;
}
.cut, #info, .half {
overflow:hidden;
}
#mug1 img {
position:relative;
left:50%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
#mug2 img {
top:50%;
width:100%;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
#navbar {
height:17%;
font-size:2.5vh;
text-align:center;
}
#navbar a {
display:inline-block;
padding:1%;
margin:0.5vh 0.25vw;
}
#info {
height:80%;
}
.tab {
overflow-y:auto;
}
.half {
position:absolute;
width:49.5%;
line-height:20px;
}
#inner {
position:relative;
top:8%;
height:84%;
overflow-y:auto;
}
#obox h2 {
margin:0;
}
.tab img {
max-width:100%;
}
h2 {
display:block;
padding:2px 0;
text-align:center;
}
b {
text-shadow:none;
font-size:102%;
}
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=Milonga|Macondo+Swash+Caps" rel="stylesheet">

<div class="color" id="mug1">
<div class="c t r"></div>
<div class="c b l"></div>
<div class="cut">
<img src="IMAGE URL ONE" alt=""/>
</div>
</div>

<div class="color" id="mug2">
<div class="c t r"></div>
<div class="c b l"></div>
<div class="cut">
<img src="IMAGE URL TWO" alt=""/>
</div>
</div>

<div class="color" id="infobox">
<div class="c t r"></div>
<div class="c b l"></div>
<div id="navbar">
<a href="#01">Stats</a>
<a href="#02">Background</a>
<a href="#03">Personality</a>
<a href="#04">Extras</a>
</div>

<div id="info">
<div class="tab" id="01">
<h2>Stats</h2>
<div class="half l">
<b>Name:
<br/>Gender:
<br/>Species:
<br/>Age:
<br/>Height:
<br/>Weight:
<br/>Hair:
<br/>Eyes:
<br/>Orientation:
</b>
</div>
<div class="half r">
Vitani
<br/>Stat here
<br/>Stat here
<br/>Stat here
<br/>Stat here
<br/>Stat here
<br/>Stat here
<br/>Stat here
<br/>Stat here
</div>
</div>

<div class="tab" id="02">
<h2>Information</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>
<p>
Paragraph Two
</p>
</div>

<div class="tab" id="03">
<h2>Personality</h2>
<b>Bolded text</b> <i>Italics</i> <a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
<p>
Paragraph One
</p>
</div>

<div class="tab" id="04">
<h2>Extras</h2>
<p>
Paragraph One
</p>
<p>
Paragraph Two
</p>
</div>

</div>
</div>

<div class="color" id="obox">
<div class="c t r"></div>
<div class="c b l"></div>
<div id="inner">
<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>

<a href="https://tinyurl.com/shimad" target="_blank" title="CC#06">
<img src="https://dl.dropboxusercontent.com/s/ejl9p0453mp0awk/tag.png" id="credit"/>
</a>

CC#06ATC: Scales +

CSS

HTML

Alternates

Mud Scales