99% using grid. Only centering the body html tag that I used flexbox.
For the profile header:
display: grid; align-content: space-between;
For the overall layout:
What challenges did you encounter, and how did you overcome them?display: grid; grid-template-areas: 'danial danial jonathan kira' 'jeanette patrick patrick kira'; grid-template-columns: repeat(4, 1fr); gap: 2rem;
-
Using grid properly, and lots of mdn, stackoverflow, and googling. I feel that in production or practical experience, everyone is more comfortable with flexbox than grid. This challenge forced me to use grid more effectively than ever before.
-
Figuring out how to add the quotation into the background. Using svg as a background instead of a tag. This is cool ngl.
background-image: url(../images/bg-pattern-quotation.svg);
background-size: 7rem 7rem;
background-repeat: no-repeat;
background-position: top right 18%;