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

{% set bodyClasses = 'bookmarks' %}

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

{% block content %}

	<div id="contentsInner">
		<header class="contentsTtl">
			<h1>Bookmarks</h1>
			<h2>My favorite website collection.</h2>
		</header>
		<section id="searchPanel">
			<p class="btnTags closed"><a href="#">Tags</a></p>
			<div class="tags closed">
				<ul>
					<li><a href="{{ base_url() }}/bookmarks/tag/360-degree">360	degree (2)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/3d">3D (94)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/aqua-blue">aqua	blue (19)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/aqua-blur">aqua	blur (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/asynchronous">asynchronous (68)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/black">black (141)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/blue">blue (37)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/bold">bold (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/brown">brown (3)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/camera">camera (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/chrome-extension">chrome extension (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/cinemagraph">cinemagraph (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/classical">classical (6)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/colorful">colorful (62)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/cool">cool (20)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/creative-coding">creative coding (92)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/css3">css3 (4)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/cute">cute (4)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/dark">dark (58)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/dot">dot (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/elegant">elegant (3)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/eye-tracking">eye tracking (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/face-tracking">face	tracking (5)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/facetracking">facetracking (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/flash">flash (13)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/flat-design">flat design (13)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/font">font (4)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/game">game (9)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/gif-animation">gif animation (10)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/glitch">glitch (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/gold">gold (16)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/google">google (5)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/google-api">google API (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/google-street-view">google street view (2)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/gray">gray (27)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/green">green (8)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/grid-design">grid design (29)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/horizontal-scroll">horizontal scroll (4)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/idea">idea (4)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/illustration">illustration(54)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/interactive">interactive(83)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/japan">japan(1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/light">light(11)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/low-polygon">low polygon (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/luxury">luxury(4)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/mask">mask (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/minimal">minimal(18)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/monochrome">monochrome(1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/motion">motion(171)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/movie">movie(49)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/my-work">my work (5)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/navy">navy (3)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/orange">orange(12)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/parallax">parallax(24)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/pastel-color">pastel color (3)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/photo">photo(72)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/physics">physics(2)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/pink">pink (9)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/pixel-graphics">pixel graphics (2)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/pop">pop (20)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/programming">programming(2)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/purple">purple(7)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/red">red (24)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/resonsive">resonsive(1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/responsive">responsive(94)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/retro">retro(2)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/scroll">scroll(153)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/scroll-motion">scroll. motion (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/simple">simple(58)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/smart-phone">smart phone (2)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/sound">sound(49)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/sprite-animation">sprite animation (4)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/sticky-header">sticky header (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/story">story(3)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/svg">svg (25)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/technical">technical(56)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/tool">tool (3)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/tumblr">tumblr(2)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/typography">typography(85)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/video">video(3)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/vivid">vivid(5)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/voice-recognition">voice recognition (1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/warm">warm (6)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/webcam">webCam(1)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/webgl">webGL(120)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/white">white(142)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/yellow">yellow(15)</a></li>
					<li><a href="{{ base_url() }}/bookmarks/tag/yellowish-green">yellowish green (8)</a></li>
				</ul>
			</div>
			<p class="btnMonthlyArchives closed"><a href="#">Monthly Archives</a></p>
			<div class="monthlyArchives closed">
				<ul>
					<li><a href="{{ base_url() }}/bookmarks/date/2017/04"><span class="year">2017</span><span class="month">04</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2017/01"><span class="year">2017</span><span class="month">01</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2016/10"><span class="year">2016</span><span class="month">10</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2016/08"><span class="year">2016</span><span class="month">08</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2016/07"><span class="year">2016</span><span class="month">07</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2016/06"><span class="year">2016</span><span class="month">06</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2016/04"><span class="year">2016</span><span class="month">04</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2016/03"><span class="year">2016</span><span class="month">03</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2016/02"><span class="year">2016</span><span class="month">02</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2016/01"><span class="year">2016</span><span class="month">01</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/12"><span class="year">2015</span><span class="month">12</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/11"><span class="year">2015</span><span class="month">11</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/10"><span class="year">2015</span><span class="month">10</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/09"><span class="year">2015</span><span class="month">09</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/08"><span class="year">2015</span><span class="month">08</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/07"><span class="year">2015</span><span class="month">07</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/06"><span class="year">2015</span><span class="month">06</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/05"><span class="year">2015</span><span class="month">05</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/04"><span class="year">2015</span><span class="month">04</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/03"><span class="year">2015</span><span class="month">03</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/02"><span class="year">2015</span><span class="month">02</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2015/01"><span class="year">2015</span><span class="month">01</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2014/12"><span class="year">2014</span><span class="month">12</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2014/11"><span class="year">2014</span><span class="month">11</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2014/10"><span class="year">2014</span><span class="month">10</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2014/09"><span class="year">2014</span><span class="month">09</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2014/08"><span class="year">2014</span><span class="month">08</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2014/07"><span class="year">2014</span><span class="month">07</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2014/06"><span class="year">2014</span><span class="month">06</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2014/05"><span class="year">2014</span><span class="month">05</span></a></li>
					<li><a href="{{ base_url() }}/bookmarks/date/2014/04"><span class="year">2014</span><span class="month">04</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>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/refresh-studio.com_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/728"><span>View detail</span></a></p>
						<p class="link"><a href="http://refresh-studio.com/" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">Refresh Studio</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/anagram.paris_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/727"><span>View detail</span></a></p>
						<p class="link"><a href="http://anagram.paris/" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">Anagram.paris | Creative digital agency</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/we3.jam3.com_home_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/726"><span>View detail</span></a></p>
						<p class="link"><a href="https://we3.jam3.com/home" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">WE3</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/www.merci-michel.com_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/725"><span>View detail</span></a></p>
						<p class="link"><a href="http://www.merci-michel.com/" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">Merci-Michel</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/kvellhome.com_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/724"><span>View detail</span></a></p>
						<p class="link"><a href="https://kvellhome.com/" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">Kvell</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/www.danielspatzek.com_Home_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/723"><span>View detail</span></a></p>
						<p class="link"><a href="http://www.danielspatzek.com/Home" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">www.danielspatzek.com</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/lookbook.slam.com_en_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/722"><span>View detail</span></a></p>
						<p class="link"><a href="http://lookbook.slam.com/en/" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">Slam &#8211; Lookbook Capsule Collection 2017</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/source.typekit.com_source-han-serif_jp_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/721"><span>View detail</span></a></p>
						<p class="link"><a href="https://source.typekit.com/source-han-serif/jp/" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">源ノ明朝</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/ryotei.kirin.jp_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/720"><span>View detail</span></a></p>
						<p class="link"><a href="http://ryotei.kirin.jp/" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">料亭きりん presented by 本搾り™ | KIRIN</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/www.contents.ne.jp_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/719"><span>View detail</span></a></p>
						<p class="link"><a href="https://www.contents.ne.jp/" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">株式会社コンテンツ　Contents Co.,Ltd.</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/www.north2.net_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/718"><span>View detail</span></a></p>
						<p class="link"><a href="http://www.north2.net/" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">north2 | Creative digital studio</h2>
					<p class="date">2017.04.19</p>
				</article>
				<article>
					<div class="thumb"><img src="{{ base_url() }}/assets/img/bookmarks/captures/recruit.moneyforward.com_400.jpg">
						<p class="detail"><a href="{{ base_url() }}/bookmarks/717"><span>View detail</span></a></p>
						<p class="link"><a href="https://recruit.moneyforward.com/" target="_blank"><span>Visit this site</span></a></p>
					</div>
					<h2 class="ttl">採用情報｜マネーフォワード</h2>
					<p class="date">2017.04.19</p>
				</article>
			</section>
			<div class="pagination">
				<span class="current"><a href='{{ base_url() }}/bookmarks/'>1</a></span>
				<span><a href='{{ base_url() }}/bookmarks/page/2'>2</a></span>
				<span><a href='{{ base_url() }}/bookmarks/page/3'>3</a></span>
				<span><a href='{{ base_url() }}/bookmarks/page/4'>4</a></span>
				<span><a href='{{ base_url() }}/bookmarks/page/5'>5</a></span>
				<span class="dot">...</span>
				<span class="end"><a href='{{ base_url() }}/bookmarks/page/37'>37</a></span>
				<span class="next"><a href="{{ base_url() }}/bookmarks/page/2">Next</a></span>
				<p class="page">1 / 37</p>
			</div>
		</div>
	</div>

{% endblock %}

{% block scripts %}
	{{ parent() }}
	<script src="/assets/js/bookmarks.js"></script>
{% endblock %}