WEBデザイナーの@shoco_designさんによるコーディング練習用デザインです。
Figmaで作成されたカンプをもとに架空の化粧品サイトをコーディングしました。

各コンテンツが可視領域に入るとフェードインで表示されるよう追加実装しています。
また、ページを読み込む際にローディングアニメーションを導入しています。

パーソナル診断のポップアップコンテンツはPCとスマートフォンでデザインを切り替えています。

スマートフォン版では画面下部にポップアップが表示される仕様の為、
フッターの手前でポップアップが消えるようにしてフッターの内容を見やすくしています。

タブレット、スマートフォン共にレスポンシブに対応しています。