Front-end Test Project

Project brief

Convert the following designs to a functional front-end.

Thumbnails

Overlay

Requirements

1. Create the project using your preferred method for building front-end projects.
2. If possible, use BEM with the SCSS syntax for styling.
3. Make it responsive according your best judgement. The 1920px resolution of the design is a reference resolution we compare your conversion to.
4. Create a hover effect for the image thumbnails.
5. Create a simple custom overlay for photos.
6. Create a transition for opening the overlay like shown in this prototype.

Design

• Design is available in Figma. If you haven't already, sign up for a free Figma account, so you can inspect the design.
• Prototype

The following images are used in the design:

• Image 1
• Image 2
• Image 3
• Image 4

Supported browsers

Ensure that the page works and displays correctly in the latest version of the following browsers:

• Google Chrome
• Firefox
• Microsoft Edge

Project Deadline

Deliver project within 1 week time.