Angular Test Project

Project brief

Convert the following designs to an Angular app.

Thumbnails

Overlay

Requirements

1. Use BEM with the SCSS syntax for styling.
2. Make it responsive according your best judgement. The 1920px resolution of the design is a reference resolution we compare your conversion to.
3. The images should be loaded from this external source (you can use it as a fake API with the list of images).
4. Create a hover effect for the image thumbnails.
5. Create a simple custom overlay for images. Each image should be reachable by its own URI.
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

Supported browsers

Ensure that the app works and displays correctly in the following browsers:

• Google Chrome
• Firefox
• Microsoft Edge

Project Deadline

Deliver project within 1 week time.