SCSS
@mixin pseudo {
content: '';
position: absolute;
}
@mixin size($w, $h) {
width: $w;
height: $h;
}
@mixin round($w, $h) {
width: $w;
height: $h;
border-radius: 50%;
}
@mixin glow {
box-shadow: 0 0 5px 2px lighten(#00D8FF, 5%);
}
$green: #8ED444;
$teal: #63B4C9;
$orange: #ECA327;
$blue: #5A6376;
html {
background: teal;
}
body {
height: 100vh;
box-sizing: border-box;
}
.box {
@include size(600px, 600px);
position: relative;
top: 50px;
margin: auto;
}
.bg {
background: #9BCECB;
@include size(500px, 500px);
position: absolute;
border-radius: 40px;
top: 20px;
left: 50px;
overflow: hidden;
&:after {
@include pseudo;
@include size(500px, 450px);
background: rgba(black, 0.2);
top: 192px;
left: 160px;
transform: rotate(45deg);
}
}
.laptop {
@include size(300px, 200px);
background: #000;
border-radius: 10px;
position: absolute;
left: 150px;
top: 100px;
&:after {
@include pseudo;
@include size(270px, 160px);
background: #41D5FD;
left: 15px;
top: 15px;
}
&:before {
@include pseudo;
@include size(270px, 160px);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
background: #23CCFD;
z-index: 3;
top: 15px;
left: 15px;
}
}
.bottom {
@include size(320px, 200px);
position: absolute;
perspective: 50em;
left: 140px;
top: 250px;
.child {
@include size(320px, 200px);
background: #CDCDCD;
border-radius: 10px;
position: absolute;
transform: rotateX(50deg);
box-shadow: 0px 4px 0 #888888;
}
.touch-line1, .touch-line2, .touch-line3, .touch-line4, .touch-line5, .touch-line6 {
background: #000;
position: absolute;
border-radius: 3px;
left: 25px;
}
.touch-line1 {
@include size(20px, 10px);
top: 20px;
box-shadow: 25px 0 0 black,
50px 0 0 black,
75px 0 0 black,
100px 0 0 black,
125px 0 0 black,
150px 0 0 black,
175px 0 0 black,
200px 0 0 black,
225px 0 0 black,
250px 0 0 black;
}
.touch-line2 {
@include size(18px, 18px);
top: 35px;
box-shadow: 22px 0 0 black,
44px 0 0 black,
66px 0 0 black,
88px 0 0 black,
110px 0 0 black,
132px 0 0 black,
154px 0 0 black,
176px 0 0 black,
198px 0 0 black,
220px 0 0 black,
242px 0 0 black,
252px 0 0 black;
}
.touch-line3, .touch-line4 {
@include size(18px, 18px);
top: 58px;
box-shadow: 10px 0 0 black,
32px 0 0 black,
54px 0 0 black,
76px 0 0 black,
98px 0 0 black,
120px 0 0 black,
142px 0 0 black,
164px 0 0 black,
186px 0 0 black,
208px 0 0 black,
230px 0 0 black,
252px 0 0 black;
}
.touch-line4 {
top: 80px;
}
.touch-line5 {
@include size(18px, 18px);
top: 102px;
box-shadow: 5px 0 0 black,
27px 0 0 black,
49px 0 0 black,
71px 0 0 black,
93px 0 0 black,
115px 0 0 black,
137px 0 0 black,
159px 0 0 black,
181px 0 0 black,
203px 0 0 black,
225px 0 0 black,
247px 0 0 black,
252px 0 0 black;
}
.touch-line6 {
@include size(18px, 18px);
top: 124px;
box-shadow: 22px 0 0 black,
44px 0 0 black,
66px 0 0 black,
88px 0 0 black,
102px 0 0 black,
116px 0 0 black,
130px 0 0 black,
144px 0 0 black,
158px 0 0 black,
164px 0 0 black,
186px 0 0 black,
208px 0 0 black,
230px 0 0 black,
252px 0 0 black;
}
.pad {
@include size(70px, 42px);
position: absolute;
border: 1px solid darkgrey;
bottom: 7px;
left: 125px;
border-radius: 3px;
box-shadow: inset 1px 1px 0 darkgrey;
}
}
