<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/willpaige/pen/rFElD?depth=everything&order=popularity&page=16&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: #2ecc71;
}
.container {
width: 680px;
margin: 0px auto;
position: relative;
/* HAVE SCALED TO FIT THE WINDOW */
transform: scale(0.6);
}
.container > .screen {
width: 460px;
height: 280px;
position: relative;
background: #ff6860;
border: 20px solid #474e5d;
border-radius: 10px;
}
.monitor > div {
position: absolute;
}
.monitor:before,
.monitor:after,
.laptop:before{
content: "";
position: absolute;
left: 50%;
}
.monitor:before,
.laptop:before {
top: -10px;
margin: -3px 0 0 -3px;
width: 6px;
height: 6px;
border-radius: 6px;
background: #a5adbd;
}
.screen:after {
width: 8px;
height: 8px;
border-radius: 8px;
bottom: -10px;
margin: 0 0 -4px -4px;
background: #e8ebf0;
}
.content {
width: 420px;
height: 240px;
left: 50%;
margin-left: -210px;
overflow: hidden;
}
.content:before {
content: "";
position: absolute;
right: -90px;
width: 200px;
height: 300px;
transform: rotate(45deg);
background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
z-index: 5;
}
.pg {
width: 240px;
height: 180px;
position: absolute;
left: 50%;
top: 50%;
margin: -90px 0 0 -120px;
background: #ffffff;
border: 1px solid #f4f5f7;
border-top: 20px solid #f4f5f7;
border-radius: 5px;
box-shadow: 0 5px 0 #e0625e;
}
.btns {
position: absolute;
top: -20px;
left: 7px;
}
.btns:before {
content: "";
position: absolute;
left: 35px;
top: 5px;
height: 10px;
width: 185px;
background: #fff;
border-radius: 3px;
}
.btns > li {
display: inline-block;
list-style: none;
width: 5px;
height: 5px;
border-radius: 5px;
background: #fc5254;
margin-right: 4px;
}
.btns li:nth-child(2) {
background: #fcae52;
}
.btns li:nth-child(3) {
background: #66b34e;
}
.txt {
margin: 10px auto;
width: 220px;
}
.txt > li {
background: #f3f5f7;
width: 100%;
height: 15px;
margin-bottom: 9px;
}
.txt > li:nth-child(2) {
height: 60px;
}
.txt > .thin {
height: 43px;
width: 30%;
margin-right: 6px;
display: inline-block;
}
.txt > li:nth-child(5) {
margin-right: 0;
}
.base {
width: 90px;
height: 50px;
bottom: -70px;
left: 50%;
margin-left: -45px;
background: #e8ebf0;
}
.base:before,
.base:after,
.grey-shadow:before,
.grey-shadow:after{
content: "";
position: absolute;
top: 0;
}
.base:before {
border-left: 13px solid transparent;
border-right: 0px solid transparent;
border-bottom: 50px solid #e8ebf0;
left: -13px;
}
.base:after {
border-right: 13px solid transparent;
border-left: 0px solid transparent;
border-bottom: 50px solid #e8ebf0;
right: -13px;
}
.base > div {
position: absolute;
}
.grey-shadow {
width: 90px;
height: 12px;
background: #d8dbe1;
top: 0;
}
.grey-shadow:before {
border-left: 3px solid transparent;
border-right: 0px solid transparent;
border-bottom: 12px solid #d8dbe1;
left: -3px;
z-index: 2
}
.grey-shadow:after {
border-right: 3px solid transparent;
border-left: 0px solid transparent;
border-bottom: 12px solid #d8dbe1;
right: -3px;
z-index: 2
}
.foot {
background: #e8ebf0;
z-index: 1;
}
.foot.top {
width: 116px;
height: 5px;
bottom: -5px;
left: 50%;
margin-left: -58px;
}
.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: 16px solid transparent;
border-left: 0px solid transparent;
border-bottom: 5px solid #e8ebf0;
right: -16px;
}
.foot.bottom {
width: 150px;
height: 5px;
bottom: -10px;
left: 50%;
margin-left: -75px;
z-index: 999;
}
.laptop {
width: 235px;
height: 155px;
background: #fc9252;
border: 12px solid #e8ebf0;
border-radius: 10px 10px 0 0;
position: absolute;
top: 200px;
right: 30px;
}
.laptop:before {
top: -6px;
}
.laptop > div {
position: absolute;
}
.laptop > .content {
width: 211px;
height: 131px;
left: 0;
margin-left: 0;
}
.txt-laptop {
width: 189px;
}
.txt-laptop > li {
background: #fda566;
}
.txt-laptop > li:nth-child(2) {
height: 41px;
}
.txt-laptop > .thin {
height: 36px;
margin-right: 5px;
}
.btm {
width: 296px;
height: 7px;
bottom: -19px;
left: 50%;
margin-left: -148px;
border-radius: 0 0 20px 20px;
background: #f4f5f7;
z-index: 1;
}
.btm:before {
content: "";
position: absolute;
width: 42px;
height: 3px;
left: 50%;
top: 0;
margin-left: -21px;
border-radius: 0 0 5px 5px;
background: #d8dbe1;
}
.keyboard {
width: 216px;
height: 35px;
bottom: -70px;
left: 50%;
margin-left: -108px;
background: #e8ebf0;
box-shadow: 0 4px 0 #d8dbe1;
z-index: 2;
}
.keyboard:before,
.keyboard:after {
content: "";
position: absolute;
top: 0;
z-index: 2;
}
.keyboard > div {
position: absolute;
}
.keyboard .btm {
background: #d8dbe1;
width: 244px;
height: 4px;
border-radius: 0;
bottom: -4px;
left: 50%;
margin-left: -122px;
}
.keyboard:before {
border-left: 14px solid transparent;
border-right: 0px solid transparent;
border-bottom: 35px solid #e8ebf0;
left: -14px;
}
.keyboard:after {
border-right: 14px solid transparent;
border-left: 0px solid transparent;
border-bottom: 35px solid #e8ebf0;
right: -14px;
}
.keys {
width: 220px;
margin: 4px auto;
text-align: center;
position: relative;
left: 50%;
margin-left: -110px;
}
.keys li {
position: relative;
left: 50%;
background: #f4f5f7;
height: 4px;
margin: 0 0 3px -110px;
z-index: 4;
}
.keys li:nth-child(1) {
width: 208px;
margin-left: -104px;
}
.keys li:nth-child(2) {
width: 212px;
margin-left: -106px;
}
.keys li:nth-child(2) {
width: 212px;
margin-left: -106px;
}
.keys li:nth-child(3) {
width: 216px;
margin-left: -108px;
}
.keys li:nth-child(4) {
width: 220px;
margin-left: -110px;
}
.keys li:before,
.keys li:after {
content: "";
position: absolute;
}
.keys li:before {
border-left: 3px solid transparent;
border-right: 0px solid transparent;
border-bottom: 4px solid #f4f5f7;
left: -3px;
}
.keys li:after {
border-right: 3px solid transparent;
border-left: 0px solid transparent;
border-bottom: 4px solid #f4f5f7;
right: -3px;
}
.phone {
width: 70px;
height: 140px;
position: absolute;
bottom: -90px;
left: -30px;
border-radius: 5px;
background: #000;
border: 25px solid #2f343e;
border-left: 5px solid #2f343e;
border-right: 5px solid #2f343e;
}
.phone:before,
.phone:after {
content: "";
position: absolute;
left: 50%;
background: #474e5d;
}
.phone:before {
background: #474e5d;
width: 20px;
height: 4px;
margin-left: -10px;
top: -12px;
border-radius: 2px;
}
.phone:after {
width: 10px;
height: 10px;
border-radius: 10px;
bottom: -18px;
margin-left: -5px;
}
.phone .screen {
width: 60px;
height: 90px;
position: relative;
overflow: hidden;
}
.phone .content {
background: #fff;
width: 60px;
left: 0%;
margin-left: 0px;
}
.phone .txt {
width: 85%;
}
.phone .txt > li {
height: 20px;
}
.shadow {
position: absolute;
width: 350px;
height: 15px;
left: 50%;
margin-left: -175px;
z-index: -1;
bottom: -20px;
background: radial-gradient(ellipse at center, rgba(52,172,108,1) 0%,rgba(52,172,108,1) 53%,rgba(46,204,113,1) 55%,rgba(46,204,113,0) 55%,rgba(46,204,113,0) 100%);
}
.laptop .shadow {
width: 450px;
margin-left: -225px;
bottom: -26px;
}
.keyboard .shadow {
bottom: -10px;
height: 10px;
}
.phone .shadow {
bottom: -30px;
margin-left: -50px;
height: 10px;
width: 100px
}</style></head><body>
<div class="container">
<div class="screen monitor">
<div class="content">
<div class="pg">
<ul class="btns">
<li></li><li></li><li></li>
</ul>
<ul class="txt">
<li></li>
<li></li>
<li class="thin"></li>
<li class="thin"></li>
<li class="thin"></li>
</ul>
</div>
</div>
<div class="base">
<div class="grey-shadow"></div>
<div class="foot top"></div>
<div class="foot bottom"></div>
<div class="shadow"></div>
<div class="keyboard">
<div class="btm"></div>
<ul class="keys">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="shadow"></div>
</div>
</div>
</div>
<div class="laptop">
<div class="content">
<ul class="txt txt-laptop">
<li></li>
<li></li>
<li class="thin"></li>
<li class="thin"></li>
<li class="thin"></li>
</ul>
</div>
<div class="btm"></div>
<div class="shadow"></div>
</div>
<div class="phone">
<div class="screen">
<div class="content">
<ul class="txt">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="shadow"></div>
</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 >/* DESIGN IDEA TAKEN FROM HERE -> http://dribbble.com/shots/997747-Apple-flat-devices-Episode-2-PSD?list=searches&tag=flat_icon
THANKS AGAIN @pierreborodin!!
*/
//# sourceURL=pen.js
</script>
</body></html>
