19/9/2024

Score
600.06
Characters
927
<body>
<div class="grid">
  <div class="box">
    <div class="circle-outer">
      <div class="circle-inner"></div>
    </div>
  </div>
  <div class="box">
    <div class="circle-outer c2">
      <div class="circle-inner"></div>
    </div>
  </div>
</div>
</body>
<style>
  body {
    align-items: center;
    margin: 0;
    display: flex;
    justify-content: center;
    height: 100%;
    background: #FADE8B;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .box {
    width: 7.5rem;
    height: 7.5rem;
    overflow: hidden;
    position: relative;
  }
  .circle-outer {
    background: #222222;
    height: 200%;
    width: 200%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
  }
  .circle-inner {
    background: #FADE8B;
    height: 50%;
    width: 50%;
    border-radius: 50%;
  }
  .c2 {bottom: 0; right: 0;}
</style>