Pure CSS iPad Construction

Huh... my work now is Build pure CSS ipad portrait in real size. Very huge. See it HERE. WIith some Jquery it become Attractive. There are same features with the Real iPad

• Same Size
• iPad Status : OFF / ON with Button

I Like it , i will share it with you too. Let me do it first. You can build the Mini first Here. The iPad can Boost  your skills like CSS, Jquery, HTML. 

Update

• Slide To Unlock + Letter animation
• Home Page Icons
• iPad Style Alert

Slide to unlock slider i got from Chris Coyier, Really great but the slider is Image, I trying to build the Slider with out Image, CSS only Image Not permitted. 

I Build it with my CSS, HTML, and My Jquery.

To Show and Hide the Clock, Date, Header, Headline i use Opacity Set it 0 to hide it and set it 1 to show it with Jquery

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.

Responsive design for Twepenn

Yup, my first post. New responsive design more valuable on mobile. Hmm... i glad to share it with you too. Simpler and responsive. Very easy and cool

CSS

@media screen and (max-width: 1100px) {
.main-wrapper{  margin: 0 !important;  width:100%;  min-height: 0px;  }
.sidebar-wrapper{   position:relative; top:auto;  right:auto;  clear:both;  left:auto;  padding: 0;  width:auto;  background: none;  }
.sidebar-wrapper .widget {  border: none;  margin: 0px auto 10px auto;  padding: 10px 20px;  }
}
@media screen and (max-width: 960px) {
#header {  float:none;  max-width:none;  text-align:center;  }
#header-inner {  margin-bottom:0px;  }
#header h1 {  margin-right:0px;  }
#header p.description {  margin:0;  }
.main-nav-main ul {  text-align: center;  }
.main-nav-main li {  float: none;  }
.footer-bottom .attribution{  text-align: center;  }
}
@media screen and (max-width: 850px){
#header h1, #header h1 a {  font-size: 50px;  line-height: 350%;  }
.page-header .inner .ct-wrapper {  padding: 0 48px; }
}
@media screen and (max-width: 768px){
.header-wrapper {  margin-right: 0;  width: 100%;  }
#header {  text-align: center;  width: 100%;  max-width: none;  }
#header-inner {   margin:30px 0 0;  }
.main-nav-main {  border-bottom: 0;  }
.home-featured-1, .home-featured-2, .home-featured-3, .home-featured-4 {  padding: 20px 0;  width: 50%;  }
.outer-wrapper {  padding: 0;  }
#content {  padding: 5px;  clear: both;  }
#comment-editor {  margin:10px;  }
}
@media screen and (max-width: 500px){
#header img {  width:100%;  }
#header h1, #header h1 a {  font-size: 28px;  }
.page-header .inner .ct-wrapper {  padding: 0 10px; }
.home-featured-1, .home-featured-2, .home-featured-3, .home-featured-4 {  padding: 20px 0;  width: 100%;  }
.post-outer {  width: 100% !important;  }
}
@media screen and (max-width: 420px){
.comments .comments-content .datetime{  display:block;  float:none;  }
.comments .comments-content .comment-header {  height:70px;  }
}
@media screen and (max-width: 320px){
.comments .comments-content .comment-replies {  margin-left: 0;  }
}

Responsive on ?

The device's below, tested 100% responsive.

iPhone 3+4

iPhone 5

Crappy Android

Android (Samsung Galaxy)

iPad

Kindle

Still confused ?

Check It