Production Achievements
制作実績
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 {
のブロックになります。画像を入れ替える場合、横長だと動かない場合があるので実際に見ながら画像を準備してみて下さい。
単純に横向きテキストを入れたい場合は、以下の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」の行です。