Codepad Iphone

HTML
<div class="container"> <div class="outer"> <div class="camera"></div> <div class="inner"></div> <div class="home"></div> </div> </div>
SCSS
$grey: #404E4D; $home: #A6AEB2; @mixin size($h: 100%, $w: 100%) { height: $h; width: $w; } body { background-repeat: no-repeat; height: 100vh; background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); overflow: hidden; } .container, .outer, .inner, .camera, .home { position: absolute; } .container { margin: auto; top: -10vmin; bottom: 0; left: 0; right: 0; width: 200px; height: 300px; } .outer { @include size(75vmin, 40vmin); background: #F4F4F4; border-radius: 5vmin; box-shadow: 1vmin 1vmin 0 rgba(#000, 0.1); } .inner { top: 10vmin; left: 1.5vmin; @include size(53vmin, 37vmin); background-image: url(https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0); background-position: center; background-size: contain; background-repeat: no-repeat; box-shadow: inset -0.3vmin -0.3vmin 0 rgba(#000, 0.1), inset 0.3vmin 0.3vmin 0 rgba(#000, 0.1); background-color: #333; } .camera { top: 4vmin; left: 35%; @include size(1.5vmin, 1.5vmin); border-radius: 100%; background: $grey + 20; &:before, &:after{ position: absolute; content:''; } &:before { @include size(0.8vmin, 8vmin); background: $grey + 20; border-radius: 100px; top: 0.7vmin; left: 4vmin; } &:after{ @include size(1.3vmin, 1.3vmin); border-radius: 100%; background: $grey + 20; left: 7vmin; top: -3vmin; } } .home { @include size(7vmin, 7vmin); border-radius: 100%; border: 2px solid #A6AEB2; top: 65vmin; left: 16vmin; }
JAVASCRIPT
Expand for more options Login