index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Free Translator</title>
    <link rel="stylesheet" href="translator.css" />
    <link
      rel="shortcut icon"
      href="https://github.com/Krypter93/free-translator/blob/main/translate.png?raw=true"
      type="image/x-icon"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <main class="container">
      <div class="header">
        <h1>
          Free Translator <br />
          <i class="fa-sharp fa-solid fa-language"></i>
        </h1>
      </div>

      <div class="box1">
        <textarea
          id="text1"
          placeholder="Source language"
          cols="30"
          rows="10"
        ></textarea>
      </div>
      <br /><br />

      <div class="lang">
        <button id="btn">Translate</button>
        <select name="" id="mySelect">
          <option>Target language</option>
        </select>
      </div>

      <br /><br />
      <div class="box2">
        <textarea
          id="text2"
          placeholder="Target language"
          cols="30"
          rows="10"
        ></textarea>
      </div>
    </main>

    <script src="translator.js"></script>
  </body>
</html>