-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (97 loc) · 4.49 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
<!DOCTYPE html>
<html lang="en">
<title>ASL Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/navbar.css">
<body>
<!-- Navbar -->
<div class="top">
<div class="navbar">
<a href="index.html" class="navbar-item">HOME</a>
<a href="learn.html" class="navbar-item">LEARN</a>
<div class="dropdown">
<div class="navbar-item" title="Games List">GAMES</div>
<div class="dropdown-content">
<a href="asl.html" class="dropdown-item">ASL To Text Converter</a>
<a href="speedgame.html" class="dropdown-item">Speed Game</a>
<a href="matrixgame.html" class="dropdown-item">Matrix Game</a>
</div>
</div>
</div>
</div>
<!-- Image content -->
<div class="img-content">
<!-- Automatic Slideshow Images -->
<div class="title">
<img src="Images/asl.jpg" class="top-img">
<div class="title-text">
<h3>American Sign Language</h3>
</div>
</div>
</div>
<!-- The Page Content -->
<div class="page-content">
<h2 class="page-head">American Sign Language(ASL)</h2>
<p class="page-subhead"><i>I love ASL and teaching in fun ways!</i></p>
<div class="page-text">
I have created a website (soon to be app) that teaches you ASL and is packed with two
games I have created,
if you wish to get right on it, please scroll down for an explanation about each game, or simply click
above for the game you wish to try out. But what is ASL?
American Sign Language (ASL) is a complete,
natural language that has the same linguistic properties as spoken languages,
with grammar that differs from English. ASL is expressed by movements of the hands and face.
It is the primary language of many North Americans who are deaf and hard of hearing,
and is used by many hearing people as well.
<hr>
</div>
<br>
<div class="page-items">
<div class="page-item-one">
<p class="img-text">Fingerspell To Text Converter</p>
<img src="./Images/ASLTranslator.PNG" id="img-left" alt="Game Image Preview">
<p class="ASL-desc">
This game simply translates your input, which is what ever you type into the input box,
into actual ASL signs,
so you can see how to fingerspell words, you can try your name for example.
It works just like the alphabet, fingerspelling is a way of communicating alphabetically through
signs.
</p>
</div>
<hr>
<div class="page-item-two">
<p class="img-text">Speed Game</p>
<img src="./Images/SpeedGame.PNG" id="img-center" alt="Random Name">
<p class="speedgame-desc">
In this game you are shown one sign each time, and you are meant to type in the correct letter or
your guess in order to gain points.
There is also an option for a more difficult game, however I do not recommend it until you are able
to read the signs very fast.
</p>
</div>
<hr>
<div class="page-item-three">
<p class="img-text">Matrix Game</p>
<img src="./Images/MatrixGame.PNG" id="img-right" alt="Random Name">
<p class="matrixgame-desc">
In this game you are given a letter, and you are meant to click the corresponding sign. This game
can be a bit more challenging than the other two, especially at first, but practice makes perfect!
There is also an option for a more difficult mode, but for this game, it is absolutely hard - Try it
if you dare.
</p>
</div>
<hr>
</div>
</div>
<!-- End Page Content -->
</div>
<!-- Image of location/map -->
<!-- <img src="./Images/asl.jpg" class="background-image"> -->
<!-- Footer -->
<footer class="footer">
Created by <a href="https://github.com/Guy-Argaman" target="_blank">Guy Argaman</a>
</footer>
</body>
</html>