ura.design/index.html

---
layout: default
section_id: home
slides:
- title: 
  text: Ura is <span>amazing</span>
  button:
    text: Check it out
    url: http://themeforest.net/user/honryou/portfolio?ref=honryou
  bg_color: "#F7C162"
  image: images/@stock/half-1.jpg
- title: Brand / Web design
  text: Less is <span>more</span>
  button:
    text: Case study
    url: http://themeforest.net/user/honryou/portfolio?ref=honryou
  bg_color: "#c9c9c9"
  image: images/@stock/half-3.jpg
- title: Brand / Web design
  text: Do a <span>happy</span> dance
  button:
    text: Case study
    url: http://themeforest.net/user/honryou/portfolio?ref=honryou
  bg_color: "#f6c418"
  image: images/@stock/half-4.jpg
- title: Brand / Web design
  text: It's the <span>perfect</span> droplight
  button:
    text: Case study
    url: http://themeforest.net/user/honryou/portfolio?ref=honryou
  bg_color: "#E4A48B"
  image: images/@stock/half-5.jpg

works_left:
- title: Cooco fashion
  link_to: portfolio-item.html
  image: images/@stock/work-1.jpg
  categories: Website, brand
- title: Dear god
  link_to: portfolio-item.html
  image: images/@stock/work-20.jpg
  categories: Website, print
- title: Green choice
  link_to: portfolio-item.html
  image: images/@stock/work-22.jpg
  categories: Website
- title: Perfect bags
  link_to: portfolio-item-2.html
  image: images/@stock/work-7.jpg
  categories: Perfect bags

works_right:
- title: Dances App
  link_to: portfolio-item-2.html
  image: images/@stock/work-3.jpg
  categories: Website
- title: Vintage chairs
  link_to: portfolio-item.html
  image: images/@stock/work-5.jpg
  categories: Graphic, brand
- title: Help Five
  link_to: portfolio-item-2.html
  image: images/@stock/work-6.jpg
  categories: Photography
- title: Brandbooks
  link_to: portfolio-item.html
  image: images/@stock/work-8.jpg
  categories: Website, graphic

testimonials_left:
- author: Jeff Beatty - Mozilla
  content: “The folks at Ura were very professional in learning our expectations, planning the project, and being flexible as things changed. Add to that their commitment to work in the open and it made for a wonderful experience.”
  avatar: images/@stock/jeffbeatty.png
- author: Benjamin Kerensa  - Glucosio
  content: “When looking for an identity for Glucosio we put our faith into Ura. With an unrivaled ability to bring ideas together into a fresh and modern branding experience we were really happy with the results.”
  avatar: images/@stock/benjaminkerensa.png
testimonials_right:
- author: Patrick Schleizer - Whonix
  content: “I highly recommend Ura. The quality of their work rates, responsiveness, community engagement and patience is exemplary. I am looking forward to further cooperation.”
  avatar: images/@stock/patrickschleizer.png

members:
- name: Elio Qoshi
  position: Founder & Design Lead
  avatar: images/@stock/ElioHeadshot.jpg
  avatar_hover: images/@stock/ElioHeadshot.jpg
  socials:
  - name: facebook
    url: https://facebook.com/elioqoshi
  - name: twitter
    url: https://twitter.com/elioqoshi
  - name: envelope
    url: mailto:elio@ura.design
- name: Redon Skikuli
  position: Business Development
  avatar: images/@stock/RedonHeadshot.jpg
  avatar_hover: images/@stock/RedonHeadshot.jpg
  socials:
  - name: globe
    url: https://redon.skikuli.com/
  - name: twitter
    url: https://twitter.com/rskikuli
  - name: envelope
    url: mailto:redon@ura.design
- name: Boris Budini
  position: Technical Coordinator
  avatar: images/@stock/BorisHeadshot.jpg
  avatar_hover: images/@stock/BorisHeadshot.jpg
  socials:
  - name: globe
    url: https://boris.budini.me/
  - name: twitter
    url: https://twitter.com/borisbudini
  - name: envelope
    url: mailto:boris@ura.design
- name: Anxhelo Lushka
  position: Frontend &amp; Designer
  avatar: images/@stock/AnxheloHeadshot.jpg
  avatar_hover: images/@stock/AnxheloHeadshot.jpg
  socials:
  - name: globe
    url: https://lushka.al/
  - name: github
    url: https://github.com/AnXh3L0
  - name: envelope
    url: mailto:anxhelo@ura.design

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 no-padding" style="height: 100vh;">
  <div id="slides">
    <div class="slides-container">
      {% for slide in page.slides %}
        <div class="slide">
          <div class="slide-info">
            <p>{{ slide.title }}</p>
            <h1>{{ slide.text }}</h1>
            <div class="three spacing"></div>
            <a href="{{ slide.button.url }}" class="button boxed black">{{ slide.button.text }}</a>
          </div>
          <div class="slide-left" style="background-color: {{ slide.bg_color }};">
          </div>
          <div class="slide-right" style="background: url({{ slide.image }}) center center no-repeat;background-size: cover;">
          </div>
        </div>
      {% endfor %}
    </div>
    <nav class="slides-navigation">
      <a href="#" class="next"><i class="icon-arrows-slim-right"></i></a>
      <a href="#" class="prev"><i class="icon-arrows-slim-left"></i></a>
    </nav>
  </div>
</div>
<div class="full light-grey centered-text">
  <div class="section-title">
    <div class="row">
      <div class="medium-10 medium-centered columns">
        <img src="images/@stock/icon.svg" alt="" class="wow flipInY" data-wow-duration="2s" data-wow-delay="0.1s">
        <div class="spacing"></div>
        <h2>Design, but Open</h2>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-10 large-centered columns">
      <p class="big-text">
       Ura is the design agency for fellow open source projects, founded by a passionate team of open source contributors.<br />
       We love Free & Open Source Software, however we also believe that there is a lack of good design in many open source projects, which we want to change. We are here to help with branding, user experience, user research, interaction design and help open source getting its message across.<br />
        Our work is seen on dozens of open source projects from famous brands like Mozilla, Tor and SitePoint. 
      </p>
      <div class="two spacing"></div>
      <a href="#" class="button boxed blue">Know more</a>
    </div>
  </div>
</div>
<div class="full no-padding">
  <div class="four spacing"></div>
  <div class="spacing"></div>
  <div class="section-title">
    <div class="row">
      <div class="medium-10 medium-centered columns">
        <h2>Recent works</h2>
        <p>You will love we have done</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      <div class="gallery-left-section">
        {% for work in page.works_left %}
          <div class="work-wrapper">
            <a href="{{work.link_to}}" class="work">
              <img src="{{site.baseurl}}/{{work.image}}" alt="">
              <div class="info">
                <h3>{{work.title}}</h3>
                <p>{{work.categories}}</p>
              </div>
            </a>
          </div>
        {% endfor %}
      </div>
    </div>
    <div class="large-6 columns">
      <div class="gallery-right-section">
        {% for work in page.works_right %}
          <div class="work-wrapper">
            <a href="{{work.link_to}}" class="work">
              <img src="{{site.baseurl}}/{{work.image}}" alt="">
              <div class="info">
                <h3>{{work.title}}</h3>
                <p>{{work.categories}}</p>
              </div>
            </a>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="spacing"></div>
</div>
<div class="full">
  <div class="section-title">
    <div class="row">
      <div class="medium-10 medium-centered columns">
        <h2>Testimonials</h2>
        <p>What people say about us</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.3 | 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">
  <div class="section-title">
    <div class="row">
      <div class="medium-10 medium-centered columns">
        <h2>Our Team</h2>
        <p>The usual suspects</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 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.baseurl}}/{{client.image}}"></a></div>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="two spacing"></div>
</div>