Let's have fun

Let's have fun

Typography

Default Font and Colors

Element Value
font-family Verdana,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
font-size 1rem
line-height 1.5
background-color #ffffff (wit)
color #000000 (zwart)

Headers

H1

<h1></h1>

H2

<h2></h2>

H3

<h3></h3>

H4

<h4></h4>
H5
<h5></h5>
H6
<h6></h6>

Paragraph

<p></p>

links

Basic link

link
<a class="link" href="#"></a>

Colors

Link Black

link text-black
<a class="link text-black" href="#"></a>

Link White

link text-white
<a class="link text-white" href="#"></a>

Link Gray

link text-gray
<a class="link text-gray" href="#"></a>

Link Blue

link text-blue
<a class="link text-blue" href="#"></a>

Link Green

link text-green
<a class="link text-green" href="#"></a>

Link Teal

link text-teal
<a class="link text-teal" href="#"></a>

Link Red

link text-red
<a class="link text-red" href="#"></a>

Link Yellow

link text-yellow
<a class="link text-yellow" href="#"></a>

Link Orange

link text-orange
<a class="link text-orange" href="#"></a>

Link Brown

link text-brown
<a class="link text-brown" href="#"></a>

Link Purple

link text-purple
<a class="link text-purple" href="#"></a>

Link Pink

link text-pink
<a class="link text-pink" href="#"></a>

Markers

<code class="code"></code>

code
<code class="code"></code>

Marker

mark
<mark class="mark"></mark>

Ctrl+U

kbd
<kbd class="kbd"></kbd>

Horizontal lines

hr
<hr class="hr">

hr dotted
<hr class="hr dotted">

hr dashed
<hr class="hr dashed">

Preload

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

pre
<pre class="pre"></pre>

Block Quote

Football is a simple game. Either you get to the ball on time, or you are too late. If you are often late, just leave a little earlier next time.

Johan Cruijff
blockquote
<blockquote class="blockquote">
<span class="icon fa fa-quote-left"></span>
<p>Tekst</p>
<footer>Naam</footer>
</blockquote>

Quote

This is a Quote from me.

q
<q class="q"></q>

Text sizes

text-sm

text-sm
<p class="text-sm"></p>

text-md

text-md
<p class="text-md"></p>

text-lg

text-lg
<p class="text-lg"></p>

text-xl

text-xl
<p class="text-xl"></p>

text-xxl

text-xxl
<p class="text-xxl"></p>

text-xxxl

text-xxxl
<p class="text-xxxl"></p>

text-jumbo

text-jumbo
<p class="text-jumbo"></p>

Responsive text

text-res-sm

text-res-sm
<p class="text-res-sm"></p>

text-res-md

text-res-md
<p class="text-res-md"></p>

text-res-lg

text-res-lg
<p class="text-res-lg"></p>

text-res-xl

text-res-xl
<p class="text-res-xl"></p>

Text shadow

text-shadow

text-shadow
<p class="text-shadow"></p>

text-shadow-dark

text-shadow-dark
<p class="text-shadow-dark"></p>

text-shadow-light

text-shadow-light
<p class="text-shadow-light"></p>