Long Shadow Lapotop

HTML
<body> <div class="box"> <div class="bg"></div> <div class="laptop"></div> <div class="bottom"> <div class="child"> <div class="touch-line1"></div> <div class="touch-line2"></div> <div class="touch-line3"></div> <div class="touch-line4"></div> <div class="touch-line5"></div> <div class="touch-line6"></div> <div class="pad"></div> </div> </div> </div> </body>
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; } }
JAVASCRIPT
Expand for more options Login