Four Card 'Pokemon' Feature

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:

Mobile:

Standard Design

Desktop:

Mobile:

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