In deze workshop ga je het bestelformulier van Coolblue nabouwen aan de hand van een screenshot. In de screenshot is het formulier enigszins aangepast, en versimpeld zodat het makkelijker na te bouwen is.

Het formulier hoeft niet verstuurd te kunnen worden. (mag je wel eventueel proberen te maken nadat je het formulier in html/css gebouwd hebt)

<aside> 💡

Let wel op dat je de juiste input-types gebruikt, en de correcte placeholder waardes.

</aside>

Stap 1:

Maak een nieuw mapje aan: workshop_2, met hierin een html bestand, en noem deze coolblue.html.

Bouw hierin onderstaand bestelformulier van coolblue na

Zorg er voor dat de look-en-feel overeenkomt. De lettertypes hoeven niet exact hetzelfde te zijn. Het formulier is 1920px breed. De overige maten kun je zelf opmeten in de afbeelding zelf.

Bonus

Er zijn bonus punten te verdienen door:

• de website responsive te maken
• het formulier ook daadwerkelijk werkend te maken met php, waarmee de ingevulde gegevens naar het mailadres van het e-mailadres veld gemaild worden.
• Client-side validatie (met Javascript) toe te passen op de input-velden
• Server-side validatie (met PHP) toe te passen op de input-velden