CSS Battle #18 – Matrix

[aishwarya-mali]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[aishwarya-mali]

using grids – 614.93 {345}

<p><p><p><p><p><p><p><p><p><p><p><p>
<style>
  *{
    margin:0;
    padding:5;
    background: #5C434C;
  }
 body{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(3, 1fr);
   gap:20px;
 }
p{
  width:70;
  height:70;
  border-top-left-radius:100px;
}
p:nth-child(even),p:nth-child(5),p:nth-child(7){
  background:#F5D6B4;
}
p,p:nth-child(6),p:nth-child(8){
  background:#F09462;
}

[Satoshi-Sh]

<div class='quarter c1'></div>
<div class='quarter c2'></div>
<div class='quarter c1'></div>
<div class='quarter c2' ></div>
<div class='quarter c2'></div>
<div class='quarter c1'></div>
<div class='quarter c2'></div>
<div class='quarter c1'></div>
<div class='quarter c1'></div>
<div class='quarter c2'></div>
<div class='quarter c1'></div>
<div class='quarter c2'></div>
<style>
  body {
    background:#5C434C;
    display: grid;
    gap:20px;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:(3,1fr);
    margin:10;    
  }
  .quarter {
    width: 80px;
    height: 80px;
    border-radius: 100px 0 0 0;
  }
  .c1 {
    background-color:#F09462
  }
  .c2{
    background-color:#F5D6B4
  }
</style>