"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/linuxenko/pen/grezRG?limit=all&page=30&q=mobile" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'> <style class="cp-pen-styles">body, html, .application { height: 100%; font-family: Roboto; font-size: 12px; } * { margin: 0px; padding: 0px; box-sizing: border-box; } .application { background-color: #fff; display: flex; } .mobile-wrapper { display: flex; margin: auto; flex-direction: column; min-width: 300px; min-height: 480px; background: radial-gradient(#673ab7, #7446c4); box-shadow: 1px 1px 5px #444; } .mobile_nav { position: relative; height: 20px; line-height: 20px; width: 96%; margin: 0px auto; color: #fff; font-size: 12px; } .mobile_nav--dots { display: inline-block; } .mobile_nav--dots > span { display: block; float: left; background: #fff; width: 5px; height: 5px; border-radius: 100%; margin: 0px 1px; } .mobile_nav--left { width: 100%; position: absolute; left: 0px; top: 0px; } .mobile_nav--center { width: 100%; position: absolute; left: 0px; top: 0px; font-weight: bold; text-align: center; } .mobile_nav--right { width: 100%; position: absolute; left: 0px; top: 0px; text-align: right; } .signin-screen { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; text-align: center; } .signin-screen svg { width: 250px; height: 150px; } .signin-screen--clock { margin-top: 10px; font-size: 48px; font-family: sans-serif; color: #fff; opacity: 0.5; } .signin-screen--clock span { opacity: 0; animation: clockA 1.4s linear infinite; } .signin-screen--controls { margin-top: 50px; color: #f4ff81; font-size: 14px; text-transform: uppercase; } .signin-screen--controls span:nth-child(1) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: .1s; } .signin-screen--controls span:nth-child(2) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: .2s; } .signin-screen--controls span:nth-child(3) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: .3s; } .signin-screen--controls span:nth-child(4) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: .4s; } .signin-screen--controls span:nth-child(5) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: .5s; } .signin-screen--controls span:nth-child(6) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: .6s; } .signin-screen--controls span:nth-child(7) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: .7s; } .signin-screen--controls span:nth-child(8) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: .8s; } .signin-screen--controls span:nth-child(9) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: .9s; } .signin-screen--controls span:nth-child(10) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: 1.0s; } .signin-screen--controls span:nth-child(11) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: 1.1s; } .signin-screen--controls span:nth-child(12) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: 1.2s; } .signin-screen--controls span:nth-child(13) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: 1.3s; } .signin-screen--controls span:nth-child(14) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: 1.4s; } .signin-screen--controls span:nth-child(15) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: 1.5s; } .signin-screen--controls span:nth-child(16) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: 1.6s; } .signin-screen--controls span:nth-child(17) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: 1.7s; } .signin-screen--controls span:nth-child(18) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: 1.8s; } .signin-screen--controls span:nth-child(19) { opacity: 0.1; animation: swiperA 5s linear infinite; animation-delay: 1.9s; } @keyframes swiperA { 0% { opacity: 0; } 50% { opacity: 0.8; } 100% { opacity: 0; } } @keyframes clockA { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } </style></head><body> <div class="application"> <div class="mobile-wrapper"> <div class="mobile_nav"> <div class="mobile_nav--left"> <span class="mobile_nav--dots"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </span> </div> <div class="mobile_nav--center"> 02:42 </div> <div class="mobile_nav--right"> <small>80%</small> <i class="fa fa-battery-three-quarters" aria-hidden="true"></i> </div> </div> <div class="signin-screen"> <div class="signin-screen--logo"> <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="225" width="260.09" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 260.09449 225" xmlns:dc="http://purl.org/dc/elements/1.1/"> <defs> <radialGradient id="radialGradient4355" gradientUnits="userSpaceOnUse" cy="998.73" cx="129.29" gradientTransform="matrix(.73361 -.047637 .042135 .64889 -7.6405 337.23)" r="112.46"> <stop stop-color="#673a7b" stop-opacity="0" offset="0"/> <stop stop-color="#81edee" stop-opacity="0" offset="1"/> </radialGradient> <radialGradient id="radialGradient4363" gradientUnits="userSpaceOnUse" cy="942.21" cx="130.98" gradientTransform="matrix(1 0 0 .65559 0 324.51)" r="114.01"> <stop stop-color="#d7b097" offset="0"/> <stop stop-color="#d7b097" stop-opacity="0" offset="1"/> </radialGradient> </defs> <g fill-rule="evenodd" transform="translate(0 -827.36)"> <ellipse opacity=".203" rx="30.35" ry="29.821" cy="873.97" cx="187.49" fill="#ffd900"/> <path d="m207.12 944.91s-6.3449 31.642-0.15143 33.017c6.4403 1.4292 16.965-10.846 16.965-10.846m-119.84-90.67s-12.125 55.346-2.9944 57.354c9.1304 2.0081 32.939-16.131 32.939-16.131m-115.13 98.27 87.838-146.3s51.698 86.238 67.874 134.07c4.298 12.708 36.599-70.259 36.599-70.259s19.634 17.891 25.291 32.486c5.1247 13.221 7.3151 49.961 7.3151 49.961z" stroke="url(#radialGradient4355)" stroke-width="2.2" fill="url(#radialGradient4363)"/> <ellipse opacity="0.993" rx="23.989" ry="23.571" cy="870.93" cx="190.06" fill="#ffed3d"/> </g> </svg> </div> <div class="signin-screen--clock"> 02<span>:</span>42 </div> <div class="signin-screen--controls"> <span>s</span> <span>w</span> <span>i</span> <span>p</span> <span>e</span> <span> </span> <span>t</span> <span>o</span> <span> </span> <span>u</span> <span>n</span> <span>l</span> <span>o</span> <span>c</span> <span>k</span> <span> </span> <span class="fa fa-angle-right" aria-hidden="true"></span> <span class="fa fa-angle-right" aria-hidden="true"></span> <span class="fa fa-angle-right" aria-hidden="true"></span> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >/* home https://github.com/c0ncept/lock-screen-mobile */ //# sourceURL=pen.js </script> </body></html>

Related: See More

Material Dashboard React
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: