113 lines
3.3 KiB
HTML
113 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<title>Bij1 Style Guide</title>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
<body>
|
|
<header></header>
|
|
<main>
|
|
<h1>Heading 1</h1>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
|
|
consectetur, <del>nunc eget aliquam</del> ultricies, nunc nunc ultricies
|
|
tortor, quis aliquam nunc nunc sit amet nisl. Nullam
|
|
consec<sup>tetur</sup>, nunc eget aliquam ultricies, nunc nunc ultricies
|
|
<a href="https://www.bij1.org">tortor</a>, quis aliquam nunc nunc sit
|
|
amet nisl.
|
|
</p>
|
|
<h2>Heading 2</h2>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
|
|
consectetur, nunc eget aliquam <code>ultricies</code>, nunc nunc
|
|
ultricies tortor, qu<sub>is</sub> aliquam nunc nunc sit amet nisl.
|
|
Nullam consectetur, nunc eget aliquam ultricies, nunc nunc ultricies
|
|
tortor, quis aliquam nunc nunc sit amet nisl.
|
|
</p>
|
|
|
|
<h3>Heading 3</h3>
|
|
<p><img src="https://placehold.co/400x200" alt="alt text" /></p>
|
|
|
|
<h4>Heading 4</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet,
|
|
<strong>consectetur adipiscing</strong> elit. Nullam consectetur,
|
|
<em>nunc eget aliquam</em> ultricies, nunc nunc ultricies tortor, quis
|
|
aliquam nunc nunc sit amet nisl. Nullam consectetur, nunc eget aliquam
|
|
ultricies, nunc nunc ultricies <code>tortor</code>, quis aliquam nunc
|
|
nunc sit amet nisl.
|
|
</p>
|
|
|
|
<h5>Heading 5</h5>
|
|
<ul>
|
|
<li>
|
|
<input checked="" disabled="" type="checkbox" /> Lorem ipsum dolor sit
|
|
</li>
|
|
<li><input disabled="" type="checkbox" /> Lorem ipsum dolor sit</li>
|
|
<li><input disabled="" type="checkbox" /> Lorem ipsum dolor sit</li>
|
|
</ul>
|
|
|
|
<blockquote>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
|
|
consectetur, nunc eget aliquam ultricies, nunc nunc ultricies tortor,
|
|
quis aliquam nunc nunc sit amet nisl. Nullam consectetur, nunc eget
|
|
aliquam ultricies, nunc nunc ultricies tortor, quis aliquam nunc nunc
|
|
sit amet nisl.
|
|
</p>
|
|
</blockquote>
|
|
|
|
<h6>Heading 6</h6>
|
|
<ol>
|
|
<li>Ordered list</li>
|
|
<li>Second item</li>
|
|
<li>Third item</li>
|
|
</ol>
|
|
|
|
<hr />
|
|
|
|
<ul>
|
|
<li>Unordered list</li>
|
|
<li>Second item</li>
|
|
<li>Third item</li>
|
|
</ul>
|
|
|
|
<hr />
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Syntax</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Header</td>
|
|
<td>Title</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Paragraph</td>
|
|
<td>Text</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<pre>
|
|
<code>
|
|
{
|
|
<span class="hljs-attr">"firstName"</span>: <span class="hljs-string">"John"</span>,
|
|
<span class="hljs-attr">"lastName"</span>: <span class="hljs-string">"Smith"</span>,
|
|
<span class="hljs-attr">"age"</span>: <span class="hljs-number">25</span>
|
|
}
|
|
</code>
|
|
</pre>
|
|
</main>
|
|
<footer></footer>
|
|
</body>
|
|
</html>
|