CC#58 Rolling Hills

CC#58HTS: Rolling Hills

CSS

/* Last Update: 8/31/20 */

/* PAGE BACKGROUND AND FONT */
body {
background:#00bfff fixed;
font-family:Laila,cursive;
}
body, .circle, #c3::before {
background-image:url("https://dl.dropbox.com/s/3vgqq4b3qtwjp6w/black-linen.png");
}


/* MAIN DISPLAY COLORS */
body::before {
background-image:linear-gradient(to bottom,rgba(255,255,255,0.6),transparent);
background-image:-o-linear-gradient(top,rgba(255,255,255,0.6),transparent);
background-image:-moz-linear-gradient(top,rgba(255,255,255,0.6),transparent);
background-image:-webkit-linear-gradient(top,rgba(255,255,255,0.6),transparent);
}
.circle, .f {
box-shadow:0 0 10px #000;
color:#fff;
text-shadow:0 0 5px #000;
}
#c1 {
background-color:#2F8203;
}
#c2 {
background-color:#2B7502;
}
#c3 {
background-color:#215C02;
}
#c4, #c5 {
background-color:#133601;
}
.f:hover {
box-shadow:0 0 10px #ff9;
}
a {
color:#ff9;
}
a:hover {
color:#ddd;
}

/* CHROMIUM SCROLLBARS */
::-webkit-scrollbar,
::-webkit-scrollbar-thumb {
border-radius:4px;
box-shadow:0 0 4px #000;
}
::-webkit-scrollbar {
width:8px;
height:8px;
background:#C8FF9C;
}
::-webkit-scrollbar-thumb {
background:#133601;
}

/* CSS MEAT */
body::before, #c3::before {
z-index:1;
content:"";
top:0;
height:100%;
width:100%;
}
body::before {
position:fixed;
left:0;
}
.circle {
z-index:2;
position:fixed;
border-radius:50%;
overflow:hidden;
transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
#c1, #c4, #c5 {
text-align:center;
}
#c1 {
top:104vh;
left:26vw;
height:134vh;
width:60vw;
max-height:150vw;
}
#c2 {
top:90vh;
left:72vw;
height:40vh;
width:64vw;
}
#c3 {
top:70vh;
left:58vw;
height:120vh;
max-height:90vw;
}
#c4, #c5 {
height:82vh;
width:40vw;
max-height:70vw;
}
#c4 {
top:60vh;
left:37vw;
}
#c5 {
top:83vh;
left:76vw;
}
label, label big {
cursor:pointer;
}
label:hover {
box-shadow:0 0 30px #fff;
}
input {
display:none;
}

.infobox, label big, #c3::before {
position:absolute;
}
.infobox {
z-index:1;
padding:0 10px;
overflow-y:auto;
opacity:0;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
#set1:checked ~ .circle .s1,
#set2:checked ~ .circle .s2 {
z-index:2;
opacity:1;
}
#c1 .infobox {
top:10%;
left:20%;
right:20%;
height:37%;
}
#c2 .infobox {
top:15%;
left:25%;
right:15%;
height:60%;
}
#c3 img {
height:80%;
}
#c3::before {
right:0;
border-radius:50%;
opacity:0.5;
}
label big {
height:4.5vh;
width:50%;
font-size:4.5vh;
line-height:4.5vh;
}
#c4 big {
top:1.5%;
left:37.5%;
transform:rotate(-17deg) translateX(-50%);
-o-transform:rotate(-17deg) translateX(-50%);
-moz-transform:rotate(-17deg) translateX(-50%);
-webkit-transform:rotate(-17deg) translateX(-50%);
}
#c5 big {
top:1%;
right:15%;
transform:rotate(44deg) translateX(50%);
-o-transform:rotate(44deg) translateX(50%);
-moz-transform:rotate(44deg) translateX(50%);
-webkit-transform:rotate(44deg) translateX(50%);
}
.infobox > img {
width:90%;
margin:5%;
}
.f {
display:inline-block;
position:relative;
border-radius:50%;
overflow:hidden;
}
.f img {
position:relative;
height:60px;
}

#credit {
z-index:3;
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<link href="https://fonts.googleapis.com/css2?family=Laila" rel="stylesheet">

<input type="radio" name="selection" checked="checked" id="set1"/>
<input type="radio" name="selection" id="set2"/>

<label for="set2" class="circle" id="c5">
<big>Set 2</big>
</label>
<label for="set1" class="circle" id="c4">
<big>Set 1</big>
</label>


<div class="circle" id="c3">
<img src="https://i.redd.it/q8vgbh8ufto11.jpg" alt=""/>
</div>


<div class="circle" id="c2">
<div class="infobox s1">
<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 s2">
<h2>Friends</h2>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank" class="f"><img src="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg"/></a>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank" class="f"><img src="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg"/></a>

<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>


<div class="circle" id="c1">
<div class="infobox s1">
<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 s2">
<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>
</div>

<a href="http://wix.mirza-works.com/" target="_blank" title="CC#58">
<img src="https://dl.dropboxusercontent.com/s/ejl9p0453mp0awk/tag.png" id="credit"/>
</a>