➀XDデザインカンプからのコーディング
OVERVIEW
XDデザインデータをもとにHTML, Sass, jQuery(JavaScript少々)でコーディングしました。
ベーシック認証をかけておりますので、お手数ですが、以下の情報からアクセスくださいませ。
ユーザーネーム:portfolio
パスワード:view
制作期間:12日(1日8時間で計算)
こだわった点
- Sassを使ってコーディング。(共通パーツやブレイクポイントは@mixinで管理)
- font-sizeの単位はremで統一し、レスポンシブ対応。
- Facebook, Twitterに対してもmetaタグの設定
- ファビコンの設定
- ヘッダーの文字はカーソルを当てると、アンダーバーが真ん中から左右に広がるアニメーションを設定
- ボタンにカーソルを当てると、色のグラデーションができるようにした
- jQueryでアコーディオンメニュー、ハンバーガーメニュー、スムーススクロールを実装。
- AOS.js, swiperのプラグインを使ってアニメーションを実装。
- お問い合わせフォームでは全項目を入力しないと送信できない仕組み。
- お問い合わせフォームをGoogleフォームと紐づけて、入力内容を管理者に送信、かつ回答者には自動で確認メールが送信される仕組み。