Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update index.html #65

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update index.html #65

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 50 additions & 48 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,54 +48,56 @@ <h1 class="title text-center header__title p-5">
</section>
<section class="mt-5">
<h2 class="title text-center">推薦景點</h2>
<div class="row row-cols-1 row-cols-md-4 g-2">
<div class="col">
<div class="card h-100">
<img src="./img/photo-1552733407-5d5c46c3bb3b.jpg" class="card-img-top obj-cover obj-position-bottom"
style="height: 200px;">
<div class="card-body">
<h5 class="card-title">錫亞高</h5>
<p class="card-text">
錫亞高島（Siargao Island），又譯夏爾高島，菲律賓南部一島嶼，位於棉蘭老島東北的菲律賓海中，面積438平方公里，人口2萬餘，屬北蘇里高省。
</p>
<p class="card-text">
錫亞高島擁有漫長的沙灘和珊瑚礁，是世界聞名的衝浪勝地。
</p>
<div class="container">
<div class="row row-cols-1 row-cols-md-4 g-2">
<div class="col">
<div class="card h-100">
<img src="./img/photo-1552733407-5d5c46c3bb3b.jpg" class="card-img-top obj-cover obj-position-bottom"
style="height: 200px;">
<div class="card-body">
<h5 class="card-title">錫亞高</h5>
<p class="card-text">
錫亞高島（Siargao Island），又譯夏爾高島，菲律賓南部一島嶼，位於棉蘭老島東北的菲律賓海中，面積438平方公里，人口2萬餘，屬北蘇里高省。
</p>
<p class="card-text">
錫亞高島擁有漫長的沙灘和珊瑚礁，是世界聞名的衝浪勝地。
</p>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="./img/photo-1523906834658-6e24ef2386f9.jpg" class="card-img-top obj-cover"
style="height: 200px;">
<div class="card-body">
<h5 class="card-title">威尼斯</h5>
<p class="card-text">
Luigi Barzini曾在紐約時報形容它「無疑是最美麗的人造都市」，時代線上雜誌也稱讚威尼斯是歐洲最浪漫的城市之一。
</p>
<div class="col">
<div class="card h-100">
<img src="./img/photo-1523906834658-6e24ef2386f9.jpg" class="card-img-top obj-cover"
style="height: 200px;">
<div class="card-body">
<h5 class="card-title">威尼斯</h5>
<p class="card-text">
Luigi Barzini曾在紐約時報形容它「無疑是最美麗的人造都市」，時代線上雜誌也稱讚威尼斯是歐洲最浪漫的城市之一。
</p>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="./img/a2wgw-k9h4o.jpg" class="card-img-top obj-cover" style="height: 200px;">
<div class="card-body">
<h5 class="card-title">杜拜</h5>
<p class="card-text">
杜拜被認為是穆斯林遊客的最佳旅遊地點。隨著創新大型建築計畫、舉辦運動賽事提高城市關注度，杜拜也成為摩天大樓的指標城市，世界最高大樓哈里發塔也位於杜拜。
</p>
<div class="col">
<div class="card h-100">
<img src="./img/a2wgw-k9h4o.jpg" class="card-img-top obj-cover" style="height: 200px;">
<div class="card-body">
<h5 class="card-title">杜拜</h5>
<p class="card-text">
杜拜被認為是穆斯林遊客的最佳旅遊地點。隨著創新大型建築計畫、舉辦運動賽事提高城市關注度，杜拜也成為摩天大樓的指標城市，世界最高大樓哈里發塔也位於杜拜。
</p>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="./img/photo-1501446529957-6226bd447c46.jpg" class="card-img-top " style="height: 200px;"
>
<div class="card-body">
<h5 class="card-title">奧地利</h5>
<p class="card-text">
這是在一個美好的一天發現下奧地利的所有珠寶的好方法。您將有一個維也納酒店接送，參觀音樂之聲拍攝地點，風景如畫的哈爾施塔特，梅爾克修道院和莫扎特的出生地薩爾茨堡。
</p>
<div class="col">
<div class="card h-100">
<img src="./img/photo-1501446529957-6226bd447c46.jpg" class="card-img-top " style="height: 200px;"
>
<div class="card-body">
<h5 class="card-title">奧地利</h5>
<p class="card-text">
這是在一個美好的一天發現下奧地利的所有珠寶的好方法。您將有一個維也納酒店接送，參觀音樂之聲拍攝地點，風景如畫的哈爾施塔特，梅爾克修道院和莫扎特的出生地薩爾茨堡。
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -154,34 +156,34 @@ <h3 class="fs-1">
</section>
<section class="bg-gray">
<div class="container py-5">
<div class="d-flex">
<div class="d-flex flex-md-nowrap flex-wrap justify-content-center">
<div class="col-md-6">
<img class="img-fluid obj-cover w-100 shadow p-3 mb-5 bg-body rounded" style="height: 400px;"
src="./img/photo-1507667895043-c4de59dda180.jpg" alt="" srcset="">
</div>
<div class="col-md-6 d-flex justify-content-center flex-column align-items-center">
<div class="col-md-6 p-3 mb-5 d-flex justify-content-center flex-column align-items-center">
<h3 class="mb-4">給自己機會放鬆</h3>
<p>生活上的疲勞與工作的壓力是現代人常見的狀況。</p>
<p>不如趁這個機會加入PaPa走讓自己大腦放鬆一下。</p>
</div>
</div>
<div class="d-flex flex-md-row-reverse">
<div class="d-flex flex-md-row-reverse flex-md-nowrap flex-wrap justify-content-center">
<div class="col-md-6">
<img class="img-fluid obj-cover w-100 shadow p-3 mb-5 bg-body rounded" style="height: 400px;"
src="./img/photo-1473625247510-8ceb1760943f.jpg" alt="" srcset="">
</div>
<div class="col-md-6 d-flex justify-content-center flex-column align-items-center">
<div class="col-md-6 p-3 mb-5 d-flex justify-content-center flex-column align-items-center">
<h3 class="mb-4">享受大自然</h3>
<p>親身體驗大自然給予的美妙。</p>
<p>讓自己遠離都市的塵囂。</p>
</div>
</div>
<div class="d-flex">
<div class="d-flex flex-md-nowrap flex-wrap justify-content-center">
<div class="col-md-6 shadow p-3 mb-5 bg-body rounded">
<img class="img-fluid obj-cover w-100" style="height: 400px;"
src="./img/photo-1553697388-94e804e2f0f6.jpg" alt="" srcset="">
</div>
<div class="col-md-6 d-flex justify-content-center flex-column align-items-center">
<div class="col-md-6 p-3 mb-5 d-flex justify-content-center flex-column align-items-center">
<h3 class="mb-4">準備好相機</h3>
<p>拿著相機拍攝各處景點。</p>
<p>紀錄自己美好且遠離都市的每一段時光。</p>
Expand Down