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.
306 lines
9.8 KiB
306 lines
9.8 KiB
---
|
|
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
|
|
|
|
milestones:
|
|
- title: Projects
|
|
from: 0
|
|
to: 69
|
|
- title: Ideas
|
|
from: 0
|
|
to: 708
|
|
- title: Countries
|
|
from: 0
|
|
to: 10
|
|
- title: Articles
|
|
from: 0
|
|
to: 287
|
|
|
|
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 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="3s" 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">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 light-grey flower">
|
|
<div class="three spacing"></div>
|
|
<div class="row">
|
|
{% for milestone in page.milestones %}
|
|
<div class="large-3 columns ">
|
|
<div class="milestone centered-text">
|
|
<div class="number" style="color: #333" data-from="{{milestone.from}}" data-to="{{milestone.to}}"> </div>
|
|
<span>{{milestone.title}}</span>
|
|
<div class="spacing"></div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="three spacing"></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.baseurl}}/{{client.image}}"></a></div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="two spacing"></div>
|
|
</div>
|
|
<div class="full centered-text">
|
|
<div class="section-title">
|
|
<div class="row">
|
|
<div class="medium-10 medium-centered columns">
|
|
<h2>Recent posts</h2>
|
|
<p>Know what we are thinking and doing.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
{% for post in site.posts limit:3 %}
|
|
<div class="large-4 columns">
|
|
<div class="post recent-post">
|
|
{% if post.images %}
|
|
<a href="{{post.url}}" class="home"><img src="{{site.baseurl}}/{{post.images[0]}}" alt="post"></a>
|
|
<div class="spacing"></div>
|
|
{% endif %}
|
|
<h4>{{post.title}}</h4>
|
|
<p class="info">
|
|
<span>
|
|
<a href="#">{{ post.author }}</a>
|
|
</span>
|
|
,
|
|
<span>{{ post.date | date: "%B %d, %Y" }}</span>
|
|
</p>
|
|
<div class="spacing"></div>
|
|
<p><a href="{{post.url}}" class="button boxed brown">Read more</a></p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|