Ichigo card page

by Alex Roan on Nov 13, 2024

One of the responsive design challenges on Frontend Mentor is a simple product preview card. The trick with this design is the image changes position between narrow screens and wider screens.

This allows for good utilisation of the wider space on laptops and desktops by including a larger image side-by-side with the product text. For narrow screens on tablets and mobiles the image moves to the top and the text flows below.

In addition to moving the text this challenge utiises the 'picture' element in HTMl and the 'srcset' attributes. These allow you to provide different images for different device sizes. A simple approach to images across device sizes is to shrink the image down, but in this case detail may become hard to see. With 'picture' you can provide a large image for devices with large screens and provde a cropped image for devices with smaller screens. This allows you to crop in on detail that you'd like to be visible on smaller devices.

The specification in the Frontend Mentor challenge is a product card for Perfum. After completing this design I decided to create a character card for Ichigo from the anime called Bleach. Instead of 'Add to Cart' I just labelled the button 'Add to favourites'.

Bleach was a very popular anime back in the day with around 260 episodes. I watched them all. Over the last few years they came back with some new seasons. The final arc. It's like meeting an old friend seeing Ichigo on the TV again!

The page is live on github.