index.html

---
layout: default
---

<div class="landing-page">

  <div class="splat-background">
    <b class="decoration splat-yellow"></b>
    <b class="decoration splat-orange-dark"></b>
  </div>

  <div class="container">

    <div class="tile is-ancestor">

      <div class="tile is-vertical is-parent">
        <div class="tile is-child turq-stripe intro">
          <div class="mobile-intro-background turq-stripe">
            <div class="yellow-block"></div>
          </div>
          <div class="logo-container">
            <a class="toucanoo-logo {{ site.lang }}">{% t index.maintitle %}</a>
          </div>
          <div class="intro-image image is-16by9">
            <img src="{{ "/assets/img/web/background-small.jpg" | prepend: site.baseurl_root }}" alt="{% t index.alt %}">
          </div>
          <div class="intro-blurb">
            <h1>{% t index.subtitle %}</h1>
            <p>{% t index.blurb %}</p>
          </div>
        </div>

        <div class="tile is-child box">
          <div class="steps columns is-mobile">
            <div class="column touch">
              <a href="{% t index.cta %}" class="home-panel">
                <div class="image-sizer">
                    <img class="intro-gifs" src="{{ "/assets/img/web/touch.gif" | prepend: site.baseurl_root }}">
                </div>
                <p>{% t index.introa %}</p>
              </a>
            </div>
            <div class="column mouse">
              <a href="{% t index.cta %}" class="home-panel">
                <div class="image-sizer">
                    <img class="intro-gifs" src="{{ "/assets/img/web/mouse.gif" | prepend: site.baseurl_root }}">
                </div>
                <p>{% t index.introa %}</p>
              </a>
            </div>
            <div class="column print">
              <a href="{% t index.cta %}" class="home-panel">
                <div class="image-sizer">
                    <img class="intro-gifs" src="{{ "/assets/img/web/print.gif" | prepend: site.baseurl_root }}">
                </div>
                <p>{% t index.introb %}</p>
              </a>
            </div>
          </div>
        </div>

        <div class="tile is-child cta-tile box home-cta-desktop">
          <a href="{% t index.cta %}" class="button is-warning">{% t index.ctatext %}</a>
        </div>

      </div>

      <div class="desktop-support tile is-parent">
        <div class="tile is-child box">
          <div class="hero">
            <div class="hero-label">
              {% t index.imgtext %}
            </div>
            <div class="hero-image"></div>
          </div>
        </div>
      </div>

    </div>

  </div>

  <div class="tile is-child cta-tile box home-cta-mobile">
    <a href="{% t index.cta %}" class="button is-warning">{% t index.ctatext %}</a>
  </div>

  </div>

<script src="{{ "/assets/js/landing.js" | prepend: site.baseurl_root }}"></script>