<?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"
    />

    <!-- 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 trim-vote">
      <div class="position-relative z-3 animate">
        <!-- header -->
        <header>
          <!-- logo -->
          <div class="logo">
            <img src="assets/images/icon.png" alt="Icon" />Fimro.
          </div>

          <!-- navigation -->
          <nav>
            <div class="contact-info">
              <i class="fa-solid fa-phone-volume"></i
              ><a href="#">Phone: + 124 569 89 09</a>
            </div>
            <div class="contact-info">
              <i class="fa-regular fa-envelope"></i>
              <a href="#">Mail: support@email.com</a>
            </div>

            <!-- socail 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>
          </nav>
        </header>

        <!-- Selected Candidate Area -->
        <div class="container">
          <!-- section heading -->
          <article class="sectionHeading">
            <p>vote now</p>
            <h4>Closes At 7 am ET</h4>
          </article>
          <div class="row">
            <!-- Candidate Single -->
            <div class="col-md-3 p-md-4 text-center tab-50 sm-100">
              <div class="selectedCandidate">
                <!-- Image -->
                <img
                  src="assets/images/selectedCandidates/sc1.jpg"
                  alt="Selected"
                />
                <span></span>
              </div>

              <!-- Name -->
              <h3 class="candidatename">Bencio Bryant</h3>

              <!-- Vote BUtton -->
              <button class="voteCandidate buttonHover">
                <span>join Now</span>
              </button>
            </div>
            <!-- Candidate Single -->
            <div class="col-md-3 p-md-4 text-center tab-50 sm-100">
              <div class="selectedCandidate">
                <!-- Image -->
                <img
                  src="assets/images/selectedCandidates/sc2.jpg"
                  alt="Selected"
                />
                <span></span>
              </div>

              <!-- Name -->
              <h3 class="candidatename">Bencio Bryant</h3>

              <!-- Vote BUtton -->
              <button class="voteCandidate buttonHover">
                <span>Join Now</span>
              </button>
            </div>
            <!-- Candidate Single -->
            <div class="col-md-3 p-md-4 text-center tab-50 sm-100">
              <div class="selectedCandidate">
                <!-- Image -->
                <img
                  src="assets/images/selectedCandidates/sc3.jpg"
                  alt="Selected"
                />
                <span></span>
              </div>

              <!-- Name -->
              <h3 class="candidatename">Bencio Bryant</h3>

              <!-- Vote BUtton -->
              <button class="voteCandidate buttonHover">
                <span>Join Now</span>
              </button>
            </div>
            <!-- Candidate Single -->
            <div class="col-md-3 p-md-4 text-center tab-50 sm-100">
              <div class="selectedCandidate">
                <!-- Image -->
                <img
                  src="assets/images/selectedCandidates/sc4.jpg"
                  alt="Selected"
                />
                <span></span>
              </div>

              <!-- Name -->
              <h3 class="candidatename">Bencio Bryant</h3>

              <!-- Vote BUtton -->
              <button class="voteCandidate buttonHover">
                <span>Join Now</span>
              </button>
            </div>
          </div>
        </div>

        <!-- pop Up Area -->
        <div class="popup">
          <div class="PopUpCandidate">
            <div class="PopReveal row">
              <div
                class="col-md-6 d-grid align-content-center pt-md-5 mt-3 tab-lg-100"
              >
                <!-- CLicked Candidate Details -->
                <h2 class="popCandidateName">Bencio Bryant</h2>
                <span class="tagLine">Know More About</span>

                <!-- Description -->
                <article class="popDesc">
                  <h6>Born in USA, 1974</h6>
                  <p>
                    No matter how big your company is, as you expand and reach
                    new highs you'll want an agency to have your back. One with
                    a process that has proven itself over and over again. That's
                    us. We're here to help you align, refine, design, and build.
                    a process that has proven itself over and over again. That's
                    us. We're here to help you align, refine, design,
                  </p>
                </article>

                <!-- Clicked Candidate Social -->
                <div class="socialLinks">
                  <h3>Social Presence</h3>
                  <div class="d-flex align-items-center">
                    <img
                      src="assets/images/socialimgs/instagram.png"
                      alt="Social"
                    />
                    <img
                      src="assets/images/socialimgs/facebook.png"
                      alt="Social"
                    />
                    <img
                      src="assets/images/socialimgs/twitter.png"
                      alt="Social"
                    />
                    <img
                      src="assets/images/socialimgs/linkedin.png"
                      alt="Social"
                    />
                  </div>

                  <!-- Vote Button -->
                  <button class="popBtn" id="sub">Submit Vote</button>
                </div>
              </div>
              <div class="col-md-6 tab-lg-none">
                <!-- CLicked Candidate IMage -->
                <div class="popUpCandidateImg">
                  <img
                    src="assets/images/selectedCandidates/sc1.jpg"
                    alt="SelectedCandidate"
                  />
                  <span class="totalVotes"> 5m <span>total voted </span></span>
                </div>
              </div>
            </div>

            <!-- close button -->
            <div class="closePopup">
              <i class="fa-solid fa-x"></i>
            </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>
