index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inloggen</title>
    <link rel="stylesheet" href="style/style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,500&family=Varela+Round&display=swap"
      rel="stylesheet"
    />
    <script src="https://d3js.org/d3.v6.min.js"></script>
  </head>
  <body>
    <section class="signInWrapper">
      <section class="signInIntro">
        <section class="ringRingerWrapper">
          <img
            src="resources/ringRinger.svg"
            alt="ringRinger logo"
            class="ringRinger"
          />
        </section>
        <section class="signInIntroContent">
          <img
            src="resources/signInKey.svg"
            alt="image of a key"
            class="keyImage"
          />
          <section class="headerWrapper">
            <h1>Policymaker</h1>
            <h1>Portal</h1>
          </section>
          <p>Powered by Ring - Ring</p>
        </section>
      </section>
      <!-- <section class="overSignInDetail">
        <h2>Ontdek de drukste routes van de gebruikers</h2>
        <img src="resources/right-2.svg" alt="arrowButton" />
      </section> -->
      <section class="signInDetail">
        <h1>
          Log in en ontdek de <strong>drukste routes</strong> van de gebruiker!
        </h1>
        <form>
          <label for="username">Gebruikersnaam</label>
          <input
            type="text"
            id="username"
            name="username"
            placeholder="Jan van Straten"
            required
          />
          <label for="password">Wachtwoord</label>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="*******"
            required
          />
          <a class="forgotPassword" href="index.html"
            ><strong>Wachtwoord</strong> vergeten?</a
          >
          <a class="logInButton" href="dashboard.html">Proceed to workroom</a>
        </form>
      </section>
    </section>

    <footer></footer>
    <script src="scripts/durationChart.js"></script>
  </body>
</html>