【自主制作】プロモーション用LP新規制作（コーディングのみ）

●制作期間：2日間

●制作内容：実案件をモデルにしたコーディング教材（※以下、仮想案件と呼びます）のAdobe XDデザインカンプを使用し、０から仕様書通りにフルスクラッチでコーディングを行いました。レスポンシブにも対応しております。

●使用言語：HTML、CSS、JQuery

●使用ツール：VSCode、Adobe XD、Photoshop

●制作物（実装したページのスクリーンショットです。）

●サイトURL：WEBサイトへ

●制作ポイント

①loading
ページを読み込むときにロゴをフェードで表示。

②メインビジュアル
メインビジュアルは3枚の画像がフェードで自動で切り替わるようにコーディング。

③蝶のアイコンにアニメ付け
メインビジュアルの周りとタイトル上の蝶々とミツバチのイラストは、少しだけ左右に揺れるようなローテーションのアニメーションの動きを付けました。

④「いろいろな食べ方」セクションのレスポンシブ対応
スマホの場合は自動再生ナシのドットでスライダーできるようにコーディングしました。両サイドが少し見切れるようにして、ユーザーがスライダーで動く部分であることをアピールしました。