Hi @Ry4nW and welcome to the community
Indeed and it’s cool when you do some own customization
To improve the border there are two thing you could do:
The reason the outer borders don’t match is that the border and the header/footer don’t have the same origin for the radius. You could see this problem better when you increase the card border to let’s say
border: 2em solid darkslategrey;. To make it look better we could decrease the border radius of the header and footer to for example
footerseparately and only define the outer borders.
Example for the
border-radius: 0.7em 0.7em 0 0;
To improve the height issues you need to do the following:
- Remove the padding from the article
- Add a bit of padding to
<p>inside the article (e. g. 1em)
- Decrease the height of the whole card (I think 26em would work)
I hope that helps! Feel free to ask questions.
For future exercise (or if you like to show an improved version of this exercise) it would be great if you could put your work on an online editor like CodePen. This way we can see the end result and are able to experiment with possible improvements. Would be much easier for us.
Have a nice weekend,