SPO recruitment task for developers

Hello! Welcome to SPO styling based coding challenge. This challenge represents a task that is very close to what we are usually working on at SPO. You should take no more than 1h to complete it.

The souce code of the solution should be provided as a bunch of files. It is highly recommended to use some build tools (preferably gulp or webpack) and push all the sources to git repository so you will be able to demonstrate also your ability of working with build tools and git itself. Please note that code quality is also important for us.

Good luck to you and hope you will enjoy the process while solving this task!

Create a responsive list

The aim of this exercise is to create a responsive / adaptive list, that should be optimized for a screen width of 320 - 2000px.

Here is a JSON, that contains all the data, that should be displayed in the list, it includes basically text and images:

{
  {
    headline: "Volle Kontrolle und unkomplizierte Abrechnung",
    description: "Steuern, überprüfen und bewerten Sie den gesamten Reinigungsprozess digital. Ihre Buchungen können Sie jederzeit online verwalten. Am Monatsende erhalten Sie eine gebündelte Rechnung für alle Services.",
    image: "https://github.com/servicepartnerone/spo-styling-challenge/blob/master/images/C_Content_1_optimized-600x600.jpg"
  },
  {
    headline: "Faire Konditionen und ausgebildete Reinigungskräfte",
    description: "Wir handeln bei unseren Partnern die besten Preise für Ihren Reinigungsservice aus. In unserer Cleaning Academy werden die Reinigungskräfte unserer Partnerunternehmen eigens ausgebildet.",
    image: "https://github.com/servicepartnerone/spo-styling-challenge/blob/master/images/C_content_3_optimized-600x600.jpg"
  },
  {
    headline: "Einfache Kommunikation, zuverlässig und flexibel",
    description: "Ihr persönlicher Ansprechpartner beantwortet Ihre Fragen schnellstmöglich. Wir stellen sicher, dass die Reinigung Ihres Gebäudes zum für Sie optimalen Zeitpunkt erfolgt. Fällt die übliche Reinigungskraft urlaubs- oder krankheitsbedingt aus, sorgen wir rechtzeitig für Ersatz.",
    image: "https://github.com/servicepartnerone/spo-styling-challenge/blob/master/images/C_content_4_optimized-600x600.jpg"
  },
  {
    headline: "Ausstattung für Ihren Sanitärbereich",
    description: "Im Sanitärbereich werden Sie nicht nur mit Toilettenpapier, Seife und Handtuchpapier versorgt, sondern erhalten mit der Anbringung und Unterhaltung der Spendersysteme ein Sorglos-Paket.",
    image: "https://github.com/servicepartnerone/spo-styling-challenge/blob/master/images/C_content_2-600x549.jpg"
  },
}

There are many ways to reach the goal, a good combination of adaptive and responsive styling would be highly appreciated.

You can be creative with your styling of the list.

Using a CSS preprocessor like LESS or Sass would be definitely a bonus.

Technical requirements

1. List should be responsive / adaptive

Bonus (optional)

1. Use a CSS preprocessor like LESS or Sass

2. Provide a readme with an instruction how to install your application