Dog's Salonのホームページのコーディング

OVERVIEW

Figmaで作られたデザインカンプよりコーディング。 hover時の動きなど、コーダーにて設定しております。

YEAR 2023

URL : https://mota-file.conohawing.com/dogsalon/

ユーザー名 : mota

パスワード : web2022

制作期間目安 : 7日間

【仕様】

  • headerスクロール後上部固定(スマホ時は常時上部)
  • formのバリデーション設定、Googleフォームへ連動
  • ページTOPボタン、スクロール後表示し、footer手前で停止
  • レスポンシブ化(ブレイクポイントは834px)
  • スマホ時ドロワーメニュー表示

【気をつけたこと】

  • スマホ時とテキスト、画像が変わる部分もあり、表示崩れに注意
  • Git hubでソース管理
  • FLOCSSでCSS設計意識し、BEMでコーディング
  • 画像圧縮し、サイト速度を意識
  • 左右非対称な部分も多く、画面幅による表示崩れのないように意識