CSS Battle #50 – Use Hand Sanitizer

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

My solution

<div class="bottle">
  <div class="neck"></div>
  <div class="upper"></div>
  <div class="container"></div>
</div>
<div class="push"></div>
<div class="tip"></div>
<div class="dropa"></div>
<div class="dropb"></div>
<style>
  * {
    box-sizing: border-box;
  }
  body {
    background: #1A4341;
    margin: 0;
  }
  .bottle {
    position: absolute;
    display: grid;
    justify-items: center;
    inset: 70px 150px;
  }
  .tip {
    background: #F3AC3C;
    border-radius: 0 0 10px 10px;
    position: absolute;
    inset: 70px 100px 210px 280px;
  }
  .dropa,.dropb {
    background: #998235;
    border-radius: 10px;
    position: absolute;
    inset: 100px 100px 180px 280px;
  }
  .dropb {
    inset: 130px 100px 150px 280px;
  }
  .push {
    background: #F3AC3C;
    border-radius: 10px 10px 0;
    position: absolute;
    inset: 50px 150px;
    width: 150px;
    height: 20px;
  }
  .bottle > * {
    background: #F3AC3C;
  }
  .neck {
    height: 20px;
    width: 20px;
  }
  .upper {
    border-radius: 10px 10px 0 0;
    height: 20px;
    width: 50px;
  }
  .container {
    background: radial-gradient(circle at 25px 55px, #998235 25px, transparent 0),
      radial-gradient(circle at 75px 55px, #F3AC3C 25px, transparent 0),
      linear-gradient(#F3AC3C 55px, #998235 0);
    border-radius: 20px;
    height: 140px;
    width: 100px;
  }
</style>

[danieltott]

My solution that only got to 99.9% for some reason....

<p b>
<p bb>
<p bd>
<p t>
<p h>
<p a>
<p r>
<style>
  *{
    background: #1A4341;
    margin:0;
    position:fixed;
    color: #998235;
  }
  body > * {
    background:#F3AC3C;
  }
  [b] {
    left: 150;
    top: 110;
    width: 100;
    height: 140;
    border-radius:20px;
    background: linear-gradient(#F3AC3C 0 56px, #998235 56px);
  }
  
  [bd] {
    left: 280;
    top: 100;
    width: 20;
    height: 20;
    background:#998235;
    border-radius:100px;
    box-shadow: 0 30px;
  }
  [r] {
    left: 150;
    top: 140;
    width: 50;
    height: 50;
    background:#998235;
    border-radius:100px;
    box-shadow:50px 0 #F3AC3C;
  }
  [t] {
    left: 175;
    top: 90;
    width: 50;
    height: 40;
    border-radius:10px;
  }
  [a] {
    border-radius:10px;
    width:20;
    height:40;
    left:190;
    top:60;
    box-shadow: 90px -10px #F3AC3C;
  }
  [h] {
    width:150;
    height:20;
    left:150;
    top:50;
    border-radius:10px;
  }
</style>

[piotrszymaniec]

positioning approach. Thank you for help during meeting. :) - 600 {1338}

<div id="bottle"></div>
<div id="b1"></div>    
<div id="b2"></div> 
<div id="b3"></div> 
<div id="b4"></div> 
<div class="d" id="d1"></div> 
<div class="d" id="d2"></div> 

<style>
  body {  
    background: #1A4341;
  }  
  body * {
    position: fixed;    
  }
  div {
    background: #F3AC3C;
  }
  #bottle {    
    width: 100px;
    height: 140px;
    left: 150px;
    top: 110px;
    border-radius: 20px;
    /* -- Meg solution! thanks! :) -- */
    background: radial-gradient(circle at 25px 55px, #998235 0 25px, transparent 0),
      radial-gradient(circle at 75px 55px, #F3AC3C 0 25px, transparent 0),
      linear-gradient(to top, #998235 0 60%, #F3AC3C 0);
    /* --- */
  }  
  #b1 {
    width: 50px;
    height: 20px;
    top: 90px;
    left: 175px;
    border-radius: 10px 10px 0 0;
  }
  #b2 {    
    width: 20px;
    height: 30px;
    top: 70px;
    left: 190px;
  }
  #b3 {
    width: 150px;
    height: 20px;
    top: 50px;
    left: 150px;    
    border-radius: 10px 10px 0 10px;
  }
  #b4 {
    width: 20px;
    height: 20px;
    top: 70px;
    left: 280px;    
    border-radius: 0 0 10px 10px;
  }
  .d {
    width: 20px;
    height: 20px;
    background: #998235;
    border-radius: 10px;
  }  
  #d1 {    
    top: 100px;
    left: 280px;    
  }
  #d2 {    
    top: 130px;
    left: 280px;    
  }  
</style>

[meg-gutshall]

Grid yall! – 600 {1222}

<div class=spout></div><div class=drop-1></div><div class=drop-2></div><div class=pump></div><div class=neck></div><div class=top></div><div class=bottle></div>
<style>
  body {
    background: #1A4341;
    display: grid;
    grid-template: 20px 20px repeat(4, 10px) 100px / 25px 15px 20px 15px 25px 30px 20px;
    margin: 50px 150px;
  }
  div {
    width: 20px;
    height: 20px;
    background: #F3AC3C;
    border-radius: 10px;
  }
  .pump {
    width: 130px;
    border-radius: 10px 0 0 10px;
    grid-area: 1;
  }
  .spout {
    height: 40px;
    border-radius: 0 10px 10px 10px;
    grid-area: 1 / 7;
  }
  .drop-1 {
    background: #998235;
    grid-area: 4 / 7;
  }
  .drop-2 {
    background: #998235;
    grid-area: 7 / 7;
  }
  .neck {
    border-radius: 0;
    grid-area: 2 / 3;
  }
  .top {
    width: 50px;
    border-radius: 10px 10px 0 0;
    grid-column: 2;
    grid-row: 3;
  }
  .bottle {
    width: 100px;
    height: 140px;
    background: radial-gradient(circle at 25px 55px, #998235 0 25px, transparent 0),
      radial-gradient(circle at 75px 55px, #F3AC3C 0 25px, transparent 0),
      linear-gradient(to top, #998235 0 60%, #F3AC3C 0);
    border-radius: 20px;
    grid-area: 5 / 1;
  }
</style>

Grid yall! (minified) – 600.2 {798}

<p s><p d1><p d2><p p><p n><p t><p b><style>body{background:#1A4341;display:grid;grid-template:20px 20px repeat(4, 10px) 100px/25px 15px 20px 15px 25px 30px 20px;margin:34px 150px;}p{width:20px;height:20px;background:#F3AC3C;border-radius:10px;}[p]{width:130px;border-radius:10px 0 0 10px;grid-area:1;}[s]{height:40px;border-radius:0 10px 10px 10px;grid-area:1/7;}[d1]{background:#998235;grid-area:4/7;}[d2]{background:#998235;grid-area:7/7;}[n]{border-radius:0;grid-area:2/3;}[t]{width:50px;border-radius:10px 10px 0 0;grid-column:2;grid-row:3;}[b]{width:100px;height:140px;background:radial-gradient(circle at 25px 55px,#998235 0 25px,transparent 0),radial-gradient(circle at 75px 55px,#F3AC3C 0 25px,transparent 0),linear-gradient(to top,#998235 0 60%,#F3AC3C 0);border-radius:20px;grid-area:5/1