CSS Battle #70 – Froggy

[Narigo]

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!

[Narigo]

Code Source – 600.33 {746}

<div><l></l><n></n></div>
<style>
  body {
    background: #293462;
    display: grid;
    place-items:center
  }
  div {
    margin-left: -75px;
    margin-top: 20px;
    width: 75px;
    height: 100px;
    border-radius: 50px 0 0 50px;
    background: radial-gradient(circle at 100% -125px, #FE5F55 0 195px, #A64942 0);
    position:relative;
    -webkit-box-reflect: right;
  }
  l {
    width: 30px;
    height: 30px;
    background:radial-gradient(#293462 5px, #FFF1C1 0);
    position:absolute;
    top: -25px;
    left: 15px;
    border: 10px solid #FE5F55;
    border-radius: 50%;
  }
  n {
    width:10px;
    height:10px;
    background:#293462;
    position:absolute;
    border-radius: 50%;
    top: 50px;
    left: 60px;
  }
</style>

[david-001]

Code Source – 600.03 {1011}

<div a><div b></div><div c></div><div d></div><div e></div></div>
<style>
  
  body {
    background:#293462;
    display: flex;
    margin-top: 110px;
    justify-content: center;
  }
  [a] {
    width: 150px;
    height: 100px;
    background: radial-gradient(circle at 50% -125px, #FE5F55, #FE5F55 195px, #A64942 0);
    border-radius: 50px
  }
  [b]{
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: 15px;
    background: radial-gradient(circle, #293462 5px, #FFF1C1 0 15px, #FE5F55 0 25px, #0000 0);
  }
  [c]{
    width: 50px;
    height: 50px;
    margin-top: -50px;
    margin-left: 85px;
    background: radial-gradient(circle, #293462 5px, #FFF1C1 0 15px, #FE5F55 0 25px, #0000 0);
  }
  [d]{
    width: 10px;
    height: 10px;
    margin-top: 25px;
    margin-left: 60px;
    background: #293462;
    border-radius: 50%;
  }
  [e]{
    width: 10px;
    height: 10px;
    margin-top: -10px;
    margin-left: 80px;
    background: #293462;
    border-radius: 50%;
  }
</style>