CSS Battle #103 – Super Saiyan

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

[Persevere-Wakulla]

Code Source – score {characters}

<div id="hair">
  <span class='hair'></span>
  <span class='hair'></span>
  <span class='hair'></span>
  <span class='hair'></span>
  <span class='hair'></span>
</div>
  <div class='face'>
      <div class='mouth'></div>
  </div>  
<style>
  
  body{
    margin:0;
    padding:0;
    display: grid;
    place-items:center;
    background-color: #161616;
  }
  #hair {
      position: relative;
      top:51px;
      left:10px;
  }
  
    .hair{
        position: absolute;
        display: inline-block;
        width:65px;
        height: 59px;
        background-color:#EBAE11;
        border-radius: 50%;
        background: linear-gradient(to right, #EBAE11 50%, #1600 50%);
    }

    .hair:nth-of-type(1){
      rotate: -30deg;
      top:2px;
      right: -7px;
      z-index:1;
    }
    .hair:nth-of-type(2){
      rotate: 210deg;
      top:2px;
      left: -27px;
      z-index: 1;
    }
    .hair:nth-of-type(3){
      width:60px;
      height:60px;
      background: #EBAE11;
      border-radius: 0px 90px 0px 90px;
      left:-40px;
      bottom: -45px;
      rotate: 45deg;
      z-index:1;
    }
    .hair:nth-of-type(4){
      z-index: -1;
      top:20px;
      left:-75px;
      rotate:-80deg
    }
    .hair:nth-of-type(5){
      z-index: -1;
      top:20px;
      left:-10px;
      rotate:260deg;
    }
  
  .face {
    width: 80px;
    height: 60px;
    background: linear-gradient(to right, #FFF 50%, #FFDEB9 50%);
    border-radius: 0 0 150px 150px ;
    position:relative;
    top: -24px;
  }
  .mouth {
      width:20px;
      height:10px;
      background-color: #161616;
      position: absolute;
      top:66%;
      left:50%;
      border-radius:0 0 50px 50px;
      transform: translateX(-50%)
  }
</style>

Score: 590.72

Char: 1737