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

Fix index.html X軸、卡片等高、行動裝置排版 #68 #69

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix index.html X軸、卡片等高、行動裝置排版 #68 #69

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ebc266
Fix index.html X軸、卡片等高、行動裝置排版
mick1031 Mar 2, 2022
2909c72
fix 增加 container
mick1031 Mar 14, 2022
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
139 changes: 73 additions & 66 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,89 +22,96 @@ <h1 class="title text-center header__title p-5">
</header>
<main>
<section class="d-flex justify-content-center">
<from class="d-flex g-0 mt-25 w-auto shadow">
<div class="col-md-4">
<div class="form-floating">
<input type="text" class="form-control rounded-0" id="floatingOut" placeholder="出發地">
<label for="floatingOut">出發地</label>
</div>
</div>
<div class="col-md-4">
<div class="form-floating">
<input type="text" class="form-control rounded-0" id="floatingSet" placeholder="目的地">
<label for="floatingSet">目的地</label>
</div>
</div>
<div class="col-md-4">
<div class="input-group form-floating">
<input type="date" id="floatingTime" class="form-control rounded-0">
<label for="floatingTime">出發時間</label>
<button class="btn btn-primary" type="submit">
搜尋旅團
</button>
<from class="mt-25 shadow">
<div class="container-fuild">
<div class="row g-0">
<div class="col-md-4">
<div class="form-floating">
<input type="text" class="form-control rounded-0" id="floatingOut" placeholder="出發地">
<label for="floatingOut">出發地</label>
</div>
</div>
<div class="col-md-4">
<div class="form-floating">
<input type="text" class="form-control rounded-0" id="floatingSet" placeholder="目的地">
<label for="floatingSet">目的地</label>
</div>
</div>
<div class="col-md-4">
<div class="input-group form-floating">
<input type="date" id="floatingTime" class="form-control rounded-0">
<label for="floatingTime">出發時間</label>
<button class="btn btn-primary" type="submit">
搜尋旅團
</button>
</div>
</div>
</div>
</div>
</from>
</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-fuild">
<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"
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>
</div>

</section>
<section class="mt-5 py-5 bg-gray">
<h2 class="text-center pb-5">對了，為什麼要選擇PaPa走？</h2>
<div class="container">
<div class="d-flex justify-content-center">
<div class="row justify-content-md-center">
<div class="col-md-6">
<p class="text-center">
PaPa走是市面上最便宜的旅行社，我們可以提供你最優惠的價錢，但尊絕不凡的享受。
Expand Down Expand Up @@ -154,7 +161,7 @@ <h3 class="fs-1">
</section>
<section class="bg-gray">
<div class="container py-5">
<div class="d-flex">
<div class="row">
<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="">
Expand All @@ -165,7 +172,7 @@ <h3 class="mb-4">給自己機會放鬆</h3>
<p>不如趁這個機會加入PaPa走讓自己大腦放鬆一下。</p>
</div>
</div>
<div class="d-flex flex-md-row-reverse">
<div class="row flex-md-row-reverse">
<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="">
Expand All @@ -176,7 +183,7 @@ <h3 class="mb-4">享受大自然</h3>
<p>讓自己遠離都市的塵囂。</p>
</div>
</div>
<div class="d-flex">
<div class="row">
<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="">
Expand Down