CC#47 Tiles

CC#47HTC: Tiles +

CSS

/* Last Update: 03/15/19 */

/* PAGE BACKGROUND AND FONT */
body {
background:#444 url("") no-repeat fixed;
background-size:cover;
font-family:serif;
}

/* MAIN DISPLAY COLORS */
.color, .left, .center, .right {
background-color:rgba(0,0,0,0.85);
color:#0f0;
text-shadow:0 0 4px #556b2f,
	0 0 4px #556b2f;
}
#banner::after {
border-left:18vmin solid rgba(0,0,0,0.85);
}
tr:nth-child(8) td:nth-child(n+7):nth-child(-n+9),
tr:nth-child(2n+7):nth-child(-n+10) td:nth-child(n+6):nth-child(-n+10),
tr:nth-child(4n+6):nth-child(-n+10) td:nth-child(n+5):nth-child(-n+7),
tr:nth-child(4n+6):nth-child(-n+10) td:nth-child(n+9):nth-child(-n+11),
tr:nth-child(6n+5) td:nth-child(n+4):nth-child(-n+6),
tr:nth-child(6n+5) td:nth-child(n+10):nth-child(-n+12),
tr:nth-child(8n+4) td:nth-child(n+3):nth-child(-n+5),
tr:nth-child(8n+4) td:nth-child(n+11):nth-child(-n+13),
tr:nth-child(10n+3) td:nth-child(n+2):nth-child(-n+4),
tr:nth-child(10n+3) td:nth-child(n+12):nth-child(-n+14),
tr:nth-child(12n+2) td:nth-child(n+1):nth-child(-n+3),
tr:nth-child(12n+2) td:nth-child(n+13):nth-child(-n+15) {
background-color:#0f0;
}
td a {
background-color:#000;
}
td:hover a {
background-color:#444;
}
a {
color:#ccc;
text-shadow:0 0 4px #ccc;
}
a:hover {
color:#000;
text-shadow:0 0 1px #0f0,
	0 0 4px #0f0;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
}
::-webkit-scrollbar-thumb {
background-color:#0f0;
box-shadow:0 0 5px #0f0;
}

/* CSS MEAT */
#banner {
z-index:1;
position:fixed;
top:64%;
left:0;
height:36vh;
width:74vw;
margin:-18vh 0;
}
#banner::after {
content:"";
z-index:1;
position:absolute;
top:0;
left:100%;
height:0;
border-top:18vh solid transparent;
border-bottom:18vh solid transparent;
}
#mugshot {
z-index:2;
position:fixed;
top:5%;
left:0;
height:95%;
}
.infobox {
z-index:3;
position:absolute;
top:5%;
bottom:5%;
left:44%;
width:86%;
opacity:0;
overflow:hidden;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.infobox:target {
z-index:4;
left:7%;
opacity:0.9;
}
.left, .center, .right {
position:absolute;
top:0;
bottom:0;
padding:2%;
overflow-y:auto;
}
.left {
left:0;
right:78%;
text-align:left;
}
.center {
left:24%;
right:24%;
text-align:center;
}
.right {
left:78%;
right:0;
text-align:right;
}
.image {
overflow:hidden;
}
.image img {
position:absolute;
top:0;
left:50%;
height:120%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
img {
height:100%;
}
#mosaic {
z-index:5;
position:fixed;
top:64%;
right:1%;
margin:-12.5vw 0;
height:25vw;
width:25vw;
}
td a {
display:block;
height:100%;
}
#credit {
z-index:6;
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#fff;
border-radius:5px;
}

HTML

<div class="color" id="banner">
<img src="MAIN IMAGE URL HERE" alt="" id="mugshot"/>

<div class="infobox" id="01">
<div class="left">
<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="center image">
<img src="IMAGE URL HERE" alt=""/>
</div>
<div class="right">
<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>

<div class="infobox" id="02">
<div class="left image">
<img src="IMAGE URL HERE" alt=""/>
</div>
<div class="center">
<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="right image">
<img src="IMAGE URL HERE" alt=""/>
</div>
</div>

<div class="infobox" id="03">
<div class="left image">
<img src="IMAGE URL HERE" alt=""/>
</div>
<div class="center">
<h2>Friends</h2>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
<div class="right image">
<img src="IMAGE URL HERE" alt=""/>
</div>
</div>

</div>

<table cellspacing="2vmin" id="mosaic">
<tr></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><a href="#01"></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#02"></a></td>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><a href="#03"></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#"></a></td>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr></tr>
</table>

<a href="https://tinyurl.com/midoriya" target="_blank" title="CC#47">
<img src="https://i.imgur.com/7XPiOlr.png" id="credit"/>
</a>

CC#47HTC: Tiles +

CSS

HTML

Alternates

Heart Tiles