---
layout: default
section_id: pages
---

<div class="full light-grey centered-text tree">
  <div class="four spacing"></div>
  <div class="section-title">
    <div class="row">
      <div class="medium-10 medium-centered columns">
        <h1 class="wow slideInUp">About</h1>
      </div>
    </div>
  </div>
</div>
<div class="full">
  <div class="section-title">
    <div class="row">
      <div class="medium-10 medium-centered columns">
        <h2>The team</h2>
        <p>We are happy to work together</p>
      </div>
    </div>
  </div>
  <div class="row">
    {% for member in page.members %}
      <div class="large-3 columns">
        <div class="member">
          <img src="{{site.url}}/{{member.avatar}}" alt="">
          <img class="colored" src="{{site.url}}/{{member.avatar_hover}}" alt="">
          <div class="member-info">
            <h4>{{member.name}}</h4>
            <p class="position">{{member.position}}</p>
            <ul class="socials">
              {% for social in member.socials %}
                <li><a href="{{social.url}}"><i class="fa fa-{{social.name}}"></i></a></li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>
<div class="full light-grey">
  <div class="section-title">
    <div class="row">
      <div class="medium-10 medium-centered columns">
        <h2>Our skills</h2>
        <p>We work to improve our skills</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="medium-6 columns">
      <div class='mod modBarGraph'>
        <ul class='bars'>
          {% for skill in page.skills_left %}
            <li>
              <h4>{{skill.title}}<strong>{{skill.percent}}%</strong></h4>
              <p class="highlighted" data-percent="{{skill.percent}}"></p>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
    <div class="medium-6 columns">
      <div class='mod modBarGraph'>
        <ul class='bars'>
          <ul class='bars'>
            {% for skill in page.skills_right %}
              <li>
                <h4>{{skill.title}}<strong>{{skill.percent}}%</strong></h4>
                <p class="highlighted" data-percent="{{skill.percent}}"></p>
              </li>
            {% endfor %}
          </ul>
        </ul>
      </div>
    </div>
  </div>

</div>
<div class="full">
  <div class="section-title">
    <div class="row">
      <div class="medium-10 medium-centered columns">
        <h2>Testimonials</h2>
        <p>We are happy to work with our clients and let thme happy</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      {% for testimonial in page.testimonials_left %}
        <div class="quote wow slideInLeft" data-wow-delay="{{ 0.2 | times:forloop.index0 }}s">
          <div class="row">
            <div class="small-3 columns">
              <img src="{{testimonial.avatar}}" alt="auhor">
            </div>
            <div class="small-9 columns">
              <p>{{testimonial.content}}</p>
              <p class="author">{{testimonial.author}}</p>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
    <div class="large-6 columns">
      {% for testimonial in page.testimonials_right %}
        <div class="quote reverse wow slideInRight" class="wow" data-wow-delay="{{ 0.2 | times:forloop.index0 }}s">
          <div class="row">
            <div class="small-3 columns">
              <img src="{{testimonial.avatar}}" alt="auhor">
            </div>
            <div class="small-9 columns">
              <p>{{testimonial.content}}</p>
              <p class="author">{{testimonial.author}}</p>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
<div class="full light-grey no-padding">
  <div class="two spacing"></div>
  <div class='row'>
    <div class='large-12 columns'>
      <div class='clients'>
        {% for client in page.clients %}
          <div><a href="#"><img alt="" src="{{site.url}}/{{client.image}}"></a></div>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="two spacing"></div>
</div>