battleindex.html

<div class="b1"></div>
<div class="w1"></div>
<div class="w2"></div>
<div class="w3"></div>
<div class="w4"></div>
<div class="t1"></div>
<div class="t2"></div>
<div class="c1"></div>
<div class="c2"></div>




<style>
body {
  background: #191919;
  display: flex;
  justify-content: center;
  align-items: center;
}
.b1 {
  width:240px;
  height:100px;
  background:#F2AD43;
  display: flex;
  justify-content: center;
  align-items: center;
}
.w1{
  position:absolute;
  width:100px;
  height:100px;
  background:#191919;
  border-radius:50%;
  left:24px;
  top:100;

}

.w2{
 position:absolute;
 width:145px;
  height:125px;
  background:#191919;
  border-radius:50%;
  left:75px;
  top:160;}

  .w3{
 position:absolute;
   width:145px;
  height:125px;
  background:#191919;
  border-radius:50%;
  left:185px;
  top:160;}

.w4{
position:absolute;
  width:100px;
  height:100px;
  background:#191919;
  border-radius:50%;
  left:275px;
  top:100;}

.t1{
  position:absolute;
  width:80px;
  height:75px;
  background:#191919;
  top:55;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;

}
.t2{
  position:absolute;
  width:20px;
  height:20px;
  background:#F2AD43;
  top:110;
}
.c1{
   position:absolute;
  width:10px;
  height:10px;
  background:#F2AD43;
  top:105;
  left:185;
  border-radius:50%;
}

.c2{
   position:absolute;
  width:10px;
  height:10px;
  background:#F2AD43;
  top:105;
  left:205;
  border-radius:50%;
}





</style>