CSS Battles #10 – Cloaked Spirits

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

[meg-gutshall]

First attempt – 600.21 {793}

<div class="lc"></div>
<div class="hc"></div>
<div class="lc"></div>
<div class="bb"></div>
<div class="sb"></div>
<style>
  body {
    background: #62306d;
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }
  .bb {
    position: absolute;
    z-index: -1;
    width: 300px;
    height: 100px;
    margin-top: 150px;
    background: #f7ec7d;
  }
  .sb {
    position: absolute;
    z-index: -1;
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background: #f7ec7d;
  }
  .lc {
    width: 60px;
    height: 60px;
    background: #e38f66;
    border: 20px solid #aa445f;
    border-radius: 50%;
    margin-top: 100px;
  }
  .hc {
    width: 60px;
    height: 60px;
    background: #aa445f;
    border: 20px solid #e38f66;
    border-radius: 50%;
  }
</style>

Refactored and minified – 617.06 {331}

<p></p><i></i><p><style>body{background:#62306d;display:flex;margin:100 50}i,p{width:100;height:300;background:#f7ec7d}p{margin-top:100}i:after,p:after{display:block;position:relative;content:'';width:60;height:60;background:#aa445f;border:20px solid#e38f66;border-radius:50%;top:-50}p:after{background:#e38f66;border-color:#aa445f
</style>

Refactored again with some help from @paceaux – 602.33 {540}

<p></p>
<p m></p>
<p></p>
<style>
  body {
    background: #62306d;
    display: flex;
    place-items: end;
    margin: 34 50;
  }
  p {
    width: 60;
    height: 60;
    background: #E38F66;
    border-radius: 1in;
    border: 20px solid #AA445F;
  }
  p:before {
    display: block;
    position: relative;
    content: '';
    width: 100;
    height: 200;
    background: #F7EC7D;
    z-index: -1;
    left: -20;
    top: 30;
  }
  [m] {
    background: #AA445F;
    border: 20px solid #E38F66;
    align-self: flex-start;
  }
</style>

Refactored again with some help from @paceaux (minified) – 613.44 {356}

<p><p m><p><style>body{background:#62306d;display:flex;place-items:end;margin:34 50;}p{width:60;height:60;background:#E38F66;border-radius:1in;border:20px solid#AA445F}p:before{display:block;position:relative;content:'';width:100;height:200;background:#F7EC7D;z-index:-1;left:-20;top:30}[m]{background:#AA445F;border:20px solid#E38F66;align-self:flex-start

[aishwarya-mali]

with box shadow 601.83 {565}

<div></div>
<div id="a"></div>
<div></div>
<style>
  body{
    background: #62306D;
    display: flex;
    justify-content: center;
    align-items: end;
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
    background: #F7EC7D;
    position: relative;
  }
  #a{
    height: 200px
  }
  div::after{
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #E38F66;
    box-shadow: 0px 0px 0px 20px #AA445F;
    top: -30px;
    left: 20px;
  }
  #a::after{
    box-shadow: 0px 0px 0px 20px #E38F66;
    background:#AA445F;
  }
</style>

with borders 601.83 {565}

<div></div>
<div id="a"></div>
<div></div>
<style>
  body{
    background: #62306D;
    display: flex;
    justify-content: center;
    align-items: end;
    margin: 0;
  }
  div {
    width: 100px;
    height: 100px;
    background: #F7EC7D;
    position: relative;
  }
  #a{
    height: 200px
  }
  div::after{
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #E38F66;
    border: 20px solid #AA445F;
    top: -50px;
  }
  #a::after{
    border-color:#E38F66;
    background:#AA445F;
  }
</style>

[paceaux]

first (only) attempt. 597.35 (424 chars when min; 99.9% match)

<p><p t><p>
<style>
  * {margin: 0}
body {
  background: #62306d;
  padding: 70px 50px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around
}  
p {
  background: #e38f66;
  outline: 20px solid #aa445f;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  position: relative;
}
p::before {
  content: '';
  display: block;
  background: #F7EC7D;
  height: 70vh;
  margin: 33px -20px 0 ;
  z-index: -1;
  position: relative;
}
[t] {
  align-self: flex-start;
  background: #aa445f;
  outline-color: #e38f66
}