<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/MaciejCaputa/pen/VmLedm?depth=everything&order=popularity&page=27&q=device&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<style class="cp-pen-styles">* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 100%;
min-height: 100vh;
background: #F5F5F5;
font-weight: 300;
font-family: sans-serif;
color: rgba(0, 0, 0, 0.54);
}
h1, h2, h3, h4, h5, h6 {
font-weight: inherit;
font-family: inherit;
color: rgba(0, 0, 0, 0.87);
}
.showcase {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 1em;
}
.showcase__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
font-size: 3.66em;
margin: 0 auto;
}
.showcase__title__icon {
display: block;
font-size: inherit;
color: #2E7D32;
}
.showcase__title__span {
display: block;
}
.showcase__lead {
font-size: 1.5em;
margin: 0 auto 1em;
text-align: center;
}
.showcase__inner {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 3em auto 1.33em;
width: 100%;
}
.showcase__inner__wrapper {
margin: 0;
background: #3F51B5;
box-sizing: content-box;
}
.showcase__inner__wrapper--mobile {
width: 130.35px;
height: 246.51px;
z-index: 3;
}
.showcase__inner__wrapper--tablet {
width: 257.4px;
height: 336.6px;
z-index: 2;
}
.showcase__inner__wrapper--desktop {
position: absolute;
top: 33%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 541.2px;
height: 330px;
z-index: 1;
}
.showcase__inner__wrapper__device {
position: relative;
-webkit-transform: scale(0.33);
transform: scale(0.33);
-webkit-transform-origin: left 0;
transform-origin: left 0;
box-sizing: content-box;
}
.showcase__inner__wrapper__device__iframe {
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.showcase__inner__wrapper__device--mobile:after, .showcase__inner__wrapper__device--tablet:after {
content: " ";
position: absolute;
left: 50%;
bottom: -20px;
width: 30px;
height: 30px;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
border: 2px solid #E0E0E0;
border-radius: 50%;
z-index: 1000;
background: #757575;
}
.showcase__inner__wrapper__device--mobile {
width: 375px;
height: 667px;
border-top: 40px solid #424242;
border-bottom: 40px solid #424242;
border-left: 10px solid #424242;
border-right: 10px solid #424242;
}
.showcase__inner__wrapper__device--mobile:before {
content: " ";
position: absolute;
left: 50%;
top: -20px;
width: 75px;
height: 4px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 2px solid #E0E0E0;
border-radius: 10px;
z-index: 1000;
background: #757575;
}
.showcase__inner__wrapper__device--tablet {
width: 750px;
height: 920px;
border-top: 50px solid #424242;
border-bottom: 50px solid #424242;
border-left: 15px solid #424242;
border-right: 15px solid #424242;
}
.showcase__inner__wrapper__device--tablet:after {
bottom: -25px;
}
.showcase__inner__wrapper__device--tablet:before {
content: " ";
position: absolute;
left: 50%;
top: -25px;
width: 20px;
height: 20px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 2px solid #757575;
border-radius: 50%;
z-index: 1000;
background: #616161;
}
.showcase__inner__wrapper__device--desktop {
width: 1600px;
height: 900px;
border-top: 50px solid #424242;
border-bottom: 50px solid #424242;
border-left: 20px solid #424242;
border-right: 20px solid #424242;
}
.showcase__inner__wrapper__device--desktop:before, .showcase__inner__wrapper__device--desktop:after {
content: " ";
position: absolute;
background: #424242;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.showcase__inner__wrapper__device--desktop:before {
width: 100px;
height: 200px;
top: 100%;
}
.showcase__inner__wrapper__device--desktop:after {
width: 250px;
height: 25px;
top: calc(100% + 199px);
}
.showcase__downloads {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 500px;
margin: 0.5em auto;
width: 100%;
}
.showcase__downloads__download {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
.showcase__downloads__download__icon {
font-size: 3em;
color: rgba(0, 0, 0, 0.87);
}
.showcase__downloads__download:hover:before {
content: "Coming Soon";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
background: rgba(0, 0, 0, 0.54);
color: #E0E0E0;
font-size: 0.5em;
-webkit-transition: all 3000ms ease-in-out;
transition: all 3000ms ease-in-out;
}
.showcase__author {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-decoration: none;
margin: 0.5em auto;
}
.showcase__author__icon {
display: block;
color: rgba(0, 0, 0, 0.87);
}
.showcase__author__span {
display: block;
padding: 0 6px;
color: rgba(0, 0, 0, 0.54);
}
.showcase__author__img {
display: block;
height: 2em;
width: auto;
}
</style></head><body>
<div class="showcase">
<h1 class="showcase__title"><i class="showcase__title__icon material-icons">monetization_on</i><span class="showcase__title__span">Trader 101</span></h1>
<p class="showcase__lead">Best demo trading on the web!</p>
<div class="showcase__inner">
<div class="showcase__inner__wrapper showcase__inner__wrapper--mobile">
<div class="showcase__inner__wrapper__device showcase__inner__wrapper__device--mobile">
<iframe class="showcase__inner__wrapper__device__iframe" sandbox="allow-scripts allow-same-origin" src="https://maciejcaputa.com/trader-101/#/company/AAPL" scrolling="yes" frameborder="0" allowtransparency="" allowfullscreen=""></iframe>
</div>
</div>
<div class="showcase__inner__wrapper showcase__inner__wrapper--tablet">
<div class="showcase__inner__wrapper__device showcase__inner__wrapper__device--tablet">
<iframe class="showcase__inner__wrapper__device__iframe" sandbox="allow-scripts allow-same-origin" src="https://maciejcaputa.com/trader-101/#/feed" scrolling="hes" frameborder="0" allowtransparency="" allowfullscreen=""></iframe>
</div>
</div>
<div class="showcase__inner__wrapper showcase__inner__wrapper--desktop">
<div class="showcase__inner__wrapper__device showcase__inner__wrapper__device--desktop">
<iframe class="showcase__inner__wrapper__device__iframe" sandbox="allow-scripts allow-same-origin" src="https://maciejcaputa.com/trader-101/#/quotes" scrolling="yes" frameborder="0" allowtransparency="" allowfullscreen=""></iframe>
</div>
</div>
</div><a class="showcase__author" href="https://maciejcaputa.com" target="_blank"><i class="showcase__author__icon material-icons">code</i>
<div class="showcase__author__span">with</div><i class="showcase__author__icon material-icons" style="color: red">favorite</i>
<div class="showcase__author__span">by</div><img class="showcase__author__img" src="https://maciejcaputa.com/assets/images/logo.png"/></a>
</div>
<script src='https://codepen.io/MaciejCaputa/pen/EmMooZ.js'></script>
</body></html>
