Labo 7
Theorie
Oefeningen
oefening 1
Maak de preview van het flex-box model na.
de body heeft een maximum breedte van 1000px en staat gecentreerd (gebruik
margin: 0 auto)een main met daarin een section en 6 artikels (
article)breedte van een flex-item is
350px. Gebruik hiervoor flex-basis.zorg voor een gap van
20pxgebruik https://picsum.photos voor de foto. Zorg voor foto's van 1000x500px.
lees meer heeft een link naar
#font-family: Arial,...
kleur van links nav:
darkgrayen hoofdletters met cssachtergrondkleur van de section:
rgb (240, 240, 240)
TIP: Centreer de body door de linker en rechter marge op auto te zetten.
oefening 2
Maak de preview van het flex-box model na.
de body heeft een max-width van 1000px en staat gecentreerd (gebruik
margin: 0 auto)zowel nav als main staan in een flex
een
mainmet daarin 8 paragrafen met een klasse.itemmain heeft een achtergrondkleur
lightgreyen 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 van200%de kleur van de links is
greylees meer heeft een link naar
#de breedte van de flex-items is automatisch.
zorg dat er telkens twee flex-items langs elkaar komen te staan
zorg voor een afstand van 20px tussen de flex-items.
TIP: Bij de berekening van de breedte van een container wordt geen rekening gehouden met de (flex-)gap. Gebruik daarom voor deze oefening padding (op voorwaarde dat box-sizing op border-box staat, maar css reset doet dit al voor je)
assets oefening 2
oefening 3
Maak de preview van het flex-box model na.
de body heeft een max-width van 1000px en staat gecentreerd (gebruik
margin: 0 auto)het lettertype over de gehele pagina is
Franklin Gothic Medium,...voorzie een
mainmet daarin 10 figures met met daarin telkens een afbeeldinggebruik Picsum.photos voor de foto's. Zorg voor foto's van 300x300px.
geef de img een breedte van 100% van het figure element.
voorzie elke figure van een figcaption (foto 1, foto 2, foto 3, ...)
zet nav en main in een flexbox.
zorg dat elk flex-item een flex-basis van 30% heeft.
zorg dat er 1rem ruimte tussen elk flex-item zit
zet © om naar een HTML-entiteit in de footer
de footer is sticky en heeft een witte achtergrond en een padding van
2remde main heeft een herhalende achtergrond afbeelding (link naar assets)
assets oefening 3
oefening 3b
Kopieer voorgaande oefening
Zorg er nu voor dat de laatste image de volledige breedte van de main inneemt (gebruik
flex-grow)Zorg dat de laatste image breed genoeg is (1000px) maar niet te hoog (bv. 200px)
oefening 4
Vertrek voor deze oefening vanuit de volgende bestanden:
Maak een extra pagina studenten.html aan
de pagina heeft structureel dezelfde opmaak als
index.htmltussen section
infoen de quote komt een sectionportfolioplaats in de section
portfolio6 afbeeldingen met bijhorende tekst (gebruikdisplay: flex)elke figure heeft een afbeelding (breedte 432px) met alt en een
figcaptionde 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
assets oefening 4
Uitbreiding
Last updated