Labo 03
Voorbereiding
Stap 1
- Maak een nieuw project.
Zorg voor een index.html en een styles.css.
Schrijf all HTML, vergeet de lang en title niet.
Stap 2
- Voeg normalize.css toe via een link-tagin de head.
rel="stylesheet",href="https://unpkg.com/@csstools/normalize.css"
- Voeg een google font toe in de head (Fredoka)
- Koppel je eigen styles.css aan je HTML
Stap 3: css
- 'corrigeer' de box-sizing property van alle elementen en van alle ::before en ::after pseudo-elementen.
- Maak een :root selector
- Pas de font-family aan naar Fredoka en vergeet je fallback font niet!
- Pas de line-height aan naar 1.6
- Pas het scroll behavior aan naar 'smooth'
- Maak variabelen --bg: oklch(0.99 0.003 325) en --primary: oklch(0.25 0.01 325)
- Gebruik de variabelen voor de achtergrondkleur en de tekstkleur
- Maak een body selector, zet de margin op 0
- Maak een .container
- max-width: 80rem
- linker en rechter margin is auto, gebruik logical properties en values
- linker en rechter padding is 1rem, gebruik logical properties en values
Oefening 2: Nav