< Back to Frontend Friday Folks Index

Use Hand Sanitizer

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (1363 characters)
1 
<div class="bottle">
2 
  <div class="neck"></div>
3 
  <div class="upper"></div>
4 
  <div class="container"></div>
5 
</div>
6 
<div class="push"></div>
7 
<div class="tip"></div>
8 
<div class="dropa"></div>
9 
<div class="dropb"></div>
10 
<style>
11 
  * {
12 
    box-sizing: border-box;
13 
  }
14 
  body {
15 
    background: #1A4341;
16 
    margin: 0;
17 
  }
18 
  .bottle {
19 
    position: absolute;
20 
    display: grid;
21 
    justify-items: center;
22 
    inset: 70px 150px;
23 
  }
24 
  .tip {
25 
    background: #F3AC3C;
26 
    border-radius: 0 0 10px 10px;
27 
    position: absolute;
28 
    inset: 70px 100px 210px 280px;
29 
  }
30 
  .dropa,.dropb {
31 
    background: #998235;
32 
    border-radius: 10px;
33 
    position: absolute;
34 
    inset: 100px 100px 180px 280px;
35 
  }
36 
  .dropb {
37 
    inset: 130px 100px 150px 280px;
38 
  }
39 
  .push {
40 
    background: #F3AC3C;
41 
    border-radius: 10px 10px 0;
42 
    position: absolute;
43 
    inset: 50px 150px;
44 
    width: 150px;
45 
    height: 20px;
46 
  }
47 
  .bottle > * {
48 
    background: #F3AC3C;
49 
  }
50 
  .neck {
51 
    height: 20px;
52 
    width: 20px;
53 
  }
54 
  .upper {
55 
    border-radius: 10px 10px 0 0;
56 
    height: 20px;
57 
    width: 50px;
58 
  }
59 
  .container {
60 
    background: radial-gradient(circle at 25px 55px, #998235 25px, transparent 0),
61 
      radial-gradient(circle at 75px 55px, #F3AC3C 25px, transparent 0),
62 
      linear-gradient(#F3AC3C 55px, #998235 0);
63 
    border-radius: 20px;
64 
    height: 140px;
65 
    width: 100px;
66 
  }
67 
</style>
Today we didn't really manage to create very short solutions for this. There is probably a better way how to solve this, but it seems like there should be a way to make this a lot shorter. Maybe I'll get back to it - or someone else has shared a better solution on the VirtualCoffee.io discussion thread for CSS Battle #50.
< Back to Frontend Friday Folks Index