Hi, I'm Alex

Four Card 'Pokemon' Feature

by Alexander Roan on 17 Nov 2024

Challenge Details

One of the challenges on Frontend Mentor is to create a four card layout. One of the purposes of the exercise is to use CSS grid. The main challenge is themed around an AI tools company. I decided to create an alternate design based on Pokemon.

Fortunately the Pokémon website has lot's of images and information. They have a complete Pokédex there. I had a quick scroll through and decided to use Pikachu, Growlithe, Farfetch'd and Gyarados. Farfetch'd is one of my favourites, so funny with it's spring onion/leek stalk.

Pokemon Design

Desktop:

Pokemon Desktop Design

Mobile:

Pokemon Mobile Design

Standard Design

Desktop:

Four Card Desktop Design

Mobile:

Four Card Mobile Design

Links

The website is live on GitHub. Use the links in the footer to switch between the original and Pokemon designs:

Pokemon live page on GitHub

And the submission on Frontend Mentor here:

Four card feature on FrontendMentor

Share, comment/discuss

Share to: LinkedIn, X