<?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>
    <!-- The main container with overflow hidden -->
    <main class="overflow-hidden">
      <!-- Container for the content with relative positioning -->
      <div class="container position-relative">
        <!-- Header section -->
        <header>
          <!-- Logo -->
          <div class="logo"><img src="assets/images/icon.png" />Fimro.</div>
        </header>

        <!-- Content wrapper -->
        <div class="wrapper">
          <div class="row mt-md-3">
            <!-- Left column with an image -->
            <div class="col-md-7 p-0 position-relative tab-none">
              <img
                src="assets/images/sideImg.jpg"
                alt="SideImg"
                class="SideImg"
              />
            </div>

            <!-- Right column with a form -->
            <div class="col-md-5 p-0 formCol">
              <form novalidate class="pollForm">
                <!-- Main heading-->
                <h1 class="mainHeading">Vote For this Vlog ?</h1>

                <!-- Fieldset for grouping radio options -->
                <fieldset id="step1">
                  <div class="radioField FadeReveal">
                    <input
                      type="radio"
                      name="op1"
                      value="Vlog Camera Quailty"
                    />
                    <div class="inputWrap">
                      <label
                        >Vlog Camera Quailty<span class="totalVote"
                          >15</span
                        ></label
                      >
                      <div class="radioBar">
                        <div class="fill"></div>
                      </div>
                    </div>
                  </div>

                  <div class="radioField FadeReveal delay-100ms">
                    <input type="radio" name="op1" value="Vote For Picture" />
                    <div class="inputWrap">
                      <label
                        >Vote For Picture<span class="totalVote"
                          >16</span
                        ></label
                      >
                      <div class="radioBar">
                        <div class="fill"></div>
                      </div>
                    </div>
                  </div>

                  <div class="radioField FadeReveal delay-200ms">
                    <input type="radio" name="op1" value="Video 4k Quailty" />
                    <div class="inputWrap">
                      <label
                        >Video 4k Quailty<span class="totalVote"
                          >20</span
                        ></label
                      >
                      <div class="radioBar">
                        <div class="fill"></div>
                      </div>
                    </div>
                  </div>

                  <div class="radioField FadeReveal delay-300ms">
                    <input
                      type="radio"
                      name="op1"
                      value="Vote For this Vlog ?"
                    />
                    <div class="inputWrap">
                      <label
                        >Vote For this Vlog ?<span class="totalVote"
                          >33</span
                        ></label
                      >
                      <div class="radioBar">
                        <div class="fill"></div>
                      </div>
                    </div>
                  </div>
                </fieldset>
              </form>

              <!-- Footer section -->
              <footer>
                <!-- Footer heading -->
                <h3 class="footerHeading">Share with friends</h3>

                <!-- Social media sharing buttons -->
                <div class="shareBtn">
                  <span>12k</span>
                  <a href="#" class="facebook">Facebook</a>
                </div>
                <div class="shareBtn">
                  <span>12k</span>
                  <a href="#" class="twitter">Twitter</a>
                </div>
                <div class="shareBtn">
                  <span>12k</span>
                  <a href="#" class="pinterest">Pinterest</a>
                </div>
                <div class="shareBtn">
                  <span>12k</span>
                  <a href="#" class="youtube">YouTube</a>
                </div>
              </footer>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 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>
