16/12/2024

<div class="cir cir-out">
  <div class="cir cir-in"></div>
</div>
<div class="con">
  <div class="bar"></div>
  <div class="line"></div>
</div>
<style>
  body {
    margin: 0;
    display: grid;
    place-content: center;
    height: 100%;
    width: 100%;
    background: #FADE8B;
  }
  .cir {
    border-radius: 50%;
    background: #dd6b4d;
    display: grid;
    place-content: center;
  }
  .cir-out{
    width: 8.8rem;
    height: 8.8rem;
    background: #FADE8B;
  }
  .cir-in{
    width: 5rem;
    height: 5rem;
    background: #222;
  }
  .con {
    position: absolute;
    width: 100%;
    top: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: -1;
  }
  .con > div {background: #222}
  .bar {
    height: 3.45rem;
    width: 6.2rem;
  }
  .line {
    height: 1.9rem;
    width: 15.6rem;
  }
</style>