https://github.com/xfiveco/angular-test-simple

Angular test - job openings at https://xfive.recruitee.com
https://github.com/xfiveco/angular-test-simple

Last synced: 5 months ago
JSON representation

Angular test - job openings at https://xfive.recruitee.com

• Host: GitHub
• URL: https://github.com/xfiveco/angular-test-simple
• Owner: xfiveco
• Created: 2022-01-04T12:23:28.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-18T12:00:38.000Z (over 4 years ago)
• Last Synced: 2025-05-14T23:11:13.248Z (about 1 year ago)
• Size: 311 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Angular Test Project

======================

## Project brief

Convert the following designs to an Angular app.

### Thumbnails

![Xfive Gallery Test Thumbnails](xfive-front-end-test-thumbs.jpg)

### Overlay

![Xfive Gallery Test Overlay](xfive-front-end-test-overlay.jpg)

## Requirements

1. Use BEM with the SCSS syntax for styling.

1. Make it responsive according your best judgement. The 1920px resolution of the design is a reference resolution we compare your conversion to.

1. The images should be loaded from [this external source](https://github.com/xfiveco/mock-api-images) (you can use it as a fake API with the [list of images](https://raw.githubusercontent.com/xfiveco/mock-api-images/main/images.json)).

1. Create a hover effect for the image thumbnails.

1. Create a simple custom overlay for images. Each image should be reachable by its own URI.

1. Create a transition for opening the overlay like shown in this [prototype](https://www.figma.com/proto/XmLxW928QcDblZul5dGpLM/Xfive-Gallery-Test?node-id=1%3A2&viewport=73%2C86%2C0.5&scaling=min-zoom).

## Design

- [Design](https://www.figma.com/file/XmLxW928QcDblZul5dGpLM/Xfive-Gallery-Test) is available in Figma. If you haven't already, sign up for a free Figma account, so you can inspect the design.

- [Prototype](https://www.figma.com/proto/XmLxW928QcDblZul5dGpLM/Xfive-Gallery-Test?node-id=1%3A2&viewport=73%2C86%2C0.5&scaling=min-zoom)

## 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.