Met deze techniek kun je een diashow of fotogalerij maken, of een portfolio pagina waarop al je projecten te zien zijn: preview cards (= kaarten voorvertoning). Voeg de volgende HTML code aan je pagina toe:
We gaan een paar kaarten maken met top bezienswaardigheden in Nederland. Je kunt zelf de afbeeldingen kiezen en tekst schrijven. Kies kaarten die bij de inhoud van jouw pagina passen.

Voeg deze CSS code toe voor de classes card en smallPics en de heading h3:

De fonts (= lettertypes) League Gothic en Lato gebruiken we in veel CoderDojo materiaal.

Het zou er nu ongeveer zo uit moeten zien.We gaan er links van maken waarop mensen kunnen klikken om meer te zien.

Zet het hele article element in een link element. Let op: de eind </a> tag moet na de eind </article> tag staan!

Zie je hoe de waarde van href eindigt op #scPaleis? Dit is een trucje dat je kunt gebruiken om naar een specifiek gedeelte van een pagina te springen. Eerst type je de url van de pagina, gevolgd door #. In het codebestand van de pagina waar je heen linkt, zoek je het gedeelte waar je naar toe wilt springen en geef dat element een id, bijvoorbeeld <section id="scPaleis">. De waarde van de id is wat je na de # typt in je link.

Nu ziet de tekst er gek uit omdat het een link is. Dit kun je verbeteren door een CSS class toe te voegen aan de link, class="cardLink".

Als je de waarde van welke eigenschap ook zet op inherit (= overnemen), dan gebruikt het de waarde van het parent element (het bovenliggende element), dus nu komt de tekstkleur overeen met de tekst op de homepagina.

Maak nu zelf 4 of 5 van deze kaarten. Op de volgende Sushi kaart gaan we ze met een cool trucje op een goede plek op de webpagina zetten.