※ contact內容：
index.html：
<!-- Start contact -->
<div class="hero hero-bg-grey">
<div class="container">
<!-- 區段介紹 -->
<div class="section-intro">
<!-- 標題 -->
<h2 class="title">CONTACT</h2>
<!-- 文字說明 -->
<p class="para">
我們提供的服務在這裡有初步的介紹，諸如此類的介紹等等<br>多的文字就可以換行繼續寫</p>
</div>
<div class="row">
<div class="col-1-2">
<div class="contact-info">
<div class="info-item">
<h4 class="title"><span>PHONE $ TEL</span></h4>
<a href="tel:0912345678" class="info">0912-345-678</a>
</div>
<div class="info-item">
<h4 class="title"><span>LOCATION</span></h4>
<a href="#!" class="info">高雄市苓雅區某某路123號</a>
</div>
<div class="info-item">
<h4 class="title"><span>HOURS</span></h4>
<div class="info">
上午 11:00 至下午 6:00、週四公休
</div>
</div>
</div>
</div>
<div class="col-1-2">
<!-- 多一個容器裝地圖 -->
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29376.28631563166!2d120.19355499999999!3d23.022458099999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e7659ed76b0c7%3A0xa2380aab1510d45c!2z6Ie65Y2X5biC6Iqx5ZyS5aSc5biC!5e0!3m2!1szh-TW!2stw!4v1757404466409!5m2!1szh-TW!2stw"
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- End contact -->
style.css：
.contact-info {
padding-top: 40px;
}
.contact-info .info-item {
margin-bottom: 24px;
}
.contact-info .info-item .title {
color: #d5a26f;
line-height: 36px;
margin-bottom: 16px;
}
.contact-info .info-item .title span {
border-bottom: 2px solid #d5a26f;
display: inline-block;
}
.contact-info .info-item .info {
line-height: 32px;
color: #333;
}
.map-container {
width: 100%;
padding-top: 75%;
border: 1px solid #000;
}
.map-container iframe{
position: absolute;
left: 0;
top: 0;
}
成果顯示：
※ footer內容：
index.html：
<!-- Start contact -->
<div class="hero hero-bg-grey">
<div class="container">
<!-- 區段介紹 -->
<div class="section-intro">
<!-- 標題 -->
<h2 class="title">CONTACT</h2>
<!-- 文字說明 -->
<p class="para">
我們提供的服務在這裡有初步的介紹，諸如此類的介紹等等<br>多的文字就可以換行繼續寫</p>
</div>
<div class="row">
<div class="col-1-2">
<div class="contact-info">
<div class="info-item">
<h4 class="title"><span>PHONE $ TEL</span></h4>
<a href="tel:0912345678" class="info">0912-345-678</a>
</div>
<div class="info-item">
<h4 class="title"><span>LOCATION</span></h4>
<a href="#!" class="info">高雄市苓雅區某某路123號</a>
</div>
<div class="info-item">
<h4 class="title"><span>HOURS</span></h4>
<div class="info">
上午 11:00 至下午 6:00、週四公休
</div>
</div>
</div>
</div>
<div class="col-1-2">
<!-- 多一個容器裝地圖 -->
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29376.28631563166!2d120.19355499999999!3d23.022458099999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e7659ed76b0c7%3A0xa2380aab1510d45c!2z6Ie65Y2X5biC6Iqx5ZyS5aSc5biC!5e0!3m2!1szh-TW!2stw!4v1757404466409!5m2!1szh-TW!2stw"
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- End contact -->
<!-- Start footer -->
<footer class="footer">
<div class="hero">
<div class="mask-dark"></div>
<div class="container">
<a href="#!" class="brand"></a>
<!-- 導覽列的元件 -->
<ul class="nav">
<li class="nav-item">
<a href="#!" class="nav-link">關於</a>
</li>
<li class="nav-item">
<a href="#!" class="nav-link">服務</a>
</li>
<li class="nav-item">
<a href="#!" class="nav-link">訂位</a>
</li>
<li class="nav-item">
<a href="#!" class="nav-link">菜單</a>
</li>
<li class="nav-item">
<a href="#!" class="nav-link">聯絡</a>
</li>
</ul>
</div>
</div>
<!-- 著作權 -->
<div class="copyright">
<p>© Copyright 2020 All rights reserved
</p>
</div>
</footer>
<!-- End footer -->
style.css：
.footer {
background-image: url('../images/bg/bg003.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.footer .brand {
display: block;
width: 240px;
height: 240px;
margin: 0 auto;
background-image: url('../images/common/logo-w.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.footer .nav {
display: flex;
justify-content: center;
}
.footer .nav .nav-link {
color: #fefefe;
display: block;
padding: 24px;
line-height: 24px;
transition: all 0.3s;
}
.footer .nav .nav-link:hover {
color: #d5a26f;
}
.footer .copyright {
background-color: rba(0, 0, 0, 0.8);
color: #ccc;
text-align: center;
line-height: 24px;
padding: 16px;
font-size: 14px;
}
成果顯示：
※ 頁面之間轉跳：透過ID連結
index.html：
<!-- 導覽按鈕 -->
<ul class="nav">
<li class="nav-item">
<a href="#about" class="nav-link">關於</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link">服務</a>
</li>
<li class="nav-item">
<a href="#reservation" class="nav-link">訂位</a>
</li>
<li class="nav-item">
<a href="#menu" class="nav-link">菜單</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">聯絡</a>
</li>
</ul>
<div id="about" class="hero hero-bg-white">
<div id="service" class="hero hero-bg-grey">
<div id="reservation" class="hero reservation">
<div id="menu" class="hero">
<div id="contact" class="hero hero-bg-grey">
