index.html

﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <link rel="stylesheet" href="index.css" />
    <link
      rel="icon"
      href="https://image.flaticon.com/icons/png/128/1601/1601065.png"
    />
    <title>Harry Potter Fan Quiz 🧙🏻‍♂️</title>
  </head>
  <body>
    <h1>Harry Potter Fan Quiz</h1>
    <main class="quizContainer" id="Quiz">
        <header class="quizHeader">
            <h4 id="question">
                Think you're a super Harry Potter fan? Then take this quiz and see how
                many you get correct at the end!
            </h4>
            <ul class="quizList">
                <li class="quizListItem">
                    <input type="radio" name="answer" id="a" class="answer" />
                    <label for="a" id="aText">Question</label>
                </li>
                <li class="quizListItem">
                    <input type="radio" name="answer" id="b" class="answer" />
                    <label for="b" id="bText">Question</label>
                </li>
                <li class="quizListItem">
                    <input type="radio" name="answer" id="c" class="answer" />
                    <label for="c" id="cText">Question</label>
                </li>
                <li class="quizListItem">
                    <input type="radio" name="answer" id="d" class="answer" />
                    <label for="d" id="dText">Question</label>
                </li>
            </ul>
        </header>
        <div id="progress">
            <div id="bar">10%</div>
        </div>
        <button class="btn" id="submitBtn">Submit</button>
    </main>
    <script src="index.js"></script>
  </body>
</html>