Opdracht 4.3: pagina met classesLaten we aan onze hobbies.html-pagina eens wat classes toevoegen (in project ‘myportfolio’) een aantal classes toevoegen. Op die manier kunnen we meerdere soortgelijke elementen op dezelfde manier stijlen.
1. Denk na over drie hobby’s die je hebt. Die gaan we hierna gebruiken.
2. Als je dit nog niet gedaan had zet je de basisstructuur op en kopieer je de gegevens uit de header van de ‘index.html’ naar’ hobbies.html. Doe dit ook voor de footer.
3. Check of je stylesheet gelinkt is met een linkelement in de head.
4. We gaan aan de slag in de main.
5. Voeg in de main een h2 toe met de tekst ‘Hobbies’
6. Voeg onder het h2-element een division met class ‘hobby’ toe. (typ ‘.div’ en druk op tab).
7. Zet in de div:
• Een h3 met daarin jouw eerste hobby.
• Voeg hieronder een p toe met daarin een beschrijving van jouw hobby. Sluit de div af met </div>
• Voeg tot slot een afbeelding toe van jouw hobby
• Sluit de div. af met </div>
8. Herhaal opdracht 4 en 5 nog drie keer, zodat je 4 hobby’s in vier classes hebt staan.
9. Ga naar je style.css en spreek de class ‘.hobby’ aan.
10. Geef de class een border van 1px double grey en een breedte van 300px.
11. Geef de class een achtergrondkleur met kleurcode ‘#C6EBBE.
12. Geef de class een padding van 10px.
13. Check je resultaten tussentijds steeds in de browser.
1. Herhaal opdracht 4 en 5 nog drie keer, zodat je 4 hobby’s in vier classes hebt staan.
2. Ga naar je style.css en spreek de class ‘.hobby’ aan.
3. Geef de class een border van 1px double grey en een breedte van 300px.
4. Geef de class een achtergrondkleur met kleurcode ‘#C6EBBE.
5. Geef de class een padding van 10px.
6. Check je resultaten tussentijds steeds in de browser.