29/12/2024

<div class="bar"></div>
<div class="cir out">
  <div class="cir in"></div>
</div>
<style>
  body {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0 4.05rem;
    background: #7C9A81;
  }
  .bar {
    width: 10rem;
    height: 5.6rem;
    background: #FFF9C6;
    border-radius: 5rem 0 0 5rem;
  }
  .cir {
    display: grid;
    place-items: center;
    border-radius: 50%;
  }
  .out{
    position: absolute;
    right: 4rem;
    width: 8.2rem;
    height: 8.2rem;
    background: #7C9A81;
    translate: -0rem 0;
  }
  .in {
    width: 54%;
    height: 54%;
    background: #EFCB5C;
  }
</style>