CSS Battle #127 – Letter I

[meg-gutshall]

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 {characters}</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 {characters}

your cssbattles code here!

[Arvind644]

Code Source – 602.56 {530}

<p></p>
<p c>
  <a></a>
  <a></a>
</p>
<p></p>
<p d></p>
<style>
  body {
    background: #E3516E;
    display: grid;
    place-content: center;
  }
  p, a {
    width: 100;
    height: 30;
    background: #FADE8B;
    border-radius: 15px;
    margin: 0;
  }
  [d] {
    position: absolute;
    width: 30;
    translate: 252px 62px;
    box-shadow: -150px 130px #FADE8B;
  }
  [c] {
    height: 100;
    display: flex;
    gap: 30px;
  }
  [c] > a {
    background: #E3516E;
    height: 100;
    border-radius: 10px;
  }
</style>

[meg-gutshall]

Not good enough for CSSBattles (99.9%) – 596.43 {885}

<p et>
<p dt>
<p m>
<p db>
<p eb>
<style>
  * {
    background: #E3516E;
    margin: 0;
    border-radius: var(--r, 50px);
    grid-area: var(--g);
  }
  body {
    display: grid;
    grid-template-areas: 
      ". . et et et . dt"
      ". . . m . . ."
      "db . eb eb eb . .";
    place-content: center;
  }
  p {
    background: #FADE8B;
    height: 30;
    width: 30;
  }
  [m] {
    height: 100;
    width: 70;
    --g: m;
    --r: 0;
  }
  [m]:before, [m]:after {
    display: block;
    content: '';
    background: #E3516E;
    height: 100;
    width: 20;    
    border-radius: 0 10px 10px 0;
  }
  [m]:after {
    border-radius: 10px 0 0 10px;
    transform: translate(50px, -100px);
  }
  [et], [eb] {
    width: 100;
  }
  [et] {
    --g: et;
  }
  [eb] {
    --g: eb;
  }
  [dt], [db] {
    margin: 0 10;
  }
  [dt] {
    --g: dt;
  }
  [db] {
    --g: db;
  }
</style>