Permalink
Browse files

modify: 「会社案内」「サービス」「ワークス」詳細テンプレート:コーディングデータから、メインコンテンツ部分をコピー

  • Loading branch information...
dreamseeker committed Dec 23, 2018
1 parent 8bd0f22 commit d7fffcee46a4ce1025963c57ef3caa6cef2817f5
Showing with 381 additions and 0 deletions.
  1. +132 −0 templates/about/index.html
  2. +134 −0 templates/services/_entry.html
  3. +115 −0 templates/work/_entry.html
@@ -19,4 +19,136 @@

{# main ブロック #}
{% block main %}
<header class="alt">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex12">
<h1 class="alpha center reverse">The Brewery</h1>
</div>
</div><!-- /.flex -->
</header><!-- /.alt -->
<section class="info-hero alt" style="background-image: url('https://placehold.jp/3d4070/42598f/1280x274.png')">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex8 g3-offset2">
<h1 class="delta reverse center subfont">We set out with a simple goal: create the design and products that we
would like to see.</h1>
<div class="epsilon center reverse">
<p>We are a group of highly effective, passionate people ready to take your
product to the next level. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
eveniet ut et voluptates repudiandae sint et molestiae non recusandae taque earum hic tenetur a sapiente
delectus ut aut reiciendis.</p>
</div>
</div>
</div><!-- /.flex -->
</section><!-- /.info-hero -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<hr class="horz-rule">
<h1 class="beta center">How We Think</h1>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<h2 class="delta center subfont caps">The philosophy of Happy Lager is One Third Working Hard and Two Thirds Happy
Accidents.</h2>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<hr class="horz-rule">
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<div class="g1-flex4 g2-flex6 g3-flex6 flex-nested">
<p>Serendipity is a core part of how we work. Et iusto odio dignissimos ducimus qui blanditii raesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis.</p>
</div>
<div class="g1-flex4 g2-flex6 g3-flex6 flex-nested push">
<p>Deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit. Luptatum deleniti
atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
sunt in.</p>
</div>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<hr class="horz-rule">
<h1 class="beta center">Our Story</h1>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<h2 class="delta center subfont caps">It all begins in a living room with a six pack and A Clamshell iBook.</h2>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<hr class="horz-rule">
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<div class="g1-flex4 g2-flex6 g3-flex6 flex-nested">
<p><img src="https://placehold.jp/3d4070/42598f/360x240.png" alt="macbook-table"></p>
</div>
<div class="g1-flex4 g2-flex6 g3-flex6 flex-nested push">
<p>Small beginnings is the starting point of every hero's story. At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Deserunt mollitia animi, id est laborum et dolorum fuga. Et
harum quidem rerum facilis.</p>
</div>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<hr class="horz-rule">
<h1 class="beta center">Our People</h1>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex2 g3-flex4">
<img src="https://placehold.jp/3d4070/42598f/280x240.png" alt="Liz Murphy">
<p><strong>Liz Murphy</strong><br>President and Co-Founder</p>
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
<img src="https://placehold.jp/3d4070/42598f/280x240.png" alt="Crystal Stevenson">
<p><strong>Crystal Stevenson</strong><br>CEO and Co-Founder</p>
</div>
<div class="g1-flex4 g2-flex2 g3-flex4">
<img src="https://placehold.jp/3d4070/42598f/280x240.png" alt="Travis Morton">
<p><strong>Travis Morton</strong><br>Creative Director</p>
</div>
</div><!-- /.flex -->
<section class="alt2">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex5">
<h1 class="gamma subfont alt">Happy Lager Chicago</h1>
<p class="delta subfont caps address">2701 West Thomas St<br/>
Chicago, Il 60622</p>
<dl class="inline">
<dt>Main Office</dt>
<dd>312.900.2356</dd>
<dt>Sales</dt>
<dd>312.985.4500</dd>
<dt>Fax</dt>
<dd>312.229.1122</dd>
</dl><!-- /.inline -->
<ul class="horz-list">
<li>
<a href="mailto:chicago@happylager.dev" class="subfont caps email-us-btn">Email Us</a>
</li>
<li>
<a href="https://www.google.com/maps/search/2701%20West%20Thomas%20St%2C%20Chicago%2C%20Il%2060622" target="_blank" class="subfont caps map-btn">Map</a>
</li>
</ul><!-- /.horz-list -->
</div>
<div class="g1-flex4 g2-flex6 g3-flex7">
<img src="https://placehold.jp/3d4070/42598f/520x320.png" alt="Happy Lager Chicago"/>
</div>
</div><!-- /.flex -->
</section><!-- /.alt2 -->
{% endblock %}
@@ -19,4 +19,138 @@

{# main ブロック #}
{% block main %}
<nav class="subnav">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex12">
<ul>
<li>
<a href="../services/detail.html" class="subfont caps current">
Design
</a>
</li>
<li>
<a href="../services/detail.html" class="subfont caps">
Development
</a>
</li>
<li>
<a href="../services/detail.html" class="subfont caps">
Strategy
</a>
</li>
<li>
<a href="../services/detail.html" class="subfont caps">
App Development
</a>
</li>
<li>
<a href="../services/detail.html" class="subfont caps">
SEO
</a>
</li>
<li>
<a href="../services/detail.html" class="subfont caps">
Email Marketing
</a>
</li>
</ul>
</div>
</div><!-- /.flex -->
</nav><!-- /.subnav -->
<section>
<article>
<header class="alt2">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex12">
<h1 class="alpha center reverse">Design</h1>
</div>
</div><!-- /.flex -->
</header><!-- /.alt2 -->
<div class="flex">
<blockquote class="blockquote">
<div class="flex">
<p>Good Design is Invisible</p>
<footer>– <cite>A smart designer</cite></footer>
</div>
</blockquote>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<h2 class="delta center subfont caps">Design based design</h2>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<p>
We've been developing them libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
minus id quod maxime placeat facer possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum quod maxime placeat facernecessitatibus.
</p>
</div>
</div><!-- /.flex -->
</article><!-- /article -->
</section><!-- /section -->
<section class="service-points">
<div class="flex">
<div class="service-point">
<div class="g1-flex4 g2-flex3 g3-flex4">
<h4>Discover your audience</h4>
<p>
Your audience is human, but their device is not. We like to cross that gap by engaging your audience in
casual conversation as one would at their local pub.
</p>
</div>
<div class="g1-flex4 g2-flex3 g3-flex8">
<img class="" src="https://placehold.jp/3d4070/42598f/600x200.png" alt="discover">
</div>
</div><!-- /.service-point -->
</div><!-- /.flex -->
<div class="flex">
<div class="service-point">
<div class="g1-flex4 g2-flex3 g3-flex4">
<h4>Explore all possibilities</h4>
<p>
Your product is a journey; a story. At Happy Lager we follow that story to create holistic experience giving
you the best possible product.
</p>
</div>
<div class="g1-flex4 g2-flex3 g3-flex8">
<img class="" src="https://placehold.jp/3d4070/42598f/600x200.png" alt="explore">
</div>
</div><!-- /.service-point -->
</div><!-- /.flex -->
<div class="flex">
<div class="service-point">
<div class="g1-flex4 g2-flex3 g3-flex4">
<h4>Create Genius</h4>
<p>
You are the inspiration and we are the perspiration. Together we can create genius; and throw back a few in
the process.
</p>
</div>
<div class="g1-flex4 g2-flex3 g3-flex8">
<img class="" src="https://placehold.jp/3d4070/42598f/600x200.png" alt="create-genius">
</div>
</div><!-- /.service-point -->
</div><!-- /.flex -->
</section><!-- /.service-points -->
<section class="services-work-entry">
<div style="background-image: url('https://placehold.jp/3d4070/42598f/1280x328.png')">
<div class="flex">
<div class="g1-flex4 g2-flex3 g3-flex6">
<a href="../work/detail.html">
<img src="https://placehold.jp/3d4070/42598f/440x328.png" alt="diva-bigimage">
</a>
</div>
<div class="g1-flex4 g2-flex3 g3-flex6">
<div class="summary-wrap">
<h2 class="callout-border"><a href="../work/detail.html">Diva!</a></h2>
<h3><a href="../work/detail.html">A Star Is Born</a></h3>
<p>Combining Music with Celebrity gossip has become the winning combination making DIVA! the most downloaded
app of 2013</p>
<p><a href="../work/detail.html" class="view-more hero-cta">View More</a></p>
</div>
</div>
</div><!-- /.flex -->
</section><!-- /.services-work-entry -->
{% endblock %}
@@ -19,5 +19,120 @@

{# main ブロック #}
{% block main %}
<article>
<header class="alt2" style="background:#184572;">
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex12">
<h1 class="alpha center reverse">Sports R&#039; Us</h1>
</div>
</div><!-- /.flex -->
</header><!-- /.alt2 -->
<section>
<img class="contain-media" src="https://placehold.jp/3d4070/42598f/1440x360.png" alt="sportsrus-bigfeature">
</section><!-- /seciton -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<hr class="horz-rule">
<h2 class="beta center">Taking Sports to the Air</h2>
<h3 class="delta center subfont">Sports R’ Us Sales needed a major Energy Boost.</h3>
<hr class="horz-rule">
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<p>
Vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum. deleniti atque
corrupti quos dolores. Et harum quidem rerm facilis est et expedita distinctio. Nam libero tempore, cum soluta
nobis est eligendi optio cumque nihil impedit quo minus id quod maxime. Vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium voluptatum. deleniti atque corrupti quos dolores. Et harum
quidem rerm facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque
nihil impedit quo minus id quod maxime.
</p>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<div class="g1-flex4 g2-flex6 g3-flex6 flex-nested breakout push">
<p><img src="https://placehold.jp/3d4070/42598f/460x460.png" alt="skis"></p>
</div>
<h4>Expanding while keeping excellence the focus</h4>
<p>
Vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum. deleniti atque
corrupti quos dolores. Et harum quidem rerm facilis est et expedita distinctio. Nam libero tempore, cum soluta
nobis est eligendi optio cumque nihil impedit quo minus id quod maxime. Vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium voluptatum. deleniti atque corrupti quos dolores. Et harum
quidem rerm facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque
nihil impedit quo minus id quod maxime.
</p>
</div>
</div><!-- /.flex -->
<div class="flex">
<blockquote class="blockquote">
<div class="flex">
<p>Our sales needed a major overhaul. Happy Lager took us into the 21st Century</p>
<footer>– <cite>Anthony Umlaut, Director of Marketing</cite></footer>
</div><!-- /.flex -->
</blockquote>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<h2 class="delta center subfont caps">Things We Learned</h2>
</div>
</div><!-- /.flex -->
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<p>
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur
aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
</p>
<p>
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur
aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
</p>
<p>
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur
aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
</p>
</div>
</div><!-- /.flex -->
</article><!-- /article -->
<section>
<div class="flex">
<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">
<p class="center"><img src="/assets/images/social-sprite.png"></p>
<footer>
<hr class="horz-rule">
<p class="services center">
<a href="../services/detail.html">
<img src="/assets/images/service-icons/seo.svg" alt="seo">
<span class="services-title">SEO</span>
</a>
<a href="../services/detail.html">
<img src="/assets/images/service-icons/email-marketing.svg" alt="email-marketing">
<span class="services-title">Email Marketing</span>
</a>
<a href="../services/detail.html">
<img src="/assets/images/service-icons/strategy.svg" alt="strategy">
<span class="services-title">Strategy</span>
</a>
</p>
<hr class="horz-rule">
</footer>
<a class="btn" href="../work/">Back to what's on tap</a>
<nav class="prev-next-entry">
<a href="../work/detail.html" class="pag-prev-link">Prev</a>
</nav><!-- /.prev-next-entry -->
</div>
</div><!-- /.flex -->
</section><!-- /section -->
{% endblock %}

0 comments on commit d7fffce

Please sign in to comment.