Blok 2 - Les 3 - Van PSD naar WWW - Featured en Latest work

Opstarten

Open de PSD van Blok 2 - Les 1 (en 2). Open ook de website map waarin je werkte voor de voridge twee opdrachten.
Aan het eind van deze les, zal je het volgende resultaat hebben:

1 Banner

1.a Photoshop - Selecteer de witblauwe banner met de slice tool en sla hem op voor web.
      Pas goed op, dat je de schaduw rechts boven ook mee neemt in je afbeelding.
1.b HTML - Plaats de banner in het midden gedeelte van de website met het image element

2 Maak een h1 voor de"Latest work" kop en geef hem een border bottom met de juiste kleur.

In Principe geef je deze h1 dezelfde stijl als je hebt gedaan bij de Header Navigatie titel (les 2 opdracht 3).

Photshop - Knip  het vergrootglas icoontje uit met de slice tool en sla hem op voor web in de juiste map.
HTML – plaats een h1 element met de tekst “Latest Work” als inhoud.
HTML – Plaats in het h1 element, voor de tekst "Latest Work" een image met het vergrootglas icoontje.
HTML -  Geef de h1 element een class bijvoorbeeld "worktitel"
CSS – maak een  style blok aan voor de class "worktitel", de stijling doe je hetzelfde als je bij de menu titel hebt gedaan uit de vorige opdracht (3 Header Navigatie titel)
CSS – plaats hierin: border-bottom: 1px solid #c6c6c6;
CSS – plaats hierin een regel-hoogte van 23px
CSS – plak hierin het volgende:    vertical-align: middle;
CSS – plaats hierin de juiste font-size (zie PSD)

3 Maak de bovenste rij afbeeldingen onder "Latest work"

Voor de oefening hoef je in principe alleen de bovenste rij afbeeldingen te maken. Als je wilt mag je de tweede rij ook doen.

Photoshop - Knip de 5 afbeeldingen uit zonder de witte en grijze omranding
HTML - Maak een div onder de h1 die je zojuist bij de vorige opdracht hebt gemaakt.
HTML - Geef deze div een logische class (bijvoorbeeld: "latestworkitemst")
HTML - Plaats in de div 5 links (a elementen) waarbij je  in iedere link een afbeelding plaats (img element)
CSS - Maak een style blok voor alle (a) links in het div element latestworkitems
CSS - plak hierin de volgende stijlregel: display: inline-block;
CSS - plak hierin de volgende stijlregel: border-style: solid;
CSS - plaats hierin een stijlregel die de border breedte op 1px zet
CSS - plaats hierin een stijlregel die voor een binnenruimte van 4px zorgt
CSS - plaats hierin een stijlregel die voor een witte achtergrond zortg
CSS - plaats hierin een stijlregel die er voor zorgt, dat de ruimte tussen de afbeeldingen gelijk is aan het photoshop design.