A Pen by Stan Williams.

A-Perfect-Minimal-iPhone-Template.markdown

A Perfect Minimal iPhone Template

Haha just bored. The dimensions are almost exact, I rounded them to one decimal and converted to em units so you can scale it to any size. Horizontal version also included.

A Pen by Stan Williams on CodePen.

License.

index.html

<div class="iphone">
  <!-- Just put your stuff in here --> <center><p></p>

  <li><a href="#"> Link</a></li>
  <li><a href="#"> Link</a></li>
  <li><a href="#"> Link</a></li><p></p>
  <img src="http://placekitten.com/g/120/100"><p></p>
		</ul>&nbsp;Suspendisse accumsan et est nec bibendum. Vivamus sodales mollis ultrices. </center>
</div>

<div class="iphone horizontal">
  <!-- Just put your stuff in here --><center> <img src="http://placekitten.com/g/100/100">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan et est nec bibendum. Vivamus sodales mollis ultrices. </center>
</div>

script.js

 /*
Forked and modified by Stan Williams http://stanwilliams.net http://stans-songs.com  http://codepen.io/Stanssongs

*/ 

style.scss

@import "compass";

.iphone {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  border: solid #0d0d10;
  
  $width: 11.7em;
  
  width: $width; height: ($width*1.78);
  border-width: ($width*0.36) ($width*0.094);
  border-radius: ($width*0.154);

  &.horizontal {
    width: ($width*1.78); height: $width;
    border-width: ($width*0.094) ($width*0.36);
  }
}

body { background:#7d7d7d; margin:0 }
.iphone { margin:30px auto }