Duration: 2,5 hours

languages: HTML, CSS (SASS/LESS), JS

You edit and save the files you create or customize directly in the repository's
cloned Git Fork using our attitude test. Once completed, you commit the entire
repository including your files and push your changes back into your fork. Once
you're done, let us know so we can review and evaluate your solution.

The following factors are included in our evaluation:

The time it takes you to complete your solution (maximum 2.5 hours)
Quality of your implementation
Usability of your solution
Correct display, even on different media and screen sizes
Use of modern solutions
Quantity of tasks implemented
Preparation
The recruitment test assumes that you already have basic knowledge of using npm or
yarn, but this is not necessarily required. The recruitment test consists of the
following files:

this README.md file with information about the process

a package.json as a framework if you want to load dependencies
a minimal project structure in the src folder including two images that can be used
the wireframes included in this readme
After you've successfully cloned your git attitude test, you can start thinking
about any dependencies you may need to have. If you use a CSS preprocessor, which
is optional but preferred, you should set it up now.

Change to the project directory and start processing.

:::sh
console:~ cd recruiting-test-fe
Task
In the following you see the mockup wireframes of a web interface. Your task is to
rebuild them in several steps. There are deliberately several small additional
tasks, whose implementation is included in the evaluation.

In which order you work on the tasks is up to you.

In a fictitious customer project, we need an overview of individual CMS contents,

e.g. a cooking blog.

The overview should look similar to the following wireframe.

However, no pixel-exact reproduction is necessary!

Overview of entries

Create such an overview within an HTML file. It is important that the elements
within a row have the same height regardless of their content. Make sure that the
individual elements are displayed uniformly and that the page can be displayed on
different devices.

Since we want to get to know your "manual" skills, the use of ready-made CSS
frameworks such as *Bootstrap* is not desired here
Responsive
Make sure that contents are responsive, i.e. that they adapt dynamically to
changing sizes of the Viewport.

Breakpoint
In order to make the site attractive for mobile users, you should include a
breakpoint at 480 pixels. Below this breakpoint, the elements will become a single-
column display, showing all elements one below the other.

"More" Overlay
As you can see from the first wireframe, the individual post previews have a More
button. A click on this button should open an overlay, similar to the one shown in
the following wireframe:

Detail Overlay

As a bonus you can also consider the usual functions of an overlay, e.g. closing
when clicking on the X or pressing the escape key.

Special Icons
The CI/CD provides for some special icons. Use an external font (e.g. Font Awesome)
and use it for the help icon on the overlay.

Filter list
To stay with the example of our cooking blog, the opened overlay contains a
collection of recipe suggestions. Exemplarily represented by this Lorem Ipsum list:

Lorem ipsum dolor sit amet

Dolor parturient dapibus
august risus
enim facilisis
Inceptos etiam pulvinar
blandite mattis
Sed dolor bibendum
velite vestibulum
Egestas fringilla
Suspendisse at dictum
These should be filterable in real-time with the help of Javascript. For example,
when entering the letter l in the search field, the list should be reduced to all
entries that also contain an l. If you enter another letter, e.g. o, the list will
be reduced to all entries containing the letter combination lo and so on.

This behaviour can be achieved by using a ready-to-use Javascript library or by

developing your own pure JS code. Self-developed JS code is considered a bonus
here.

Translated with www.DeepL.com/Translator (free version)