CSS Battle #108

Battle: #108

<div class="outline">
  <div class="shine1"></div>
  <div class="shine2"></div>
  <div class="inner2"></div>
  <div class="inner1">
    <div class="mid"></div>
    <div class="mid2"></div>
    <div class="mid3"></div>
  </div>
</div>
<style>
  body {
    margin: 0;
    background: #000;
  }
  div {
    position: absolute;
  }
  .mid {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    background: #ebae11;
    border-radius: 100%;
  }
  .mid2 {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 200px;
    height: 80px;
    border-radius: 100%;
    border: 5px solid #ebae11;
  }
  .mid3 {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 120px;
    height: 60px;
    border-radius: 100%;
    border: 5px solid #ebae11;
  }
  .inner1 {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 240px;
    height: 120px;
    background: #000000;
    border-radius: 12px;
  }
  .inner2 {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 270px;
    height: 90px;
    background: #000000;
    border-radius: 12px;
  }
  .shine1 {
    transform: rotate(15deg);
    top: -20px;
    width: 50px;
    height: 300%;
    background: #ebae11;
    left: 70px;
  }
  .shine2 {
    transform: rotate(15deg);
    top: -20px;
    width: 25px;
    height: 300%;
    background: #ebae11;
    left: 136px;
  }
  .outline {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background: #e96a23;
    width: 300px;
    height: 150px;
    overflow: hidden;
  }
</style>