Typografie

Basis font en kleuren

Element	Waarde
font-family:	″Roboto Condensed″ ,sans-serif
font-size:	1.1rem
line-height:	1.5
font-weight:	400
background-color:	#F8F8FF
color:	#343148
text-align:	left

Fonts

font-roboto

Dit is het Roboto font

Element	Waarde
font-family	"Roboto Condensed", sans-serif
font-size	1.1rem
line-height	1.5
font-weight	400

font-oswald

Dit is het Oswald font

Element	Waarde
font-family	"Oswald", sans-serif
font-size	1.1rem
line-height	1.5
font-weight	400

font-pirata

Dit is het Pirata font

Element	Waarde
font-family	"Pirata One", system-ui
font-size	1.1rem
line-height	1.5
font-weight	400

font-dancing

Dit is het dancing font

Element	Waarde
font-family	"Dancing Script", cursive
font-size	1.5rem
line-height	1.5
font-weight	300

Horizontale lijn

<hr>

Headers

Header h6

<h6></h6>

Header h5

<h5></h5>

Header h4

<h4></h4>

Header h3

<h3></h3>

Header h2

<h2></h2>

Header h1

<h1></h1>

Paragraaf

<p></p>

Tekst kleuren

Witte tekst

<p class="txt-color-white"></p>

Zwarte tekst

<p class="txt-color-black"></p>

Grijse tekst

<p class="txt-color-gray"></p>

Blauwe tekst

<p class="txt-color-blue"></p>

Rode tekst

<p class="txt-color-red"></p>

Oranje tekst

<p class="txt-color-orange"></p>

Groene tekst

<p class="txt-color-green"></p>

Lime tekst

<p class="txt-color-lime"></p>

Gele tekst

<p class="txt-color-yellow"></p>

Bruine tekst

<p class="txt-color-brown"></p>

Paarse tekst

<p class="txt-color-purple"></p>

Rose tekst

<p class="txt-color-pink"></p>

Link en link kleuren

Basis link

<a href=""></a>

Witte link

<a href="" class="txt-color-white"></a>

Zwarte link

<a href="" class="txt-color-black"></a>

Grijse link

<a href="" class="txt-color-gray"></a>

Blauwe link

<a href="" class="txt-color-blue"></a>

Rode link

<a href="" class="txt-color-red"></a>

Oranje link

<a href="" class="txt-color-orange"></a>

Groene link

<a href="" class="txt-color-green"></a>

Lime link

<a href="" class="txt-color-lime"></a>

Gele link

<a href="" class="txt-color-yellow"></a>

Bruine link

<a href="" class="txt-color-brown"></a>

Paarse link

<a href="" class="txt-color-purple"></a>

Rose link

<a href="" class="txt-color-pink"></a>

Achtergrond kleuren

Witte achtergrond

<div class="bg-color-white"></div>

Zwarte achtergrond

<div class="bg-color-black"></div>

Grijse achtergrond

<div class="bg-color-gray"></div>

blauwe achtergrond

<div class="bg-color-blue"></div>

Rode achtergrond

<div class="bg-color-red"></div>

Oranje achtergrond

<div class="bg-color-orange"></div>

Groene achtergrond

<div class="bg-color-green"></div>

Lime achtergrond

<div class="bg-color-lime"></div>

Gele achtergrond

<div class="bg-color-yellow"></div>

Bruine achtergrond

<div class="bg-color-brown"></div>

Paarse achtergrond

<div class="bg-color-purple"></div>

Rose achtergrond

<div class="bg-color-pink"></div>

Witte light

<div class="bg-color-light-white"></div>

Zwarte light

<div class="bg-color-light-black"></div>

Grijse light

<div class="bg-color-light-gray"></div>

blauwe light

<div class="bg-color-light-blue"></div>

Rode light

<div class="bg-color-light-red"></div>

Oranje light

<div class="bg-color-light-orange"></div>

Groene light

<div class="bg-color-light-green"></div>

Lime light

<div class="bg-color-light-lime"></div>

Gele light

<div class="bg-color-light-yellow"></div>

Bruine light

<div class="bg-color-light-brown"></div>

Paarse light

<div class="bg-color-light-purple"></div>

Rose light

<div class="bg-color-light-pink"></div>

Markeringen

code

<p></p>

<p><code></code></p>

mark

Markering

<p><mark></mark></p>

kbd

Ctrl+A

<p><kbd></kbd></p>

Pre

<head>
  <title>Bonus CSS</title>
  ...
</head>

<pre>
  inhoud
</pre>

Blockquote en quote

Voetbal is een simpel spel. Of je bent op tijd bij de bal, of je bent te laat. Als je vaak te laat bent, ga dan de volgende keer gewoon iets eerder weg.

Johan Cruijff

<blockquote>
  <span class="icon icon icon-quote-right"></span>
  <p>Quote</p>
  <footer>Naam</footer>
</blockquote>

Dit is mijn Quote

<p><q></q></p>

Tekst grote

Terug naar normale tekst

<p class="txt-size-normal"></p>

Zeer kleine Tekst

<p class="txt-size-xxs"></p>

Extra kleine Tekst

<p class="txt-size-xs"></p>

Kleine Tekst

<p class="txt-size-sm"></p>

Medium tekst

<p class="txt-size-md"></p>

Grotere tekst

<p class="txt-size-lg"></p>

Extra grote tekst

<p class="txt-size-xl"></p>

Extra extra grote tekst

<p class="txt-size-xxl"></p>

Jumbo tekst

<p class="txt-size-jumbo"></p>

Mega tekst

De mega tekst is responsive, hoe kleiner het scherm hoe kleiner de tekst wordt.

<p class="txt-size-mega"></p>

Tekst stijl

Tekst bold

<p class="txt-style-bold"></p>

Tekst italic

<p class="txt-style-italic"></p>

Tekst shadow

<p class="txt-style-shadow"></p>

Tekst terug naar normaal

<p class="txt-style-normal"></p>