front-end webontwikkeling

Ctrlk

Labo 7

Theorie

Display property: flex

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 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

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)

oefening 4

Vertrek voor deze oefening vanuit de volgende bestanden:

1MB

05-HTML-CSS-basis-oplossingen.zip

archive

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

assets oefening 4

78KB

ap-sfeer-01.jpg

image

87KB

ap-sfeer-02.jpg

image

100KB

ap-sfeer-03.jpg

image

87KB

ap-sfeer-04.jpg

image

89KB

ap-sfeer-05.jpg

image

91KB

ap-sfeer-06.jpg

image

114KB

image

2KB

labo-07-teksten.txt

Uitbreiding

PreviousLabo 6 NextLabo 8

Last updated 3 months ago