xl-mobile

by Shoaib Chikate

HTML

<div class="phone" style="margin-left:20%;">
	<div class="glare-p"></div>
	<div class="screen-p">
		<img src="https://mybinja.com/dev/wp-content/uploads/2014/07/timesheetMobileView.png" alt="phone" />  
	</div>
	<div class="camera-p"></div>
	<div class="addons-p"></div>
	<div class="side-buttons-p"></div>
	<div class="dividers-p"></div>
	<div class="button-p"></div>
</div>

CSS

/*Phone css starts here*/


.phone:before {
    background: none repeat scroll 0 0 padding-box #D3D4D6;
    border-color: #CECECE #B7B7B9 #5E5D62;
    border-radius: 30px;
    border-style: solid;
    border-width: 1px;
    bottom: 0;
    content: "";
    height: 380px;
    left: 0;
    margin-bottom: -1px;
    margin-left: -5px;
    margin-top: -6px;
    position: absolute;
    top: 0;
    width: 214px;
    z-index: -3;
}
.phone.rotate:before {
    height: 214px;
    width: 380px;
}
.phone.white:before {
    background: none repeat scroll 0 0 #E7E8EB;
    border-color: #EBEBEB #CBCBCD #949397;
}
.phone:after {
    background: none repeat scroll 0 0 padding-box #2B2C2E;
    border: 1px solid #BDBEC0;
    border-radius: 28px;
    bottom: 0;
    content: "";
    height: 376px;
    left: 1px;
    margin-bottom: -1px;
    margin-left: -4px;
    margin-top: -6px;
    position: absolute;
    top: 2px;
    width: 210px;
    z-index: -2;
}
.phone.rotate:after {
    height: 210px;
    width: 376px;
}
.phone.white:after {
    background: none repeat scroll 0 0 padding-box #F1F1F1;
    border: 1px solid #DADADA;
}
.phone {
    background: none repeat scroll 0 0 padding-box #010101;
    border: 1px solid #101113;
    border-radius: 28px;
    display: inline-block;
    height: 369px;
    position: relative;
    width: 199px;
    z-index: 101;
}
.mini.phone {
    transform: scale(0.7);
}
.phone.rotate {
    height: 199px;
    width: 369px;
}
.phone.white {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #EAEAEA;
}
.screen-p:before {
    background: none repeat scroll 0 0 padding-box #000000;
    border-radius: 25px;
    content: "";
    height: 370px;
    left: 1px;
    position: absolute;
    top: 0;
    width: 204px;
    z-index: 3;
}
.rotate .screen-p:before {
    height: 204px;
    width: 370px;
}
.white .screen-p:before {
    background: none repeat scroll 0 0 #F5F5F5;
}
.screen-p:after {
    background: -moz-linear-gradient( top , #0A0A0A 0%,...