WEBデザイナーの@shoco_designさんによるコーディング練習用デザインです。 Figmaで作成されたカンプをもとに 架空の化粧品サイトをコーディングしました。 各コンテンツが可視領域に入るとフェードインで表示されるよう追加実装しています。また、ページを読み込む際にローディングアニメーションを導入しています。 パーソナル診断のポップアップコンテンツはPCとスマートフォンでデザインを切り替えています。 スマートフォン版では画面下部にポップアップが表示される仕様の為、フッターの手前でポップアップが消えるようにしてフッターの内容を見やすくしています。 タブレット、スマートフォン共にレスポンシブに対応しています。 サイトURL： https://demo-02.muraricurari.site/ ユーザー名：demo02 パスワード：mura 使用言語：HTML／CSS／Sass／jQuery 作成期間：3日