Back to home prev next
CSS code

I won't lie. I expected this one to be challenging and it was. I can see five circles - two filled with light blue and without a border, two are dark blue with a light blue border. I knew I could definitely use five divs to recreate the target. But I thought I might be able to do it with just three, and then use ::before and ::after psuedoelements with z-index. The problem I was running into though is that the middle div can't have both a positive and a negative z-index.

Check out my code