➀XDデザインカンプからのコーディング

OVERVIEW

XDデザインデータをもとにHTML, Sass, jQuery(JavaScript少々)でコーディングしました。

YEAR 2021

ベーシック認証をかけておりますので、お手数ですが、以下の情報からアクセスくださいませ。

ユーザーネーム:portfolio

パスワード:view


制作期間:12日(1日8時間で計算)


こだわった点

  • Sassを使ってコーディング。(共通パーツやブレイクポイントは@mixinで管理)
  • font-sizeの単位はremで統一し、レスポンシブ対応。
  • Facebook, Twitterに対してもmetaタグの設定
  • ファビコンの設定
  • ヘッダーの文字はカーソルを当てると、アンダーバーが真ん中から左右に広がるアニメーションを設定
  • ボタンにカーソルを当てると、色のグラデーションができるようにした
  • jQueryでアコーディオンメニュー、ハンバーガーメニュー、スムーススクロールを実装。
  • AOS.js, swiperのプラグインを使ってアニメーションを実装。
  • お問い合わせフォームでは全項目を入力しないと送信できない仕組み。
  • お問い合わせフォームをGoogleフォームと紐づけて、入力内容を管理者に送信、かつ回答者には自動で確認メールが送信される仕組み。


WEBSITE