about.html

---
layout: default
permalink: /about/
title: About Us
meta-content:
  image: /uploads/aboutus.jpg
  description: >-
    Holler designs, builds, and delivers content to enhance your online
    communications by serving up relevant and expressive content within your
    messaging apps. Get to know us.
---

<div class="container pt-intro">
    <div class="row">
        <div class="col-md-6 editable">
          <p>So, what is Holler? We&rsquo;re a tech brand, but we&rsquo;re way more than just that. We&rsquo;re real people who know that communicating in today&rsquo;s world is convenient, yet complicated. Let&rsquo;s be honest &mdash; sometimes words on a screen just don&rsquo;t cut it.&nbsp;</p>
          <p>Knowing this, we set out on a mission to make your texts, posts, and DMs more expressive. How? By creating original content meant for messaging (think fun animated stickers) and then recommending the most relevant ones at just the right moment.&nbsp;</p>
        </div>
        <div class="col-md-6 editable">
          <p>We&rsquo;re proud to say that our innovative technology sparks more meaningful online convos every day, everywhere. And it&rsquo;s been built with your privacy in mind.</p>
          <p>Holler is integrated with the top messaging apps and keyboards you&rsquo;re using, and we&rsquo;ve already helped millions of people add excitement to their digital interactions.</p>
          <p>Looking for a better way to #expressyourself? All you have to do is Holler.</p>
        </div>
        <div class="col my-3">
            <h2 class="editable">
              Although our team works hard, we don&rsquo;t take ourselves too seriously. Learn about us!
            </h2>
        </div>
    </div>

<div id="team" class="clearfix mb-5 position-relative">
{% for member in site.data.team %}
<!-- Button trigger modal -->
        <a href="#" class="d-inline float-left text-center text-decoration-none" data-toggle="modal" data-target="#team-{{forloop.index}}">
            <img src="{{ member.image }}" alt="{{member.image_alt_text}}" class="team-image d-inline-block img-fluid" /><br />
            <div class="team-image-caption d-inline-block">
                <p class="text-decoration-none mt-md-3"><strong>{{member.name}}</strong><br />{{member.title}}</p>
            </div>
        </a>

        <!-- Modal -->
        <div class="modal fade" id="team-{{forloop.index}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog m-auto" role="document">
            <div class="modal-content">
                <button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">
                <svg width="28px" height="29px" viewbox="0 0 28 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs></defs>
                    <g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
                        <g id="1920x1080_TeamBio" transform="translate(-1808.000000, -563.000000)" stroke="#424648" stroke-width="4">
                            <g id="Group" transform="translate(1810.000000, 565.000000)">
                                <path d="M0.307692308,0 L23.4591346,23.7606908" id="Line-4" />
                                <path d="M0,1 L24,24" id="Line-4" transform="translate(12.000000, 12.500000) rotate(-90.000000) translate(-12.000000, -12.500000) " />
                            </g>
                        </g>
                    </g>
                </svg>
                </span>
                </button>
                <div class="row position-relative" style="white-space: normal;">
                    <div class="col-10 col-lg-5 offset-1 py-5">
                        <h2 class="modal-title" id="exampleModalLabel"><b>{{ member.name }}</b><br />{{ member.title }}</h2>
                        <p class="mt-4">{{member.modal.bio}}</p>
                    </div>
                    <div class="col-10 col-lg-5">
                        <img src="{{ member.modal.image}}" alt="{{member.modal.image_alt_text}}" class="img-fluid" />
                    </div>
                </div>
                
            </div>
        </div>
        </div>
{% endfor %}
</div>
</div>