「Contact」と「Online Shop」ブロックについて

<!--▼▼▼▼▼ここから「Contact」と「Online Shop」-->
<section class="padding0">

<div class="list-c2">

<a href="contact.html">
<div class="list image1">
<div class="text">
<h4><span class="sub-text">お問い合わせ</span><span class="main-text">Contact</span></h4>
<p>(テキスト省略)</p>
</div>
</div>
</a>

<a href="#">
<div class="list image2">
<div class="text">
<h4><span class="sub-text">オンラインショップ</span><span class="main-text">Online Shop</span></h4>
<p>(テキスト省略)</p>
</div>
</div>
</a>

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

</section>
<!--▲▲▲▲▲ここまで「Contact」と「Online Shop」-->

主なスタイルは

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

<section class="padding0">

そのままだと左右に余白が入ってしまうので、消す為のスタイルです。

<div class="list-c2">

必ずこの中に2つのブロックをいれます。

<div class="list image1">

listは各ボックスごとに必ず入れます。imageの部分は背景画像用です。1つ目はimage1、2つ目はimage2と入っておりそれぞれ背景画像をstyle.cssで指示しています。

<div class="text">

テキストはこのブロック内に全て入れます。これによって天地左右の中央に配置されます。

<a href=

ボックスにリンクを貼りたい場合に入れて下さい。なくても構いませんが、ない場合は、2つとも外して下さい。片方だけつけておくとバランスが崩れます。
以下(↓)がリンクなしで、代わりにボタンを配置したサンプルです。

お問い合わせContact

が日本として、削除ユースで引用は各もて部分作ようし引用

リンクボタン(btn1)

オンラインショップOnline Shop

が日本として、削除ユースで引用は各もて部分作ようし引用
が日本として、削除ユースで引用は各もて部分作ようし引用
が日本として、削除ユースで引用は各もて部分作ようし引用

リンクボタン(btn2)