all reset
☀ Lights
Netbax Online Editor Try it Yourself
Run
HTML
reset
copy
CSS
reset
copy
.laptop { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(.6) translate(-50%); transform: scale(.6) translate(-50%); left: 50%; position: absolute; width: 1366px; height: 800px; border-radius: 6px; border-style: solid; border-color: black; border-width: 24px 24px 80px; background-color: black; } .laptop:after { content: ''; display: block; position: absolute; width: 1600px; height: 60px; margin: 80px 0 0 -110px; background: black; border-radius: 6px; } .laptop:before { content: ''; display: block; position: absolute; width: 250px; height: 30px; bottom: -110px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); background: #f1f1f1; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; z-index: 1; } .laptop .content { width: 1366px; height: 800px; overflow: hidden; border: none; }