cssbattle10

<div class="a"></div>
<div class="b"></div>
<div class="q l"></div>
<div class="q m"></div>
<div class="q r"></div>
<style>
  * {
    background: #62306D;
  }
  .a {
    width: 300px;
    height: 100px;
    background: #F7EC7D;
    margin: 200px 42px;
  }
  .b {
    width: 100px;
    height: 100px;
    background: #F7EC7D;
    position: absolute;
    top: 100px;
    left: 150px;
  }
  .q {
    width: 60px;
    height: 60px;
    position: absolute;
    border-radius: 50%;
    background: #E38F66;
    border: 20px solid #AA445F; 
  }
  .l {
    top: 150px;
    left: 250px;
  }
  .r {
    top: 150px;
    left: 50px;
  }
  .m {
    top: 50px;
    left: 150px;
    background: #AA445F;
    border: 20px solid #E38F66; 
  }
</style>