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

December 7, 2019 0 Comments

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 …