<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<body onload="startTime()">
<div class="container">
	<div class="volumeUp"></div>
	<div class="volumeDown"></div>
<div class="phoneShell" >
<div class="screen" >
		<i id="battery" class="fas fa-battery-three-quarters"></i>
		<p id="time"></p>
		<div class="text">
    <i style="font-size: 3em; color: #2163ff; padding-bottom: 30px;" class="fas fa-code"></i>
    <p>This template was made by<br>
    <a href="https://www.linkedin.com/in/straleb/" target="_blank">Strahinja Babic</a><br>
    and its free for use</p>
    </div>
    <i  id="fingerprint" class="fas fa-fingerprint"></i>
	<div class="buttons">
		<i class="fas fa-chevron-left"></i>
		<i class="far fa-circle"></i>
		<i class="fas fa-home"></i>
      </div>
	</div>	
	</div>
</div>
</body>
@import url('https://fonts.googleapis.com/css?family=Work+Sans&display=swap');
/*font-family: 'Work Sans', sans-serif;*/

*{
	padding: 0;
	margin: 0;
}

.container{
	margin: 0 auto;
	width: 20em;
}

.phoneShell{
	height: 34em;
	width: 19em;
	border: 1px solid rgb(174, 176, 178);
	box-shadow: inset 1px 1px 12px 1px rgb(174, 176, 178, 0.3);
	border-radius: 15px;
	margin: 2em auto;
}

.screen{
height: 33.12em;
width: 18em;
border: 1px solid rgb(224, 224, 224);
margin: 0.3em auto;
border-radius: 9px;
overflow: hidden;
}

#battery{
	margin: 3px 4px;
	font-size: 1.4rem;
	color:#6d6d6d;
}

#time{
	float: right;
	margin: 3px 5px;
	font-family: 'Work Sans', sans-serif;
}

.text{
	margin: 10em 1em;
	width: 90%;
	text-align: center;
	font-family: 'Work Sans', sans-serif;
}

.buttons{
	margin: 11.3em 0em;
	background: rgba(0,0,0,0.1);
	height: 1.7em;
	overflow: hidden;
	width: 100%;
	text-align: center;
	letter-spacing: 1.3em;
	
}

.buttons i{
	padding-top: 5px;
	color: #8c8c8c;
	margin-left: 17px;
}

.volumeUp{
	height: 4.3em;
	width: 0.2rem;
	background: white;
	border: 1px solid rgba(170, 170, 170,0.8);
    margin: 4em 0.15em;
    position: absolute; 
    border-right-color: transparent; 
    box-shadow: inset 1px 1px 22px 1px rgba(0,0,0,0.1); 
}

.volumeDown{
	height: 4.3em;
	width: 0.2rem;
	background: white;
	border: 1px solid rgba(170, 170, 170,0.8);
    margin: 10em 0.15em;
    position: absolute; 
    border-right-color: transparent; 
    box-shadow: inset 1px 1px 22px 1px rgba(0,0,0,0.1);  
}

a{
	color: #2163ff;
	text-decoration:none;
	font-weight: bold;
}


#fingerprint{
color: #2163ff;
font-size: 2rem;
margin:-2em 3.4em; 
float: left;
border-radius: 10em;
border: 1.5px solid blue;
padding: 1rem 1rem;
}

#fingerprint:active{
	background: #2163ff;
	color: white;
}
//setting up time in the task bar

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();

    m = checkTime(m);

    document.getElementById('time').innerHTML =
    h + ":" + m;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.