<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/berdejitendra/pen/KBxkH?limit=all&page=27&q=mobile" />
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<style class="cp-pen-styles"> body{
background:#733c76;
font-family:verdana;
}
#mobilescreen {
position:relative;
width:320px;
height:568px;
-webkit-box-shadow:0px 2px 5px #000;
margin: 0 auto;
background: #f953a5; /* Old browsers */
background: -moz-linear-gradient(45deg, #f953a5 1%, #f98650 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(1%,#f953a5), color-stop(100%,#f98650)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #f953a5 1%,#f98650 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #f953a5 1%,#f98650 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #f953a5 1%,#f98650 100%); /* IE10+ */
background: linear-gradient(45deg, #f953a5 1%,#f98650 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f953a5', endColorstr='#f98650',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
ul {margin:0px;padding:0px;position:absolute;bottom:0;}
li{list-style-type:none;clear:both;overflow:auto;margin-bottom:1px;}
li i{position:relative;top:15px;-webkit-transition:1s ease;-moz-transition:1s ease;transition:1s ease;}
a{text-decoration:none;font-size:1.2em;color:#fff;display:block;padding:18px 0px 19px 30px;float:left;width:230px;-webkit-transition:1s ease;-moz-transition:1s ease;transition:1s ease;}
.icons{display:block;float:left;width:60px;height:60px;text-align:center;font-size:1.5em;color:#fff;-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2);}
ul li:nth-child(1) .icons{background:#fcb50b;}
ul li:nth-child(2) .icons{background:#ee32ff;}
ul li:nth-child(3) .icons{background:#3fca39;}
ul li:nth-child(4) .icons{background:#00aeff;}
ul li:nth-child(5) .icons{background:#ff5819;}
ul li a{background:rgba(255,255,255,0.2);}
ul li:hover a{background:rgba(255,255,255,0.1);-webkit-transition:1s ease;-moz-transition:1s ease;transition:1s ease;}
ul li:hover i{opacity:0.5;-webkit-transition:1s ease;-moz-transition:1s ease;transition:1s ease;}
ul li:last-child{margin-bottom:0px;}
header{font-size:0.8em;color:#fff;padding:2px 5px;}
#time{margin-left:85px;}
#username{font-size:1.8em;color:#fff;text-align:center;padding:15px 0px;font-family:verdana;text-shadow: 0px 2px 5px #a93732;}
#pro-image{text-align:center;padding-top:30px;}
.proimage{border-radius:100%;border:5px solid rgba(255,255,255,0.3);width:110px;-webkit-animation:light ease-in-out 5s infinite;-moz-animation:light ease-in-out 5s infinite;animation:light ease-in-out 5s infinite;}
@-webkit-keyframes light
{
0%{-webkit-box-shadow:0px 0px 10px #c44e49;-moz-box-shadow:0px 0px 10px #c44e49;box-shadow:0px 0px 10px #c44e49;}
50%{-webkit-box-shadow:0px 0px 20px #a93732;-moz-box-shadow:0px 0px 20px #a93732;box-shadow:0px 0px 20px #a93732;}
100%{-webkit-box-shadow:0px 0px 10px #c44e49;-moz-box-shadow:0px 0px 10px #c44e49;box-shadow:0px 0px 10px #c44e49;}
}
@-moz-keyframes light
{
0%{-webkit-box-shadow:0px 0px 10px #c44e49;-moz-box-shadow:0px 0px 10px #c44e49;box-shadow:0px 0px 10px #c44e49;}
50%{-webkit-box-shadow:0px 0px 20px #a93732;-moz-box-shadow:0px 0px 20px #a93732;box-shadow:0px 0px 20px #a93732;}
100%{-webkit-box-shadow:0px 0px 10px #c44e49;-moz-box-shadow:0px 0px 10px #c44e49;box-shadow:0px 0px 10px #c44e49;}
}
@keyframes light
{
0%{-webkit-box-shadow:0px 0px 10px #c44e49;-moz-box-shadow:0px 0px 10px #c44e49;box-shadow:0px 0px 10px #c44e49;}
50%{-webkit-box-shadow:0px 0px 20px #a93732;-moz-box-shadow:0px 0px 20px #a93732;box-shadow:0px 0px 20px #a93732;}
100%{-webkit-box-shadow:0px 0px 10px #c44e49;-moz-box-shadow:0px 0px 10px #c44e49;box-shadow:0px 0px 10px #c44e49;}
}</style></head><body>
<div id="mobilescreen">
<header>BELL <i class="fa fa-bars"></i> <span id="time">4:21 PM</span></header>
<div id="pro-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42073/profile/profile-512_1.jpg" class="proimage"></div>
<div id="username">Jitendra Berde</div>
<ul>
<li><div class="icons"><i class="fa fa-camera"></i></div><a href="#">Take a Photo</a></li>
<li><div class="icons"><i class="fa fa-users"></i></div><a href="#">Select from Gallary</a></li>
<li><div class="icons"><i class="fa fa-clock-o"></i></div><a href="#">History</a></li>
<li><div class="icons"><i class="fa fa-calendar"></i></div><a href="#">Events</a></li>
<li><div class="icons"><i class="fa fa-gear"></i></div><a href="#">Setting</a></li>
</ul>
</div>
</body></html>
