"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/frytyler/pen/Krmvj?depth=everything&order=popularity&page=87&q=mobile&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">/* #3a99a7 #465f70 */ * { box-sizing: border-box; } ::-webkit-scrollbar { width: 16px; height: 16px; overflow: visible; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); background-clip: padding-box; border: solid transparent; min-height: 28px; padding: 100px 0 0; -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); -box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); } ::-webkit-scrollbar-button { height: 0; width: 0; } ::-webkit-scrollbar-track-piece { background: #f5f5f5; } ::-webkit-scrollbar-track { background: none; } ::-webkit-scrollbar-corner { background: transparent; } .browser, .browser * { transition: width .3s ease; } html { width: 100%; height: 100%; overflow: hidden; padding-top: 20px; background-color: #fd863f; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMTAwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNhOTlhNyIvPjxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiMzYTk5YTciIHN0b3Atb3BhY2l0eT0iMC45OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ2NWY3MCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMCUiIGN5PSIxMzAlIiByPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNzgzYWE3Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNzgzYWE3IiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMTAlIiByPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDY1ZjcwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDY1ZjcwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(0% 100%, ellipse cover, #3a99a7 0%, rgba(58, 153, 167, 0.99) 1%, rgba(70, 95, 112, 0) 100%), -moz-radial-gradient(100% 130%, ellipse cover, #783aa7 0%, rgba(120, 58, 167, 0) 100%), -moz-radial-gradient(0% 10%, ellipse cover, #465f70 0%, rgba(70, 95, 112, 0) 100%); background-image: -webkit-radial-gradient(0% 100%, ellipse cover, #3a99a7 0%, rgba(58, 153, 167, 0.99) 1%, rgba(70, 95, 112, 0) 100%), -webkit-radial-gradient(100% 130%, ellipse cover, #783aa7 0%, rgba(120, 58, 167, 0) 100%), -webkit-radial-gradient(0% 10%, ellipse cover, #465f70 0%, rgba(70, 95, 112, 0) 100%); background-image: radial-gradient(ellipse cover at 0% 100%, #3a99a7 0%, rgba(58, 153, 167, 0.99) 1%, rgba(70, 95, 112, 0) 100%), radial-gradient(ellipse cover at 100% 130%, #783aa7 0%, rgba(120, 58, 167, 0) 100%), radial-gradient(ellipse cover at 0% 10%, #465f70 0%, rgba(70, 95, 112, 0) 100%); } body { position: relative; } .devices { margin: 0 auto 20px; width: 600px; text-align: center; } .devices a { margin: 0 20px; } .devices .mobile { width: 40px; height: 60px; border: 2px solid #f5f5f5; border-top-width: 5px; border-bottom-width: 8px; background: #b0b0b0; display: inline-block; border-radius: 3px; position: relative; } .devices .mobile:hover { background: #8f8f8f; } .devices .mobile:before { content: ''; display: block; background: #888; width: 17px; height: 1px; border-radius: 2px; position: absolute; top: -3px; left: 50%; margin-left: -8px; } .devices .mobile:after { content: ''; display: block; background: #888; width: 3px; height: 3px; border-radius: 50%; position: absolute; bottom: -5px; left: 50%; margin-left: -1px; } .devices .tablet { width: 100px; height: 133px; border: 2px solid #f5f5f5; border-top-width: 5px; border-bottom-width: 8px; background: #b0b0b0; display: inline-block; border-radius: 3px; position: relative; } .devices .tablet:hover { background: #8f8f8f; } .devices .tablet:before { content: ''; display: block; background: #888; width: 1px; height: 1px; border-radius: 2px; position: absolute; top: -3px; left: 50%; } .devices .tablet:after { content: ''; display: block; background: #888; width: 3px; height: 3px; border-radius: 50%; position: absolute; bottom: -5px; left: 50%; margin-left: -1px; } .devices .laptop { width: 237px; height: 150px; border: 8px solid #f5f5f5; background: #b0b0b0; display: inline-block; border-radius: 3px 3px 0 0; position: relative; } .devices .laptop:hover { background: #8f8f8f; } .devices .laptop:after { content: " "; background: #e8e8e8; display: block; width: 120%; position: absolute; bottom: -10px; margin-left: -10%; height: 10px; border-radius: 0 0 5px 5px; } .browser { position: relative; margin: 20px auto; width: 320px; min-height: 640px; background: #f5f5f5; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .browser.mobile { width: 335px; } .browser.mobile .btn { width: 20%; } .browser.mobile input[type="url"] { width: 78%; } .browser.tablet { width: 790px; } .browser.tablet .btn { width: 14%; } .browser.tablet input[type="url"] { width: 85%; } .browser.laptop { width: 90%; } .browser.laptop .btn { width: 9%; } .browser.laptop input[type="url"] { width: 90%; } .browser .searchbar { border-radius: 5px 5px 0 0; background: #dddddd; height: 33px; width: 100%; padding: 5px; position: relative; } .browser .searchbar .btn { position: absolute; top: 6px; right: 5px; border: none; display: block; text-align: center; background: #3a99a7; color: #fff; text-decoration: none; font-size: 11px; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1); padding: 3px 8px; border-radius: 3px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); transition: background-color .3s ease; } .browser .searchbar .btn:hover { background: #368f9c; } .browser .searchbar input[type="url"] { height: 20px; padding: 5px; border-radius: 3px; border: none; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2); outline: none; font-size: 9px; color: #aaa; } iframe { width: 99.9%; height: 607px; } </style></head><body> <div class="devices"> <a href="#" class="mobile"></a> <a href="#" class="tablet"></a> <a href="#" class="laptop"></a> </div> <div class="browser mobile"> <div class="searchbar"> <form> <input type="url" class="url" value="http://" /> <button class="btn">Browse</button> </form> </div> <div class="iframe"></div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >var url = $('.url'), btn = $('.btn'), device = $('.devices a'); btn.on('click',function(e){ e.preventDefault(); $('.iframe').html($('<iframe />').attr({"src":url.val()})); }); device.on('click',function(e){ e.preventDefault(); var type = $(this).attr('class'); console.log(type); $('.browser').attr('class','browser '+type); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: