Detectify Challenge

Landing Page

This project is build by using HTML, CSS and JavaScript. In order for solution to run, you need to clone the repo. Open the project through Visual Studio Code and by using Live Server Extension (or any other IDE which supports Live Server extension) run the project.

1. Build a landing page for desktop & mobile

• Build a landing page

  • Desktop version
  • Mobile version

• Main navigation

  • Clicking solutions should open a drop-down menu
  • The header is sticky and gets a shadow when scrolling the page

2. Build an event section for the landing page

• Build an event section

  • Event listing
  • Display past present and future events
  • Use next/prev arrows to navigate to next/prev 3 events
  • Remove arrow (next/prev) if at the end of the results
  • You may display less (1 or 2) if there are not enough events to display

• The event cards

  • By default, the listing should show 3 present or future events
  • Sometimes it might not be possible to show 3 events. Show less events in that case.
  • Next/prev arrows should list next or previous 3 events, remove arrows if there are no next or prev items.

• The filters

  • The filter bar has a search and filters for type and month
  • It should be possible to filter results by type: ALL, ONLINE, or LIVE events
  • Default behavior is to show ALL types
  • Search should look for TITLE, DESCRIPTION, and COUNTRY
  • It should be possible to filter by MONTH
  • It should be possible to search within the filtered items
  • If there are no matches when filtering or searching - display a “ no match ” message

• Other requirements

  • The landing page needs to be responsive
  • The top navigation should work similar to the mobile and desktop designs provided