Het Da Vinci gaat uitbreiden. Vanaf volgende week starten zij met hun 'handige bouwservice'. Daarvoor zouden ze graag een fancy website willen hebben voorzien van de nieuwste technieken, positioneringen en mooie 'hovers'. Ze hebben een webdesigner in de arm genomen en die is met het bijgevoegde ontwerp gekomen. Het is aan jou de taak om dit ontwerp zo goed mogelijk na te bouwen in HTML en CSS.

Aangezien ze nog niet helemaal weten wat ze allemaal op de website willen hebben, ga je twee pagina's maken: de Homepage en de Diensten pagina. De tekstschrijver heeft de teksten al voor je bijgevoegd in text.txt. Ook is de webdesigner al zo vriendelijk geweest om de kleuren voor je samen te stellen. Deze vind je in colorinformation.txt.

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

• De klant kan via zijn browser de webpagina bezoeken van het bedrijf Da Vinci Handy welke exact overeenkomt met het ontwerp
• De klant kan over het menu heen gaan en de achtergrondkleur van de menuitems worden geel
• De klant kan over 'Over Ons' heen gaan, er ontvouwd zich een submenu onder het menuitem
• De klant kan over alle drie de banners heen gaan met de muis, er verschijnt een transparant zwarte achtergrond met de bijbehorende titel over het item
• De klant kan over de 'Meer weten?' knop gaan en de achtergrond wordt grijs en de tekst wit
• De klant kan over de 'Diensten' knop gaan, de achtergrond wordt grijs en de tekst en het icoon wit
• De klant ziet in de footer wie de webpagina gemaakt heeft
• De klant kan naar de diensten pagina toe via zowel het menuitem onder 'Over Ons', de derde banner boven aan en de middelste knop onderaan.
• De klant kan over drie belangrijke woorden heen gaan op de tekstpagina. Er ontvouwt zich een informatieblok
• De klant ziet een werkende breadcrumb (pad van de website) bovenaan de tekstpagina

• Je html en css valideren via https://validator.w3.org/#validate_by_upload
• Je html en css zijn netjes uitgelijnd
• Je kunt door middel van Paint, Gimp of Paint.net de afstanden en afmetingen van de elementen meten.
• Je maakt gebruik van alle kennis die je al hebt
• Het gebruikte font is Archivo. Dit font is via google beschikbaar https://fonts.google.com/specimen/Archivo. Druk rechts op de rode tekst "select this font" voor instructies, selecteer onder 'customize' alle fonts.
• Je maakt gebruik van een div om gehele pagina te centreren, deze div is 1000px breed. LET OP: de twee brede afbeeldingen en de ribbon hebben 100% van de browser breedte en zijn dus altijd breder dan 1000px
• Je mag voor deze opdracht ** GEEN ** gebruik maken van een negatieve margin / padding
• De grijze balk van het menu is 950 px breed
• De font size van de normale teksten is 16 px en de lijn hoogte 24px en een tekst dikte van 500
• De font size van het menu is 12 px en van het submenu 16 px en een tekst dikte van 500
• De font size van de banner items is 32 px en een tekst dikte van 600
• De grote tekst in de ribbon is 34 px en de kleine tekst 16 px en een tekst dikte van 700
• De font size van de knop in de ribbon is 12 px en een tekst dikte van 500
• De font size van de grote tekst in de onderste banner items is 22 px, de kleine 14 px en een tekst dikte van 600
• De font size van de titels in de footer is 24 px en de tekst dikte van 600
• De font size van de tekst in de footer is 12 px en de regel hoogte is 18 px en een tekst dikte van 400
• De font size van de koptekst op de tekstpagina is 34px en een tekst dikte van 600
• De font size van de breadcrumb is 12px en een tekst dikte van 400
• De breedte van alle banner blokjes is 300 px
• De kleurcodes vind je in het project
• De icoontjes komen van Font Awesome vandaan, ze zijn ook als afbeeldingen bijgevoegd in het project
• Extra: Met de CSS eigenschap 'transition' kun je eenvoudig een animatie toevoegen op bijvoorbeeld :hover selectors. Probeer deze op de website toe te voegen.
• Zet onderin de footer je eigen naam.