# data[].attributes.body
https://getbootstrap.com/docs/4.0/layout/grid/

# data[].attributes.body
Bestudeer de W3C pagina over Flexbox.

Maak een flexbox layout. Je layout bevat:
- 1 flexbox container
- 6 flexbox children

Zorg dat 6 vakjes in het midden komen te staan en automatisch naast elkaar.

# data[].attributes.body
Maak een responsive image grid. Gebruik hiervoor flexbox rijen en kolommen

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery

# data[].attributes.body
Maak een serie van 12 vakjes. Geef de laatste een andere kleur door deze een class te geven en door :not(e) te gebruiken.

Gebruik de W3C of css-tricks pagina over :not(e)

# data[].attributes.body
Vervang de class uit de vorige oefening door :last-of-type te gebruiken

# data[].attributes.body
Plaats:

- 1 Pagina titel
- 3 items met:
> een subtitel
kleur: #048b8b

> een foto
500px breed

> een paragraaf tekst
500px breed

// HTML
Afbeelding:
https://www.w3schools.com/html/html_images.asp

Kopjes:
https://www.w3schools.com/html/html_headings.asp

Paragraaf:
https://www.w3schools.com/tags/tag_p.asp

// CSS

Lettertype:
https://www.w3schools.com/cssref/pr_font_font-family.asp

Breedte:
https://www.w3schools.com/cssref/pr_dim_width.asp

Tekstkleur:
https://www.w3schools.com/cssref/pr_text_color.asp

# data[].attributes.headline
#2 Vakken met achtergrondkleur en witruimte

# data[].attributes.subject
#2 Vakken met achtergrondkleur en witruimte

# data[].attributes.body
Voeg vakken om de foto's en de kopjes.

// HTML

Div:
https://www.w3schools.com/tags/tag_div.asp

// CSS

Background-color:
https://www.w3schools.com/cssref/pr_background-color.asp

Padding:
https://www.w3schools.com/css/css_padding.asp

Margin:
https://www.w3schools.com/Css/css_margin.asp

# data[].attributes.body
- Geef de vakken met de naam .vak een achtergrondskleur

- Voeg witruimte toe in dat vak met 'padding'
(tip: denk aan de google tip)

- Verander de kleur van de tekst met 'color'

-  Verander de kleur van de knoppen

# data[].attributes.body
https://www.w3.org/TR/selectors-3/#attribute-substrings

# data[].attributes.body
https://getbootstrap.com/docs/4.0/utilities/flex/

# data[].attributes.body
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements