Design a Smartphone in HTML and CSS

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.

https://medium.com/media/393e0ab76e81578c09240c8d605f09d5/hrefThe HTML: Inside the body part, we have the following bunch of divs’. CSS will use the class selectors for styling.

<div class="mobile">

<div class="phone">

<div class="phone-mirror">

<div class="topWrapper">

<div class="camera"></div>

<div class="line-rec"></div>

</div>

<img src="../images/oppo.png" alt="oppo" height="535" width="312">

</div>

</div>

</div>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