Labo 7

Voor deze oefeningen vertrek je telkens met een gelinkt reset.css bestand op basis van The New CSS Reset.

Zorg dat je de volgende folder structuur volgt:

webtechnologie/
├─ labo-01/
│  ├─ oefening-01/
│  │  ├─ index.html
│  │  ├─ images/
│  │  │  ├─ image-1.jpg 
│  │  │  ├─ image-n.jpg 
│  │  ├─ css/
│  │  │  ├─ reset.css
│  │  │  ├─ style.css
│  ├─ oefening-02/
│  ├─ oefening-n/
├─ labo-02/
├─ labo-n/

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 20px
gebruik 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: darkgray en hoofdletters met css
achtergrondkleur 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 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 #
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 main met daarin 10 figures met met daarin telkens een afbeelding
gebruik 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 2rem
de main heeft een herhalende achtergrond afbeelding (link naar assets)

assets oefening 3

949B

bg.png

image

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)