HTML CSS Create iphone Mobile Layout

HTML CSS Iphone mobile layout we will create in this today article. in html && css language you can also create real shape like mobile, tablet and a lot of more real objects you can create.

Part 01 iPhone Layout:

HTML CSS both are very popular languages for creating and designing the web pages. In this article we will create amazing HTML CSS iPhone mobile layout, the design which we are creating in this article is same like real mobile shape. In this article, we will create a lot of iPhone mobile shapes.

 so now let's get started, first we need HD quality picture for background and second we need a wallpaper for background image download  HD quality image from the pixabay website and we don't need font awesome library because in this article we will not use any font awesome icon. so let's get started to create an index.html page and copy the below code and paste in your an index.html page.
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Create Simple Iphone Mobile Layout</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="mobile"> 
 </div>
</body>
</html>
Now Create Style.css file and copy the below code and paste in your style.css file
body{
 margin:0;
 padding:0;
 background: url("city-cars-traffic-lights.jpeg");
 background-size: cover;
 background-repeat: no-repeat;
}
.mobile{
 width: 250px;
 height: 400px;
 border-top: 60px solid #fff;
 border-bottom: 60px solid #fff;
 border-left: 13px solid #fff;
 border-right: 13px solid #fff;
 background: url("download.jpg");
 background-repeat: no-repeat;
 background-size: 100% 100%;
 float: right;
 margin:50px 100px;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 -ms-border-radius: 30px;
 -o-border-radius: 30px;
 border-radius: 30px;
 position: relative;
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
 box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.mobile::after{
 position: absolute;
 content: "";
 left: 40%;
 width: 40px;
 height: 40px;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 -ms-border-radius: 100%;
 -o-border-radius: 100%;
 border-radius: 100%;
 border:2px outset #ccc;
 bottom: -50px;
}
.mobile::before{
 position: absolute;
 content: "";
 left: 40%;
 width: 60px;
 height: 4px;
 background: #ccc;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px;
 top: -30px;
}
Now Save your file and open your index.html page in your favorite browser and you are done!.
watch youtube video here

COMMENTS

Name

bootstrap,1,CSS,6,Example,3,HTML,6,login,1,mysql,3,PHP,5,
ltr
item
webtipstricks: HTML CSS Create iphone Mobile Layout
HTML CSS Create iphone Mobile Layout
HTML CSS Iphone mobile layout we will create in this today article. in html && css language you can also create real shape like mobile, tablet and a lot of more real objects you can create.
https://3.bp.blogspot.com/-wf7WtZNNto4/WcToKt3_JqI/AAAAAAAABVo/CcQ0j_UuNRsg52gFGiI2JwVyvRHd07dLgCLcBGAs/s640/html%2Bcss%2Biphone%2Bmobile%2Blayout.jpg
https://3.bp.blogspot.com/-wf7WtZNNto4/WcToKt3_JqI/AAAAAAAABVo/CcQ0j_UuNRsg52gFGiI2JwVyvRHd07dLgCLcBGAs/s72-c/html%2Bcss%2Biphone%2Bmobile%2Blayout.jpg
webtipstricks
http://www.webtipstricks.com/2017/09/html-css-create-iphone-mobile-layout.html
http://www.webtipstricks.com/
http://www.webtipstricks.com/
http://www.webtipstricks.com/2017/09/html-css-create-iphone-mobile-layout.html
true
4027471107773963481
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy