Build IPad with pure CSS

Let's build Ipad with Pure CSS , i Like it . . Great ? Thanks to Apple and Codepen. :Before and :After are very helpful. Lets do It

.ipad {
	margin: 0;
	display: block;
	position: relative;
	background: #e8e7e6;
	width: 268px;
	height: 314px;
	padding: 2px;
	border: 1px solid #868381;
	-webkit-border-radius: 25px;
	   -moz-border-radius: 25px;
	        border-radius: 25px;
	-webkit-box-shadow: #c1bfbf 0 0 0 1px;
	   -moz-box-shadow: #c1bfbf 0 0 0 1px;
	        box-shadow: #c1bfbf 0 0 0 1px;
	-webkit-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
    	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
    -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
box-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);

}

.ipad:after {
	content: '';
	width: 15px;
	height:15px;
	position: absolute;
	top: 14px; 
	left: 126px;
  border-radius: 50px;
	background: rgba(0,0,0,0.7);
	-webkit-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	   -moz-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	        box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
}

.ipad:before {
	content: '';
	width: 215px;
	height: 225px;
	position: absolute;
	top: 46px; 
	left:26px;
	z-index: 0;
	background: url(http://cdn1.iconfinder.com/data/icons/social/128/picons46.png)no-repeat center center #1c1a1a;
	-webkit-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	   -moz-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
	        box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
}
.ipad2 {
  width: 32px; 
  height: 32px;
  background: transparent;
  left: 122px;
  border: 2px solid #dbdbdb;
  bottom: 42px;
  position: relative;
  border-radius: 50px;
}
.ipad2:before{
  content: '';
	width: 14px;
	height: 14px;
	position: absolute;
	top: 7px; 
	left:7px;
	border-radius: 4px;
  border: 2px solid #bfbfbf;
}

Code above included, 3D effect , Shadow, Screen background, and all of the parts.

The HTML

<div class='ipad'></div>

<div class='ipad2'></div>

Boyaa....... Finish . Suprise... See this Big Ipad .

Update

Soon , i will add jquery Slide to Unlock.