Sign-Language-Translator/asl-introduction.html at main · shara-arch/Sign-Language-Translator · GitHub

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="styles.css">
    <link rel="stylesheet" href="intro-styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <title>Introduction</title>
  </head>
  <body>
    <header>
         <p class="socials">
        <i class="fab fa-instagram"></i>
         <a href="https://www.instagram.com/">Instagram</a> |

        <i class="fas fa-envelope"></i>
        <a href="mailto:sharamoegi@gmail.com" >E-mail</a> |

        <i class="fas fa-phone"></i>
        Contact:+254701234567 |

        <i class="fas fa-map-marker-alt"></i>
        <a href="https://www.google.com/maps/place/Moringa+School/@-1.3005626,36.7819031,17z/data=!3m1!4b1!4m6!3m5!1s0x182f114b28dbee89:0x964f362324a8e3fe!8m2!3d-1.3005626!4d36.784478!16s%2Fg%2F11ygqkn3qc?entry=ttu&g_ep=EgoyMDI2MDEyMS4wIKXMDSoASAFQAw%3D%3D"
        >Location</a> </p>
        <Strong><h1>ASL Translator</h1></Strong>
        <!--Navigation Panel-->
        <div class="nav">
        <a href="index.html">Home</a>
        <a href="asl-introduction.html">Introduction</a>
        <a href="asl-dictionary.html">Dictionary</a>
        <a href="asl-game.html">ASL-Game</a>

        </div>
    </header>

    <section>
      <h1 class="heading">Etiquette for Hearing Persons when interacting with Deaf Persons.</h1>
      <p class="asl-etiquette">
        When engaging with deaf people, just like other spaces, have their own rules of ettiquette.<br>
        The main ones are what we use in our everyday lives. You should treat deaf persons with respect and patience.<br>
        <em>Empathy</em> is very key.<br>
        Some of them include but are not limited to:<br><br>

          🌸  Always face the person directly and <strong>maintain eye contact</strong>.<br>
          🌸  If you're unsure of the best way to connect, politely ask about their <strong>preferred method</strong>.<br>
               (Sign Language, Lip Reading, Writing, Using Technology)<br>
          🌸  Most importantly, treat the interaction as you would with anyone else, with <em>dignity</em>, <em>equality</em> and <em>genuine interest</em> in understanding their persective.<br>


      </p>
    </section>
    <section class="gallery-2">
       <img src="https://i.pinimg.com/1200x/19/c2/4c/19c24cf9200dd78149015189bd90f03e.jpg"
      alt="Image on How to get a Deaf Person's Attention"
       height="300">

      <img src="https://i.pinimg.com/1200x/b4/17/2e/b4172e4ce2ebcbb0fc5e43d5a99dba83.jpg"
      alt="Image on Asking a deaf Person How the Communicate" height="300">

       <img src="https://i.pinimg.com/1200x/42/65/cc/4265ccd33828d840122e7b7fab0bbbce.jpg"
      alt="Image on etiquette when interacting with deaf persons" height="300">


    </section>
    <section class="asl-etiquette">
      <h2>Introducing Yourself using ASL</h2>
      <p>
        Enter your name in the form below to learn a simple introduction phrase, when communicating with deaf persons.

      </p>
      </section>
     <div>

    <form id="userForm">
      <h3>ASL Translator:</h3>
      <label for="name">Enter Name: </label>
      <input type="text" id="name" name="name" placeholder="e.g Jasmine" required><br><br>

      <button type="button" onclick="Translate()" >Translate 🌸</button>
    </form>

  </div>

  <section class="cards" id="cards" style="display: none;"></section>
  <div class="nav-btns">
  <button class="nav-btn"><a href="index.html">Home</a></button>
    <button class="nav-btn"><a href="asl-dictionary.html">Dictionary</a></button>
    <button class="nav-btn"><a href="asl-game.html">ASL-Game</a></button>
    </div>
  </body>
   <footer>
    <p>
        ASL Translator. <br><br>
     <a href="https://www.instagram.com/">Instagram</a> |
        <a href="mailto:sharamoegi@gmail.com" >E-mail</a> |
        Contact:+254701234567 |
        <a href="https://www.google.com/maps/place/Moringa+School/@-1.3005626,36.7819031,17z/data=!3m1!4b1!4m6!3m5!1s0x182f114b28dbee89:0x964f362324a8e3fe!8m2!3d-1.3005626!4d36.784478!16s%2Fg%2F11ygqkn3qc?entry=ttu&g_ep=EgoyMDI2MDEyMS4wIKXMDSoASAFQAw%3D%3D"
        >Location</a> </p>
    <p>P.O Box 12345-00100, Nairobi, Kenya<br>
        Ngong Road, Ngong Lane Plaza, 1st Floor<br></p>
        <p>For any inquires, feel free to reach us on our E-mail: deafcommunity.kenya@gmail.com</p>

    </p>Together for equality. Reach out and join the conversation.
    <p class="Copyright">ASL Translator &copy; 2026</p>
</footer>
<script src="script.js"></script>
</body>

  </html>