-
Notifications
You must be signed in to change notification settings - Fork 2
/
demo.html
71 lines (71 loc) · 4.21 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="da-DK">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Toucan Library Demo" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Toucan Library Demo</title>
<!-- Include the Toucan Library Stylesheet here -->
<link href="toucan-library/css/toucan-style.css" rel="stylesheet" />
</head>
<body class="scrollbar">
<nav class="navbar">
<div class="navbar-toggle">🟧</div>
<ul class="navbar-list">
<li><a class="navbar-link active" href="#">Home</a></li>
<li><a class="navbar-link" href="#">Articles</a></li>
<li><a class="navbar-link" href="#">Products</a></li>
<li><a class="navbar-link" href="#">Gallery</a></li>
<li><a class="navbar-link" href="#">References</a></li>
<li><a class="navbar-link" href="#">About</a></li>
</ul>
</nav>
<h1 class="heading1">Toucan Library Demo</h1>
<p class="paragraph">
Toucan Library is a small CSS and JavaScript library that can easily be integrated into any web project. The
library allows the developer to include UI Elements and Easter Eggs, making even the most boring website just a
little more fun. It's stylish and clean, but the characteristics of the Toucan Library is its eye-catching colors
and shapes. The purpose of the library was originally to develop my web-development skills and continuously test
new ideas. Development of the library started in May 2020 and the first release was published in August 2020.
</p>
<h2 class="heading2">This is just show off</h2>
<p class="paragraph">
In this demo I'll show you some of the elements from the library. What about a fancy logo? Press CTRL + Spacebar
on your keyboard and see what's happening in the console.
</p>
<h3 class="heading3">What time is it?</h3>
<p class="paragraph">
Hold down the 0 key to show date and time. But first... Let's hug a baby toucan!
</p>
<h4 class="heading4">Press CTRL + ALT + T on your keyboard to call the toucan</h4>
<p class="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quibusdam ea, minus ad fugit ex commodi sunt! A ea,
sit quia aut sequi doloribus est totam sapiente dolor consequatur magni ullam facere delectus, tempore vitae
dolorum impedit ad ut inventore commodi vero officia minima. Perferendis magnam delectus recusandae. Quas
obcaecati sit officia repellat tempora mollitia quibusdam ab sint assumenda molestiae eum libero dolorem
voluptatum culpa totam numquam beatae sunt, reprehenderit fugiat odit optio doloribus praesentium repellendus?
Cupiditate, iste, itaque voluptatem repudiandae iusto deserunt amet voluptatum atque assumenda totam error ad aut
omnis harum temporibus, velit maiores eos quia debitis doloremque!
</p>
<p class="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quibusdam ea, minus ad fugit ex commodi sunt! A ea,
sit quia aut sequi doloribus est totam sapiente dolor consequatur magni ullam facere delectus, tempore vitae
dolorum impedit ad ut inventore commodi vero officia minima. Perferendis magnam delectus recusandae. Quas
obcaecati sit officia repellat tempora mollitia quibusdam ab sint assumenda molestiae eum libero dolorem
voluptatum culpa totam numquam beatae sunt, reprehenderit fugiat odit optio doloribus praesentium repellendus?
Cupiditate, iste, itaque voluptatem repudiandae iusto deserunt amet voluptatum atque assumenda totam error ad aut
omnis harum temporibus, velit maiores eos quia debitis doloremque!
</p>
<h4 class="heading4">Default bullets are just boring</h4>
<p class="paragraph">Use theese cute toucans instead...</p>
<ul class="ul-list">
<li class="toucan-li">Le Toucan has arrived!</li>
<li class="toucan-li">Le Toucan has arrived!</li>
<li class="toucan-li">Le Toucan has arrived!</li>
<li class="toucan-li">Le Toucan has arrived!</li>
<li class="toucan-li">Le Toucan has arrived!</li>
</ul>
<!-- Include the Toucan Library Script here -->
<script src="toucan-library/js/toucan-script.js"></script>
</body>
</html>