index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Super Hero App</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <header>
    <h1>Super Hero App</h1>
  </header>

  <main>
    <p>You can search for a super hero like "batman" or "thanos" or... You can generate a random hero</p>

    <div id="heroImage">
      <img src="">
    </div>

    <label for="hero">Search for a hero:</label>
    <input type="text" id="hero" placeholder="e.g. Batman">

    <div class="buttons">
      <button id="searchButton" type="submit">Search</button>
      <button id="getSuperhero">Random</button>
    </div>
  </main>

  <footer>
    <p>&copy; 2023 Super Hero App</p>
  </footer>

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

</html>