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;
}
