Pure CSS iPhone Template

Posted: 3/19/21

Code Resource

      
        
HTML
        <div class="container">
        <div class="phone"></div>
        <div class="gradient">
          <img src="images/apple.png" class="apple-logo" />
        </div>
        <div class="head-bar"></div>
        <div class="btn-switch"></div>
        <div class="btn-volume-1"></div>
        <div class="btn-volume-2"></div>
      </div>

     
CSS
     .container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom:90px;
      margin-top: 30px;
      position: relative;
    }
    .phone {
      width: 200px;
      height: 464px;
      border-radius: 60px;
      background-color: #606060;
      filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.3));
    }
    .gradient {
      width: 220px;
      height: 464px;
      border-radius: 60px;
      border: 10px black solid;
      background-image: url("img/gradient.jpg");
      background-size: cover;
      background-position: center center;
      filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.3));
      position: absolute;
      top: 0px;
    }
    .head-bar {
      background-color: #000;
      width: 120px;
      height: 27px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      position: absolute;
      top: 0px;
    }
    .btn-switch {
      background-color: #000;
      width: 9px;
      height: 40px;
      border-radius: 4.5px;
      position: relative;
      bottom: 150px;
      left: -209px;
    }
    .btn-volume-1 {
      background-color: #000;
      width: 9px;
      height: 70px;
      border-radius: 4.5px;
      position: relative;
      bottom: 80px;
      left: -218px;
    }
    .btn-volume-2 {
      background-color: #000;
      width: 9px;
      height: 70px;
      border-radius: 4.5px;
      position: relative;
      bottom: px;
      left: -227px;
    }
    .apple-logo {
      max-width: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      filter: drop-shadow(0px 0px 30px rgba(255, 255, 255, 0.2));
    }