-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfestival.html
130 lines (122 loc) · 5.04 KB
/
festival.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>台灣走走．TaiWalk</title>
<link rel="stylesheet" href="./css/all.css">
<!--Material icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!--Navbar-->
<nav class="navbar navbar-expand-md">
<div class="container">
<h1><a href="./index.html" class="logo navbar-brand">台灣走走</a></h1>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" >
<img src="./assets/menu-mobile.png" alt="">
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav text-center d-flex justify-content-around">
<li class="nav-item"><a href="spots.html" class="nav-link">探索景點</a></li>
<li class="nav-item"><a href="festival.html" class="nav-link">節慶活動</a></li>
<li class="nav-item"><a href="tasteFood.html" class="nav-link">品嚐美食</a></li>
</ul>
</div>
</div>
</nav>
<!--標籤列-->
<section class="container mb-7">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">首頁</a></li>
<li class="breadcrumb-item active" aria-current="page">節慶活動</li>
</ol>
</nav>
</section>
<!--篩選列-->
<section class="container mb-8">
<div class="row flex-row justify-content-center g-1">
<div class="col-12 col-md-3">
<select class="form-select me-3" aria-label="Default select example">
<option selected>全部縣市</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-12 col-md-6">
<input class="form-control me-3" type="text" placeholder="你想去哪裡？請輸入關鍵字" aria-label="default input example">
</div>
<div class="col-12 col-md-3">
<button type="button" class="btn btn-primary w-100 text-white d-flex justify-content-center">
<span class="material-icons text-white pe-3">
search
</span>
搜 尋</button>
</div>
</div>
</section>
<!--熱門分類-->
<section class="container">
<div class="row">
<div class="col-12 fs-7">熱門主題</div>
<div class="col-6 col-md-3 position-relative">
<img src="./assets/festival/festival.png" class="w-100 mb-2" alt="節慶活動">
<div class="">
<h3 class="position-absolute top-50 start-50 translate-middle text-white fw-bold fs-4">節慶活動</h3>
</div>
</div>
<div class="col-6 col-md-3 position-relative">
<img src="./assets/festival/bike.png" class="w-100 mb-2" alt="自行車活動">
<div class="">
<h3 class="position-absolute top-50 start-50 translate-middle text-white fw-bold fs-4">自行車活動</h3>
</div>
</div>
<div class="col-6 col-md-3 position-relative">
<img src="./assets/festival/play.png" class="w-100 mb-2" alt="遊憩活動">
<div class="">
<h3 class="position-absolute top-50 start-50 translate-middle text-white fw-bold fs-4">遊憩活動</h3>
</div>
</div>
<div class="col-6 col-md-3 position-relative">
<img src="./assets/festival/culture.png" class="w-100 mb-2" alt="產業文化活動">
<div class="">
<h3 class="position-absolute top-50 start-50 translate-middle text-white fw-bold fs-4">產業文化活動</h3>
</div>
</div>
<div class="col-6 col-md-3 position-relative">
<img src="./assets/festival/annual.png" class="w-100 mb-2" alt="年度活動">
<div class="">
<h3 class="position-absolute top-50 start-50 translate-middle text-white fw-bold fs-4">年度活動</h3>
</div>
</div>
<div class="col-6 col-md-3 position-relative">
<img src="./assets/festival/seasons.png" class="w-100 mb-2" alt="四季活動">
<div class="">
<h3 class="position-absolute top-50 start-50 translate-middle text-white fw-bold fs-4">四季活動</h3>
</div>
</div>
</div>
</section>
</div>
<!--Footer-->
<footer class="bg-primary text-center d-flex align-items-center">
<div class="container">
<p class="mb-0 text-white">#The F2E 3rd Week01 UI#Breakfast | FE#AmberCYT</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" charset="utf-8"></script>
<!-- axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!--Bootstrap-->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="./js/bootstrap.bundle.js"></script>
<!--header-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/3.2.0/sha.js"></script>
<script src="./js/index.js"></script>
</body>
</html>