CC#45 Floral

CC#45HNC: Floral

CSS

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

/* PAGE BACKGROUND AND FONT */
body {
background:#eee url('http://cdn26.us1.fansshare.com/photo/prettywallpapers/anime-flowers-pretty-flower-wallpapers-1776270778.jpg') fixed;
background-size:cover;
font-family:Oregano,sans-serif;
}
.title {
font-family:Sail,sans-serif;
letter-spacing:1px;
}

/* MAIN DISPLAY COLORS */
.color, .title, .info, body::before, body::after {
background-color:#eee;
box-shadow:0 0 5px rgba(0,0,0,0.6);
color:#333;
}
.title {
background:linear-gradient(to top right,#ccc,transparent);
background:-o-linear-gradient(to top right,#ccc,transparent);
background:-moz-linear-gradient(to top right,#ccc,transparent);
background:-webkit-linear-gradient(to top right,#ccc,transparent);
}
.info {
background:linear-gradient(to bottom right,#ccc,transparent);
background:-o-linear-gradient(to bottom right,#ccc,transparent);
background:-moz-linear-gradient(to bottom right,#ccc,transparent);
background:-webkit-linear-gradient(to bottom right,#ccc,transparent);
}
#dim {
background-color:#000;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:5px;
height:5px;
background-color:#ccc;
border-radius:5px;
}
::-webkit-scrollbar-thumb {
background-color:#333;
border-radius:5px;
}

/* CSS MEAT */
body::before, body::after, #reset {
position:fixed;
width:100vw;
left:0;
}
body::before, body::after {
z-index:2;
content:"";
height:26vh;
opacity:0.6;
}
body::before {
top:0;
border-radius:0 0 10px 10px;
}
body::after {
bottom:0;
border-radius:10px 10px 0 0;
}
input,
input:checked + .box label {
display:none;
}
label, #reset, #dim {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
opacity:0;
}
label, #reset {
cursor:pointer;
}
label {
z-index:7;
}
#reset {
z-index:1;
}
#dim {
z-index:0;
transition:opacity 1s;
-o-transition:opacity 1s;
-moz-transition:opacity 1s;
-webkit-transition:opacity 1s;
}
#reset:not(:checked) {
display:block;
position:fixed;
}
#reset:not(:checked) + #dim {
opacity:0.4;
}
.box, .mugshot {
width:11.2vw;
border-radius:5px;
}
.box {
z-index:4;
position:fixed;
height:24vh;
overflow:hidden;
opacity:0.85;
transition:width 1s, top 1s, left 1s;
-o-transition:width 1s, top 1s, left 1s;
-moz-transition:width 1s, top 1s, left 1s;
-webkit-transition:width 1s, top 1s, left 1s;
}
.t {
top:1vh;
}
.b {
top:75vh;
}
#one + .box,
#five + .box {
left:10.4vw;
}
#two + div,
#six + div {
left:32.8vw;
}
#three + div,
#seven + div {
left:55.2vw;
}
#four + div,
#eight + div {
left:77.6vw;
}
input:checked + div.box {
top:38vh;
left:35vw !important;
width:30vw;
}
.mugshot, .mugshot img {
position:absolute;
top:0;
height:100%;
}
.mugshot {
z-index:5;
left:0;
overflow:hidden;
}
.mugshot img {
left:50%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
filter:grayscale(60%);
-webkit-filter:grayscale(60%);
transition:filter 1s;
-o-transition:filter 1s;
-moz-transition:filter 1s;
-webkit-transition:filter 1s;
}
div:hover .mugshot img,
input:checked + div .mugshot img {
filter:grayscale(0);
-webkit-filter:grayscale(0);
}
.title, .info {
z-index:6;
position:absolute;
left:12.2vw;
width:14.8vw;
right:1vw;
padding:0.5vh 1vw;
border-radius:5px;
}
.title {
top:1vh;
margin:0;
font-size:2.8vh;
line-height:2.8vh;
font-weight:bold;
}
.info {
top:6.2vh;
height:15.4vh;
overflow-y:auto;
}
.info img {
max-height:100%;
}
p {
text-indent:5%;
}
#credit {
z-index:3;
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Oregano|Sail" rel="stylesheet">

<body>
<input name="select" type="radio" checked="checked" id="reset"/>
<div id="dim"></div>

<input name="select" type="radio" id="one"/>
<div class="t color box">
<label for="one"></label>
<div class="color mugshot">
<img src="IMAGE URL ONE" alt=""/>
</div>

<div class="title">Name</div>
<div class="info">
<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>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>


<input name="select" type="radio" id="two"/>
<div class="t color box">
<label for="two"></label>
<div class="color mugshot">
<img src="IMAGE URL TWO" alt=""/>
</div>

<div class="title">Stats</div>
<div class="info">
<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>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>


<input name="select" type="radio" id="three"/>
<div class="t color box">
<label for="three"></label>
<div class="color mugshot">
<img src="IMAGE URL THREE" alt=""/>
</div>

<div class="title">Title</div>
<div class="info">
<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>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>


<input name="select" type="radio" id="four"/>
<div class="t color box">
<label for="four"></label>
<div class="color mugshot">
<img src="IMAGE URL FOUR" alt=""/>
</div>

<div class="title">Whatever</div>
<div class="info">
<p>
Hello
</p>
</div>
</div>


<input name="select" type="radio" id="five"/>
<div class="b color box">
<label for="five"></label>
<div class="mugshot">
<img src="IMAGE URL FIVE" alt=""/>
</div>

<div class="title">Title</div>
<div class="info">
<p>
Hello
</p>
</div>
</div>


<input name="select" type="radio" id="six"/>
<div class="b color box">
<label for="six"></label>
<div class="color mugshot">
<img src="IMAGE URL SIX" alt=""/>
</div>

<div class="title">Title</div>
<div class="info">
<p>
Hello
</p>
</div>
</div>

<input name="select" type="radio" id="seven"/>
<div class="b color box">
<label for="seven"></label>
<div class="mugshot">
<img src="IMAGE URL SEVEN" alt=""/>
</div>

<div class="title">Title</div>
<div class="info">
<p>
Hello
</p>
</div>
</div>


<input name="select" type="radio" id="eight"/>
<div class="b color box">
<label for="eight"></label>
<div class="color mugshot">
<img src="IMAGE URL EIGHT" alt=""/>
</div>

<div class="title">Title</div>
<div class="info">
<p>
Hello
</p>
</div>
</div>

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