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.
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.
<i class="iphone-5s"></i> |
// by @AliKhalilifar |
* { 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; | |
} | |
} |