oefeningen
Last updated
Last updated
Opgelet Deze oefeningen zijn deprecated, we verwijzen je graag door naar de oefeningen in de nieuwe oefeningen sectie
Deze oefeningen worden behandeld tijdens LW4 (UI&UX en CSS): Labo 7
Maak de preview van het flex-box model na.
een main met daarin een section en 6 artikels (article)
section is steeds 90% breed, gecentreerd en heeft een maximum breedte van 1200px.
breedte van een flex-item is 350px
zorg voor een gap-size van 20px
link afbeeldingen: https://placehold.co/400x200
lees meer heeft een link naar #
font-family: Arial,...
nav staat ook in een flex
kleur van links nav: darkgray en hoofdletters met css
achtergrondkleur van section: rgb (240, 240, 240)
Maak de preview van het flex-box model na.
zowel nav als main staan in een flex
een main met daarin 8 paragrafen met een klasse .item
main heeft een achtergrondkleur lightgrey en een achtergrondafbeelding die wordt herhaald (link)
het derde .item heeft een achtergrondkleur rgba(139, 211, 146, 0.5) en de eerste letter heeft een grote van 200%
de kleur van de links is grey
lees meer heeft een link naar #
Maak de preview van het flex-box model na.
• zowel nav als main staan in een flex
• main heeft een maximum-breedte van 1200px
• het lettertype over de gehele pagina is Franklin Gothic Medium,...
• een main met daarin 6 figures
• link afbeeldingen: https://placehold.co/300
• zet © om naar een HTML-entiteit in de footer
• de footer is sticky en heeft een witte achtergrond en een padding van 2rem
de main heeft een herhalende achtergrond afbeelding (link naar assets)
Deze oefening is een vervolg op de oefening van LW4 - labo 5. Vertrek vanaf die oplossing.
Maak een extra pagina studenten.html aan
de pagina heeft structureel dezelfde opmaak als index.html
tussen section info en de quote komt een section portfolio
plaats in de section portfolio 6 afbeeldingen met bijhorende tekst (gebruik display: flex)
elke figure heeft een afbeelding (breedte 432px) met alt en een figcaption
de te gebruiken afbeeldingen en teksten staan onderaan bij de assets (link)
op de figure staat een link naar “#”
zet de nav met de menu-items in een flex
