index.html

<!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="https://unpkg.com/tippy.js@6/animations/scale-subtle.css" />
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/light.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
  <title>Language Translater</title>
  <link rel="icon" href="/images/logo.html">
</head>

<body>
  <header>
    <h2>Language Translator 🚀</h2>
    <nav>
      <ul class="nav__links">
      </ul>
    </nav>
  </header>

  <!-- main section -->

  <div class="wrapper">
    <div class="component">
      <div class="select-box">
        <div class="options-container">
          <div class="option">
            <input type="radio" class="radio" name="category">
            <label for="language">English</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" name="category">
            <label for="language">Hindi</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" name="category">
            <label for="language">Bengali</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" name="category">
            <label for="language">Italian</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" name="category">
            <label for="language">Spanish</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" name="category">
            <label for="language">Japanese</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" name="category">
            <label for="language">German</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" name="category">
            <label for="language">Latin</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" name="category">
            <label for="language">Chinese</label>
          </div>
        </div>
        <div class="selected">
          Select Language
        </div>
      </div>
      <div class="input-text">
        <textarea name="" id="" cols="49" rows="10" spellcheck="false" class="input" placeholder="Type to translate"></textarea>
      </div>
    </div>

    <div class="button-container">
      <div class="btn1">
        <button class="converter">
          <p>Translate</p>
          <div class="icon"><i class="fa fa-sync"></i></div>
        </button>
      </div>

      <div class="btn2">
        <button class="btn-reset">
          <p>Reset</p>
          <div class="icon reset-icon"><i class="fa fa-times"></i></div>
        </button>
      </div>
    </div>

    <div class="component">
      <div class="select-box1">
        <div class="options-container1">
          <div class="option1">
            <input type="radio" class="radio" name="category">
            <label for="language">English</label>
          </div>

          <div class="option1">
            <input type="radio" class="radio" name="category">
            <label for="language">Hindi</label>
          </div>

          <div class="option1">
            <input type="radio" class="radio" name="category">
            <label for="language">Bengali</label>
          </div>

          <div class="option1">
            <input type="radio" class="radio" name="category">
            <label for="language">Italian</label>
          </div>

          <div class="option1">
            <input type="radio" class="radio" name="category">
            <label for="language">Spanish</label>
          </div>

          <div class="option1">
            <input type="radio" class="radio" name="category">
            <label for="language">Japanese</label>
          </div>

          <div class="option1">
            <input type="radio" class="radio" name="category">
            <label for="language">German</label>
          </div>

          <div class="option1">
            <input type="radio" class="radio" name="category">
            <label for="language">Latin</label>
          </div>

          <div class="option1">
            <input type="radio" class="radio" name="category">
            <label for="language">Chinese</label>
          </div>
        </div>

        <div class="selected1">
          Select Language
        </div>
      </div>
      <div class="output">
        <div class="output-value"></div>
        <div class="card-footer">
          <div class="icon-collection">
            <div class="icon copy" data-clipboard-target=".output-value">
              <i class="fas fa-copy"></i>
            </div>
            <div class="icon download">
              <i class="fas fa-download"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- information regarding encoder -->
  </div>


  <script src="https://unpkg.com/scrollreveal"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
  <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
  <script src="./app.js"></script>
</body>

</html>