@dev-paulL
Posted
Hi 👋
I recommend you to test your page behavior by resizing the browser window, zooming in and out and changing the browser font-size. For me, it looks completely different from the original design.
You could also read about semantic html tags to avoid using <div> everywhere.
(For example your container div could be <main>, your card div could be <article>, your attribution div can be a <footer>) .
Be careful when using em as it can be unpredictable.
Make sure you use the right fonts (they give it in style-guide.md).
I see you are using 2 divs (one for mobile and one for desktop, I guess). To render a different image depending on the device size, you should use <picture>, and adapt the media-queries for the other elements.
I suggest you to start by coding the mobile design when they are not complex, then adapt your layout & media queries to the tablet and desktop version. This usually results in shorter and more readable CSS files.
Keep it up 👋
