CC#30 Smartphone

CC#30HTC: Smartphone

CSS

/* Last Update: 02/24/18 */

/* PAGE BACKGROUND AND FONT */
body {
background-image:url(BACKGROUND IMAGE URL HERE);
background-attachment:fixed;
background-size:100% 100%;
background-repeat:no-repeat;
background-color:#444444;
font-family:serif;
text-align:center;
}

/* MAIN DISPLAY COLORS */
.color {
background:linear-gradient(160deg,#aaaaaa,#000000 7.5%);
background:-o-linear-gradient(160deg,#aaaaaa,#000000 7.5%);
background:-moz-linear-gradient(160deg,#aaaaaa,#000000 7.5%);
background:-webkit-linear-gradient(-70deg,#aaaaaa,#000000 7.5%);
background-color:#000000;
border:2px solid #c0c0c0;
box-shadow:2px 3px 0px 4px #000000,
	12px 8px 10px 2px #222222;
color:#000000;
}
.color2 {
background-color:#111111;
border:1px solid #c0c0c0;
}
#menu {
background-color:rgba(100,100,100,0.8);
}
.tab {
background-color:rgba(200,200,200,0.9);
}
a {
color:#ffffff;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#dddddd;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#888888;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#888888;
}

/* CSS MEAT */
#smartphone {
position:fixed;
top:5%;
left:37.5%;
height:90%;
width:25%;
border-radius:35px;
overflow:hidden;
}
.decoration, .icon img {
display:inline-block;
position:absolute;
left:50%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.decoration {
border-radius:50%;
overflow:hidden;
}
#camera {
top:1%;
height:1vh;
width:1vh;
}
#speaker {
top:5%;
height:1.5vh;
width:14vh;
}
#button {
top:91%;
height:6.5vh;
width:6.5vh;
}
#square {
display:inline-block;
position:absolute;
top:50%;
left:50%;
height:3.5vh;
width:3.5vh;
border-radius:5px;
border:2px solid #ffffff;
transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(50%);
-moz-transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
}
#phone-background {
z-index:1;
position:absolute;
top:10%;
height:80%;
width:100%;
background-image:url('IMAGE URL HERE');
background-size:auto 100%;
background-position:center;
}
#menu {
z-index:2;
position:absolute;
bottom:0%;
height:auto;
left:0%;
right:0%;
padding:0.5vw 0vw;
}
.icon {
z-index:1;
display:inline-block;
position:relative;
height:4vw;
width:4vw;
border-radius:10px;
overflow:hidden;
vertical-align:top;
}
.icon img {
height:100%;
border-radius:10px;
}
.tab {
z-index:1;
position:absolute;
top:95%;
bottom:5vw;
left:50%;
right:50%;
padding:4%;
overflow:hidden;
opacity:0;
transition:0.8s;
-o-transition:0.8s;
-moz-transition:0.8s;
-webkit-transition:0.8s;
}
.tab:target {
z-index:3;
top:0%;
bottom:5vw;
left:0%;
right:0%;
overflow-y:auto;
opacity:1;
}
.tab img {
max-width:100%;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div class="color" id="smartphone">

<div class="color2 decoration" id="camera"></div>
<br/>
<div class="color2 decoration" id="speaker"></div>
<br/>
<a href="#00" class="color2 decoration" id="button"><div id="square"></div></a>


<div id="phone-background">

<div class="tab" id="01">
<h2>Stats</h2>
<p style="text-align:center;">
<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">
<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="tab" id="03">
<h2>Extras</h2>
</div>

<div class="tab" 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 class="tab" id="05">
<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 id="menu">
<a href="#01" class="icon"><img src="ICON IMAGE ONE" alt=""/></a>
<a href="#02" class="icon"><img src="ICON IMAGE TWO" alt=""/></a>
<a href="#03" class="icon"><img src="ICON IMAGE THREE" alt=""/></a>
<a href="#04" class="icon"><img src="ICON IMAGE FOUR" alt=""/></a>
<a href="#05" class="icon"><img src="ICON IMAGE FIVE" alt=""/></a>
</div>
</div>

</div>

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