Couldn't really figure out how to fix the background image. Also that 5th card doesn't look exactly as it is supposed to in the desktop variant. If someone has any ideas for fixes, please write them :)
Edit: Background position fixed.
For the background image position try setting a percentage value to "background-position-x", say around 85% or something
.card:nth-child(1) {
background-position-x: 85%;
}
My first premium challenge! Here are the two things I would really like help with:
The background-image properties and responsive design-- how can I make it look right? I will be looking at other people's solutions to try and figure it out but feedback here would be great too.
The number lollipops. I managed to do it by using a 'before' pseudo-element and a vertical bar special character, but it doesn't look the same as the design. (Too thick, short). How to accomplish this?
Thanks all!
For the number lollipops, instead of giving the ::before element the vertical bar special character, you can leave the content empty and give it height, width and a background color, that way you can have control over how thick and long you want it to be. Like this:
.number::before {
content: "";
background-color: grey;
height: 100px;
width: 1px; /* or however thick you want it to be */
}
Cheers.