「オンライン予約」「お電話でのご予約」

<!--▼▼▼▼▼ここから「オンライン予約」「お電話でのご予約」-->
<div class="bg-slideup slideup2">

<section class="btn-box">

<ul class="btn">
<li><a href="#"><i class="fa-solid fa-envelope"></i>オンライン予約</a></li>
<li><a href="#"><i class="fa-solid fa-phone-volume"></i>お電話でのご予約</a></li>
</ul>

</section>

</div>
<!--▲▲▲▲▲ここまで「オンライン予約」「お電話でのご予約」-->

設定は

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

背景画像は

縦長のものを準備して下さい。ボックスの高さにもよりますが、横長だとスクロールしても背景画像が固定されたまま動きません。背景画像はcssでの設定ですが、動きに関してはmain.jsの// 背景画像が少しずつ上に移動するというブロックで設定しています。

このブロックと上の「よく頂く質問」の間のグラデーションは

style.cssの
.slideup2::before {
の中のbackgroundの行で指定しています。
グラデが不要ならこのブロックごと削除すればOKです。

ボタン内のアイコンは

Font Awesomeを使用しています。詳細はmanual.htmlをご覧下さい。