<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Xcessible - Home Page</title>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">
  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <!-- Google Fonts -->
  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="assets/vendor/owl.carousel/css/owl.carousel.min.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/fonts.css" rel="stylesheet">
  <link href="assets/css/style.css" rel="stylesheet">
  <link href="assets/css/stars.css" rel="stylesheet">

</head>

<body style="overflow: hidden;">
  <header id="header" style="overflow: hidden; opacity:0;">
    <div class="d-flex flex-column" style="height: 100%;margin-top: 50%;">
      <nav class="nav-menu" style="height: 100%;margin-left: -15px;">
      </nav>
    </div>
  </header>

  <section class="hero-id d-flex flex-column justify-content-center">
    <div id='stars'></div>
    <div id='stars2'></div>
    <div id='stars3'></div>
    <div class="hero-container" data-aos="fade-in">
      <h1>Xcessible for <b>P</b>eople <b>w</b>ith <b>D</b>isabilities</h1>
      <p><span class="typed"></span></p>
    </div>
  </section>
  <main id="main">
    <section id="first_section" class="skills" style="background: linear-gradient(0deg, rgba(16,22,31,0.2) 0%, rgba(255,255,255,1) 100%);">
      <div class="container">
        <div class="section-title">
          <h2>WHAT IS XCESSIBLE?</h2>
          <p style="font-weight: 100;font-size: 1.2rem;line-height: 2.3rem;letter-spacing: .05rem;"><br>This platform is created for PWDs first and foremost in mind. <b>Xcessible</b> is not just another job-hunting platform, it is dedicated to provide you, as well as employers, the most convenient method of communication that removes the unnecessary employment red tape for both employers and PWDs, with an environment that is exclusively <b>PWD-friendly</b> and <b>PWD-dedicated</b>, allowing employers to specify their employment requirements in richer and more context-aware detail and giving you the job-hunting platform that adapts to your needs and expectations when searching for jobs without the hassle of having to manually filter them out.
            <br><br>There is a clear distinction in the types of jobs PWDs are able to have currently, as can be seen in the following statistics:</p>
        </div>
        
        <div class="row skills-content">

          <div class="col-lg-6" data-aos="fade-up">

            <div class="progress">
              <span class="skill">PwDs that work in service occupations <i class="val">18%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>

            <div class="progress">
              <span class="skill">PwDs that work in transportation/material-moving occupations <i class="val">15%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>

            <div class="progress">
              <span class="skill">PwDs that work in managerial positions <i class="val">36%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>

            <div class="progress">
              <span class="skill">PwDs that work in government positions <i class="val">15%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>

          </div>

          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">

            <div class="progress">
              <span class="skill">PwDs that are private wage salary workers <i class="val">75%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>

            <div class="progress">
              <span class="skill">PwDs that are self-employed <i class="val">10%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10000"></div>
              </div>
            </div>
            
            <div class="progress">
              <span class="skill">PwDs that are not in the labor force <i class="val">80%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="10000"></div>
              </div>
            </div>

          </div>

        </div>

      </div>
    </section>
    <section id="second_section" class="portfolio " style="background: linear-gradient(0deg, rgba(16,22,31,0.4) 0%, rgba(16,22,31,0.2) 100%);">
      <div class="container">
        <div class="section-title">
          <h2>PWDS CAN REALLY WORK</h2>
          <p style="font-weight: 100;font-size: 1.2rem;line-height: 2.3rem;letter-spacing: .05rem;">
            <b>PwDs</b> show excellent levels of dedication in the workplace. These who do, already make up to 29% globally that are in jobs.<br><br>
            Provided the proper tools and assets as can be seen in the following pictures:<br>
          </p>
        </div>

        <div class="row" data-aos="fade-up">
          <div class="col-lg-12 d-flex justify-content-center">
            <ul id="portfolio-flters">
              <li data-filter=".filter-page1" class="filter-active">Page 1</li>
              <li data-filter=".filter-page2">Page 2</li>
            </ul>
          </div>
        </div>
        <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="100">

          <div class="col-lg-4 col-md-6 portfolio-item filter-page1">
            <div class="portfolio-wrap">
              <img src="https://nodacontact.com/upload/iblock/dc8/dc82985c3288490f609703b23a7e2a49.jpg" class="img-fluid" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-md-6 portfolio-item filter-page1">
            <div class="portfolio-wrap">
              <img src="https://negosentro.com/wp-content/uploads/2016/07/IMG_7681.jpg" class="img-fluid" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-md-6 portfolio-item filter-page1">
            <div class="portfolio-wrap">
              <img src="https://kmcmaggroup.com/media/664498/designing-a-more-workplace-workplace-design-for-pwds.jpg" class="img-fluid" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-md-6 portfolio-item filter-page2">
            <div class="portfolio-wrap">
              <img src="https://www.news-medical.net/image.axd?picture=2017%2F6%2FYoung_woman_with_cochlear_implant_close_up-Elsa_Hoffmann_2a749f3172dc4f03a39c05233ea55ac0-620x480.jpg" class="img-fluid" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-md-6 portfolio-item filter-page2">
            <div class="portfolio-wrap">
              <img src="https://www.sunstar.com.ph/uploads/imported_images/files/field/image/article/pwd_7.jpg" class="img-fluid" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-md-6 portfolio-item filter-page2">
            <div class="portfolio-wrap">
              <img src="https://www.egypttoday.com/siteimages/Larg/41503.jpg" class="img-fluid" alt="">
            </div>
          </div>
        </div>

      </div>
    </section>
    <section id="third_section" class="about" style="background: linear-gradient(0deg, rgba(16,22,31,0.8) 0%, rgba(16,22,31,0.4) 100%);">
      <div class="container">
        <div class="section-title">
          <h2>MISSION & VISION</h2>
          <p style="font-weight: 100;font-size: 1.2rem;line-height: 2.3rem;letter-spacing: .05rem;">
            A word from the creator team.<br>
          </p>
        </div>

        <div class="row">
          <div class="col-lg-4" data-aos="fade-right">
            <img src="assets/img/alpha-team.png" class="img-fluid" style="border-radius: 1000px;">
          </div>
          <div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
            <h3>ALPHA TEAM.</h3>
            <p class="font-italic" style="margin-left: 20px;margin-top: 15px;font-weight: 100;font-size: 1.2rem;line-height: 2.3rem;letter-spacing: .05rem;">
              We are three aspiring undergraduate students interested in technology and developing anything and everything the right way.
              We joined the <b>NAID Assistive Technologies Summer Internship</b> powered by iHub and organized by Sprints and were
              drafted together under the umbrella of DevOps, and as we learned the essentials of DevOps we were tasked with the deployment of this website. 
              We've consequently developed this website ourselves and automated the development process using the DevOps tools and skills we've learned 
              throughout the internship.<br>
              <br><br><strong style="color: whitesmoke;">Sincerly</strong><br>
              <span style="color: whitesmoke;">Alpha Team</span>
            </p>
          </div>
        </div>

      </div>
    </section> 
    <section id="fourth_section" class="resume" style="background: linear-gradient(0deg, rgba(16,22,31,1) 0%, rgba(16,22,31,0.8) 100%);">
      <div class="container">
        <div class="section-title">
          <h2 style="color: #215192">TIMELINE</h2>
            <p style="font-weight: 100;font-size: 1.2rem;line-height: 2.3rem;letter-spacing: .05rem; color: whitesmoke;">
              Timeline for launching this project into the public.
            </p>
        </div>
        
        <div class="row">
          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
            <div class="resume-item">
              <h4>Prototype</h4>
              <h5 style="font-weight: 100;">7<sup>th</sup> of Oct. 2021</h5>
              <br><br><br><br><br><br>
            </div>
            <div class="resume-item">
              <h4>Minimum Viable Product w/o Accessbility</h4>
              <h5 style="font-weight: 100;">10<sup>th</sup> of Oct. 2021</h5>
              <br><br>
            </div>
          </div>  
          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
            <div class="empty-resume-item"><br></div>
            <div class="resume-item">
              <h4>Beta Website Version open for Employers</h4>
              <h5 style="font-weight: 100;">~01<sup>st</sup> of Jan. 2022</h5>
            </div>
            <div class="resume-item">
              <h4>Beta Website Version open for Employers and PWDs</h4>
              <h5 style="font-weight: 100;">01<sup>st</sup> of Feb. 2022</h5>
              <br><br><br><br>
            </div>
            <div class="resume-item">
              <h4>Launch</h4>
              <h5 style="font-weight: 100;">01<sup>st</sup> of Jun. 2022</h5>
            </div>
          </div>
        </div>

      </div>
    </section>
  </main>
    <section id="myHero" class="hero-id d-flex flex-column justify-content-center">
      <div id='stars'></div>
      <div id='stars2'></div>
      <div id='stars3'></div>
      <div class="hero-container" data-aos="fade-in">
        <h1 style="font-size: 65px;">Thank you for supporting us, and<br><br>the PWD cause.</h1>
      </div>
    </section>
  <div class="back-to-top" style="display: none;" id="back-to-top">
    <a href="#" style="vertical-align: middle;margin-top: 4px;color: inherit;display: inline-block;">START</a>
  </div>
  <i id="back-button" style="z-index:9999999;position: fixed;cursor:pointer;right: 15px;bottom: 10px;color: white;mix-blend-mode: difference;font-size: 65px;display: none;" class="icofont-hand-drawn-up"></i>
  <i id="sound-button" style="z-index: 9999999;position: fixed;cursor: pointer;left: 20px;bottom: 20px;color: white;mix-blend-mode: difference;font-size: 35px;" class="icofont-mic-mute"></i>
  <i style="z-index:-1;position: fixed;opacity:0;" class="icofont-hand-drawn-up"></i>
  <% if(username && password) { %>
    <div style="z-index: 9999999; cursor: pointer; left: unset; right: 25px; top: 25px; mix-blend-mode: difference; margin-left: 100px;margin-right: 370px;width: 100px;" class="back-to-top">
      <a href="logout" style="vertical-align: middle; margin-top: 4px; color: inherit; display: inline-block; opacity: 1;">LOGOUT</a>
    </div>
    <div style="z-index: 9999999; cursor: pointer; left: unset; right: 25px; top: 25px; mix-blend-mode: difference; margin-left: 100px;margin-right: 255px;width: 100px;" class="back-to-top">
      <a href="profile" style="vertical-align: middle; margin-top: 4px; color: inherit; display: inline-block; opacity: 1;">PROFILE</a>
    </div>
    <div style="z-index: 9999999; cursor: pointer; left: unset; right: 25px; top: 25px; mix-blend-mode: difference; margin-left: 100px;margin-right: 115px;width: 125px;" class="back-to-top">
      <a href="post" style="vertical-align: middle; margin-top: 4px; color: inherit; display: inline-block; opacity: 1;">POST A JOB</a>
    </div>
    <div style="z-index: 9999999; cursor: pointer; left: unset; right: 25px; top: 25px; mix-blend-mode: difference; margin-left: 100px;width: 100px;" class="back-to-top">
      <a href="search" style="vertical-align: middle; margin-top: 4px; color: inherit; display: inline-block; opacity: 1;">SEARCH</a>
    </div>
  <% } else { %>
    <div style="z-index: 9999999; cursor: pointer; left: unset; right: 25px; top: 25px; mix-blend-mode: difference; margin-left: 100px;width: 200px;" class="back-to-top">
      <a href="login" style="vertical-align: middle; margin-top: 4px; color: inherit; display: inline-block; opacity: 1;">LOGIN / REGISTER</a>
    </div>
    <div style="z-index: 9999999; cursor: pointer; left: unset; right: 25px; top: 25px; mix-blend-mode: difference; margin-left: 100px;margin-right: 215px;width: 100px;" class="back-to-top">
      <a href="search" style="vertical-align: middle; margin-top: 4px; color: inherit; display: inline-block; opacity: 1;">SEARCH</a>
    </div>
  <% } %>
  <div style="z-index: 9999999;cursor: pointer;left: -9px;position: fixed;top: 25px;margin-left: 100px;" class="">
    <a href="/" style="vertical-align: middle; margin-top: 4px; display: inline-block; opacity: 1;">
      <img src="assets/img/bruh.png" style="width: 122px;z-index: 93123323;">
    </a>
  </div>

  
  <!-- Vendor JS Files -->
  <script src="assets/vendor/jquery/jquery.min.js"></script>
  <script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  <script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/owl.carousel/js/owl.carousel.min.js"></script>
  <script src="assets/vendor/typed.js/typed.min.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/artyom.window.min.js"></script>
  <script src="assets/js/voice_commands.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/index.js"></script>

</body>

</html>