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

🔖 Opdracht

Ontwerp en maak een interactieve website voor The Valley

🖇 Inhoud

• Over the Valley
• Design challenge
• Gebruik van de website
• Checklist wel/ niet gelukt
• Kenmerken
• licentie

🏦 Over The Valley

The Valley is a company that specializes in creating complete customer journeys for businesses. They have been in the industry for over two decades and have experience in developing both the communication and customer experience for businesses. They work as a strategic partner with businesses to understand their customer behavior and brand mission, and use a total customer experience approach to help businesses achieve their goals in the buying journey. This includes areas such as marketing, service design, automation, and e-commerce.

🎨 Design Challenge

Het doel van de opdracht was om een responsief ontwerp te creëren en uit te voeren voor de opdrachtgever. Voor de opdracht hebben wij een aantal richtlijnen waar we aan moesten houden tijdens bouwen van ons website. Dit omvatte onder meer het toevoegen van een carousel, een modal en verschillende animaties en overgangen.We ontvingen het desktop-ontwerp en andere benodigdheden via een Figma en de mobile first versie moesten wij zelf bouwen.

📝 Gebruik van de website

Op de website heb ik verschillende micro-annimaties toegevoegd. Voor de header text heb ik een rotate text gebruikt om titel wat levendiger te maken. Voor de facts en figures heb ik een slide-track gemaakt waardoor het uitbeeld weer terug in beeld kan komen. Voor images heb ik een scroll/carousel gemaakt. Ik heb een modal gemaakt met daarbij een thank you pop-up nadat je het hebt ingevuld.

👀 Checklist wel/niet gelukt

Gelukt ✅:

• Carousel/scroll
• Modal/dialog
• Micro-animatie op desktop, ipad en mobile
• Validation & kleurcontrast check
• Mobiele & Desktop versie
• Alle content zit er in

Niet gelukt❌:

• content van desktop versie met grid goed plaatsen
• grote van de afbeeldingen in mobile versie goed zetten
• Footer links toevoegen
• hamburger menu in nav werkend maken

🔎 Kenmerken

• • HTML:

• Header
• Main
• Sections/ articals
• Modal Formulier
• Popup

• • CSS:

• Navbar
• buttons
• transitions
• animations
• keyframes
• grid

• • JS:

• AddEventListener
• QuerySelectorAll
• getElementId

• • Figma:

Live Url 🌎

👾 Licentie

This work is licensed under GNU GPLv3.