Opmerkingen vooraf:

Gebruik een klasse of id enkel waar dit expliciet gevraagd wordt. Alle andere aanpassingen moet je dus doen zonder klasse of id toe te voegen.
Lees de informatie over CSS-selectors in Selectors.
Gebruik enkel CSS-eigenschappen die ook op de API staan, tenzij expliciet gevraagd wordt om dit op te zoeken. Je mag geen extra tags toevoegen om een selector eenvoudiger te kunnen beschrijven.

Voor volgende opdrachten voeg je de css toe in ugent.css en doe je eventueel kleine aanpassingen in het bestand index.html:

Zorg dat de achtergrond van alle hoofdingen (h1, h2, h3,…) UGent-blauw is (zoek de rgb- of hex-waarde van het UGent-blauw op via styleguide.ugent.be) en de tekst wit.
Bovendien moet de achtergrond van alle hoofdingen veranderen naar het kleur van onze faculteit als je er met de muis over beweegt.
Voorzie links en rechts van de volledige hoofding (header) 40 pixels extra ruimte.
Gemarkeerde delen (mark) moeten altijd een UGent-gele achtergrondkleur krijgen.
Zorg ervoor dat alle afbeeldingen in de tabel met producten een hoogte hebben van exact 150 pixels. Je mag ervan uitgaan dat er maar één tabel is die ook afbeeldingen bevat. Zoek hiervoor de juiste CSS-selector zie Selectors.
Bovendien moeten de afbeeldingen gecentreerd zijn in de cel van de tabel en 10 pixels padding hebben. Om dit op te lossen mag je maar één css-eigenschap gebruiken!
Je mag hier gebruik maken van een class. Tip: je moet css toepassen op de cel van de tabel, niet op de afbeelding zelf.
Enkel de afbeelding die in de header staat moet exact 100 pixels hoog zijn.
De figuur die in de header staat moet je naar rechts laten verspringen. Bovendien moet de inhoud van de figuur gecentreerd zijn.
De figuur moet volledig boven de eigenlijke inhoud (het gedeelte in main) getoond worden. Los dit op door enkel CSS toe te voegen. Controleer met Ctrl+ en Ctrl- dat dit ook correct blijft als je ‘inzoomt’. De eigenlijke inhoud van de website mag dus niet ‘naast’ de figuur getoond worden.
Voorzie een dubbele border van 4 pixels dik rond alle cellen van de tabel met je producten en centreer de tabel in het midden van het scherm.
Om de vier-dubbele borders te vermijden moet je voor de tabel extra CSS toevoegen. Gebruik hierbij collapse (zoek dit op, staat niet op de API). Hieronder een voorbeeld van een deel van de tabel met de gevraagde CSS:
Voorzie vierkante opsommingstekens voor de ongeordende lijst.
In Homepagina -verplichte HTML5-tags (6) werd een voettekst toegevoegd met een mailto-link. Wijzig de grootte van het lettertype naar small . En voorzie 20 pixels extra ruimte onder deze footer.
Zorg dat de iframe met de Spotyfy playlist over de volledige breedte getoond wordt en voorzie afgeronde hoeken van 15 pixels.
Wijzig enkel de footer die onderaan je pagina staat, zodat er 20 pixels extra ruimte wordt toegevoegd boven deze footer. Bovendien moet je deze footer in vet staan EN volledig in hoofdletters gezet worden met behulp van css. Deze opmaak mag je enkel toepassen op de footer onderaan. Zoek hiervoor de juiste CSS-selector zie Selectors. Gebruik de eigenschap die in de slides en op de API staat, anders zal je hier geen punten kunnen verdienen.