温泉旅館のコーポレートサイト （XD/コーディング）
OVERVIEW
XDデザインからの複数ページのコーディング練習のために制作した架空のコーポレートサイトです。BEMを使ってCSS設計にこだわりコーディングしました。
※BASIC認証（ユーザー：life-gear パスワード：life-gear510）
CONTENTS
-スクリーンショット画像
-制作概要
-使用スキル
-作品へのこだわり
-スクリーンショット画像
※トップページのみ掲載。下層ページご覧の場合は実際のサイトをご覧ください。
※BASIC認証（ユーザー：life-gear パスワード：life-gear510）
-制作概要
- 教材：【中級Ex】 XDデザインからのコーディング実践演習【HTML,CSS,JS実案件レベル】https://note.com/samuraibrass/m/mad296098d928
- 制作範囲：コーディング（レスポンシブ）、サーバードメイン取得、サーバーアップロード
- 制作期間：7日（40時間）
- トップページと下層ページ含め4ページ構成
-使用スキル
HTML / CSS / Sass / JavaScript / jQuery / Adobe XD
-作品へのこだわり
- ピクセルパーフェクト※一部合理的な理由を添えてデザイン変更あり
- クロスブラウザ対応（Chrome、Safari、FireFox、Edge）
- ローディングアニメーション実装
- CSSアニメーションでの画像切替（ファーストビュー）
- スクロールすると切り替わるヘッダー（jQueryで実装）
- スクロールすると表示されるコンテンツや豊富なアニメーション（wow.jsを利用して実装）
- ファーストビュー、フッターメニューの縦書きレイアウト
- トップページのお知らせにおけるタグによる分類
- flatpicker、Googleフォームとの連携による予約、お問い合わせシステム
※BASIC認証（ユーザー：life-gear パスワード：life-gear510）