0
(0)

Last Updated on May 23, 2021 by Amit

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:

iPhone made with css

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.