CSS Pure Flat iPhone 5S

CSS-Pure-Flat-iPhone-5S.markdown

CSS Pure Flat iPhone 5S

Flat iPhone 5S made with pure CSS

Forked from Ali Khalilifar's Pen CSS Pure Flat iPhone 5S.

A Pen by Giovani Oliveira on CodePen.

License.

index.html

<i class="iphone-5s"></i>

script.js

// by @AliKhalilifar

style.scss

* { margin:0; padding:0; }

$background-color: #EC5F51;
$iphone-screen-color: #5C5C5C;
$iphone-body-color: #ECF0F1;
$iphone-home-button-color: #D5D5D5;
$iphone-perspective-visual-color: #D2D7D8;
$iphone-earphone-color: #5C5C5C;

body { 
  background: $background-color;
}

.iphone-5s {
  width: 30px;
  height: 30px;
  background: $iphone-screen-color;
  display: inline-block;
  width: 11.7em;
  height: 19.826em;
  border-radius: 1.4018em;
  border: 1px solid $iphone-body-color;
  border-width: 3.712em .9em;
  box-shadow: 0 7px $iphone-perspective-visual-color;
  position: relative;
  left: 50%;
  top:50%;
  margin-left: -5.85em;
  margin-top: 2em;
&:before {
  content: "";
  width: 50px;
  height: 5px;
  background: $iphone-earphone-color;
  position: absolute;
  z-index: 99999;
  top: -30px;
  margin: 0 auto;
  border-radius: 10px;
  left: 69px;
  }
&:after {
  content: "";
  border-radius: 50%;
  bottom: -48px;
  position: absolute;
  border: 4px solid $iphone-home-button-color;
  width: 30px;
  height: 30px;
  left: 75px;
  }
}