phone

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@200&display=swap" rel="stylesheet">


<body>
  <div class="main">
    <div class="phone">
        <div class="top-1">
        <div class="top1"> </div>
      </div>
          <div class="top">
        <div class="top2"> </div>
        <div class="top3"> </div>
      </div>
      <div class="display">
        <div class="display2">
          <img src="https://png2.cleanpng.com/sh/4d25e89dc4a28a95d49d5e3c6867e92f/L0KzQYm3U8MxN5VpfZH0aYP2gLBuTfFxeJ1qRd54Z3Awc7F0kQV1baMygdV4boOwccH3jPUudJDsh58AYXLndrTrU8QxQGFrTJCDOEm4Q4K9U8E2OmM5SKI9Nke1RoW5TwBvbz==/kisspng-apple-logo-computer-icons-apple-logo-5abdfcd34080f4.8895316315224004672642.png" width="60" height="60">
        </div>
      </div>
      <div class="bottom">
        <div class="box"> </div>
        </div>
  </div>

  </div>
</body>

index.html

body {
    margin:0;
    padding:0;

  }

  .main {
        background: black;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }

  .phone{
    background-color: #f0f0f0;
    border-radius: 2em;
    width: 18em;
    height: 35em;
    display:flex;
    justify-content: center;
    flex-direction: column;
  }

  .top {
    background-color: #f0f0f0;
    border-radius: 1.7em;
    width: 18em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
  }

  .top-1 {
    background-color: #f0f0f0;
    border-radius: 1.7em;
    width: 1.5em;
    height: 1em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
  }

  .top1{
   background: rgb(7,32,117);
  background: radial-gradient(circle, rgba(7,32,117,1) 6%, rgba(0,0,0,1) 51%);
    border-radius: 0.5em;
    width: 1em;
    height: 1em;
  }

  .top2{
    background-color:black;
    border-radius: 0.5em;
    width: 0.5em;
    height: 0.5em;
  }

  .top3{

    background-color: black;
    border-radius: 0.5em;
    width: 3.5em;
    height: 0.4em;
  }


  .display{
    background-color: black;
    border-radius: 0.5em;
    width: 17em;
    height: 27em;
    display:flex;
    align-self: center;
    justify-content: center;
    align-items: center;
  }

  .display2 {
    background-color: black;
    border-radius: 0.3em;
    width: 16.5em;
    height: 26.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: mymove 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
  }


  @keyframes mymove {
    from {background-color: black;}
    to {background-color: white;}
  }



  .bottom{
    border-radius: 1.7em;
    background-color: #f0f0f0;
    width: 18em;
    height: 4em;
    display:flex;
    justify-content: center;
    align-items: center;
  }


  .box {
        border-radius: 2em;
        width: 3em;
        height: 3em;
        background: #f0f0f0;
        box-shadow:  5px 5px 5px #cccccc,
                     5px 5px 5px #ffffff,
                     0 0 0 #cccccc inset,
                     0 0 0 #ffffff inset;
        /* animation-fill-mode: forwards; */
        align-self: center;
        animation: anime 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.5s;
    animation-delay: 1s;
      }



  @keyframes anime {
        0% {
          width: 3em;
          height: 3em;
          background: #f8f8f8;
          box-shadow:  5px 5px 5px #cccccc,
                     5px 5px 5px #ffffff,
                       0 0 0 #cccccc inset,
                       0 0 0 #ffffff inset;
    }
          100% {
          width: 3em;
          height: 3em;
          background: #f0f0f0;
          box-shadow:  0 0 0 #cccccc,
                       0 0 0 #ffffff,
                        10px 10px 10px #cccccc inset,
                        -10px -10px 10px #ffffff inset;
        }

  }
       /* 50% {
          width: 60px;
          height: 240px;
          background: #f8f8f8;
          box-shadow:  10px 10px 10px #cccccc,
                       10px 10px 10px #ffffff,
                       0 0 0 #cccccc inset,
                       0 0 0 #ffffff inset;
        }
        100% {
          width: 240px;
          height: 60px;
          background: #fafafa;
          box-shadow:  40px 40px 40px #cccccc,
                       0 0 0 #ffffff,
                       0 0 0 #cccccc inset,
                       2px 2px 2px #ffffff inset;
        }

index.html

index.css