mario css animation

by Pritam Bohra

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div class="sky"></div>
    <div class="grass"></div>
    <div class="road">
      <div class="divider"></div>
    </div>
  </body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.sky {
  background-color: skyblue;
  height: 40vh;
  position: relative;
}

.grass {
  background-color: seagreen;
  height: 25vh;
  position: relative;
}

.road {
  background-color: dimgrey;
  height: 35vh;
  border-top: 10px solid grey;
  border-bottom: 10px solid grey;
  position: relative;
}

.divider {
  position: absolute;
  border: 2px dashed #fff;
  top: 50%;
  width: 100%;
}