CC#50 Tatsumaki Mock-Up

CC#50HTC: Tatsumaki Mock-Up

CSS

/* Last Update: 09/24/19 */

/* PAGE BACKGROUND AND FONTS */
body {
background:#111 url('') center / cover fixed;
font-family:sans-serif;
}
#profile::before, #profile::after {
background:#222 url('https://wallpaperaccess.com/full/691261.jpg') center / cover;
}

/* MAIN DISPLAY COLORS */
#profile, #title,
.f-id, .f-id p {
background-color:#222;
color:#ddd;
}
#mugshot, .f-id img {
border:3px solid #ddd;
box-shadow:1px 1px 2px #000;
}
#badges {
background:repeating-linear-gradient(to bottom right,#7b8790 ,#8c979e 3px,#8c979e 8px);
background:-o-repeating-linear-gradient(top left,#7b8790 ,#8c979e 3px 8px);
background:-moz-repeating-linear-gradient(top left,#7b8790 ,#8c979e 3px 8px);
background:-webkit-repeating-linear-gradient(top left,#7b8790 ,#8c979e 3px 8px);
}
#f-label {
background-color:#5e70b0;
}
#infobox, #friends {
background-color:#ddd;
color:#666;
}
#infobox h3 {
border-bottom:3px solid #aaa;
}
a {
color:#5e70b0;
font-weight:bold;
}
a:hover {
color:#222;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
height:6px;
width:6px;
background-color:#fff;
}
::-webkit-scrollbar-thumb {
background-color:#aaa;
}

/* CSS MEAT */
#profile {
position:fixed;
top:50%;
left:50%;
margin:-35vh;
height:70vh;
width:70vh;
border-radius:2px;
overflow:hidden;
}
#profile::before, #profile::after {
content:"";
display:block;
width:100%;
}
#profile::before {
height:34%;
}
#profile::after {
height:66%;
filter:blur(20px);
-webkit-filter:blur(20px);
}
.base, #f-label,
#navbar, #friends {
z-index:1;
position:absolute;
left:0;
right:0;
}
.base {
margin:0 1vh;
overflow:hidden;
}
#title {
display:block;
top:34%;
height:12%;
}
#title h2, #title h3 {
position:relative;
margin:0 0 0 40%;
}
#mugshot {
z-index:2;
position:absolute;
left:4.5%;
bottom:53%;
width:28%;
margin:-3px;
}
#badges, #infobox {
top:46%;
bottom:1vh;
}
#badges {
right:64%;
margin-right:0;
}
input {
display:none;
}
#f-label {
top:0;
padding:5.4% 2% 2%;
font-size:4vh;
line-height:4vh;
text-align:center;
font-weight:bold;
cursor:pointer;
}
#navbar, #friends {
top:15.5%;
bottom:0;
}
.row, #navbar a {
width:7vh;
}
.row {
float:left;
height:100%;
margin:0 2.2%;
}
#navbar a {
display:block;
position:relative;
height:7vh;
margin:7.5% 0;
border-radius:50%;
overflow:hidden;
}
#navbar a img {
position:absolute;
top:0;
left:50%;
height:100%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
#friends {
padding:4%;
overflow-y:auto;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
input:checked + #friends {
top:100%;
}
#infobox {
left:36%;
padding:2%;
margin-left:0;
}
.tab {
display:block;
height:100%;
width:100%;
overflow-y:auto;
}
.f-id {
display:block;
position:relative;
height:70px;
font-size:12px;
margin:5px;
padding:3px;
}
.f-id img {
height:100%;
margin:-3px;
}
.f-id p {
position:absolute;
top:25%;
right:0;
max-height:70%;
padding:2px 10px;
overflow:hidden;
}
h2 {
font-size:4vh;
}
h3 {
font-size:2.8vh;
margin:0 2.5%;
padding-bottom:1%;
}
#infobox img {
width:100%;
}
#title h3, #infobox p {
text-indent:5%;
}

/* MOBILE COMPATIBILITY */
@media only screen and (orientation:portrait) {
	#profile {
	height:90vw;
	width:90vw;
	margin:-45vw;
	}
	.base {
	margin:0 1vw;
	}
	#badges, #infobox {
	bottom:1vw;
	}
	.row, #navbar a {
	width:9vw;
	}
	#navbar a {
	height:9vw;
	}
	h2 {
	font-size:5vw;
	}
	h3 {
	font-size:3.8vw;
	}
	#f-label {
	font-size:5vw;
	line-height:5vw;
	}
}
#credit {
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<div id="profile">

<div class="base" id="title">
<h2>Name Here</h2>
<h3>- Title of some sort</h3>
</div>

<img src="MAIN IMAGE URL HERE" alt="" id="mugshot"/>

<div class="base" id="badges">
<label for="f" id="f-label">Friends</label>

<div id="navbar">
<!-- You an have up to 12 links, 4 per row! -->

<div class="row">
</div>

<div class="row">
<a target="_self" href="#01"><img src="https://dl.dropbox.com/s/c7t6utypa9s2iju/soul.png"/></a>
<a target="_self" href="#02"><img src="https://dl.dropbox.com/s/xbz3z3h5rdvdeer/water.png"/></a>
<a target="_self" href="#03"><img src="https://dl.dropbox.com/s/6s4kyhb2qlvn798/sound.png"/></a>
<a target="_self" href="#04"><img src="https://dl.dropbox.com/s/j3m0ufbu0atzan7/flame.png"/></a>
</div>

<div class="row">
</div>
</div>

<input name="toggle" type="checkbox" checked="checked" id="f"/>
<div id="friends">
<a href="LINK" target="_blank" class="f-id">
<img src="https://www.storytellerscircle.com/proxy.php?image=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fab%2F51%2F62%2Fab5162a8b22da46c5e486c85d3ca7ceb.jpg&hash=e092a749b76185b408e7e72c62808e46"/>
<p>Name</p>
</a>

<a href="LINK" target="_blank" class="f-id">
<img src="https://www.storytellerscircle.com/proxy.php?image=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fab%2F51%2F62%2Fab5162a8b22da46c5e486c85d3ca7ceb.jpg&hash=e092a749b76185b408e7e72c62808e46"/>
<p>Name</p>
</a>
</div>

</div>


<div class="base" id="infobox">
<div class="tab" style="overflow:hidden;">

<div class="tab" id="01">
<h3>Stats</h3>
<p style="text-indent:0;">
<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="tab" id="02">
<h3>History</h3>
<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="tab" id="03">
<h3>Personality</h3>
<p>Paragraph.</p>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
<ul>
<li>Or</li>
<li>Bullets.</li>
</ul>
</div>

<div class="tab" id="04">
<h3>OOC</h3>
<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>

</div>
</div>

<a href="http://bitly.com/2vJNCgN" target="_blank" title="CC#50">
<img src="https://dl.dropboxusercontent.com/s/wdgda69ofyw8f2m/mirza_small.png" id="credit"/>
</a>

CC#50HTC: Tatsumaki Mock-Up

CSS

HTML

Alternates