CSS Battle #22 – Cloud

[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 {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!

[piotrszymaniec]

Joint solution from Meg, Aishwarya, Ray and me 😄

Code Source – 641 {239}

<p a><p a b><p c><style>body{background:#f5d6b4}p{border-radius:100%;width:100;height:100;margin:0;background:#d86f45;position:absolute;bottom:85}[a]{left:100}[b]{left:180;top:85}[c]{border-radius:0 25px 25px 0;left:150;width:150;height:50

[meg-gutshall]

This was from a while back – 611.43 {373}

<p a>
<p b>
<p c>
<style>
  body {
    background: #F5D6B4;
  }
  p {
    position: fixed;
    background: #D86F45;
    width: 100;
    height: 100;
    border-radius: 50%;
  }
  [a] {
    top: 69;
    left: 180;
  }
  [b] {
    top: 99;
    left: 100;
  }
  [c] {
    top: 149;
    left: 150;
    width: 150;
    height: 50;
    border-radius: 0 50px 50px 0;
  }
</style>

Refactored – 618.24 {324}

<p a>
<p>
<p c>
<style>
  * {
    background: #F5D6B4;
    position: relative;
    width: 100;
    height: 100;
    border-radius: 1in;
  }
  p {
    background: #D86F45;
    top: -9;
    left: 92;
  }
  [a] {
    top: 77;
    left: 172;
  }
  [c] {
    top: -75;
    left: 120;
    width: 172;
    height: 50;
  }
</style>

Minified – 662.96 {194}

<p a><p><p c><style>*{background:#F5D6B4;position:relative;width:100;height:100;border-radius:1in}p{background:#D86F45;top:-9;left:92}[a]{top:77;left:172}[c]{top:-75;left:120;width:172;height:50