Jun Weiโข 200
@junwei-wong
Submitted
What are you most proud of, and what would you do differently next time?
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:
display: grid;
grid-template-areas: 'danial danial jonathan kira'
'jeanette patrick patrick kira';
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
What challenges did you encounter, and how did you overcome them?
-
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%;
