Job Interview Task

To show us your skills and how you work with HTML, CSS and JavaScript, we want you to build a small landing page. You will find 2 Screens in the ZIP-file that illustrate how the page should look like on desktop and mobile. Please keep it simple and don't spend more than 4-6 hours. It doesn't have to be perfect.

Things we want you to utilize/keep in mind:

• Use Bootstrap 4 as a framework (please only use the grid-layout and grid-helpers)
• Make use of HTML5 and CSS3 feature where possible (e.g. picture-element, flexbox)
• Make sure the page works with 320px width for mobile phones
• You can use simple screenshots for header & footer or leave them out
• Just use base fonts like Arial for everything
• Use Placeholders for images you don't have
• Include a small JavaScript that changes the h1-headline based on a parameter in the URL. E.g. "index.html?headline=banana" will change the headline to "banana"
• Use native JavaScript (no jQuery)
• Browser-Support:
  • Safari 9.0+
  • Google Chrome 62+
  • Mozilla Firefox 57+
  • Internet Explorer 11
  • Microsoft Edge 14+

Bonus

If you have the time you can do the following:

• Use Swiper-Slider for the product carousel in the middle of the page. Set it to show all items on desktop and then gradually reduce the number of items until only 2 are displayed on mobile. (you can just leave out the arrows or use default ones from swiper)
• Use images from our server (not locally). We use a service called Cloudinary which enables to modify images (e.g. width & height) based on parameters within the URL. See Cloudinary Reference. Use image transformations parameters between /content/.../test/ in image-URL.
  • Hoodie image for header
  • Volume Icon (SVG)
  • Return Icon (SVG)
  • Quality Icon (SVG)
  • Hoodie 1061 for slider
  • Hoodie 1111 for slider
  • Hoodie 1068 for slider
  • Hoodie 989 for slider
  • Hoodie 405 for slider
  • Hoodie 512 for slider