{% extends 'templates/main-layout.twig' %}

{% set bodyClasses = 'works' %}

{% block stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" media="all" href="/assets/css/works.css" type="text/css">
{% endblock %}

{% block content %}
	<div id="contentsInner">
		<header class="contentsTtl">
			<h1><span>W</span>orks</h1>
			<h2>My client and private works.</h2>
		</header>
		<section id="searchPanel" class="hasCategories">
			<p class="btnCategories closed"><a href="#">Categories</a></p>
			<div class="categories closed">
				<ul>
					<li><a href="{{ base_url() }}/works/category/back-end">Back-end (3)</a></li>
					<li><a href="{{ base_url() }}/works/category/design">Design (2)</a></li>
					<li><a href="{{ base_url() }}/works/category/font-end">Front-end (13)</a></li>
					<li><a href="{{ base_url() }}/works/category/website">Website (13)</a></li>
				</ul>
			</div>
			<p class="btnTags closed"><a href="#">Tags</a></p>
			<div class="tags closed">
				<ul>
					<li><a href="{{ base_url() }}/works/tag/asynchronous">asynchronous (2)</a></li>
					<li><a href="{{ base_url() }}/works/tag/css">CSS (13)</a></li>
					<li><a href="{{ base_url() }}/works/tag/glsl">GLSL (7)</a></li>
					<li><a href="{{ base_url() }}/works/tag/gpgpu">GPGPU (7)</a></li>
					<li><a href="{{ base_url() }}/works/tag/gulpjs">gulp.js (12)</a></li>
					<li><a href="{{ base_url() }}/works/tag/html">HTML (13)</a></li>
					<li><a href="{{ base_url() }}/works/tag/javascript">Javascript (13)</a></li>
					<li><a href="{{ base_url() }}/works/tag/live2d">Live2D (1)</a></li>
					<li><a href="{{ base_url() }}/works/tag/mysql">MySQL (1)</a></li>
					<li><a href="{{ base_url() }}/works/tag/php">PHP (1)</a></li>
					<li><a href="{{ base_url() }}/works/tag/pixijs">Pixi.js (1)</a></li>
					<li><a href="{{ base_url() }}/works/tag/private">private (2)</a></li>
					<li><a href="{{ base_url() }}/works/tag/responsive">responsive (4)</a></li>
					<li><a href="{{ base_url() }}/works/tag/sound">sound (4)</a></li>
					<li><a href="{{ base_url() }}/works/tag/sprite-animation">sprite animation (1)</a></li>
					<li><a href="{{ base_url() }}/works/tag/svg">SVG (2)</a></li>
					<li><a href="{{ base_url() }}/works/tag/threejs">three.js (9)</a></li>
					<li><a href="{{ base_url() }}/works/tag/vue-js">vue.js (1)</a></li>
					<li><a href="{{ base_url() }}/works/tag/webaudioapi">Web Audio API (1)</a></li>
					<li><a href="{{ base_url() }}/works/tag/webgl">WebGL (9)</a></li>
					<li><a href="{{ base_url() }}/works/tag/webpack">webpack (6)</a></li>
					<li><a href="{{ base_url() }}/works/tag/webvr">WebVR (1)</a></li>
					<li><a href="{{ base_url() }}/works/tag/wordpress">Wordpress (2)</a></li>
				</ul>
			</div>
			<p class="btnMonthlyArchives closed"><a href="#">Monthly Archives</a></p>
			<div class="monthlyArchives closed">
				<ul>
					<li><a href="{{ base_url() }}/works/date/2017/06"><span	class="year">2017</span><span class="month">06</span></a></li>
					<li><a href="{{ base_url() }}/works/date/2017/05"><span	class="year">2017</span><span class="month">05</span></a></li>
					<li><a href="{{ base_url() }}/works/date/2017/04"><span	class="year">2017</span><span class="month">04</span></a></li>
					<li><a href="{{ base_url() }}/works/date/2017/02"><span	class="year">2017</span><span class="month">02</span></a></li>
					<li><a href="{{ base_url() }}/works/date/2017/01"><span	class="year">2017</span><span class="month">01</span></a></li>
					<li><a href="{{ base_url() }}/works/date/2016/12"><span	class="year">2016</span><span class="month">12</span></a></li>
					<li><a href="{{ base_url() }}/works/date/2016/10"><span	class="year">2016</span><span class="month">10</span></a></li>
					<li><a href="{{ base_url() }}/works/date/2016/09"><span	class="year">2016</span><span class="month">09</span></a></li>
					<li><a href="{{ base_url() }}/works/date/2016/08"><span	class="year">2016</span><span class="month">08</span></a></li>
					<li><a href="{{ base_url() }}/works/date/2016/07"><span	class="year">2016</span><span class="month">07</span></a></li>
				</ul>
			</div>
			<p class="btnKeyword closed"><a href="#">Keyword</a></p>
			<div class="keyword closed">
				<form>
					<input type="text"/>
					<p class="btnSubmit"><a href="#">Search</a></p>
				</form>
			</div>
			<p class="btnBack"><a href="#">Back</a></p>
		</section>
		<div class="inner">
			<section class="articles">
				<article>
					<a href="/works/226">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/works/ogp.jpg">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">MARO（マーロ）公式サイト</h2>
							<p class="date">2017.06.22</p>
						</div>
					</a>
				</article>
				<article>
					<a href="{{ base_url() }}/works/204">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/works/ogp.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">デコガーナムービー｜ガーナ｜お口の恋人ロッテ</h2>
							<p class="date">2017.05.15</p>
						</div>
					</a>
				</article>
				<article>
					<a href="{{ base_url() }}/works/181">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/works/ogp-04.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">Honda | バイク</h2>
							<p class="date">2017.04.20</p>
						</div>
					</a>
				</article>
				<article>
					<a href="{{ base_url() }}/works/169">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/works/ogp-04.jpg">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">YOSUKE KOYACHI</h2>
							<p class="date">2017.04.17</p>
						</div>
					</a>
				</article>
				<article>
					<a href="{{ base_url() }}/works/145">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/works/ogp-02.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">料亭きりん presented by 本搾り&trade;</h2>
							<p class="date">2017.02.23</p>
						</div>
					</a>
				</article>
				<article>
					<a href="{{ base_url() }}/works/134">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/works/ogp-01.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">Happy New Year 2017! by Takumi Hasegawa</h2>
							<p class="date">2017.01.01</p>
						</div>
					</a>
				</article>
				<article>
					<a href="{{ base_url() }}/works/109">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/works/ogp-01-2.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">人工知能少女育成プロジェクト CODE ZERO: PREMIERE</h2>
							<p class="date">2016.12.08</p>
						</div>
					</a>
				</article>
				<article>
					<a href="{{ base_url() }}/works/99">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/works/ogp-01-1.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">AI Messenger (AIメッセンジャー) | チャットボットサービス</h2>
							<p class="date">2016.10.24</p>
						</div>
					</a>
				</article>
				<article>
					<a href="{{ base_url() }}/works/86">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/works/ogp-10.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">TAKEHANAKE DESIGN STUDIO</h2>
							<p class="date">2016.10.11</p>
						</div>
					</a>
				</article>
				<article>
					<a href="{{ base_url() }}/works/67">
						<div class="thumb">
							<img src="{{ base_url() }}/assets/img/works/main.png">
							<p class="detail"><span>View detail</span></p>
						</div>
						<div class="ttls">
							<h2 class="ttl">週末モデル &#8211; FIGHT!</h2>
							<p class="date">2016.09.26</p>
						</div>
					</a>
				</article>
			</section>
			<div class="pagination">
				<span class="current"><a href='{{ base_url() }}/works/'>1</a></span>
				<span><a href='{{ base_url() }}/works/page/2'>2</a></span>
				<span class="next"><a href="{{ base_url() }}/works/page/2">Next</a></span>
				<p class="page">1 / 2</p>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
	{{ parent() }}
	<script src="/assets/js/works.js" type="text/javascript"></script>
{% endblock %}