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.
304 lines
9.6 KiB
304 lines
9.6 KiB
---
|
|
layout: default
|
|
section_id: home
|
|
slides:
|
|
- title: Brand / Web design
|
|
text: Color displays the <span>soul</span>
|
|
button:
|
|
text: Case study
|
|
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/diamond-brown.png" alt="" class="wow flipInY" data-wow-duration="2s" data-wow-delay="0.1s">
|
|
<div class="spacing"></div>
|
|
<h2>What we do</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="large-10 large-centered columns">
|
|
<p class="big-text">
|
|
We do all aobut <a href="services.html">design</a>, <a href="services.html">brand</a>, <a href="services.html">print</a>, <a href="services.html">website</a> & <a href="services.html">packaging</a>. To raise new questions and new possibilities, to regard old problems from a new angle, requires creative imagination and marks real advance in science.
|
|
</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>
|
|
|