index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Language Translator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Sign Language Translator</h1>
    </header>
    <main>
        <div class="input-container">
            <label for="input-text">Enter Text or Speech:</label>
            <textarea id="input-text" rows="5" placeholder="Enter your text or speak here"></textarea>
            <button id="submit-btn">Submit</button>
        </div>
        <div class="output-container">
            <div id="sign-language-container">
                <img id="animated-character" src="animated-character.gif" alt="Animated character performing sign language">
            </div>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>