【練習】レイアウトLesson3

下記画像のようなレイアウトを完成してください。

素材ダウンロード

ダウンロード圧縮ファイル

使用フォント

• Yomogi

WEBアイコン

• shopping-cart（Font Awesome）

詳細

• ロゴパーツのサイズは画像、ロゴタイプも含め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%に変更。