@dolapobj
Posted
I really like how you used the <template> tag to dynamically render the different cards. I used a different approach and had to write out all the HTML for each card in my js script.
The only thing that really stood out to me to be improved is in how you define your grid.
@media screen and (min-width: 56em) { .grid-container { grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: repeat(2, 1fr); grid-template-areas: "profile work play study" "profile work play study" "profile exercise social self-care"; } }
Here you define two rows but in the template you have three? I think it was just a small typo.
Othwerwise, incredible job! Well done!
Marked as helpful
@ijohnst
Posted
@dolapobj You're right it is a typo. When I initially wrote it the left profile card wasn't tall enough so i added the third row to balance it out to look more like the picture. Good catch
