CSS
.laptop:before {
background: none repeat scroll 0 0 padding-box #d3d4d6;
border-color: #cecece #b7b7b9 #5e5d62;
border-radius: 12px 12px 0 0;
border-style: solid;
border-width: 1px;
bottom: 0;
content: "";
height: 317px;
left: 0;
margin-bottom: -1px;
margin-left: -6px;
margin-top: -6px;
position: absolute;
top: 0;
width: 536px;
z-index: -3;
}
.laptop:after {
background: none repeat scroll 0 0 padding-box #000000;
border: 1px solid #bdbec0;
border-radius: 10px 10px 0 0;
bottom: 0;
content: "";
height: 311px;
left: 1px;
margin-bottom: -1px;
margin-left: -5px;
margin-top: -6px;
position: absolute;
top: 2px;
width: 532px;
z-index: -2;
}
.laptop {
background: none repeat scroll 0 0 padding-box #010101;
border: 1px solid #101113;
border-radius: 8px 8px 0 0;
display: inline-block;
height: 230px;
margin-bottom: 40px;
margin-left: 60px;
position: relative;
width: 528px;
}
.glare-xl {
background-clip: padding-box;
background-image: -moz-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
background-image: -webkit-gradient(linear,-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
background-image: -ms-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
background-image: -o-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
background-image: linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
border-radius: 7px 7px 0 0;
height: 308px;
position: absolute;
top: -1px;
width: 610px;
z-index: 100;
}
.screen-xl:before {
background: -moz-linear-gradient(center top , #303235 0%, #0a0a0a...