How to create iphone layout on a web page using CSS ? amitoverflow blog

Drawing an iphone on webpage using CSS

Learn how to create an iphone simple layout using css.

Live demo on codpen

See the Pen Iphone x by AmitSoftware (@AmitSoftware) on CodePen.

---

CSS for iphone layout

.container
{
  overflow:auto;
width:100%;
height:700px;
background-color:rgb(144,0,0);
}
#phone
{
margin-top:50px;
margin-left:auto;
margin-right:auto;
text-align:center;
border-radius:20px;
border:5px solid white;
width:280px;
height:600px;

}
#phoneheader
{
background-color:white;
padding:0;
margin:0;
height:50px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#phonecamera
{
background-color:rgb(240,240,240);
border:1px solid gray;
border-radius:50%;
width:16px;
height:16px;
float:right;
display:block;
margin-right:25px;
margin-top:10px;

}

#phonespeaker
{
border:1px solid gray;
width:120px;
height:20px;
border-radius:10px;
float:left;
margin-top:20px;
margin-left:60px;

}
#screen
{
width:100%;
height:500px;
background-color:black;
}

#phonefooter
{
background-color:white;
height:50px;
bottom:0;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
overflow:auto;
}
#homebutton
{

margin-left:auto;
margin-right:auto;
margin-top:5px;
border-radius:50%;
border:2px solid gray;
width:35px;
height:35px;
}

HTML for iphone layout

​<div class="container">


<div id="phone">

<div id="phoneheader">
<div id="phonecamera">
</div>
<div id="phonespeaker">
</div>

</div>

<div id="screen">
</div>

<div id="phonefooter">
<div id="homebutton">
</div>

</div>

</div>

</div>

HTML output: