JURK

README

1. Wat is deze website?

Dit is een magazine-achtige webpagina gemaakt met HTML en CSS.
De pagina heeft:

  • een header met een logo
  • een inhoudsgedeelte met blokken (tekst, foto, audio, video)
  • een footer met knoppen

De pagina werkt ook goed op mobiel .

2. Logo aanpassen

  • Het logo staat bovenaan in de header.
  • Wil je een ander logo?
    → Vervang de afbeeldingslink (src) in de HTML.
  • Wil je het logo groter of kleiner?
    → Pas de hoogte aan in de CSS onder de <style> bij .blog-header .logo door de px getal aan te passen

3. Indeling van de pagina

  • De inhoud staat in twee kolommen naast elkaar.
  • Op kleine schermen (mobiel) wordt dit automatisch één kolom.
  • Hier hoeft niks aangepast te worden.

4. Tekst aanpassen

  • Een tekstblok bestaat uit:
    • een titel (h2)
    • eventueel een subtitel (h3)
    • gewone tekst (p)
  • Dit kunt u aanpassen door tussen de haakjes bijv. <h2>dummytekst</h2> aan te passen
  • De achtergrondkleur en rand pas je aan in de CSS onder de <style> bij .blok.tekst. de hex code aan te passen bijv: background: #20D62B
  • op pagina 2 staat het in .content-blok

5. Foto’s aanpassen

  • Wil je een andere foto?
    → Vervang gewoon de afbeeldings-URL.
  • bijv: <img scr=’ URL -afbeelding’>
  • De foto past zich automatisch aan de grootte van het blok aan.

6. Audio toevoegen

  • Audio werkt met mp3-bestanden.
  • Vervang de src-link om een ander geluid te gebruiken.
  • bijv: <source =’audio-link’ >

7. Video aanpassen

  • Gebruik altijd een YouTube embed-link.
  • waar vind je een youtube embed-link
  • wanneer je bij de youtube video bent die je wilt gebruiken
  • klik je op share/delen klik op embed/insluiten en je hebt je code
  • Wil je een andere video?
    → Vervang alleen de embed-URL in het iframe.
  • bijv: <iframe src= iframe-youtube-link></iframe>

8. Footer / knoppen onderaan

  • Onderaan staan knoppen voor vorige en volgende pagina.
  • De tekst en links mag je zelf aanpassen.
  • ook hier kun je de kleuren aanpassen door de hex code aan te passen bij .nav-btn onder de <style>

9. Kleuren veranderen

  • De hoofdkleur is rood (#c00).
  • Wil je een andere kleur?
    → Vervang #c00 door een andere hex-kleur (bijv. blauw).

10. Nieuwe content toevoegen

  • Wil je een nieuw blok?
    → Kopieer een bestaand blok en plak het in de grid.
  • Pas daarna de inhoud aan.

Auteurs
Gemaakt door: Daan Klos, Michelle Romahn en Levi Barkel.
De pagina mag vrij aangepast worden .