Testimonials 'Yamanote' Grid

Challenge Details

Frontend Mentor had a bunch of links to really good materials on CSS grid. Thanks to that, it wasn't that difficult to get this design right.

In addition to using grid for the main layout I found grid useful to align the headshot images with the names and role texts.

In general I found grid is a little more predictable than flex for quick use. Sometimes flex behaves in unexpected ways when it comes to alignment and wrapping. I also found grid to be a little more concise.

My alternate design for this challenge is the Yamanote line in Tokyo. One of my favourite train lines. I love the green colours. It also stops at a lot of the famous stations in Tokyo. I did a mock up of the design in Figma before building it with HTML and CSS.

Yamanote Design

Desktop:

Mobile:

Standard Design

Desktop:

Mobile:

Links

The website is live on GitHub. Use the links at the top to switch designs:

Testimonial live page on GitHub

And the submission on Frontend Mentor here:

Testimonial grid on FrontendMentor