---
layout: default
section_id: pages
members:
- name: Tom Hanson
  position: Project manager
  avatar: images/@stock/member-1.jpg
  avatar_hover: images/@stock/member-1-c.jpg
  socials:
  - name: twitter
    url: http://twitter.com
  - name: facebook
    url: http://facebook.com
  - name: linkedin
    url: http://linkedin.com
  - name: dribbble
    url: http://dribbble.com
- name: Kate Holms
  position: Project manager
  avatar: images/@stock/member-2.jpg
  avatar_hover: images/@stock/member-2-c.jpg
  socials:
  - name: twitter
    url: http://twitter.com
  - name: facebook
    url: http://facebook.com
  - name: linkedin
    url: http://linkedin.com
  - name: dribbble
    url: http://dribbble.com
- name: Munk Taylor
  position: Web designer
  avatar: images/@stock/member-3.jpg
  avatar_hover: images/@stock/member-3-c.jpg
  socials:
  - name: twitter
    url: http://twitter.com
  - name: facebook
    url: http://facebook.com
  - name: linkedin
    url: http://linkedin.com
  - name: dribbble
    url: http://dribbble.com
- name: Zam White
  position: Developer
  avatar: images/@stock/member-5.jpg
  avatar_hover: images/@stock/member-5-c.jpg
  socials:
  - name: twitter
    url: http://twitter.com
  - name: facebook
    url: http://facebook.com
  - name: linkedin
    url: http://linkedin.com
  - name: dribbble
    url: http://dribbble.com

skills_left:
- title: Web Design
  percent: 98
- title: Web Development
  percent: 92
skills_right:
- title: Branding
  percent: 94
- title: Print
  percent: 87

testimonials_left:
- author: David Lame - CEO of Wollen store
  content: “Obcaecati voluptate ullam pariatur reiciendis optio harum
    quae aut, eveniet explicabo. Commodi pariatur ut provident.”
  avatar: images/@stock/author-1.png
- author: Amy Swan - CEO of Wollen store
  content: “Obcaecati voluptate ullam pariatur reiciendis optio harum
    quae aut, eveniet explicabo. ”
  avatar: images/@stock/author-3.png
testimonials_right:
- author: Sherley Hewai - CEO of Wollen store
  content: Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Explicabo eveniet asperiores ipsum saepe ab, aliquid veritatis incidunt
    laudantium modi accusamus quidem eum magni.
  avatar: images/@stock/author-2.png
- author: Lucas Toope - CEO of Wollen store
  content: Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Consectetur rem doloribus veniam alias commodi, dolorem, natus autem neque.
    Quisquam labore.
  avatar: images/@stock/author-4.png

clients:
- image: images/@stock/client-1.png
- image: images/@stock/client-2.png
- image: images/@stock/client-3.png
- image: images/@stock/client-4.png
- image: images/@stock/client-5.png
- image: images/@stock/client-6.png
---

<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 class="row">
    <div class="medium-9 medium-centered columns">
      <div class="header-quote">
        <p>"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."</p>
      </div>
    </div>
  </div>
  <div class="two spacing"></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>