Labo 8

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 op basis van volgende screenshots oefening 1 na. De html-elementen zijn hieronder toegevoegd als bijlage.

Alles tot en met 575px is standaard (lijst-1)

Media-queries

• small devices: gsm, 576px en groter (lijst-2)

• medium devices: tablets, 768px en groter (lijst-3)

• large devices: desktops, 992px en groter (lijst-4)

• x-large devices: grote desktops, 1200px en groter (lijst-5)

• xx-large devices: heel grote desktops, 1400px en groter (lijst-6)

Tekstkleuren

gebruik de volgende kleuren voor de tekst

1. #0d6efd (blauw)

2. #198754 (groen)

3. #0dcaf0 (cyaan)

4. #ffc107 (geel)

5. #dc3545 (rood)

6. #ffffff (wit)

7. #cf04beb4 (achtergrondkleur xxl - paars)

lijst 1

lijst 2

lijst 3

lijst 4

lijst 5

lijst 6

assets oefening 1

2KB

oefening-01-HTML.txt

oefening 2

Maak wat je ziet in oefening-02.mp4 na.

• kleuren: red, white

• media-query op 1000px, waarbij richting flex verandert

• gebruik lettertype Arial. Voorzie een fallback naar eender welk serif font.

5MB

oefening-02.mp4

assets oefening 2

99KB

oefening-02-width-999px.png

image

119KB

oefening-02-width-1200px.png

image

176B

oefening-02-HTML.txt

oefening 3

Vertrek vanuit labo 7 met oefening 4. Schrijf extra css met media-queries voor schermen tot max. 768px:

• in de body zorgt de grid-template ervoor dat header, nav, main, aside en footer onder elkaar komen staan

• main & aside hebben een padding van 2 rem

• main img heeft een padding van 0, behalve onderaan 1rem

• section portfolio toont flex-items onder elkaar met padding 0rem

• de afbeelding in de portfolio is 100% breed

• de figure heeft een marge onderaan van 3rem

vanaf 769px

max breedte 768px

oefening 4

Maak de volgende oefening na mbhv CSS Grid en Media Queries.

Vanaf 700px

Tussen 500 en 700px

kleiner dan 500px