サービス紹介Service

年齢別クラス運営Age-based Classes

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。

食事・おやつの提供Meals & Snacks

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。

年間行事・イベントSeasonal Events

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。

サービス紹介

<!--▼▼▼▼▼ここから「サービス紹介」-->
<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.png" alt=""></figure>
<h4>年齢別クラス運営<span>Age-based Classes</span></h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
</div>

<div class="list up">
<figure><img src="images/service-2.png" alt=""></figure>
<h4>食事・おやつの提供<span>Meals &amp; Snacks</span></h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
</div>

<div class="list up">
<figure><img src="images/service-3.png" alt=""></figure>
<h4>年間行事・イベント<span>Seasonal Events</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を読んで下さい。