IPhone UI design using HTML and CSS

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>