-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (138 loc) · 4.27 KB
/
index.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kid Pix 2</title>
<link rel="apple-touch-icon" sizes="180x180" href="/assets/fav-icon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/assets/fav-icon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/assets/fav-icon/favicon-16x16.png" />
<link rel="stylesheet" href="assets/styles.css" />
</head>
<body>
<header id="header" class="p-1 align-vertically-horizontally-center">
<div class="grid-header-container">
<div class="grid-header-item item-header-a">
<nav
class="fixed-right col-xs-9 col-sm-6 col-md-5 col-lg-12 col-xl-12"
>
<button
id="navToggle"
class="btn-no-decoration col-xs-2 col-sm-2 col-md-2"
>
<img
src="./assets/img/kid-pix-icon.png"
alt="nav button"
width="100%"
/>
</button>
<ul id="mainNav" class="hidden nav-border">
<li><a href="#header">Home</a></li>
<hr />
<li><a href="#wackyPencil">Wacky Pencil</a></li>
<hr />
<li><a href="#eraser">Eraser</a></li>
<hr />
<li><a href="#requirements">Requirements</a></li>
</ul>
</nav>
</div>
<div class="grid-header-item item-header-b">
<div class="air-top-10"></div>
<img
src="./assets/img/kid-pix-1.png"
alt="kid pix logo"
class="col-xs-9 col-sm-9 col-md-5 col-lg-9 col-xl-10"
/>
</div>
<div class="grid-header-item item-header-c">
<div class="p-2">
<h1>Users Guide</h1>
<p>
You don't really need to study this manual to operate the
program.<br />In fact, lots of the fun with Kid Pix 2 comes from
discovering for yourself what the tools and their options do.
</p>
</div>
</div>
</div>
</header>
<main>
<section id="wackyPencil" class="p-1 align-horizontally-center">
<div class="air-top-10"></div>
<div class="grid-container">
<div class="grid-item item-a">
<img
src="./assets/img/wacky-pencil-icon.png"
alt="wacky pencil icon"
class="img-grid-description"
/>
</div>
<div class="grid-item item-b">
<h2>Wacky Pencil</h2>
</div>
<div class="grid-item item-c col-md-10 col-lg-10 col-xl-8">
<p>
The Wacky Pencil draws free-form lines. Select line widths, line
styles, and line patterns from the Options bar.
</p>
</div>
<div class="grid-item item-d">
<div class="air-top-5"></div>
<img
src="./assets/img/wacky-pencil-art.png"
alt="wacky pencil in action"
class="col-xs-11 col-sm-11 col-md-11 col-lg-9 col-xl-10"
/>
</div>
<div class="grid-item item-e">
<div class="air-top-5"></div>
<div class="flexbox-rectangle">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-1">
<img
src="./assets/img/cross-icon.png"
alt="cross icon"
class="img-grid-icon"
/>
</div>
<p class="col-xs-10 col-sm-10 col-md-4 col-lg-10 col-xl-11">
The option produces a tint effect, like a water color wash,
that's great for coloring Kid Pix 2 "hidden pictures."
</p>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-1">
<img
src="./assets/img/secret-icon.png"
alt="cross icon"
class="img-grid-icon"
/>
</div>
<p class="col-xs-10 col-sm-10 col-md-4 col-lg-10 col-xl-11">
The option cycles through a color palette while it draws, giving
a "rainbow" effect.
</p>
<img
src="./assets/img/wacky-color-2000.png"
alt="clip of wacky pencil in action"
class="img-hidden"
/>
</div>
</div>
</div>
<div class="air-top-5"></div>
<img
src="./assets/img/wacky-pencil-toolbar.png"
alt="wacky pencil toolbar"
class="col-xs-10 col-sm-9 col-md-9 col-lg-6 col-xl-5"
/>
<div class="air-top-5"></div>
</section>
</main>
<script>
document
.getElementById("navToggle")
.addEventListener("click", function () {
document.getElementById("mainNav").classList.toggle("hidden");
});
</script>
</body>
</html>