"device"
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/nicholaspetersen/pen/BHjfk?depth=everything&order=popularity&page=5&q=device&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">* { box-sizing: border-box; } body { background: #f8f8f8; } .container { margin: 2em auto; } .service-graphic { font-size: 8px; padding: 1em; position: relative; } @media screen and (min-width: 38em) { .service-graphic { font-size: 12px; } } .service-graphic .monitor { width: 28.750em; height: 17.5em; position: relative; background: #f8f8f8; border: 0.625em solid #1f1f1f; border-radius: 0.625em; border: 1.25em solid #1f1f1f; margin: 0 auto; } @media screen and (min-width: 38em) { .service-graphic .monitor { border: 1.25em solid #1f1f1f; } } .monitor > div { position: absolute; } .monitor:before, .monitor:after, .laptop:before { content: ""; position: absolute; left: 50%; } .monitor:before, .laptop:before { top: -0.25em; margin: -0.188em 0 0 -0.188em; width: 0.250em; height: 0.250em; border-radius: 0.250em; background: #d8dbe1; top: -0.625em; } .screen:after { width: 0.500em; height: 0.500em; border-radius: 0.500em; margin: 0 0 -0.25em -0.25em; background: #e8ebf0; bottom: -0.625em; } .monitor .content { width: 26.25em; height: 15em; left: 50%; margin-left: -13.125em; overflow: hidden; } .monitor .content:before, .laptop .screen:before, .phone .screen:before, .ipad .screen:before { content: ""; position: absolute; right: -5.625em; width: 12.500em; height: 18.750em; transform: rotate(45deg); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); z-index: 5; } .browser { width: 15em; height: 11.250em; position: absolute; left: 50%; top: 50%; margin: -5.625em 0 0 -7.5em; background: #ffffff; border: 1px solid #e8ebf0; border-top: 1.25em solid #d8dbe1; border-radius: 0.313em; } .browser-content { overflow: hidden; height: 9.938em; } .btns { position: absolute; top: -1.25em; left: 0.438em; } .btns:before { content: ""; position: absolute; left: 2.188em; top: 0.313em; height: 0.625em; width: 11.563em; background: #fff; border-radius: 3px; } .btns > li { display: inline-block; vertical-align: middle; list-style: none; width: 0.313em; height: 0.313em; border-radius: 0.313em; background: #f8f8f8; margin-right: 0.250em; } .screen .txt { margin: 0.625rem auto; width: 85%; text-align: center; font-size: 0; } .screen .txt > li { background: #e8ebf0; width: 100%; height: 0.938em; margin-bottom: 0.363em; font-size: 1rem; } .screen .txt > li.big { height: 3.750em; } .screen .txt, .phone .txt { animation: scroll 4s 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; } @keyframes scroll { 20%, 60% { transform: translateY(-62%); } 80% { margin-top: -50px; } } .screen .txt > .third { height: 2.25em; width: 30%; margin-right: 5%; display: inline-block; } .screen .txt > li:nth-child(5), .screen .txt > li:nth-child(10), .screen .txt > li:nth-child(13), .screen .txt > li:nth-child(18), .screen .txt > li:nth-child(21) { margin-right: 0; } .base { width: 5.625em; height: 3.1em; bottom: -3.9em; left: 50%; margin-left: -2.8125em; background: #e8ebf0; bottom: -4.3em; z-index: -1; } .base:before, .base:after, .grey-shadow:before, .grey-shadow:after { content: ""; position: absolute; top: 0; } .base:before { border-left: 0.813em solid transparent; border-right: 0px solid transparent; border-bottom: 3.125em solid #e8ebf0; left: -0.77em; } .base:after { border-right: 0.813em solid transparent; border-left: 0px solid transparent; border-bottom: 3.125em solid #e8ebf0; right: -0.77em; } .base > div { position: absolute; } .grey-shadow { width: 5.625em; height: 0.750em; background: #d8dbe1; top: 0; } .grey-shadow:before { border-left: 3px solid transparent; border-right: 0px solid transparent; border-bottom: 0.75em solid #d8dbe1; left: -3px; } .grey-shadow:after { border-right: 3px solid transparent; border-left: 0px solid transparent; border-bottom: 0.75em solid #d8dbe1; right: -2px; z-index: 1; } .foot { background: #e8ebf0; } .foot.top { width: 7.250em; height: 0.313em; bottom: -0.3em; left: 50%; margin-left: -3.625em; } .foot.top:before, .foot.top:after, .foot.bottom:before { content: ""; position: absolute; top: 0px; } .foot.top:before { border-left: 16px solid transparent; border-right: 0px solid transparent; border-bottom: 5px solid #e8ebf0; left: -16px; } .foot.top:after { border-right: 1em solid transparent; border-left: 0px solid transparent; border-bottom: 5px solid #e8ebf0; right: -1em; } .foot.bottom { width: 9.375em; height: 0.313em; bottom: -0.625em; left: 50%; margin-left: -4.688em; } .laptop { width: 14.688em; height: 9.688em; background: #f8f8f8; border: 0.75em solid #1f1f1f; border-radius: 0.625em 0.625em 0 0; position: absolute; top: 14.5em; right: 1.875em; right: 50%; margin-right: -19.5em; z-index: 10; } .laptop:before { top: -0.3em; } .laptop > div { position: absolute; } .laptop > .screen { width: 13.188em; height: 8.188em; left: 0; margin-left: 0; background: #fff; overflow: hidden; } .btm { width: 18.500em; height: 0.625em; bottom: -1.188em; left: 50%; margin-left: -9.25em; border-radius: 0 0 20px 20px; background: #e8ebf0; z-index: 1; } .btm:before { content: ""; position: absolute; width: 2.625em; height: 0.250em; left: 50%; top: 0; margin-left: -1.313em; border-radius: 0 0 0.313em 0.313em; background: #d8dbe1; } .btm:after { display: none; content: ""; position: absolute; width: 100%; height: 0.25rem; background: #bababa; top: .5rem; border-bottom-right-radius: 7.5rem 2.5rem; border-bottom-left-radius: 7.5rem 2.5rem; } .phone { width: 4.125em; height: 8.750em; position: absolute; top: 15.75em; left: 1em; left: 50%; margin-left: -20.5em; border-radius: 0.5em; background: #1f1f1f; border: 1.563em solid #1f1f1f; border-left: 0.313em solid #1f1f1f; border-right: 0.313em solid #1f1f1f; margin-left: ; } .phone:before, .phone:after { content: ""; position: absolute; left: 50%; background: #474e5d; } .phone:before { background: #474e5d; width: 1.250em; height: 0.250em; margin-left: -0.625em; top: -0.75em; border-radius: 2px; } .phone:after { width: 0.625em; height: 0.625em; border-radius: 0.625em; bottom: -1.125em; margin-left: -0.313em; } .phone .screen { width: 3.50em; height: 5.625em; margin: 0 auto; position: relative; overflow: hidden; background: #fff; } .phone .txt > li { height: 1.1250em; } .screen .txt > li.txt-half { width: 46%; margin-right: 8%; display: inline-block; } .screen .txt > li.txt-half:nth-of-type(even) { margin-right: 0; } .ipad { width: 8.75em; height: 12.750em; position: absolute; top: 11.7em; left: 6em; left: 50%; margin-left: -15.5em; border-radius: 0.5em; background: #1f1f1f; border: 1.563em solid #1f1f1f; border-left: 0.313em solid #1f1f1f; border-right: 0.313em solid #1f1f1f; } .ipad:before, .ipad:after { content: ""; position: absolute; left: 50%; background: #474e5d; } .ipad:before { background: #474e5d; width: 1.250em; height: 0.250em; margin-left: -0.625em; top: -0.75em; border-radius: 2px; } .ipad:after { width: 0.625em; height: 0.625em; border-radius: 0.625em; bottom: -1.125em; margin-left: -0.313em; } .ipad .screen { width: 8em; height: 9.8em; margin: 0 auto; position: relative; overflow: hidden; background: #fff; } .ipad .content { width: 100%; left: 0%; margin-left: 0px; } .ipad li.txt-half { height: 35px; } </style></head><body> <div class="container service-graphic sg2"> <div class="screen monitor"> <div class="content"> <div class="browser"> <ul class="btns"> <li></li><li></li><li></li> </ul> <div class="browser-content"> <ul class="txt"> <li></li> <li class="big"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li></li> <li></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li></li> <li class="big"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> </ul> </div> </div> </div> <div class="base"> <div class="grey-shadow"></div> <div class="foot top"></div> <div class="foot bottom"></div> </div> </div> <div class="laptop"> <div class="screen"> <ul class="txt"> <li></li> <li class="big"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li></li> <li></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li></li> <li class="big"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> <li class="third"></li> </ul> </div> <div class="btm"></div> </div> <div class="phone"> <div class="screen"> <ul class="txt"> <li></li> <li></li> <li class="txt-half"></li> <li class="txt-half"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="txt-half"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li></li> <li></li> </ul> </div> <div class="shadow"></div> </div> <div class="ipad"> <div class="screen"> <ul class="txt"> <li></li> <li class="big"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li></li> <li></li> <li class="txt-half"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li class="txt-half"></li> <li></li> </ul> </div> </div> </div> </body></html>

Related: See More


Questions / Comments: