@Dreamleaf
Posted
A couple of points about the text elements in the card.
-
You have both the title and text within p tags, ideally there should be a heading within the element. So you could have made the "improve your...." text a h1 element. In a real world situation, there would likely be other things on the page and the title may be better suited as a h2.
-
You have both text sections set with a single font size, the design has them differently - and while there is a bit of trial and error needed, you could have styled them accordingly.
-
When you declare the font - always include a fall back font if the main choice is being pulled in from an external source. This way if there is an issue with the fonts loading, you still control how it looks. For this you just need to write:
font-family: outfit, sans-serif;
-
Look at using REMs for the font sizing instead of PX values, definitely have a read up on the difference and why it is better.
Keep going though, every time you write code it will improve.