下記画像のようなレイアウトを完成してください。
素材ダウンロード
使用フォント
WEBアイコン
詳細
- ロゴパーツのサイズは画像、ロゴタイプも含めwidth 200px height 80px、タイプはgoogleフォントを利用。
- ロゴ画像サイズはwidth 100px height auto。
- ヘッダーとメインイメージ、フッターの横幅は左右100%、News・Shop部分は左右最大768px。
- ヘッダーナビゲーションの横幅は左右が最大1000px。
- メイン(メロンパン)画像はmax-widthが768px。
- ナビゲーションは現在のページを表現するために、クラスcurrentを作成し、ホームへ適用。currentにafterの疑似クラスを用意しposition:absoluteで罫線を表示されるようにする。
SPデザイン
以下は、SPデザインのサンプルです。768px以下で下記デザインになるようにしてください。
768px以下詳細
- ロゴパーツのサイズ(画像、ロゴタイプの枠)をheight 50pxに変更。
- ロゴ画像サイズはwidth 80pxに変更。
- メイン(メロンパン)画像をwidth 80%に変更。