19/11/2024

<div class="cir cir1">
  <div class="cir in"></div>
</div>
<div class="cir cir2">
  <div class="cir in"></div>
</div>
<div class="line"></div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
    background: #E0E7FF;
  }
  .cir {
    width: 12.5rem;
    height: 12.5rem;
    background: #4F77FF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cir1 {translate: 1.5rem 0}
  .cir2 {translate: -1.5rem 0}
  .in {
    width: 7.5rem;
    height: 7.5rem;
    background: #E0E7FF;
    translate: 0;
  }
  .line {
    position: absolute;
    height: 3.1rem;
    width: 100%;
    background: #E0E7FF;
  }
</style>