Laptop css

by Shoaib Chikate

HTML

<div class="laptop">
	<div class="glow-l"></div>
	<div class="screen-l">
		<img src="https://mybinja.com/dev/wp-content/uploads/2014/04/dashboard.png" alt="laptop" />  
	</div>
	<div class="base-l top-base-shadow"></div>
	<div class="addons-l "></div>
	<div class="button-l"></div>
</div>

CSS

/*Laptop css starts here*/


.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: 235px;
    left: 0;
    margin-bottom: -1px;
    margin-left: -6px;
    margin-top: -6px;
    position: absolute;
    top: 0;
    width: 399px;
    z-index: -3;
}
.slim.laptop:before {
    background-color: #E3E4E8;
    border-color: #CECECE #B7B7B9;
    border-radius: 15px 15px 6px 6px / 15px 15px 14px 14px;
}
.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: 234px;
    left: 1px;
    margin-bottom: -1px;
    margin-left: -5px;
    margin-top: -6px;
    position: absolute;
    top: 2px;
    width: 395px;
    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: 389px;
}
.slim.laptop {
    background: none repeat scroll 0 0 #E3E4E8;
    border-color: rgba(0, 0, 0, 0);
    border-radius: 10px / 12px;
}
.slim.laptop:after {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #000000;
    border-radius: 14px 14px 9px 9px / 14px;
}
.mini.laptop {
    transform: scale(0.85);
}
.screen-l:before {
    background: -moz-linear-gradient(center top , #303235 0%, #0A0A0A 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
    border-color: #000000;
    border-radius: 7px 7px 0 0;
    border-style: solid;
    border-width: 9px 7px;
    content: "";
    height: 195px;
    left: -6px;
    position: absolute;
    top: -5px;
    width: 364px;
    z-index: 3;
}
.slim .screen-l:before {
    border-color: #E3E4E8;
}
.screen-l:after {
   ...