eJBBKN

eJBBKN.markdown

eJBBKN

A Pen by Avinash Seth on CodePen.

License.

index.html

<div class="box">
  <div class="top">
    <div class="upper">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <div class="screen">
  
  </div>
  <div class="bottom">
    <button></button>
  </div>
</div>

style.css

.box{
  height: 400px;
  width: 220px;
  margin: 50px auto;
  background: #fff;
  border: 5px solid black;
  border-radius: 20px;
  position: relative;
  .top{
    height: 40px;
    width: 100%;
    top: 0px;
    left: 0px;
    .upper{
      height:10px;
      width: 80px;
      margin: 5px auto 0px auto;
      background:red;
      ul{
        width: 60px;
        background: black;
        height: 8px;
        margin-left: 3px;
        li{
          float: left;
          list-style: none;
          height: 3px;
          width: 3px;
          background: white;
          margin-left: 2px;
          margin-top: 2px;
          border-radius: 5px;
        }
      }
    }
  }
  .screen{
    height: 320px;
    width: 210px;
    border-radius: 3px;
    position: absolute;
    top: 40px;
    left: 5px;
    background: black;
  }
  .bottom{
    height: 40px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    button{
      height: 20px;
      width: 50px;
      background: red;
      margin: 10px 85px;
      border-radius: 10px;
      background: white;
      outline: none;
    }
  }
}