-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (102 loc) · 5.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>ASL | American Sign Language</title>
</head>
<body>
<header class="pos-f-t">
<div class="bg-dark p-4 text-white">
<h4>American Sign Language</h4>
<p class="mt-3">A place to learn more about American Sign Language (ASL) and practice a few basic phrases.</p>
<!-- <p class="lead"> -->
<a class="btn btn-info btn-sm" href="#generator" role="button">LEARN NOW</a>
<!-- </p> -->
</div>
</header>
<div id="jumbotron" class="jumbotron mb-0">
<h1 class="display-4 font-weight-bold text-dark">Why ASL?</h1>
<p class="lead text-dark mt-3"><a
href="https://www.healthyhearing.com/report/52606-Why-you-should-learn-sign-language-in-the-new-year#:~:text=Due%20to%20its%20visual%20nature%2C%20sign%20language%20is,career%20and%20give%20added%20benefit%20to%20the%20workplace."
target="_blank" class="text-decoration-none text-info"><b>Between 500,000 and 2 million</b></a> people use
American
Sign Language
(ASL) in
the United States.
</p>
<p class="text-dark">This makes ASL one of the top 5 most-used languages in the United States. In addition, more
than 17% of the population in the U.S. alone are hard of hearing and deaf. It
is important to understand that ASL is different from spoken English or other forms of sign language used in
various
geographical locations or regions; that is, it has its own syntax and grammar. Understanding ASL can only
enhance communication skills between parties of all ages. It is a beautiful language which boosts cognitive
processes and promotes <a href="https://www.verywellhealth.com/deaf-culture-basics-1046268" target="_blank"
class="text-decoration-none text-info"><b>cultural awareness</b></a>, bringing us all closer together.
</p>
<hr class="my-4">
<p>Check out the ASL Online Dictionary to start learning now!</p>
<p class="lead">
<a class="btn btn-info btn-lg" href="https://www.signasl.org/" role="button" target="_blank">Learn more</a>
</p>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 img-fluid" src="assets/img1.png"
alt="train yourself to rely on different senses to communicate">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid" src="assets/img3.png"
alt="become better listener, communicator, multitasker & check to understand and reformulate ideas">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid" src="assets/img2.png"
alt="your communication skills extend beyond Deaf Community & prepares you to handle other lang barriers">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="generator-container" class="pos-f-t text-white">
<div class="bg-dark p-4">
<h4 id="generator">Learn ASL Now</h4>
<p class="mt-3">Click the button for more ASL phrases.</p>
</div>
<div class="bg-dark p-3 pt-0">
<video id="video-container" class="img-fluid" autoplay loop>
<source src="" type="video/mp4">
Your browser does not support this video.
</video>
<button id="click" class="btn btn-info btn-md mt-4">Learn More!</button>
</div>
</div>
<footer class="container-fluid bg-dark text-center p-3">
<p class="text-white">This site is dedicated to my sister - an aspiring Film Director. If you would like to support
her, please
consider subscribing to her
YouTube Channel <a href="https://www.youtube.com/channel/UClnJiqq_SAKqe4_xeDn4Ubw" target="_blank"
class="text-decoration-none text-info">here</a>.
</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>