Minimal Flat Devices *Responsive*

index.html

<h1>Resize Window</h1>
<div class="container">
  <div class="device">
		<div class="frame">
			<div class="screen">
        <!-- Add Some Pages In Here -->
        
			</div>
		</div>
  </div>
</div>




<!-- Connect with me on my Social Networks -->
<div class="social">
  <ul>
    <li>Friend Me:</li>
    <li><a target="_BLANK" href="https://twitter.com/Shak_Dizzle">
      <i class="fa fa-twitter"></i> twitter</a></li>
    <li><a target="_BLANK" href="http://instagram.com/shak_dizzle">
      <i class="fa fa-instagram"></i> instagram</a></li>
    <li><a target="_BLANK" href="http://dribbble.com/cdnyc">
      <i class="fa fa-dribbble"></i> dribbble</a></li>
  </ul>
</div>

Minimal-Flat-Devices-*Responsive*.markdown

Minimal Flat Devices Responsive

Minimal yet very detailed.

Forked from Shak Dizzle's Pen Minimal Flat Devices Responsive.

A Pen by Giovani Oliveira on CodePen.

License.

style.css

@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";

html,body{width:100%;height:100%;overflow:hidden;background:rgba(100,190,170,1);font-size:1em;}
*{margin:0;padding:0}
.container{text-align:center}
.container,.device,.frame,.screen{
  transition:all .5s ease-in-out;
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
}
/* Mobile */
.device{
  display:inline-block;
  margin:10px auto;
}
.frame{
  border-radius:25px;
  padding:50px 2px;
  background:#ddd;
  box-shadow:
    0 0 0 1px #ccc;
}
.screen{
  position:relative;
  height: 300px;
  width: 200px;
  background:#444;
  box-shadow:inset 0 0 0 1px #333;
}
.screen:before,.screen:after{
  position:absolute;
  width:32px;
  left:50%;
  margin-left:-16px;
  border-radius:16px;
  content:" ";
  background:#bbb;
  box-shadow:0 0 0 1px #eee;
}
.screen:before{
  height:8px;
  top:-29px;
}
.screen:after{
  height:32px;
  bottom:-41px;
}

/* Tablet */
@media all and (min-width:600px){
	.screen{
		height:440px;
		width:360px;
	}
	.screen:before{
	  width: 10px;
		height:10px;
    top:-30px;
		margin-left:-5px;
	}
}

/* Desktop */
@media all and (min-width:960px){
  .frame{
    padding:30px 2px 2px;
    border-radius:10px;
  }
	.screen{
		height:510px;
		width:900px;
    border-radius:0 0 10px 10px;
	}
	.screen:before{
		width:10px;
		height:10px;
    top:-20px;
		left:15px;
    background:rgba(255,100,100,1);
    box-shadow:
      15px 0 rgba(100,255,100,1),
      30px 0 rgba(255,255,100,1);
	}
  .screen:after{
    width:90%;
    height:16px;
    top:-23px;
		left:10%;
    border-radius:5px;
    background:#eee;
  }
}







/* Connect with me on my Social Networks */
h1{
  text-align:center;
  padding:8px;
  color:#eee;
  letter-spacing:1px;
  font-family:sans-serif;
  font-size:100%;
  font-weight:bolder;
}
a{color:#ccc;text-decoration:none;}
a:hover{cursor:pointer;color:#fff;}
.social{
  position:absolute;
  width:100%;
  height:auto;
  bottom:0;
  background:rgba(0,0,0,.25);
  text-align:center;
  padding:8px 0;
}
.social li{
  display:inline;
  padding:8px;
  color:rgba(255,255,255,1);
  letter-spacing:1px;
  font-family:sans-serif;
  font-size:100%;
}