Pure CSS iPhone

HTML
<body> <div class="content"> <div class="phone_outer"> <div class="phone_inner"> <div class="top_camera"></div> <div class="camera"></div> <div class="speaker"></div> <div class="phone_screen"> </div> <div class="home_btn"></div> <div class="shine"></div> </div> </div> </div> </body>
CSS
html, body { height: 100%; width: 100%; } body{ background: #f46b45; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #eea849, #f46b45); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #eea849, #f46b45); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; } .phone_outer{ width:225px; height:405px; border-radius:23px; background-color:#B77B6E; } .phone_inner{ position:relative; width:219px; height:400px; border-radius:20px; background-color:white; left:2.5px; top:2.5px; overflow:hidden; } .top_camera{ height:3px; width:3px; border-radius:50%; position:absolute; display:inline-block; left:108px; top:10px; background-color:black; } .camera{ height:8px; width:8px; border-radius:50%; position:absolute; display:inline-block; left:70px; top:18px; background-color:black; } .speaker{ position:relative; width:40px; height:3px; background-color:black; border-radius:20%; left:90px; top:20px; border:1.5px inset; } .phone_screen{ width:200px; height:310px; border-radius:2px; left:10px; top:35px; position:relative; background-color:black; overflow:hidden; } .home_btn{ position:relative; width:30px; height:30px; border-radius:50%; background-color:white; border:2px inset #B77B6E; left:92.5px; top:45px; } .shine{ opacity:0.1; height:500px; width:300px; position:relative; top:-350px; left:-100px; background-color:gray; transform:rotate(-20deg) translateX(-30px) translateY(-20px); }
JAVASCRIPT
Expand for more options Login