Production Achievements

株式会社〇〇様

株式会社〇〇様

株式会社〇〇様

株式会社〇〇様

株式会社〇〇様

株式会社〇〇様

もっと見る

「制作実績」ブロックについて

<!--▼▼▼▼▼ここから「制作実績」-->
<section id="products">

<h2 class="bg-slideup">
<div class="image">
<div class="en-text">Production Achievements</div>
<div class="jp-text">制作実績</div>
</div>
</h2>

<div class="list-grid-simple">

<div class="list">
<figure><img src="../images/thumb1.jpg" alt=""></figure>
<h4 class="c">株式会社〇〇様</h4>
</div>

<div class="list">
<figure><img src="../images/thumb2.jpg" alt=""></figure>
<h4 class="c">株式会社〇〇様</h4>
</div>

・・・

</div>
<!--/.list-grid1-->

<p class="btn1"><a href="#">もっと見る</a></p>

</section>
<!--▲▲▲▲▲ここまで「制作実績」-->

各ボックススタイルは

cssフォルダのstyle.cssから「list-grid-simple」でテキスト検索してみて下さい。詳しい解説もあります。

見出しについて

スクロール量と少しずれて背景画像が移動します。
背景画像は、style.cssの、
#products .bg-slideup .image {
のブロックになります。画像を入れ替える場合、横長だと動かない場合があるので実際に見ながら画像を準備してみて下さい。

Production Achievements

単純に横向きテキストを入れたい場合は、以下のhtmlにすればOKです。

<div id="products">
<h2 class="bg-slideup">
<div class="image">
見出しテキスト
</div>
</h2>
</div>

見出しテキスト

「もっと見る」ボタン

classのつけかたで色々なボタンになります。お好みで。
矢印アイコンはFont Awesomeを使用しています。詳しくはmanual.htmlをお読み下さい。

実際にアイコンを指定している箇所は、style.cssの、
.btn1 a::after {
の中にあるc「content」の行です。

もっと見る

もっと見る

もっと見る

もっと見る