CSS Battle #20

Battle: #20

<div class="yellow"></div>
<div class="orange"></div>
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<style>
  div {
    position: absolute;
  }
  .t2 {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #62306d;
    top: 90px;
    left: 230px;
  }
  .b2 {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #62306d;
    top: 190px;
    left: 230px;
  }
  .t3 {
    width: 40px;
    height: 40px;
    background: #62306d;
    border-radius: 100%;
    left: 280px;
    top: 80px;
  }
  .b3 {
    width: 40px;
    height: 40px;
    background: #62306d;
    border-radius: 100%;
    left: 280px;
    top: 180px;
  }
  .t1 {
    width: 40px;
    height: 40px;
    background: #62306d;
    border-radius: 100%;
    left: 80px;
    top: 80px;
  }
  .b1 {
    width: 40px;
    height: 40px;
    background: #62306d;
    border-radius: 100%;
    left: 80px;
    top: 180px;
  }
  .yellow {
    top: 100px;
    left: 100px;
    width: 140px;
    height: 100px;
    background: #f7ec7d;
  }
  .orange {
    top: 100px;
    left: 240px;
    width: 60px;
    height: 100px;
    background: #e38f66;
  }
  body {
    margin: 0;
    background: #62306d;
  }
</style>