Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md
The Startup - Responsive interactieve website
Ontwerp en maak een responsive website voor een startup.
Inhoudsopgave
Beschrijving
Voor deze opdracht moesten we een pagina bouwen voor de Q42 website. Op deze website wil Q42 graag met trots al hun collega's tonen aan de buitenwereld. Het is de bedoeling dat we via een volledig responsive grid alle Q'ers tonen van twee kanten: een serieuze kant en een speelse kant. Ook is het de bedoeling voor de bezoekers van Q42 om te kunnen filteren, om zo een specifieke groep in beeld te krijgen.
Op mijn website heb ik hetzelfde navigatie en layout design als de originele Q42 website. Het verschil komt ná de introtekst. Om te beginnen is er een skip to content knop aanwezig om de navigatie over te slaan en direct naar de content te springen. Ik heb ervoor gekozen om de filters op een groot scherm boven de foto's te plaatsen, op een klein scherm zijn deze filters in en uitklapbaar om drukte te beperken. Via deze filters kan je filteren op verschillende dingen zoals "Harry Potter fan", "Short hair don't care", etc. Om meer rust uit te stralen heb ik witruimte gegeven tussen alle collega's. Als serieuze kant van de collega's staat hun portret weergeven met daaronder hun naam en emailadres, en als speelse kant staat een foto van de collega's in disney stijl met de filters die bij hen horen. Tot slot heb ik de foto's een border-radius gegeven om de website een iets informelere sfeer te geven.
Visual
Kenmerken
De belangrijkste kenmerken en technieken voor deze pagina zijn CSS Grid met auto-fill en de meerdere functionaliteiten in Javascript zoals het in-en-uitklapbare filter, het filtersysteem zelf en het omdraaien van de fotokaartjes. Hiervoor heb ik onder andere het Javascript driestappenplan gebruikt zoals document.querySelectorAll, EventListeners, ...classList.toggle/add/remove etc.
QR Code
Licentie
This project is licensed under the terms of the MIT license.