Verbergen Voor de opdracht van deze week ga je het toegevoegde plaatje (opdracht.png) zo exact mogelijk proberen na te maken doormiddel van HTML en CSS. Omdat je het ontwerp zo exact mogelijk probeert na te maken zijn er heel concrete technische eisen, lees deze zorgvuldig door. Het gebruikte plaatje van het gehaktbrood is tevens bijgevoegd.

Tevens ga je na het uitwerken van het ontwerp twee nieuwe pagina's maken. Een recept van een voorgerecht en een recept van een nagerecht. Uiteindelijk krijgen we dus een website voor een driegangenmenu.

Het resultaat van je opdracht plaats je uiteraard op github, de link naar de github repository lever je in.

Functionele eisen:

• De klant kan via zijn browser de webpagina bezoeken met het recept voor gehaktbrood welke exact overeenkomt met het ontwerp.
• De klant kan via zijn browser de webpagina bezoeken met het recept voor een voorgerecht.
• De klant kan via zijn browser de webpagina bezoeken met het recept voor een nagerecht.
• De klant kan via een menu tussen de verschillende pagina's navigeren.

Technische eisen:

• Je html en css valideren via https://validator.w3.org/#validate_by_upload
• Je html en css zijn netjes uitgelijnd.
• Het gebruikte font is Roboto. Dit font is via google beschikbaar, https://fonts.google.com/specimen/Roboto. Druk rechts op de rode tekst "select this font" voor instructies.
• Je maakt gebruik van een div om gehele pagina te centreren. Je kan dit doen door de div een margin van 0px boven en onder te geven en links en rechts automatisch te laten verdelen (margin: 0 auto;).
• e font size van de normale teksten is 20 pixels en de lijn hoogte 26 pixels.
• De hoofd titel heeft een font size van 36 pixels en een lijn hoogte van 36 pixels.
• De eerste paragraaf na de hoofd titel heeft font-size van 24 pixels en een lijn hoogte van 32 pixels.
• Alle andere titels hebben een font size van 32 pixels en een lijn hoogte van 32 pixels.
• De ruimte tussen de verschillende delen content bestaat uit 40 pixels.
• De ingredienten hebben een ruimte van 10 pixels tussen elkaar.
• De verschillende stappen van de bereidingswijze hebben een ruimte van 20 pixels tussen elkaar.
• De tip heeft een achtergrond met de kleur code #def6ed en een border-radius van 4 pixels en de paragraaf staat ten minste 25 pixels van de rand van het element af.
• Je maakt een net menu voor elke pagina zodat er genavigeerd kan worden tussen het voorgerecht, het hoofdgerecht (gehaktbrood) en het nagerecht.
• De webpagina's met het recept voor een voorgerecht en de webpagina met het recept van een nagerecht hoeven niet aan bovenstaande technische eisen te voldoen. Je mag deze pagina's dus zelf stijlen.