架空カフェのトップページ作成(レシポンシブ)
OVERVIEW
sassを使用したコーディングとjQueryでより動きをつけたサイトの作成ができるようになることを目的に作成しました。
使用言語&ツール:html / css (sass) / jQuery / Photoshop
実装機能: スティッキーヘッダー / スライダー / 画像をフェードイン / hover時に画像を拡大
作業時間:デザインとコーディング合わせて40時間程
<苦労した箇所>
トップ画面のツートンカラーのフォントをレシポンシブ化させるのが難しく、検索して調べながら実装しました。cssで実装できることがどんどん増えていっているので、新しい技術も使えるように日々学んでいきます。
MENU画像をhover時にエフェクトをかけて拡大する箇所で、構造が画像→ エフェクト用コンテンツ → button と多層になっていて思い描いた通りに実装するのに時間を要しましたが、方法を調べて実装することができました。今後、複雑化していくコーディングにも対応していけるようにスキルアップしていきます。