This repository has been archived by the owner on Mar 16, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
279 lines (258 loc) · 15.1 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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Modern Business - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="about.html">關於我</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">推薦景點</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">粉絲專頁</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('http://vunature.com/wp-content/uploads/2016/11/landscapes-field-farm-trees-landscape-rustic-nature-wallpaper-android-1900x1080.jpg')";>
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('http://renatures.com/wp-content/uploads/2016/11/mountains-blue-lakes-britanica-forest-columbia-snow-turquoise-red-green-beautiful-robson-rockies-canadian-white-mount-clouds-nature-wallpapers-1900x1080.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('http://architectureimg.com/wp-content/uploads/2017/02/other-thailand-luxury-resort-swimming-pool-background-images-1900x1080.jpg')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- Page Content -->
<div class="container">
<h1 class="my-4"><font face="標楷體">擁抱大自然、感受大自然、學習大自然</font></h1>
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header"><font color="red" face="標楷體">人間仙境</font></h4>
<div class="card-body">
<p class="card-text"><font color="navy" face="標楷體">想要遠離都是塵囂卻又不想風塵僕僕跑太遠，在大台北地區就有這樣的都市叢林！白天是青山綠水、夜裡是蛙鳴蟬叫，滿天星斗作伴睡得也特別香甜。《ETtoday東森新聞雲》特別整理台北、新北共11個人氣露營地，不用舟車勞頓，就能來到戶外、山裡享受被大自然圍繞的幸福感。</font></p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary"><font color="white" face="標楷體">了解更多</font> </a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header"><font color="red" face="標楷體">關於我們</font></h4>
<div class="card-body">
<p class="card-text"><font color="navy" face="標楷體">沒試過您也絕對聽過，「露營」一個可同時享受多種樂趣的半戶外式住宿點子，全程採用自助的方式，體驗那種""不動手就吃不到睡不好""的特別玩法，除了節省花費成本，透過「露營」你將能更接近大自然且感受更多的清新因子。</font></p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary"><font color="white" face="標楷體">了解更多</font> </a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header"><font color="red" face="標楷體">聯絡我們</font></h4>
<div class="card-body">
<p class="card-text"><font color="navy" face="標楷體">22050 新北市板橋區文化路1段313號 No.313, Sec. 1, Wenhua Rd., Banqiao Dist., New Taipei City 22050, Taiwan (R.O.C.)</font></p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary"><font color="white" face="標楷體">了解更多</font> </a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Section -->
<h2>各大露營區介紹</h2>
<div class="row">
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="https://pingtung.fun-taiwan.com/Images/HousePhotos/8442.jpg" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">福灣莊園</a>
</h4>
<p class="card-text">位於屏東縣東港鎮，在家鄉的土地上，讓一種生活態度帶領我們，勇敢的作夢。福灣莊園位於東港鎮的郊區，大鵬灣國家風景區管理處對面，南二高下東港右轉五分鐘即到。以生態工法及鑽石級綠建築為指標，耗費五年琢磨而成的頂級渡假莊園，「百年莊園，在地樂活」為經營理念，讓客人享受到福灣這兩個字所代表「天賜一口田，悠然傍水灣」的意境。提供在地創做料理、Design Villa、在地創做伴手禮、草原婚禮、渡假會議、精品外燴等美好幸福的服務。</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="https://pic.pimg.tw/evshhips/1457252574-4188856580.jpg" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">伴天聊露營地</a>
</h4>
<p class="card-text">營區草木皆親自植栽整理，視野可眺望北港溪潺潺流水，更於油桐花季時可觀山間碎雪。大片綠油寬廣的草地，可供孩子嬉鬧跑跳，大人休憩放鬆，更提供了舒適的衛浴空間，釣魚池及景觀咖啡廳，用心程度可由此瞧出;並且保留原有的青楓與落葉松，讓露友們可在一年四季不同景致都能夠來到這裡享受大自然帶來的沁心，更能夠與營主一同品嚐手沖咖啡香韻迴繞的風雅光陰，讓你幽靜的享受五星級露營品質。</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://4.bp.blogspot.com/-I9sO2Ey-EQM/U6bpaJ1E99I/AAAAAAAAhLI/H_aAZqicamw/s900/IMG_4620.JPG" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">那山那谷休閒農場</a>
</h4>
<p class="card-text">那山那谷，位於宜蘭縣南澳鄉，海拔約80公尺。
泰雅語「我的家」的諧音，位於宜蘭縣南澳鄉最深山的村落－金洋村，被群山、溪水環繞，一年四季精彩紛呈，是離幸福最近的世外桃源。</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://img.aihuahui.com/d/2016/09/57df5a82cad78.jpg" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">向日葵</a>
</h4>
<p class="card-text">向日葵（學名：Helianthus annuus）是菊科向日葵屬的植物。別名太陽花、向陽花、朝陽花、日頭花（臺灣話：ji̍t-thâu-hue）[1]，但易與非洲菊混稱，一般應稱向日葵。因花序隨太陽轉動而得名。</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://img.aihuahui.com/d/2016/09/57d756953db83.jpg" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">蒲公英</a>
</h4>
<p class="card-text">蒲公英，又稱黃花地丁、婆婆丁，華花郎、蒲公草、食用蒲公英、尿床草、西洋蒲公英。是溫帶至亞熱帶常見的一種植物。蒲公英採孤雌生殖，葉邊的形狀像一嘴尖牙。其英文名字Dandelion來自法語dent-de-lion，正是獅子牙齒之意。</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://img.wezhan.cn/content/sitefiles/66917/images/0308755_24%E5%A4%B4%E7%8E%AB%E7%91%B0.jpeg" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">玫瑰</a>
</h4>
<p class="card-text">玫瑰（学名：Rosa rugosa）是蔷薇科蔷薇属植物，在日常生活中是蔷薇属一系列花大艳丽的栽培品种的统称。在古时的汉语，“玫瑰”一词原意是指红色美玉。长久以来，玫瑰就象征着美丽和爱情。 玫瑰为落叶灌木，枝杆多针刺，奇数羽状复叶，小叶5-9片，椭圆形，有边刺。花瓣倒卵形，重瓣至半重瓣，花有紫红色、白色，果期8-9月，扁球形。</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Features Section -->
<div class="row">
<div class="col-lg-6">
<h2><font color="navy" face="標楷體">訪客留言</font></h2>
<p><font color="black" face="標楷體">有甚麼困惱呢? 請告知我們!</font></p>
<textarea cols="70" rows="8"></textarea>
<p></p>
</div>
<div class="col-lg-6">
<img class="img-fluid rounded" src="http://img3.okgo.tw/store/album/11123/b11123_20160820022151_1.jpg" alt="">
</div>
</div>
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="row mb-4">
<div class="col-md-8">
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-secondary btn-block" href="#">立即聯絡</a>
</div>
</div>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Your Website 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>