index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="icon" type="image/x-icon" href="/ice.ico">
  <title>Ranther</title>
  <link rel="stylesheet" href="./styles/styles.css" />
  <link rel="stylesheet" href="./styles/loader.css" />
  <script type="module" defer src="./js/main.js"></script>
</head>

<body>
  <main>
    <h1>Welcome to <span class="text-gradient">Ranther</span></h1>
    <p class="instructions">
      🙋🏻‍♀️ The IA <strong>ran</strong>dom ra<strong>ther</strong> question generator you were looking for.
    </p>
    <section class="card">
      <div id="loading" class="loading">
        Loading&#8230;
      </div>
      <section class="output">
        <h2 id="question" class="openIA-question"></h2>
      </section>
    </section>
    <section id="answers">
      <div class="instructions"><input id="option1Button" type="radio" name="option" value="adfasdf" checked>
        <label id="option1" for="option1Button"></label>
      </div>
      <div class="instructions"><input id="option2Button" type="radio" name="option" value="adfadf">
        <label id="option2" for="option2Button"></label>
      </div>
    </section>
    <button class="generate-button">Get new question</button>


    <a href="" class="share-twitter"> <img src="/twitter.png" alt="compartir" width="25" /> Share</a>
  </main>
  <footer>
    <p>
      🎯 An <strong>open-source</strong> project by <a href="https://github.com/dianait">Dianait</a>.
      <br />Take a look at the<a href="https://github.com/dianait/ranther"> code</a> 👀
    </p>
    </p>
  </footer>
</body>

</html>