index.css

/**
 * iPhone 5 Template.
 *
 *    *.iphone-5-template
 *      *.iphone-5-template-body
 */

.iphone-5-template {
  position: relative;
  display: block;
  width: 388px;
  height: 801px;
  margin: -4px -6px -3px -6px; /* line up iphone edges with box by default */
  background: url(images/iphone-5-portrait.png) top left no-repeat transparent;
}


/**
 * The glare. By default, `::after` should put it on top of its contents.
 */

.iphone-5-template::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(images/iphone-5-portrait-glare.png) top left no-repeat transparent;
}


/**
 * Screen content.
 */

.iphone-5-template-body {
  position: absolute;
  width: 320px;
  height: 568px;
  top: 118px;
  left: 34px;
  overflow: hidden;
}


/**
 * Orientation.
 */

.iphone-5-template[data-orientation="landscape"] {
  width: 806px;
  height: 387px;
  background-image: url(images/iphone-5-landscape.png);
}

.iphone-5-template[data-orientation="landscape"]::after {
  background-image: url(images/iphone-5-landscape-glare.png);
}

.iphone-5-template[data-orientation="landscape"] .iphone-5-template-body {
  width: 568px;
  height: 320px;
  top: 34px;
  left: 118px;
}


/**
 * Variations.
 */

.iphone-5-template[data-variation="no-shadow"] {
  height: 798px;
  margin-bottom: 0;
  background-image: url(images/iphone-5-portrait-no-shadow.png);
}

.iphone-5-template[data-variation="reflection"] {
  height: 906px;
  margin-bottom: -108px; /* account for shadow and reflection */
  background-image: url(images/iphone-5-portrait-reflection.png);
}

.iphone-5-template[data-variation="no-shadow"][data-orientation="landscape"] {
  height: 381px;
  margin-bottom: 0;
  background-image: url(images/iphone-5-landscape-no-shadow.png);
}

.iphone-5-template[data-variation="reflection"][data-orientation="landscape"] {
  height: 481px;
  margin-bottom: -108px; /* account for shadow and reflection */
  background-image: url(images/iphone-5-landscape-reflection.png);
}