https://github.com/xfiveco/fe-test-simple
Front-end test - job openings at https://xfive.recruitee.com
https://github.com/xfiveco/fe-test-simple
bem-methodology front-end javascript recruitment-task recruitment-test
Last synced: about 1 year ago
JSON representation
Front-end test - job openings at https://xfive.recruitee.com
- Host: GitHub
- URL: https://github.com/xfiveco/fe-test-simple
- Owner: xfiveco
- Created: 2021-04-21T10:40:29.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-29T11:39:13.000Z (about 5 years ago)
- Last Synced: 2025-02-17T07:16:04.870Z (over 1 year ago)
- Topics: bem-methodology, front-end, javascript, recruitment-task, recruitment-test
- Homepage:
- Size: 310 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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.
1. If possible, 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. Create a hover effect for the image thumbnails.
1. Create a simple custom overlay for photos.
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)
The following images are used in the design:
- [Image 1](https://pixabay.com/en/new-zealand-lake-mountain-landscape-679068/)
- [Image 2](https://pixabay.com/en/new-zealand-lake-web-kai-dock-583176/)
- [Image 3](https://pixabay.com/en/new-zealand-doubtful-sound-fjord-583181/)
- [Image 4](https://pixabay.com/en/sun-rise-beach-new-zealand-auckland-661541/)
## 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.