HTML and CSS can really do wonders if utilized properly. Actually the power of all this lies in the CSS, styling of HTML elements.

Let’s jump right in, but first; I made a step by step video. Kindly subscribe, I’ll be sharing more and more design and development designs soon.

Design a smartphone in HTML and CSS

The HTML: Inside the body part, we have the following bunch of divs’. CSS will use the class selectors for styling.

The CSS: This will include playing around with the CSS to fit your desired design style. For me, the CSS below created the above smartphone.

html, body {

 width: 100%;  
 font-size: 16px;  
 box-sizing: border-box;  

}
body {
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #e40505;
}
.mobile {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.phone {
display: flex;
justify-content: center;
align-items: center;
width: 331px;
height: 616px;
background: #1a1a58;
border-radius: 30px;
padding: 10px;
}
.phone-mirror {
position: relative;
width: 328px;
height: 600px;
background-color: rgb(26, 25, 25);
border-radius: 30px;
}
.topWrapper {
position: relative;
width: 130px;
height: 20px;
margin: 0px auto 0 auto;
float: left;
left: 30%;
background-color: #232526;
border-radius: 0 0 45px 45px;
}
.line-rec {
position: relative;
width: 60px;
height: 6px;
margin: 0px auto 0 auto;
float: left;
left: 20%;
top: 4px;
background-color: rgb(83, 83, 82);
border-radius: 5px;
border: 1px solid rgb(214, 214, 214);
}
.camera {
position: relative;
float: left;
margin-right: 8px;
left: 18%;
width: 11px;
height: 11px;
top: 1px;
background-color: rgb(83, 83, 82);
border-radius: 30px;
border: 1px solid rgb(214, 214, 214);
}
.buttons {
background-color: black;
width: 100%;
height: 30px;
border-radius: 0 0 45px 45px;
}

With the above, you’ll get your smartphone on the web page. That’s just a little, but you can do more by playing around with the design(HTML & CSS).

Subscribe to DevSystems Youtube channel, as I’ll creating more content always. Find me on twitter @nicanor_nic