View file Quiza/addons/addon3/index.html

File size: 3.1Kb
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quiz</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/Bootstrap/bootstrap.min.css" />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />

    <!-- Custom Style -->
    <link rel="stylesheet" href="assets/css/style.css" />

    <!-- animation -->
    <link rel="stylesheet" href="assets/css/animation.css" />

    <!-- Responsive -->
    <link rel="stylesheet" href="assets/css/responsive.css" />
  </head>
  <body>
    <main class="overflow-hidden">
      <div class="container">
        <div class="mainInner">
          <h1>What is your reaction to the events?</h1>
          <div class="question">
            <img src="assets/images/target.jpg" alt="Target" />
          </div>
        </div>
        <fieldset>
          <div
            class="d-flex flex-wrap align-items-center justify-content-center"
          >
            <div class="inputField">
              <div class="animate radio">
                <input type="radio" name="op" />
                <img src="assets/images/emojis/cool.png" alt="" />
                <span class="totalvote">20k</span>
              </div>
              <label>Cool</label>
            </div>
            <div class="inputField">
              <div class="animate delay-100 radio">
                <input type="radio" name="op" />
                <img src="assets/images/emojis/happy.png" alt="" />
                <span class="totalvote">10k</span>
              </div>
              <label>Happy</label>
            </div>
            <div class="inputField">
              <div class="animate delay-200 radio">
                <input type="radio" name="op" />
                <img src="assets/images/emojis/sad.png" alt="" />
                <span class="totalvote">50k</span>
              </div>
              <label>Sad</label>
            </div>
            <div class="inputField">
              <div class="animate delay-300 radio">
                <input type="radio" name="op" />
                <img src="assets/images/emojis/shock.png" alt="" />
                <span class="totalvote">60k</span>
              </div>
              <label>Shock</label>
            </div>
            <div class="inputField">
              <div class="animate delay-400 radio">
                <input type="radio" name="op" />
                <img src="assets/images/emojis/wink.png" alt="" />
                <span class="totalvote">90k</span>
              </div>
              <label>Wink</label>
            </div>
          </div>
        </fieldset>
      </div>
    </main>

    <!-- Bootstrap JS -->
    <script src="assets/js/Bootstrap/bootstrap.min.js"></script>

    <!-- jQuery -->
    <script src="assets/js/jQuery/jquery-3.7.1.min.js"></script>

    <!-- Custom JS -->
    <script src="assets/js/custom.js"></script>
  </body>
</html>