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>Banana-talk</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
  <nav>
    <div style="font-size: 2rem; padding: 1rem;">Banana Talk </div>
  </nav>
  <main>
    <textarea id="translate-input"
        placeholder="Put your sentence here which you want to convert to banana language"></textarea>
    <button id="translate-button"> Translate To Banana</button>
    <div>Translation will come here 👇</div>
    <textarea id="translate-output" placeholder=" translated text" style="padding: 1rem; font-size: large;"></textarea>


</main>


<script src="app.js"></script>


<footer><div>Hi there! Are you a fan of minion? Have you ever thought of what its
  language was. Use the translator to convert your text from English to Minion speak or Banana language
  talking and have some fun. let's go!!</div></footer>

</body>
</html>