CSS Battle #78 – Ukulele

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

[Narigo]

Code Source – 600.07 {910}

<div b></div>
<div s></div>
<div h></div>
<style>
  body {
    background:#F3AC3C;
    display:grid;
    align-items:center;
    justify-content:center;
    grid-template-columns:170px 100px 40px;
  }
  [b] {
    display:grid;
    place-items:center left;
    height:120;
    background:
      radial-gradient(circle at 120px 50%,#1A4341 20px,#F3AC3C 0 25px,#998235 0 50px,#0000 0),
      radial-gradient(circle at 60px 50%,#998235 60px,#0000 0);
    z-index:1;
  }
  [s] {
    margin:-5;
    height:20;
    background: #1A4341;
  }
  [h] {
    display:grid;
    place-items:center;
    border-radius:10px;
    height:20;
    padding:5;
    background: #998235;
  }
  *::before,*::after {
    border-radius: 5px;
    background:#1A4341;
  }
  [b]::before {
    content:'';
    margin-left:40;
    width:10;
    height:40;
  }
  [h]::before,[h]::after {
    content:'';
    width:20;
    height:4;
  }
</style>

[david-001]

Code Source – 600 {1279}

<div b></div><div c></div><div d></div><div a></div><div e></div><div f></div><div g></div>
<style>
  body{
    background-color: #F3AC3C;
    position:relative;
    margin:0;
  }
  [a] {
    position:absolute;
    top:100;
    left: 115;
    width: 100px;
    height: 100px;
    background:radial-gradient(circle at 50px 50px, #1A4341 20px, #F3AC3C 0 25px, #998235 0 50px, #0000 0);
  }
  [b] {
    position:absolute;
    top:90;
    left: 45;
    width: 120px;
    height: 120px;
    background-color: #998235;
    border-radius: 100px;
  }
  [c]{
    position:absolute;
    top:130;
    left: 85;
    width: 10px;
    height: 40px;
    background-color: #1A4341;
    border-radius: 10px;
  }
  [d]{
    position:absolute;
    top:140;
    left:200;
    width: 120px;
    height: 20px;
    background-color: #1A4341;
  }
  [e]{
    position:absolute;
    top:135;
    left:315;
    width:40px;
    height:30px;
    background-color: #998235;
    border-radius: 10px;
  }
  [f]{
    position:absolute;
    top:143;
    left:325;
    width:20px;
    height:4px;
    background-color: #1A4341;
    border-radius: 10px;
  }
  [g]{
    position:absolute;
    top:153;
    left:325;
    width:20px;
    height:4px;
    background-color: #1A4341;
    border-radius: 10px;
  }
</style>