In this article, we are going to create an Apple iPhone like User Interface (UI) design using HTML and CSS.
Full Source Code Here :
<style type="text/css">
html,body {
height:100%;
}
.iphone {
margin:auto;
border:10px solid black;
border-radius:40px;
width:320px;
height:700px;
position:relative;
box-shadow:0px 20px 15px #33333335;
}
.notch {
z-index:50;
top:0;
left:62px;
position:absolute;
background:#000000;
width:200px;
height:30px;
border-radius:0px 0px 20px 20px;
}
.screen {
z-index:10;
position:absolute;
background:url("images/background.jpg");
background-size:cover;
width:100%;
height:100%;
border-radius:30px;
}
.icons {
margin-top:40px;
justify-content:center;
display:flex;
}
.icons div{
margin:10px;
z-index:100;
background:white;
width:50px;
height:50px;
border-radius:15px;
box-shadow:0px 5px 5px #33333340;
cursor:pointer;
transition: transform 400ms ease-in-out;
}
.app:nth-child(1) {
background:url("images/netflix.jpeg");
background-size:cover;
}
.app:nth-child(2) {
background:url("images/hbo-max.jpg");
background-size:cover;
background-position:center;
}
.app:nth-child(3) {
background:url("images/yes.jpg");
background-size:cover;
}
.app:nth-child(4) {
background:url("images/apple-tv.jpg");
background-size:cover;
background-position:center;
}
.app_2_row:nth-child(1) {
background:url("images/ebay.jpg");
background-size:cover;
background-position:center;
}
.app_2_row:nth-child(2) {
background:url("images/aliexpress.png");
background-size:cover;
background-position:center;
}
.app_2_row:nth-child(3) {
background:url("images/amazon.jpg");
background-size:cover;
background-position:center;
}
.app_2_row:nth-child(4) {
background:url("images/wish.png");
background-size:cover;
background-position:center;
}
.app_3_row:nth-child(1) {
background:url("images/coc.jpeg");
background-size:cover;
}
.app_3_row:nth-child(2) {
background:url("images/candy-crush.jpeg");
background-size:cover;
}
.app_3_row:nth-child(3) {
background:url("images/poker.jpg");
background-size:cover;
}
.app_3_row:nth-child(4) {
background:url("images/cod.png");
background-size:cover;
}
.app_4_row:nth-child(1) {
background:url("images/facebook.png");
background-size:cover;
}
.app_4_row:nth-child(2) {
background:url("images/messenger.svg");
background-size:cover;
}
.app_4_row:nth-child(3) {
background:url("images/whatsapp.png");
background-size:cover;
}
.app_4_row:nth-child(4) {
background:url("images/instagram.jpg");
background-size:cover;
background-position:center;
}
.icons div:hover{
transform:scale(0.8);
}
.camera{
position: absolute;
bottom: 8px;
right: 20px;
width: 1rem;
height: 1rem;
border-radius: 50%;
border: .2rem solid #1e1f22;
background: #447bb5a6;
}
.speaker{
position: absolute;
right: 3.9rem;
width: 5.2rem;
height: .6rem;
background: #333;
border-radius: .2rem;
}
</style>
<div class="iphone">
<div class="screen"></div>
<div class="icons">
<div class="app"></div>
<div class="app"></div>
<div class="app"></div>
<div class="app"></div>
</div>
<div class="icons">
<div class="app_2_row"></div>
<div class="app_2_row"></div>
<div class="app_2_row"></div>
<div class="app_2_row"></div>
</div>
<div class="icons">
<div class="app_3_row"></div>
<div class="app_3_row"></div>
<div class="app_3_row"></div>
<div class="app_3_row"></div>
</div>
<div class="icons">
<div class="app_4_row"></div>
<div class="app_4_row"></div>
<div class="app_4_row"></div>
<div class="app_4_row"></div>
</div>
<div class="notch">
<div class="camera"></div>
<div class="speaker"></div>
</div>
</div>
