Permalink
Browse files

modify: 「トップページ」「サービス」「ワークス」インデックステンプレート:コーディングデータから、メインコンテンツ部分をコピー

  • Loading branch information...
dreamseeker committed Dec 29, 2018
1 parent 0643b7f commit 2a9b5b65541c0c8692ca376c71d7dad25ffdbe4a
Showing with 251 additions and 10 deletions.
  1. +121 −0 templates/index.html
  2. +67 −5 templates/services/_index.html
  3. +63 −5 templates/work/_index.html
@@ -18,4 +18,125 @@

{# main ブロック #}
{% block main %}
<div id="hero">
<img src="https://placehold.jp/3d4070/42598f/1280x800.png" alt="hero-image"/>
<div class="hero-info">
<h1>We always see the glass<br>
<span class="ir">Half Full</span>
</h1>
<p class="center reverse">Work with Happy Lager and you will find an endless<br>
tap of ideas, wit and creativity.
</p>
<p class="center"><a href="mailto:hi@happylager.dev" class="hero-cta">Pull up a bar stool</a></p>
</div><!-- /.hero-info -->
</div><!-- /#hero -->
<section id="on-tap">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex12">
<div class="on-tap-buttons-wrap">
<a class="button-w-icon icon-beer" href="./work/">What’s on Tap</a>
<a href="./work/" class="view-more">View More</a>
</div>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex2 g3-flex4">
<a href="./work/detail.html" class="services-entry-wrap">
<img src="https://placehold.jp/3d4070/42598f/280x204.png" alt="image.title"/>
<h3 class="center">Sports R&#039; Us</h3>
<p>
New e-commerce experience for Sports R' Us
</p>
</a>
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
<a href="./work/detail.html" class="services-entry-wrap">
<img src="https://placehold.jp/3d4070/42598f/280x204.png" alt="image.title"/>
<h3 class="center">Diva!</h3>
<p>
In July, we released Diva!, our celebrity music app.
</p>
</a>
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
<a href="./work/detail.html" class="services-entry-wrap">
<img src="https://placehold.jp/3d4070/42598f/280x204.png" alt="image.title"/>
<h3 class="center">On Track</h3>
<p>
Our desktop software for the busy forex trader.
</p>
</a>
</div>
</div><!-- /.flex -->
</section><!-- /#on-tap -->
<section id="how-made">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<hr class="horz-rule alt">
<a class="button-w-icon alt icon-beaker" href="./about/">How it’s made</a>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<h1 class="beta">Uncap Happy Lager to find out how it’s made</h1>
<h2 class="subfont delta center">Our Experience &middot; Our Services &middot; And more</h2>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<hr class="horz-rule alt2">
<a class="big-arrow" href="./about/">Go</a>
</div>
</div><!-- /.flex -->
</section><!-- /#how-made -->
<section id="testimonials">
<div class="flex">
<div class="g1-flex4 g2-flex2 g3-flex4 bubble">
<blockquote>Happy Lager delivered the most comprehensive strategy from a boutique company that I’ve ever seen.</blockquote>
<img src="https://placehold.jp/3d4070/42598f/84x84.png" alt="Larry Page">
<p><cite class="gamma reverse">Larry Page</cite></p>
</div><!-- /.bubble -->
<div class="g1-flex4 g2-flex2 g3-flex4 bubble">
<blockquote>I don’t know where to begin. I can’t recommend Happy Lager highly enough.</blockquote>
<img src="https://placehold.jp/3d4070/42598f/84x84.png" alt="Ryan Reynolds">
<p><cite class="gamma reverse">Ryan Reynolds</cite></p>
</div><!-- /.bubble -->
<div class="g1-flex4 g2-flex2 g3-flex4 bubble">
<blockquote>Happy Lager sells the good stuff.</blockquote>
<img src="https://placehold.jp/3d4070/42598f/84x84.png" alt="Bob Guff">
<p><cite class="gamma reverse">Bob Guff</cite></p>
</div><!-- /.bubble -->
</div><!-- /.flex -->
</section><!-- /#testimonials -->
<section id="best-buddies">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<hr class="horz-rule alt3">
<a class="button-w-icon alt2 icon-beercan">Our best Drinking Buddies</a>
<ul class="logos">
<li>
<img src="https://placehold.jp/3d4070/42598f/148x68.png" alt="logo.title"/>
</li>
<li>
<img src="https://placehold.jp/3d4070/42598f/148x68.png" alt="logo.title"/>
</li>
<li>
<img src="https://placehold.jp/3d4070/42598f/148x68.png" alt="logo.title"/>
</li>
<li>
<img src="https://placehold.jp/3d4070/42598f/148x68.png" alt="logo.title"/>
</li>
<li>
<img src="https://placehold.jp/3d4070/42598f/148x68.png" alt="logo.title"/>
</li>
</ul><!-- /.logos -->
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<h1 class="beta center">Some Partners Make it all worth while</h1>
<h2 class="subfont delta center">Robin Richards &middot; President, Happy Lager</h2>
</div>
</div><!-- /.flex -->
</section><!-- /#best-buddies -->
{% endblock %}
@@ -19,9 +19,71 @@

{# main ブロック #}
{% block main %}
<ul>
{% for entry in craft.entries.section('services').all() %}
<li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
{% endfor %}
</ul>
<header class="alt2">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex12">
<h1 class="alpha center reverse">How It’s Made</h1>
</div>
</div><!-- /.flex -->
</header><!-- /.alt2 -->
<section class="alt">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex8 g3-offset2">
<h1 class="delta center subfont">From conception to perfection, we Craft each one of our digital products by
hand.</h1>
<div class="epsilon center">
<p>Some studios have a secret or complex process on how they create great work. Ours
is not a secret and it's very simple: <strong>Truth.</strong> Here at Happy Lager we believe that every
digital product we make speaks to the integrity of our craft. We want to use great products, <strong>so we
only create great products</strong>.</p>
</div>
</div>
</div><!-- /.flex -->
</section><!-- /.alt -->
<section>
<div class="flex">
<div class="g1-flex4 g2-flex2 g3-flex4">
<a href="../services/detail.html" class="services-entry-wrap">
<img src="https://placehold.jp/3d4070/42598f/280x204.png" alt="news-link-2-image"/>
<h3 class="center">Design</h3>
<p>We're a close-knit team of agile thinkers ready to create.</p>
</a><!-- /.services-entry-wrap-->
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
<a href="../services/detail.html" class="services-entry-wrap">
<img src="https://placehold.jp/3d4070/42598f/280x204.png" alt="development"/>
<h3 class="center">Development</h3>
<p>Our development is strong, tight and clean.</p>
</a><!-- /.services-entry-wrap-->
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
<a href="../services/detail.html" class="services-entry-wrap">
<img src="https://placehold.jp/3d4070/42598f/280x204.png" alt="strategy"/>
<h3 class="center">Strategy</h3>
<p>We love it when a plan comes together.</p>
</a><!-- /.services-entry-wrap-->
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
<a href="../services/detail.html" class="services-entry-wrap">
<img src="https://placehold.jp/3d4070/42598f/280x204.png" alt="app-development"/>
<h3 class="center">App Development</h3>
<p>Our apps are as good as our taste buds.</p>
</a><!-- /.services-entry-wrap-->
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
<a href="../services/detail.html" class="services-entry-wrap">
<img src="https://placehold.jp/3d4070/42598f/280x204.png" alt="seo"/>
<h3 class="center">SEO</h3>
<p>We optimize everything we do so your audience can find you.</p>
</a><!-- /.services-entry-wrap-->
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
<a href="../services/detail.html" class="services-entry-wrap">
<img src="https://placehold.jp/3d4070/42598f/280x204.png" alt="email-marketing"/>
<h3 class="center">Email Marketing</h3>
<p>Stay connected in an ever changing world.</p>
</a><!-- /.services-entry-wrap-->
</div>
</div><!-- /.flex -->
</section><!-- /section -->
{% endblock %}
@@ -19,9 +19,67 @@

{# main ブロック #}
{% block main %}
<ul>
{% for entry in craft.entries.section('work').all() %}
<li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
{% endfor %}
</ul>
<header class="alt2">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex12">
<h1 class="alpha center reverse">What’s On Tap</h1>
</div>
</div><!-- /.flex -->
</header><!-- /.alt2 -->
<section class="alt">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex8 g3-offset2">
<h1 class="delta center subfont">Every digital product has a story to tell. It’s our job to find it and tell it
well.</h1>
<div class="epsilon center"><p>While we were not meaning to rhyme, this statement holds true. The end goal is to
connect with humans, and we use the basic principles of story to do just that. Browse our work, enjoy the
visuals and discover what it takes to create something great.</p></div>
</div>
</div><!-- /.flex -->
</section><!-- /.alt -->
<article class="work-entry work-entry-feature">
<img src="https://placehold.jp/3d4070/42598f/2000x590.png" alt="sportsrus-bigfeature" width="2000">
<div class="summary-wrap">
<a href="../work/detail.html"><h2 class="center reverse beta">Taking Sports to the Air</h2>
</a>
<h3 class="delta center subfont reverse"><a href="../work/detail.html">Sports R’ Us Sales
needed a major Energy Boost.</a></h3>
<div class="block text">
<p>
New e-commerce experience for Sports R' Us
</p>
</div>
<p class="center"><a href="../work/detail.html" class="more-link">Full Story</a></p>
</div><!-- /.summary-wrap -->
</article><!-- /.work-entry.work-entry-feature -->
<div class="flex">
<article class="work-entry">
<figure>
<a href="../work/detail.html">
<img src="https://placehold.jp/3d4070/42598f/616x204.png" alt="diva-bigimage" width="616" height="204">
</a>
</figure>
<div class="summary-wrap">
<h3><a href="../work/detail.html">Diva!</a></h3>
<p>
In July, we released Diva!, our celebrity music app.
</p>
<p><a href="../work/detail.html" class="more-link">Read More</a></p>
</div><!-- /.summary-wrap -->
</article><!-- /.work-entry -->
<article class="work-entry">
<figure>
<a href="../work/detail.html">
<img src="https://placehold.jp/3d4070/42598f/616x204.png" alt="ontrack-bigimage" width="616" height="204">
</a>
</figure>
<div class="summary-wrap">
<h3><a href="../work/detail.html">On Track</a></h3>
<p>
Our desktop software for the busy forex trader.
</p>
<p><a href="../work/detail.html" class="more-link">Read More</a></p>
</div><!-- /.summary-wrap -->
</article><!-- /.work-entry -->
</div><!-- /.flex -->
{% endblock %}

0 comments on commit 2a9b5b6

Please sign in to comment.