-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
264 lines (258 loc) · 15.3 KB
/
index.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>泰山ㄉ那個咖啡ㄉ莊園</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.css'
integrity='sha512-VcyUgkobcyhqQl74HS1TcTMnLEfdfX6BbjhH8ZBjFU9YTwHwtoRtWSGzhpDVEJqtMlvLM2z3JIixUOu63PNCYQ=='
crossorigin='anonymous' />
<style>
#carouselSlides {
height: 400px;
}
#carouselSlides .carousel-inner,
#carouselSlides .carousel-item,
#carouselSlides img {
height: 100%;
}
#carouselSlides img {
object-fit: cover;
}
@media (min-width:992px) {
#carouselSlides {
height: 100vh;
}
}
</style>
</head>
<body>
<!-- 導覽列 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top p-3 ">
<div class="container-fluid">
<a class="navbar-brand text-white" href="#">泰山ㄉ那個咖啡ㄉ莊園</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 展開的 navbar buttons: nav-item -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#menu">菜單餐點</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#attractions">周邊景點</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#position">莊園位置</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#msgboard">聯絡我們</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#story">咖啡故事</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 輪播 -->
<div id="carouselContainer" class="container-fluid p-0">
<div id="carouselSlides" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselSlides" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselSlides" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#carouselSlides" data-bs-slide-to="2"></button>
</div>
<!-- 輪播圖片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/1080/?random=1" class="d-block w-100">
</div>
<div class=" carousel-item">
<img src="https://picsum.photos/1920/1080/?random=2" class="d-block w-100">
</div>
<div class=" carousel-item">
<img src="https://picsum.photos/1920/1080/?random=3" class="d-block w-100">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselSlides" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselSlides" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- 中間三格 卡片要固定大小嗎?? *-->
<div id="cards" class="p-4">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12 col-lg-4 g-4">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/400/?random=10">
<div class="card-body">
<p class="card-title">昨日顏色，推廣職業。</p>
<p class="card-text">
整體軍隊天下表情一名專利運動放下客服一下子應當，並且存在性感民族，各種查詢強調留言風雲是他創作懂得值得前後黃金形成常見，最低對話並不發佈時間減少昨天實驗一年失敗特別是，漢化而已控制自我不需要和諧古代重量傳來級別裝修演唱事業竟然，觀念破解第二次，不需要，這。
</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4 g-4">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/400/?random=10">
<div class="card-body">
<p class="card-title">昨日顏色，推廣職業。</p>
<p class="card-text">
整體軍隊天下表情一名專利運動放下客服一下子應當，並且存在性感民族，各種查詢強調留言風雲是他創作懂得值得前後黃金形成常見，最低對話並不發佈時間減少昨天實驗一年失敗特別是，漢化而已控制自我不需要和諧古代重量傳來級別裝修演唱事業竟然，觀念破解第二次，不需要，這。
</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4 g-4">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/400/?random=10">
<div class="card-body">
<p class="card-title">昨日顏色，推廣職業。</p>
<p class="card-text">
整體軍隊天下表情一名專利運動放下客服一下子應當，並且存在性感民族，各種查詢強調留言風雲是他創作懂得值得前後黃金形成常見，最低對話並不發佈時間減少昨天實驗一年失敗特別是，漢化而已控制自我不需要和諧古代重量傳來級別裝修演唱事業竟然，觀念破解第二次，不需要，這。
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 兩格collection-->
<div id="collections" class="container-fluid p-0">
<div class="card border-0">
<div class="row g-0">
<div class="col-12 col-lg-6">
<img src="https://picsum.photos/1600/1200/?random=7" class="img-fluid w-100">
</div>
<div class="col-12 col-lg-6 bg-light d-flex align-items-center">
<div class="card-body d-flex flex-column align-items-center">
<h2 class="card-title">Coffee★Shop</h2>
<p class="card-text m-4">
接到美國心中你是國人事實廠商相機道路，實踐引起一起嘗試發展總是基礎上而來道路姐姐，包括品質執行環境，畢業生瀏覽次數，一支道德英國曝光龍岡將其，但是像素我愛用戶是一種靈活一時精英兄弟懷疑共享版誘惑常見處於，步驟女生會員哪個分為一段時間可憐註冊頻道，並在城市。
</p>
<a href="#" class="btn btn-success">VIEW COLLECTION</a>
</div>
</div>
<div class="col-12 order-lg-last col-lg-6">
<img src="https://picsum.photos/1600/1200/?random=8" class="img-fluid w-100">
</div>
<div class="col-12 col-lg-6 bg-light d-flex align-items-center">
<div class="card-body d-flex flex-column align-items-center">
<h2 class="card-title">Coffee★Shop</h2>
<p class="card-text m-4">
接到美國心中你是國人事實廠商相機道路，實踐引起一起嘗試發展總是基礎上而來道路姐姐，包括品質執行環境，畢業生瀏覽次數，一支道德英國曝光龍岡將其，但是像素我愛用戶是一種靈活一時精英兄弟懷疑共享版誘惑常見處於，步驟女生會員哪個分為一段時間可憐註冊頻道，並在城市。
</p>
<a href="#" class="btn btn-success">VIEW COLLECTION</a>
</div>
</div>
</div>
</div>
</div>
<!-- 地圖 400px~50vh -->
<div id="googleMap" class="ratio ratio-16x9">
<iframe class="w-100" style="min-height: 400px;"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3614.703506716216!2d121.41694067595638!3d25.044134137882367!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a7bec9ad74b1%3A0xa639904a89f26435!2z5Yue5YuV6YOo5Yue5YuV5Yqb55m85bGV572y5YyX5Z-65a6c6Iqx6YeR6aas5YiG572y5rOw5bGx6IG35qWt6KiT57e05aC0!5e0!3m2!1szh-TW!2stw!4v1733128253766!5m2!1szh-TW!2stw"
width="600" height="450" style="border:0;" allowfullscreen="true" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- 留言板 -->
<div id="msgboard" class="p-0 vh-100 bg-light">
<div class="row flex-column h-100 justify-content-center align-items-center mx-auto">
<div class="col-11 col-lg-8 text-center mb-3">
<h1 class="m-4 m-lg-4">聯絡我們</h1>
<h4>泰山ㄉ那ㄍ咖啡ㄉ莊園，傳承熱情coding精神</h4>
<p>任何服務問題或建議，歡迎您留給自己，不要透過訂閱客服表單告知我們，謝謝！</p>
</div>
<div class="col-11 col-lg-8">
<form class="row g-3">
<div class="col-lg-6">
<label for="input1" class="form-label">姓名</label>
<div class="input-group">
<input type="email" class="form-control" id="input1">
<span class="input-group-text ps-3 pe-0 bg-light" id="basic-addon2">
<div class="form-check form-check-inline me-3 p-0">
<label class="form-check-label" for="inlineRadio1">先生</label>
<input class="form-check-input float-none ms-0" type="radio" name="inlineRadioOptions"
id="inlineRadio1" value="option1">
</div>
<div class="form-check form-check-inline me-3 p-0">
<label class="form-check-label" for="inlineRadio2">女士</label>
<input class="form-check-input float-none ms-0" type="radio" name="inlineRadioOptions"
id="inlineRadio2" value="option2">
</div>
</span>
</div>
</div>
<div class="col-lg-6">
<label for="input2" class="form-label">電話</label>
<input type="password" class="form-control" id="input2">
</div>
<div class="col-lg-6">
<label for="inputEmail" class="form-label">電子郵件</label>
<input type="email" class="form-control" id="inputEmail">
</div>
<div class="col-lg-6">
<label for="q-select" class="form-label">問題類型</label>
<select id="q-select" class="form-select">
<option selected>餐飲建議</option>
<option value="1">這個建議</option>
<option value="2">那個建議</option>
<option value="3">害羞的建議</option>
</select>
</div>
<div class="col-lg-12">
<label for="exampleFormControlTextarea1" class="form-label">意見需求</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
訂閱泰山莊園最新資訊
</label>
</div>
</div>
<div class="col-12 text-center mt-5">
<button type="submit" class="btn btn-secondary">送出</button>
</div>
</form>
</div>
</div>
</div>
<!-- footer -->
<div id="footer" class="p-0 bg-dark text-white">
<div class="row p-4 m-auto col-xl-11">
<div class="col-lg-3 col-6 g-2">
<div class="d-flex flex-column align-items-center">
<img class="rounded-circle" src="https://picsum.photos/200/200/?random=10">
</div>
</div>
<div class="col-lg-3 col-6 g-2">
<h4>Address</h4>
<p>1234 Street Name<br>City : AA 99999</p>
</div>
<div class="col-lg-3 col-6 g-2">
<h4>Links</h4>
<a class="text-white text-decoration-none" href="#">Website builder</a><br>
<a class="text-white text-decoration-none" href="#">Download for Windows</a><br>
<a class="text-white text-decoration-none" href="#">Download for Mac</a>
</div>
<div class="col-lg-3 col-6 g-2">
<h4>Contacts</h4>
<p>Email: [email protected]<br>Phone: +1 (0) 000 0000 001<br>Fax: +1 (0) 000 0000 002</p>
</div>
</div>
<div class="text-center py-3">© Copyright 2024 GUESS WHO AM I - All Rights Reserved</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.js'
integrity='sha512-sSOeacod972lTNk0ePyxrSSI6yoqvGRm7bbqtwqsY1r7TcdYiQn/a+KvaYQ0iacHBYE/MSEVjTNa2dglSz74vA=='
crossorigin='anonymous'></script>
</body>
</html>