<div class="container">
    <div class="board">
        <div class="headerModal">
            <h1>Monthly bills</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="bodyModal">
            <div class="bars">
                <div class="bar">
                    <div class="ba" style="height: 82%;"></div>
                </div>
                <div class="values">
                    <p>$ 200</p>
                    <span>10/09</span>
                </div>
            </div>
            <div class="bars">
                <div class="bar">
                    <div class="ba" style="height: 20%;"></div>
                </div>
                <div class="values">
                    <p>$ 200</p>
                    <span>10/09</span>
                </div>
            </div>
            <div class="bars">
                <div class="bar">
                    <div class="ba" style="height: 38%;"></div>
                </div>
                <div class="values">
                    <p>$ 200</p>
                    <span>10/09</span>
                </div>
            </div>
            <div class="bars">
                <div class="bar">
                    <div class="ba" style="height: 50%;"></div>
                </div>
                <div class="values">
                    <p>$ 200</p>
                    <span>10/09</span>
                </div>
            </div>
            <div class="bars">
                <div class="bar">
                    <div class="ba" style="height: 90%;"></div>
                </div>
                <div class="values">
                    <p>$ 200</p>
                    <span>10/09</span>
                </div>
            </div>
            <div class="bars">
                <div class="bar">
                    <div class="ba" style="height: 56%;"></div>
                </div>
                <div class="values">
                    <p>$ 200</p>
                    <span>10/09</span>
                </div>
            </div>
            <div class="bars">
                <div class="bar">
                    <div class="ba" style="height: 73%;"></div>
                </div>
                <div class="values">
                    <p>$ 200</p>
                    <span>10/09</span>
                </div>
            </div>
            <div class="bars">
                <div class="bar">
                    <div class="ba" style="height: 5%;"></div>
                </div>
                <div class="values">
                    <p>$ 200</p>
                    <span>10/09</span>
                </div>
            </div>
            <div class="bars">
                <div class="bar">
                    <div class="ba" style="height:32%;"></div>
                </div>
                <div class="values">
                    <p>$ 200</p>
                    <span>10/09</span>
                </div>
            </div>
            <div class="bars">
                <div class="bar">
                    <div class="ba" style="height: 80%;"></div>
                </div>
                <div class="values">
                    <p>$ 200</p>
                    <span>10/09</span>
                </div>
            </div>
        </div>
    </div>
</div>

<a href="https://www.youtube.com/channel/UCKeyLthQnPEKnXa5stCPxYQ/videos" target="_blank"><footer>
    <div class="texto">
        <span>
            <i class="fab fa-youtube"></i>
             youtube channel</span>
    </div>
</footer>
   </a>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');

* {
  margin: 0px;
  padding: 0px;
   overflow: hidden;
}

body {
  font-family: 'Poppins';
}

.container  {
  width: 100%;
  height: 100vh;
  background: linear-gradient(40deg, rgba(101, 78, 163, 0.4), rgba(147, 108, 237, 0.2));
  display: flex;
  justify-content: center;
  align-items: center;

  .board {
    max-width: 600px;
    width: 100%;
    height: 450px;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0px 10px 30px rgba(0,0,0,.2);

    @media (max-width: 576px) {
       width: 80%;
       margin: 0 auto
    }

    .headerModal {
      width: 95%;
      height: 20%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: 0 auto;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      h1 {
        font-size: 22px;
        font-weight: bold;
      }
      p {
        font-size: 14px;
        opacity: 0.5;
      }
    }

    .bodyModal {
      width: 95%;
      margin: 0 auto;
      height: 70%;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
       @media (max-width: 576px) {
           &:nth-child(3n) {
              display: none
           }
       }

      .bars {
        display: flex;
        flex-direction: column;
        max-width: 40px;
        width: 200%;
        height: 100%;
        align-self: flex-end;
        justify-content: flex-end;
         @media (max-width: 576px) {
              &:nth-child(10) {
                 display: none
              }
              &:nth-child(9) {
                 display: none
              }
          }

        .bar {
          width: 100%;
          height: 85%;
          border-radius: 5px;
          display: flex;justify-content: flex-end;
          align-items: flex-end;

          .ba {
            width: 100%;
            height: 100%;
            background: linear-gradient(40deg, rgba(101, 78, 163, 0.76), rgba(147, 108, 237, 0.5));
            border-radius: 5px;
            animation: bars cubic-bezier(0.68, -0.05, 0.27, 1.25) 1020ms forwards;
            transform-origin: bottom center;

            @keyframes bars{
              0% {
                transform: scaleY(0);

              }
              100% {
                transform: scaleY(1);
              }
            }
          }
        }
        .values {
          height: 15%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          p {
            font-size: 14px;
            color: #232323;
            font-weight: bold;
          }
          span {
            font-size: 12px;
            color: #232323;
            font-weight: normal;
            opacity: 0.5;
          }
        }
      }
    }
  }
}




footer {
  width: 250px;
  height: 80px;
background: linear-gradient(40deg, rgba(101, 78, 163, 0.4), rgba(147, 108, 237, 0.2));  position: absolute;
  right: 0;
  bottom: -80px;
  display: flex;
  justify-content: center;
  align-items: center;
   animation: top 0.8s forwards;
   animation-delay: 2s;
  span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #232323;
    font-family: 'Poppins';

    i {
      margin-right: 25px;
      font-size: 22px;
      color: #232323;
      animation: icon 2s forwards;
      animation-delay: 2s;
      opacity: 0;
    }
  }
}

@keyframes top {
  0% {
    opacity: 0;
     bottom: -80px
  }
  100% {
    opacity: 1;
     bottom: 0px

  }
}

@keyframes icon {
  0% {
    opacity: 0;
     transform: scale(0.0);
  }
   50% {
      opacity: 1;
     transform: scale(1.3) rotate(-02deg);
   }
  100% {
    opacity: 1;
     bottom: 0px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.