htv.html

---
title: How To Vote
permalink: "/htv/"
layout: default
dark-theme: true
htvs:
- nsw
- vic
- qld
- wa
- sa
- tas
- act
---

{% include navbar.html %}

<div id="fb-root"></div>


<div class="bg-near-white dark-gray py4 ">

  <!-- Use provided imagery here -->
  <div class="bg-near-black height-40vh absolute z1 left-0 top-0 col-12 texture-bg-img"></div>

  <div class="mx-auto max-width-3 px2 sm-px4 pt4 pb3 bg-white relative mt5 z2">
    <!-- <div class="max-width-3 mx-auto px2 sm-px3 pt4 pb3 bg-white"> -->
    {% include components/main-heading.html
    text="How To Vote"
    font-size="h0"
    font-weight="bold"
    line="true" %}

    <div class="mb3 pb3 border-bottom">

      <div class="m3">
        <h2>Choose a state</h2>

        <script type="text/javascript">
          function showState(state){
            $(".state-htv").addClass('hide');
            $("#state-htv-" + state).removeClass('hide');
          }
          function showAll(){
            $(".state-htv").removeClass('hide');
          }
        </script>

        <button class="p1 rounded bg-accent white" onclick="showAll()">All States</button>
        {% for state in page.htvs %}
          <button class="p1 rounded bg-accent white" onclick="showState('{{state}}');">{{state | upcase}}</button>
        {% endfor %}
      </div>

      {% for state in page.htvs %}
        <div class="m3 state-htv" id="state-htv-{{state}}">
          <h2>HTV For {{ state | upcase }}</h2>
          <img src="/img/htv/{{ state }}.png" alt="HTV for {{state | upcase}}">
        </div>
      {% endfor %}
    </div>
  </div>


  <div class="max-width-3 mx-auto">
    <div class="mt4"><i class="material-icons mr1">arrow_back</i><a href="{{site.baseurl}}/" class="inline-block">Back to home page</a></div>
  </div>

</div>

{% include footer.html %}