This is the assessment https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
And this is my work https://codepen.io/dasserban1/pen/XWqgeag
Thank you!
This is the assessment https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
And this is my work https://codepen.io/dasserban1/pen/XWqgeag
Thank you!
Hi @das.serban
Nice work!
I recommend using unitless line-height
values. See https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values for an explanation.
To vertically center the text in header and footer you can make sure that font-size * line-height = height
. For example:
.card header, .card footer {
height: 3em;
padding: 1em;
}
.card header h2 {
font-size: 2em;
line-height: 1.5;
}
.card footer p {
font-size: 1.5em;
line-height: 2;
}
See how both multiplications equal to 3em
? Thatโs the corresponding height of the parent. This also makes sure that the whole height of the card is 5em (header) + 12em (article) + 5em (footer) = 22em (card)
. Isnโt it nice how everything fits together?
Have a nice weekend,
Michael
Thank you for your recommendations! This was very helpful and it is always good knowledge to learn!