<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</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.0/css/all.min.css"
    />

    <!-- Recoleta Alt Font -->
    <link rel="stylesheet" href="assets/css/fonts.css" />

    <!-- Custom Styles -->
    <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="row">
        <!-- Sidebar Column -->
        <div class="col-md-5">
          <!-- Sidebar -->
          <aside>
            <header>
              <!-- Logo -->
              <div class="logo">
                <img src="assets/images/icon.png" alt="Icon" />
                Fimro.
              </div>
              <!-- Social Icons -->
              <ul class="socialIcons">
                <a href="#">
                  <li><i class="fa-brands fa-square-facebook"></i></li>
                </a>
                <a href="#">
                  <li><i class="fa-brands fa-pinterest"></i></li>
                </a>
                <a href="#">
                  <li><i class="fa-brands fa-square-twitter"></i></li>
                </a>
              </ul>
            </header>
            <div class="sideContent">
              <!-- Sidebar Heading -->
              <h1 class="sideHeading">How Well do You Know Your Balloons?</h1>
              <!-- Sidebar Description -->
              <p class="sideDesc">Test your knowledge about balloons!</p>
              <!-- Contact Information -->
              <div class="contact">
                <div class="contactIcon">
                  <i class="fa-solid fa-phone-volume"></i>
                </div>
                <article>
                  <p>Have any questions? Give us a call</p>
                  <a href="tel:+92 123 456 7890">+92 123 456 7890</a>
                </article>
              </div>
            </div>
          </aside>
        </div>
        <!-- Main Content Column -->
        <div class="col-md-7">
          <div class="wrapper">
            <!-- Form Section -->
            <form novalidate onsubmit="return false" class="show-section">
              <!-- Question 1 -->
              <fieldset id="step1">
                <span class="q_number">question 1</span>
                <h2 class="mainHeading">
                  Last August 2019 I had the pleasure of helping a new division
                </h2>
                <div class="radioField1 FadeReveal">
                  <input type="radio" name="op1" value="No! Lindsay Nelson" />
                  <label>No! Lindsay Nelson</label>
                </div>
                <div class="radioField1 FadeReveal delay-100ms">
                  <input type="radio" name="op1" value="Yes, Tripadvisor" />
                  <label>Yes, Tripadvisor</label>
                </div>
                <div class="radioField1 FadeReveal delay-200ms">
                  <input
                    type="radio"
                    name="op1"
                    value="Not Sure. Really Don't care"
                  />
                  <label>Not Sure. Really Don't care</label>
                </div>
                <button class="next" id="step1btn">Submit</button>
              </fieldset>
              <!-- Question 2 -->
              <fieldset id="step2">
                <span class="q_number">question 2</span>
                <h2 class="mainHeading">Hey! Remember you have To Attribute</h2>
                <div class="row">
                  <div class="col-md-4 tab-50">
                    <div class="radioField2 FadeReveal">
                      <input type="radio" name="op2" value="Image 1" />
                      <img src="assets/images/step2/op1.jpg" alt="Option" />
                    </div>
                  </div>
                  <div class="col-md-4 tab-50">
                    <div class="radioField2 FadeReveal delay-100ms">
                      <input type="radio" name="op2" value="Image 2" />
                      <img src="assets/images/step2/op2.jpg" alt="Option" />
                    </div>
                  </div>
                  <div class="col-md-4 tab-50">
                    <div class="radioField2 FadeReveal delay-200ms">
                      <input type="radio" name="op2" value="Image 3" />
                      <img src="assets/images/step2/op3.jpg" alt="Option" />
                    </div>
                  </div>
                </div>
                <button class="next" id="step2btn">Submit</button>
              </fieldset>
              <!-- Question 3 -->
              <fieldset id="step3">
                <span class="q_number">question 3</span>
                <h2 class="mainHeading">
                  Select your favorite social network and share our icons with
                  your contacts
                </h2>
                <div class="radioField3 FadeReveal">
                  <input
                    type="radio"
                    name="op3"
                    value="Vertical carousel quiz interaction from a project we're
                  working on at Intelia. More coming soon. Hope you like"
                  />
                  <label>
                    Vertical carousel quiz interaction from a project we're
                    working on at Intelia. More coming soon. Hope you like
                  </label>
                </div>
                <div class="radioField3 FadeReveal delay-100ms">
                  <input
                    type="radio"
                    name="op3"
                    value="We couldn't find any results for this search. Maybe give one"
                  />
                  <label>
                    We couldn't find any results for this search. Maybe give one
                  </label>
                </div>
                <div class="radioField3 FadeReveal delay-200ms">
                  <input
                    type="radio"
                    name="op3"
                    value="Community questions create a new way for Tripadvisor
                  to learn about user preferences, while also offering"
                  />
                  <label>
                    Community questions create a new way for Tripadvisor to
                    learn about user preferences, while also offering
                  </label>
                </div>
                <button class="next" id="sub">Submit</button>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </main>

    <div id="error"></div>

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

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

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