XDカンプからのコーディング(html,css,js)

OVERVIEW

架空サイト1ページをXDデザインデータをもとにHTML, Sass, jQueryでコーディングしました。

YEAR 2021

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


サイトURL:https://asano-pf-05.xyz/

ユーザーネーム:admin

パスワード:admin^br8Rwa$4Jb#8a0w55$x

制作概要


制作時期:2021年11月

作業内容:静的コーディング

ページ数:1ページ

使用ツール:VScode、Gulp、XD

備考


  • swiper(プラグイン)を使用しスライダー機能を実装。
  • wow.js(プラグイン)を使用しスクロール連動のアニメーションを実装。
  • jQueryでハンバーガーメニュー、スムーススクロール、アコーディオン、トップへ戻るボタンを実装。

こだわった点


  • SassでCSS設計を意識しBEMを使って修正・管理し易いコーディング。
  • ボタンのクリック範囲などのユーザビリティ。
  • font-sizeの単位はremで統一し、レスポンシブ対応。


WEBSITE