cssbattle47

<div class="t z v">
  <i class="t z b c"></i>
  <i class="t z b d"></i>
  <i class="t z b e"></i>
  <div class="t z a">
    <i class="t a f x"></i>
    <i class="t a g x"></i>
    <i class="t a h x"></i>
  </div>
</div>
<style>
  * {background: #1A4341}
  .t {
    position: absolute;
  }
  .v {
    width: 400px;
    height: 300px;
  }
  i {
    background: #F3AC3C;
  }
  .z {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .a {
    width: 100px;
    height: 100px;
    background: #F3AC3C;
    border-radius: 50%;
  }
  .b {
    width: 10px;
    height: 180px;
    border-radius: 5px;
  }
  .c {
    top: 46.5%;
  }
  .d {
    top: 18.2%;
    left: 51%;
    transform: rotate(60deg);
  }
  .e {
    top: 22.1%;
    left: 51%;
    transform: rotate(-60deg);
  }
  .x {
    background: #998235;
  }
  .f {
    width: 30%;
    height: 30%;
    top: 20px;
    left: 20px;
  }
  .g {
    width: 20%;
    height: 20%;
    top: 65px;
    left: 40px;
  }
  .h {
    width: 10%;
    height: 10%;
    top: 20px;
    left: 70px;
  }
</style>