サービス紹介Service

ドリンクメニュー各種Drink Menu
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。

季節限定スイーツSeasonal Sweets
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。

テイクアウトサービスTakeout Available
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。
<!--▼▼▼▼▼ここから「サービス紹介」--> <section id="service" class="bg1"> <h2 class="c"><span class="fade-in-text">サービス紹介</span><span class="small">Service</span></h2> <div class="list-grid7"> <div class="list up"> <figure><img src="images/service-1.jpg" alt=""></figure> <h4>ドリンクメニュー各種<span>Drink Menu</span></h4> <p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p> </div> <div class="list up"> <figure><img src="images/service-2.jpg" alt=""></figure> <h4>季節限定スイーツ<span>Seasonal Sweets</span></h4> <p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p> </div> <div class="list up"> <figure><img src="images/service-3.jpg" alt=""></figure> <h4>テイクアウトサービス<span>Takeout Available</span></h4> <p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p> </div> </div> <!--/.list-grid7--> </section> <!--▲▲▲▲▲ここまで「サービス紹介」-->
cssフォルダのstyle.cssから「.list-grid7」でテキスト検索してみて下さい。詳しい解説もあります。
<section id="service" class="bg1">
のbg1が指定箇所です。style.cssから「.bg1」を検索すれば色の変更もできます。
サンプルテンプレートでは、カスタムプロパティを指定している為、
background: var(--secondary-color);
などのような指定方法になっていますが、通常のスタイルのように、
background: #121a5a;
などにしてももちろんOKです。
汎用的に使えるテキストアニメーションです。
詳細はmanual4_kodawari.htmlを読んで下さい。
汎用的に使えるパララックスです。
詳細はmanual4_kodawari.htmlを読んで下さい。