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="style.css">
  <link rel="icon" type="image/x-icon" href="images/favicon.ico">
  <title>Random Password Generator</title>
</head>
<body id="canvas">
  <main id="generator-ui">
    <section id="generate-heading">
      Generate a <span>random password</span>
      <p id="para">Never use an insecure password again</p>
      <button class="generate-btn" onclick="generate()">Generate passwords</button>
      <div class="separator"></div>
      <section id="password-section">
        <div id="password-box-left" ><p id="password1"></p></div>
        <div id="password-box-right"><p id="password2"></p></div>
      </section>
    </section>
  </main>
</body>
<script src="script.js"></script>
</html>