IPhone UI design using HTML and CSS

0
1128

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>

 

ALSO READ  Display Hide HTML Element on Scroll using JQuery

Comments are closed.