< Back to Frontend Friday Folks Index

Odoo

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 (590 characters)
1 
<div a></div>
2 
<div b></div>
3 
<div></div>
4 
<div></div>
5 
<style>
6 
  body {
7 
    display: grid;
8 
    place-items:center;
9 
    background:#191919;
10 
    grid-template-columns: repeat(4, 1fr);
11 
    padding: 28px;
12 
  }
13 
  div {
14 
    position:relative;
15 
    margin-top:23;
16 
    width: 80px;
17 
    height: 80px;
18 
    border-radius: 50%;
19 
    box-sizing:border-box;
20 
    border:20px solid #8F8F8F;
21 
  }
22 
  [a] {
23 
    border-color:#714B67;
24 
  }
25 
  [b]::before {
26 
    position: absolute;
27 
    top: -40;
28 
    right: -20;
29 
    content:'';
30 
    height:70px;
31 
    width:20px;
32 
    border-radius:20px;
33 
    background:#8F8F8F;
34 
  }
35 
</style>
I have missed this one and I had to solve this on my own. I've tried doing it the way we do it during the sessions: First, tell what you see - I saw four items, so I've started with four divs. I've added attributes to allow changing the variations: One for the color change, another one to add the line up in the 'd'.
Highlighted solution (511 characters)
1 
<style>
2 
  body {
3 
    background:
4 
      radial-gradient(circle at 189px 112px,#8F8F8F 10px,#0000 0),
5 
      conic-gradient(#8F8F8F,#8F8F8F)179px 110px/20px 50px no-repeat,
6 
      radial-gradient(circle at 77px 162px,#191919 20px,#714B67 0 40px,#0000 0),
7 
      radial-gradient(circle at 159px 162px,#191919 20px,#8F8F8F 0 40px,#0000 0),
8 
      radial-gradient(circle at 241px 162px,#191919 20px,#8F8F8F 0 40px,#0000 0),
9 
      radial-gradient(circle at 323px 162px,#191919 20px,#8F8F8F 0 40px,#191919 0);
10 
  }
11 
</style>
Ok, another try now, using gradients.
< Back to Frontend Friday Folks Index