"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: