@efabrizio75
Posted
Well done Jennifer! Congratulations on competing another challenge!
As you requested, I took a look at opportunities in your CSS and what came to mind was in the table element: have you considering using the th tag so you don't need to resort to pseudo-selectors? Even though the table is oriented differently, "Calories", "Fat", "Protein", and "Carbohydrates" are still acting as headers.
When I looked at the instruction steps, I noticed that maybe some left padding is needed. Likewise, I am curious about the counter-reset usage: I thought there was no need in this case, but in case you know more I'd very interested to learn :)
I really liked your exploration and usage of the nested rules in CSS! It reminded me that I should do more of it :-P
Ah, the hr element appears a bit thicker than the design. It's not an easy element to style, but you could try by assigning an overall border of 1px to it, and then eliminate either the top or the bottom:
hr {
border: 1px solid var(--clr-stone-600);
border-bottom: none;
}
Again, awesome work and continue with more challenges!
