SCSS
$grey: #404E4D;
$home: #A6AEB2;
@mixin size($h: 100%, $w: 100%) {
height: $h;
width: $w;
}
body {
background-repeat: no-repeat;
height: 100vh;
background: linear-gradient(to top right, #F3E9D2, #EC9192);
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://shareonline.in/wp-content/uploads/2016/06/flower-wallpaper-ios-papers.co-ad77-apple-red-on-white-lotus-iphone6-plus-ios8-flower-9-wallpaper-qKsVWC.jpg);
background-position: center;
background-size: 50vmin 50vmin;
box-shadow: inset -0.3vmin -0.3vmin 0 rgba(#000, 0.1), inset 0.3vmin 0.3vmin 0 rgba(#000, 0.1);
&:before {
position: absolute;
content: '';
@include size(53vmin, 37vmin);
background: $grey;
opacity: 0.2;
}
}
.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;
}
