カード型レイアウト ② - それぞれのカードの中身 -

グリッドレイアウトで配置されてボックスに、コンテンツを追加する

ボックスにコンテンツを追加する

ボックスにコンテンツを追加して、1枚 1枚のカードを完成させる

個々のカードには写真と見出し、場所などの細かい情報が含まれる

6項目ある <div class="latest-item">> ~ </div> の中に、各カードの HTML を追加する

どのカードも HTML の構造を同じにすることで、デザインの統一性を保つだけでなく、CSS も共通化できる

テンプレートファイル

home.html
style.css