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.

Download the images used in the webpage from here : Download Images

Source Code :

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

Follow this video for complete guidance :

 

Recommended For You

About the Author: Ritesh Ghimire

Ritesh is a Computer Engineer, Web Developer and an active cricket follower.