The website of Ura Design
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

239 lines
7.0 KiB

---
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>