Card title 1
Card text Lorem ipsum dolor sit amet.
Read more about title 1 Read more about title 1Voorbereiding
Stap 1
- Maak een project Zorg voor een index.html en styles.css
- Schrijf alle HTML, vergeet lang en title niet
Stap 2
- Voeg normalize.css toe via een link-tag in 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. 2. 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 die 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