02-why-join.html

---
layout: page
title: pages.why-join

namespace: why-join
permalink: /why-join/
---
<div class="why-join">
<div class="video">
    <video id="myVideo" playsinline="playsinline" muted="muted" type="video/mp4"></video>
</div>

<div class="section head dark">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        {% translate_file why-join/section1.md %}
      </div>
    </div>
  </div>
</div>

<div class="top-plains">
  <div class="container">
    <div class="row">
      <div class="col-md-4 box">
        <div class="card">
          <div class="card-body">
            {% translate_file why-join/box1.md %}
          </div>
        </div>
      </div>
      <div class="col-md-4 box">
        <div class="card">
          <div class="card-body">
            {% translate_file why-join/box2.md %}
          </div>
        </div>
      </div>
      <div class="col-md-4 box">
        <div class="card">
          <div class="card-body">
            {% translate_file why-join/box3.md %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        {% translate_file why-join/section2-img.md %}
      </div>
      <div class="col-md-6">
        {% translate_file why-join/section2.md %}
      </div>
    </div>
  </div>
</div>

<div class="section grey">
  <div class="container">
    <div class="row">
      <div class="col-md-6 order-md-2">
        {% translate_file why-join/section3-img.md %}
      </div>
      <div class="col-md-6 order-md-1">
        {% translate_file why-join/section3.md %}
      </div>
    </div>
  </div>
</div>

<div class="section dark">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        {% translate_file vision-core-principles/vision.md %}
      </div>
    </div>
  </div>
</div>

<div class="section grey">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        {% translate_file why-join/section5-img.md %}
      </div>
      <div class="col-md-6">
        {% translate_file why-join/section5.md %}
      </div>
    </div>
  </div>
</div>

<div class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-6 order-md-2">
        {% translate_file why-join/section6-img.md %}
      </div>
      <div class="col-md-6 order-md-1">
        {% translate_file why-join/section6.md %}
      </div>
    </div>
  </div>
</div>

<div class="section grey">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        {%- include core-principles.html -%}
      </div>
    </div>
  </div>
  {%- include footer-plains.html -%}
</div>
</div>
<script type="text/javascript">
var videoSource = new Array();
var mq = window.matchMedia("(max-width: 992px)")
mediaQueryFunc(mq) // Call listener function at run time
mq.addListener(mediaQueryFunc) // Attach listener function on state changes

var i = 0;
var videoCount = videoSource.length;

function videoPlay(videoNum) {
  document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
  document.getElementById("myVideo").load();
  document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', videoEnded, false);
videoPlay(0);

function videoEnded() {
  i++;
  if (i === videoCount) {
    i = 0;
    videoPlay(i);
  } else {
    videoPlay(i);
  }
}

function mediaQueryFunc(x) {
  if (x.matches) { // If on mobile
    videoSource[0] = '/assets/why-join/join-and-sign-consti_480p.mp4';
    videoSource[1] = '/assets/why-join/interact-with-discord-1_480p.mp4';
    videoSource[2] = '/assets/why-join/interact-with-discord-2_480p.mp4';
    videoSource[3] = '/assets/why-join/voting-custodians_480p.mp4';
  } else {
    videoSource[0] = '/assets/why-join/join-and-sign-consti.mp4';
    videoSource[1] = '/assets/why-join/interact-with-discord-1.mp4';
    videoSource[2] = '/assets/why-join/interact-with-discord-2.mp4';
    videoSource[3] = '/assets/why-join/voting-custodians.mp4';
  }
}
</script>