CC#40 Pentacle

CC#40HTC: Pentacle ++

CSS

/* Last Update: 03/21/18 */

/* PAGE BACKGROUND AND FONT */
body {
background-image:url(BACKGROUND IMAGE URL);
background-attachment:fixed;
background-size:100% 100%;
background-color:#000000;
font-family:sans-serif;
font-size:95%;
}

/* MAIN DISPLAY COLORS */
.color {
background-color:#000000;
border:5px solid #ffffff;
color:#ffffff;
}
.point-up {
border-bottom:33.3vh solid #ffffff;
}
.point-down {
top:57.2vh;
border-top:33.3vh solid #ffffff;
}
.point-up:hover {
border-bottom:33.3vh solid #8d0000;
}
.point-down:hover {
border-top:33.3vh solid #8d0000;
}
.mini-circle {
background-color:#ffffff;
}
.mini-circle:hover {
background-color:#8d0000;
}
a {
text-decoration:none;
color:#8d0000;
font-weight:bold;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#000000;
border:1px solid #ffffff;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#ffffff;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#ffffff;
}

/* CSS MEAT */
#circle {
position:fixed;
top:1vh;
height:96vh;
width:96vh;
}
#circle, .mini-circle {
border-radius:50%;
overflow:hidden;
}
#circle, .mugbox img {
left:50%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.triangle {
z-index:3;
position:absolute;
border-left:11vh solid transparent;
border-right:11vh solid transparent;
}
.triangle, .mini-circle, .mugbox, .infobox {
transition:opacity 1s, border 1s, background-color 1s;
-o-transition:opacity 1s, border 1s, background-color 1s;
-moz-transition:opacity 1s, border 1s, background-color 1s;
-webkit-transition:opacity 1s, border 1s, background-color 1s;
}
#top {
top:0vh;
left:37vh;
}
#left {
top:21.8vh;
left:7vh;
transform:rotate(-71.6deg);
-o-transform:rotate(-71.6deg);
-moz-transform:rotate(-71.6deg);
-webkit-transform:rotate(-71.6deg);
}
#right {
top:21.8vh;
right:7vh;
transform:rotate(71.6deg);
-o-transform:rotate(71.6deg);
-moz-transform:rotate(71.6deg);
-webkit-transform:rotate(71.6deg);
}
#bleft {
left:18.4vh;
transform:rotate(35.8deg);
-o-transform:rotate(35.8deg);
-moz-transform:rotate(35.8deg);
-webkit-transform:rotate(35.8deg);
}
#bright {
right:18.4vh;
transform:rotate(-35.8deg);
-o-transform:rotate(-35.8deg);
-moz-transform:rotate(-35.8deg);
-webkit-transform:rotate(-35.8deg);
}
.mini-circle {
position:absolute;
height:9vh;
width:9vh;
}
.mugbox, .infobox {
z-index:1;
position:absolute;
top:33.3vh;
opacity:0;
}
.mugbox {
left:30.2vh;
height:33.3vh;
width:35.6vh;
overflow:hidden;
}
.infobox {
left:37vh;
height:26.5vh;
width:22vh;
text-align:center;
overflow-y:auto;
}
.infobox:target, .mugbox:target {
z-index:2;
opacity:1;
}
.mugbox img {
position:absolute;
height:100%;
}
.infobox img {
width:100%
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div class="color" id="circle">
<a href="#01" class="triangle point-up" id="top"></a>
<a href="#02" class="triangle point-up" id="left"></a>
<a href="#03" class="triangle point-up" id="right"></a>
<a href="#04" class="triangle point-down" id="bleft"></a>
<a href="#00" class="triangle point-down" id="bright"></a>

<a href="#i1" class="mini-circle" style="top:10.5vh;left:21.5vh;"></a>
<a href="#i2" class="mini-circle" style="top:10.5vh;right:21.5vh"></a>
<a href="#i3" class="mini-circle" style="top:54.5vh;left:7vh;"></a>
<a href="#i4" class="mini-circle" style="top:54.5vh;right:7vh;"></a>
<a href="#i5" class="mini-circle" style="top:83vh;left:43.5vh;"></a>

<div class="mugbox" id="i1">
<img src="IMAGE URL ONE" alt=""/>
</div>

<div class="mugbox" id="i2">
<img src="IMAGE URL TWO" alt=""/>
</div>

<div class="mugbox" id="i3">
<img src="IMAGE URL THREE" alt=""/>
</div>

<div class="mugbox" id="i4">
<img src="IMAGRE URL FOUR" alt=""/>
</div>

<div class="mugbox" id="i5">
<img src="IMAGE URL FIVE" alt=""/>
</div>

<div class="infobox" id="01">
<h2>Stats</h2>
<p>
<b>Name:</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
</p>
</div>

<div class="infobox" id="02">
<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 class="infobox" id="03">
<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="infobox" id="04">
<h2>Friends</h2>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>

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

CC#40HTC: Pentacle ++

CSS

HTML

Alternates

Reversed Pentacle