-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (48 loc) · 1.98 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>10PRINT</title>
<meta name="description" content="Example of the 10 PRINT code line">
<meta name="author" content="Boguz">
<link href="10print.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,900|VT323" rel="stylesheet">
</head>
<body>
<!-- CONTAINER -->
<div class="container">
<!-- INFO BANNER -->
<div class="info">
<h1 class="title">10 PRINT</h1>
<!-- DESCRIPTION AND LINK -->
<div class="about">
<p class="desc">"10 print chr$(205.5+rnd(1)) goto 10" is a famous line of code (in BASIC) which produces very interesting maze-like designs. I decided to make my own version of it, using HTML, CSS and JS as a way to improve my skills.</p>
<a href="https://github.com/boguz/10PRINT" class="cta">read more on Github</a>
</div> <!-- end .about -->
</div> <!-- end .info -->
<!-- CONTROLS -->
<div class="controls">
<div id="c-size" class="control">
<div class="label">Size:</div>
<input id="size-slider" class="ctr-slider" type="range" value="20" min="10" max="80" step="1">
</div>
<div id="c-speed" class="control">
<div class="label">Speed:</div>
<input id="speed-slider" class="ctr-slider" type="range" value="100" min="10" max="1000" step="10">
</div>
<div id="c-balance" class="control">
<div class="label">Balance:</div>
<input id="balance-slider" class="ctr-slider" type="range" value="0.5" min="0" max="1" step="0.05">
</div>
</div>
<!-- CANVAS -->
<canvas id="canvas1"></canvas>
</div> <!-- end of .container -->
<!-- FOOTER -->
<div class="footer">
<p>made with love by <a href="https://github.com/boguz" target="_blank">Boguz</a>. You can read more about this project <a href="https://github.com/boguz/10PRINT" target="_blank">here</a>. =D</p>
</div> <!-- end .footer -->
<!-- LINK TO JS FILE -->
<script src="10print.js" type="application/javascript"></script>
</body>
</html>