"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/Jursdotme/pen/mVBJZd?depth=everything&order=popularity&page=70&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">@font-face { font-family: 'RobotoMedium'; src: url("/fonts/Roboto-Medium-webfont.eot"); src: url("/fonts/Roboto-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Roboto-Medium-webfont.woff") format("woff"), url("/fonts/Roboto-Medium-webfont.ttf") format("truetype"), url("/fonts/Roboto-Medium-webfont.svg#RobotoMedium") format("svg"); font-weight: normal; font-style: normal; } body { background-color: #fff; background-image: url("../images/background.jpg"); background-size: 100%; background-size: cover; margin-top: 20px; font-family: 'RobotoMedium'; margin: 0; padding: 0; } fieldset { border: none; } label { float: left; text-indent: -99999px; } input { width: 85%; margin-right: 1%; height: 2em; font-size: 1.6em; float: left; } h3, dl, dd, dt { margin: 1em 2em; } h2 { margin: 1em; } dt { font-weight: bold; } p { line-height: 1.6; margin: 1em 2em; } p.intro { clear: both; } a { color: #ede6dc; text-decoration: none; transition: all 1s ease; } a:hover { color: #cc4e46; background-color: #ede6dc; } a.button { background-color: #ede6dc; color: #cc4e46; width: 8%; line-height: 1.7em; margin: 0; font-size: 2em; text-align: center; float: left; border: solid 1px #8e352e; box-shadow: 0 0 3px #333; } a.button:hover { background-color: #cc4e46; color: #ede6dc; } .promos { background: #fff; width: 100%; position: relative; border-top: 5px solid; border-bottom: 5px solid; margin: 2em auto; padding: 2em 0; } .promos h2 { text-align: center; margin-top: 0; } .ebook { border-right: 3px solid; } .promos a.button { width: 100%; font-size: 1.5em; background-color: #cc4e46; color: #ede6dc; } .ebook, .bookmarklet { width: 49%; float: left; } h1 { text-transform: uppercase; text-align: center; } .wrapper { width: 90%; max-width: 1200px; margin: 0 auto; } .netawards { position: absolute; top: 0; right: 0; width: 125px; height: 125px; background-image: url(/images/NETawards_ribbon.png); } .netawards a { display: block; width: 125px; height: 125px; text-indent: -999999px; } .netawards a:hover { background-color: transparent; } .display { position: relative; left: 0px; height: 600px; } .url { float: left; background-color: #cc4e46; width: 100%; margin: 0 auto; box-shadow: 0px -2px 5px #333; } form { width: 85%; margin: 1em auto; } div { background-repeat: no-repeat; background-size: 100%; overflow: hidden; } iframe { transform: scale(0.219); transform-origin: top left; margin: 0; padding: 0; position: relative; background-color: #fff; border-color: #000; } .mobile { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/iphone-optimised.png"); position: absolute; width: 95px; height: 196px; top: 375px; left: 300px; z-index: 5; } .mobile iframe { width: 320px; height: 480px; top: 32px; left: 11px; overflow-y: hidden; } .tablet { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/ipad-optimised.png"); width: 246px; height: 400px; z-index: 3; position: absolute; left: 120px; top: 230px; } .tablet iframe { width: 768px; height: 1024px; top: 35px; left: 38px; overflow-y: hidden; } .laptop { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/laptop-screen-optimised.png"); width: 477px; height: 307px; top: 264px; left: 560px; position: absolute; z-index: 2; } .laptop iframe { width: 1280px; height: 802px; top: 26px; left: 60px; transform: scale(0.277); -webkit-transform: scale(0.277); -o-transform: scale(0.277); -ms-transform: scale(0.277); -moz-transform: scale(0.277); transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; } .desktop { position: absolute; width: 566px; height: 538px; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/large-screen-optimised.png"); top: 0px; left: 220px; z-index: 1; } .desktop iframe { left: 28px; top: 38px; width: 1600px; height: 992px; transform: scale(0.3181); -webkit-transform: scale(0.3181); -o-transform: scale(0.3181); -ms-transform: scale(0.3181); -moz-transform: scale(0.3181); transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; } .about-tool { font-size: 1.2em; max-width: 64em; width: 80%; margin: 1em auto; } .about-tool li { margin-bottom: 0.5em; line-height: 1.2; } @media (max-width: 1160px) { .display { width: 95%; height: 550px; transform: scale(0.81); -webkit-transform: scale(0.81); -o-transform: scale(0.81); -ms-transform: scale(0.81); -moz-transform: scale(0.81); } .desktop { left: 180px; } .laptop { left: 520px; } .tablet { left: 80px; } .mobile { left: 260px; } input { width: 88%; } } @media (max-width: 1070px) { .display { left: -50px; } } @media (max-width: 1000px) { .display { height: 500px; transform: scale(0.71); -webkit-transform: scale(0.71); -o-transform: scale(0.71); -ms-transform: scale(0.71); -moz-transform: scale(0.71); top: -40px; } .desktop { left: 140px; } .laptop { left: 480px; } .tablet { left: 40px; } .mobile { left: 220px; } } @media (max-width: 850px) { .display { height: 500px; transform: scale(0.65); -webkit-transform: scale(0.65); -o-transform: scale(0.65); -ms-transform: scale(0.65); -moz-transform: scale(0.65); } .desktop { left: 100px; } .laptop { left: 440px; } .tablet { left: 0px; } .mobile { left: 180px; } } @media (max-width: 768px) { .display { height: 450px; transform: scale(0.55); -webkit-transform: scale(0.55); -o-transform: scale(0.55); -ms-transform: scale(0.55); -moz-transform: scale(0.55); } a.button { font-size: 1.6em; line-height: 1.75em; margin-top: 0.5em; width: 100%; } input { height: 1.2em; width: 100%; } } @media (max-width: 670px) { .display { height: 400px; left: -70px; transform: scale(0.45); -webkit-transform: scale(0.45); -o-transform: scale(0.45); -ms-transform: scale(0.45); -moz-transform: scale(0.45); } } @media (max-width: 580px) { input { font-size: 1.4em; height: 1.4em; width: 100%; } a.button { width: 100%; float: left; font-size: 1.4em; margin-top: 0.5em; } } @media (max-width: 560px) { .display { height: 270px; top: -65px; transform: scale(0.37); -webkit-transform: scale(0.37); -o-transform: scale(0.37); -ms-transform: scale(0.37); -moz-transform: scale(0.37); } } @media (max-width: 440px) { .display { left: -17px; top: -65px; width: 70px; transform: scale(0.35); -webkit-transform: scale(0.35); -o-transform: scale(0.35); -ms-transform: scale(0.35); -moz-transform: scale(0.35); } } @media (max-width: 380px) { .display { height: 235px; left: -17px; top: -65px; width: 70px; transform: scale(0.27); -webkit-transform: scale(0.27); -o-transform: scale(0.27); -ms-transform: scale(0.27); -moz-transform: scale(0.27); } .desktop { left: 100px; } .laptop { left: 515px; } .tablet { left: 0px; } .mobile { left: 180px; } h1 { font-size: 1.2em; } p { margin: 1em; } } #carbonads { max-width: 400px; margin: 1em auto; } /* To position the text beside the image: */ .carbon-img { float: left; margin-right: 8px; } .carbon-text { display: block; } /* To position the text below the image: */ /* .carbon-text { display: block; width: 130px; } */ /* To separate the attribution from the text: */ .carbon-poweredby { float: right; } .carbon-text { padding: 8px; } /* To add a border around the ad: */ #carbonads { padding: 15px; border: 1px solid #ccc; } /* To style the text and attribution: */ .carbon-text { font-size: 12px; color: orange; } .carbon-poweredby { font-size: 75%; } /* To fixed position the ad: */ /* #carbonads { position: fixed; bottom: 5px; right: 5px; } */ </style></head><body> <div class="wrapper"> <section class="display"> <div class="mobile ui-draggable"> <div class="trim"> <iframe id="mobile" src="https://www.jurs.me/"> </iframe> </div> </div> <div class="tablet ui-draggable"> <div class="trim"> <iframe id="tablet" src="https://www.jurs.me/"> </iframe> </div> </div> <div class="laptop ui-draggable"> <div class="trim"> <iframe id="laptop" src="https://www.jurs.me/"> </iframe> </div> </div> <div class="desktop ui-draggable"> <div class="trim"> <iframe id="desktop" src="https://www.jurs.me/"> </iframe> </div> </div> </section> </div> </body></html>

Questions / Comments: