index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Valyrian Translate</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div class="background-image"></div>

    <div class="content">
        <nav>
            <div style="font-size: 2rem; padding: 1rem;">
                <h3>Speak Valyrian</h3>
            </div>
        </nav>
    
        <main>
            <textarea id="txt-input" placeholder="Put your sentence in English here and we will conver it to Valyrian language!!"></textarea>
            <button id="btn-translate">Translate To Valyrian</button>
            <h3>Translation will come here 👇</h3>
            <div id="output" style="padding: 1rem; font-size: large;"></div>
        </main>
        
        <footer>
            <div style="font-size: x-large;">About</div>
            <p>Are you a fan of Game Of Thrones? Did you know that the language Queen Daenerys Targaryen speaks is an actual language. Use the translator
                to convert your text from English to Valyrian.</p>
        </footer>

        <script src="/app.js" type="text/javascript"></script>
    </div>
</body>
</html>