28/11/2024

Score
600.15
Characters
830
28/11/2024 image
<div class="grid">
  <div class="bx">
    <div class="cir cir1"></div>
  </div>
  <div class="bx">
    <div class="cir cir2"></div>
  </div>
  <div class="bx">
    <div class="cir cir3"></div>
  </div>
  <div class="bx">
    <div class="cir cir4"></div>
  </div>
</div>
<style>
  body {
    background: #2F5A76;
    display: grid;
    place-content: center;
    height: 100%;
    width: 100%;
    margin: 0;
  }
  .grid {
    width: 13.75rem;
    height: 13.75rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .bx {
    position: relative;
    overflow: hidden;
  }
  .cir {
    height: 200%;
    width: 200%;
    background: #F5BB60;
    border-radius: 50%;
    position: absolute;
  }
  .cir1 {top: -100%}
  .cir3 {top: -100%; left: -100%;}
  .cir4 {left: -100%;}
  .cir2, .cir3 {background: #F56760}
</style>
https://rua-iri.com/css_battle/28-11-2024/