Cresta Design(PENGIN BLOG様の無料配布デザインカンプからのコーディング)

OVERVIEW

PENGIN BLOG様の架空のコーポレートサイトの無料配布デザインカンプをお借りしてコーディングをしたものです。(※一部アレンジを加えております。)

Cresta Designのページへ


デザインカンプはPENGIN BLOG様(https://pengi-n.co.jp/blog/category/study-support/coding-practice/)からお借りしました。

※2024/1/9 追記

PENGIN BLOG様のご意向により、Basic認証をかけました。

【サイトスクリーンショット】

(※サイト内の画像は、配布されていたデザインカンプから書き出した画像になります。)

【製作期間】

約4日

【設計方法】

FLOCSS、BEMを用いてコーディングしました。

【工夫した部分】

・TOPページのファーストビューの高さを過ぎたらという条件と、CONTACTページのファーストビューの高さを過ぎたらという2つの条件をJavaScriptで制御する部分を工夫しました。

・どの画面幅でもレイアウトがすべて最適化されるようにリキッドレイアウトを意識してコーディングしました。

WEBSITE