Graphics using CSS shapes

by Aashish Manandhar

HTML

<div class="infographic">
<div class="alert">
<div class="header">You're still using chrome! :(</div>
<div class="subtitle">In a few days, platform will no longer support chrome and you could miss out from doing tasks!</div>
</div>
<div class="animated">
<div class="cloud"></div>
  <div class="mountain mountain-left"></div>
  <div class="mountain mountain-right"></div>
  <div class="lamp-post">
  <div class="vertical-post"></div>
  <div class="horizontal-post"></div>
  <div class="chain top-chain left-chain"></div>
  <div class="chain top-chain right-chain"></div>
  <div class="board board-one"><div class="board-title">You're still using Chrome!</div>In a few days, platform will no longer support chrome and you could miss out from doing tasks!</div>
  <div class="chain bottom-chain left-chain"></div>
  <div class="chain bottom-chain right-chain"></div>
  <div class="board board-two"><a class="download-ws" href="#">Click here to start using <strong>WorkStream Browser</strong></a></div>
  </div>
  <div class="side-post">
  <div class="vertical-post side"></div>
  <div class="horizontal-post side"></div>
  <div class="chain top-chain left-chain"></div>
  <div class="chain top-chain right-chain side"></div>
  <div class="board board-one side"><a class="continue" href="#">I know I could be blocked out but I would like to continue using <strong>Chrome Browser</strong></a></div>
  </div>
</div>
</div>
<div class="ground"><span class="continue-btn"></span></div>

CSS

.alert {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    justify-content: center;
    flex-direction: column;
    min-width: 1px;
    height: 600px;
    color:white;
    animation: hideit 1s ease 3s;
    animation-fill-mode:forwards;
}
.alert .header {
  font-weight: bold;
  font-size: 4em;
}
.alert .subtitle {
  margin: 0.5em;
  font-size: 1.5em;
}
.animated{
  opacity:0;
  pointer-events:none;
  animation: showit 1s ease 4s;  
  animation-fill-mode:forwards;
}
@keyframes showit{
100%{
  opacity:1;
  pointer-events:all;
}
}
@keyframes hideit{
  0% {
  }
100%{
  visibility:hidden;
  }
}
.infographic{
  font-family: sans-serif;
  height: 600px;
  min-width: 1px;
  /* width: 800px; */
  position: relative;
  background-color: #FF7043;
  overflow:hidden;
  animation: skyBackground 0.6s ease 4s both;
  animation-fill-mode:forwards;
}
@keyframes skyBackground {
  100% {
    background: -webkit-linear-gradient(#607D8B 0%, #fff 100%);
    background: -moz-linear-gradient(#607D8B 0%, #fff 100%);
    background: -o-linear-gradient(#607D8B 0%, #fff 100%);
    background: linear-gradient(#607D8B 0%, #fff 100%);
  }
}
@keyframes swing-top-fwd {
  0% {
    transform: scale(2,2);
    /* -webkit-transform: rotateX(180deg) scale(4,4);
            transform: rotateX(180deg) scale(4,4); */
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  25% {
    transform: scale(2,2);
    /* -webkit-transform: rotateX(0) scale(4,4);
            transform: rotateX(0) scale(4,4); */
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100%{
    transform: translateX(-18vw);
  }
}

.lamp-post{
  left: 25%;
  bottom:0;
  position:absolute;
  box-shadow: -2px 2px 10px #3E2723;
  animation: swing-top-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 4.5s both;
  }
.vertical-post{
  width:40px;
  background-color: #795548;
  height:420px;
}
.vertical-post:before{
  content:...