トップページの作成

いよいよ各ページの作成です。まずはトップページから作ります。

KV

KVは背景画像の上にキャッチコピーとCTAを重ねます。CTAはページ内のラインナップへスクロールします。

<div class="top-kv">
    <div class="top-kv-inner">
        <div class="l-container">
            <p class="top-kv-copy-text"><span>傷んだ髪に</span><span>オイルの力で</span><span>潤いを</span></p>
            <div class="top-kv-button">
                <a href="#lineup" class="c-button c-button--text-english c-button--size-large">view item</a>
            </div>
        </div>
    </div>
</div>

特徴セクション

特徴は画像＋見出し＋本文のカードを並べます。交互に画像位置を入れ替えると、単調になりにくくなります。

1件分を先に完成させてから増やします。

ラインナップ

商品一覧は、先ほど作った c-products c-products--col2 を使います。ベースのグリッドは .c-products 側にあり、--col2 は列数の上書きです。

ホバー時は any-hover: hover を付けて、タッチデバイスでホバー状態が残り続ける問題を避けます。

Instagram導線

ページ下部にInstagramへの導線を置きます。投稿画像のグリッドとボタンを組み合わせるシンプルな構成です。

セクションの間に画像だけのセパレーター（top-img-separate）を挟むと、リズムが出ます。