All solutions

A simple challenge, and yet I spent more time on this than any other.

The similarities and differences between using position and margin to shift elements were emphasised here. When shifting the avatar upwards my instinct was to go for position: absolute. This led to having to put a calculated extra margin above the text to stop it colliding with the avatar. At some point I realised I could shift the image up with negative margins alone and then the avatar would still own its own space, a nicer solution.

The relationship between pseudos and images continues to be a tricky one. An img by default has a descender, you can remove this easily in CSS, but not when you reference an image via a url(). If you put url() in content then you get a descender. If you put url() in background then it appears you do not. If in background then you need to give a size to the content otherwise it has none. I probably think that the HTML/CSS should control the size of the box an image is displayed in & not the image itself, thus I put the card pattern in the background and set height.

Overall I think this one was a little displeasing. I note a few accuracy errors on the desktop design but not too fussed on that. It took a while despite requiring no new skills so hm.

I spent an age trying to make it responsively grow in desktop mode, like getting the padding & font to shrink and grow until it snapped on the media. The image on the right has a certain aspect ratio, it needs the left hand to shrink in tandem or it displays badly (with space at the bottom). Played with mins, maxes, clamps, & %s but couldn't quite get it to fit well in the head. I was flailing really. Attempting to add this behaviour as I was all but finished did not really help, I was jutting in new html at the nth hour. I'm sure a similar challenge will present itself, there's another 50 or so free efforts to go. Will research some ideas in the meantime.

Matching a static design, with media elements is becoming do-able enough. A more gradual responsiveness is tricky!

Utterly obsessed with pseudos. This image really shouldn't have been a pseudo, it was prominent and important enough to deserve its own <img>. However it made an interesting challenge.

If you place a content:url(image-path) then it takes a default size of the image and you appear to have no influence upon it (it was too big). So the next best alternative is the background-image, but then with no content you end up with a empty element. You can set the width & height manually, and that would work here, but as a universal solution it is poor in that the card could never scale.

After much trial and error it transpired the trick was to set the width at 100% (+ padding losses in this instance), and then set an aspect ratio to whatever the image height and width is. And thus the card can be resized at will, and the image will follow. A very pleasing solution.

I wish to remember that an img element by default is inline and this means it sits on the baseline with any text, text has a descender, thus img without manipulation also has a descender. This led to my cyan overlay having 4px of extra extension. I solved at first by setting line-height to 0, but then on realising the behaviour was about display, instead I set the img to block.

Working with pseudos is tricky due to reduced feedback, in the past I've had no answer, but here debugged by created a div.pseudo-before and styling that, this gave access to inspection tools.

As I think, not wholly sure why my overlay works, by rights the cyan background is ::before the image, so surely it has a lower z-index and should not be visible?

Deceptively tricky, the font Overpass has padding underneath its descender, so whenever you vertically center it looks off. Took a while to discover this. Had problems with the star I should investigate, it also would not center, but it harder to inspect as I made it a pseudo. My stamina to un-pseudo it and look waned as I really did spend ages puzzling over the font alignment. Anyway, padded everything to victory.

Trying out BEM, classes everywhere. Wondering if saas would reduce the mess, people think it does, but the indents look like a mess of their own.

Progressing in terms of understanding how to manipulate CSS. A little messy though, inc. on the HTML side I suspect. Need to understand BEM and not guess at it. Need to use multiple classes on elements more often.