商品ラインナップ

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

NEW

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

UP

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

商品ラインナップ

<!--▼▼▼▼▼ここから「商品ラインナップ」-->
<section>

<h2 class="c">商品ラインナップ</h2>

<div class="list-grid">

<div class="list">
<figure><a href="#"><img src="images/1.jpg" alt=""></a></figure>
<div class="text">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>
<span class="icon-bg1">NEW</span>
</div>

<div class="list">
<figure><a href="#"><img src="images/2.jpg" alt=""></a></figure>
<div class="text">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>
<span class="icon-bg2">UP</span>
</div>

<div class="list">
<figure><a href="#"><img src="images/3.jpg" alt=""></a></figure>
<div class="text">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

・
・
・

</div>
<!--/.list-grid-->

</section>
<!--▲▲▲▲▲ここまで「商品ラインナップ」-->

主なスタイルは

cssフォルダのstyle.cssから「list-grid」でテキスト検索してみて下さい。詳しい解説もあります。

800px未満で2列になります

style.cssで変更もできます。