-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (155 loc) · 9.83 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="來爬山吧!">
<meta name="keywords" content="泰山登山社, 爬山, 登山, 泰山">
<meta property="og:title" content="泰山登山社">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Taishun Hiking Club</title>
<link rel="shortcut icon" href="./images/mountain.png">
<link rel="stylesheet" href="stylesheet/all.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand title-fonts" href="./index.html"><img src="./images/man-with-bag-and-walking-stick.png" alt="logo" style="width: 48px;" class="mt-n3"> 泰山登山社</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ms-auto link-hover fs-5">
<li class="nav-item me-4">
<a class="nav-link" href="./index.html">首頁</a>
</li>
<li class="nav-item me-4">
<a class="nav-link" href="#picture">精彩回憶</a>
</li>
<li class="nav-item me-4">
<a class="nav-link" href="./notice.html">登山須知</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-warning text-dark" href="./index.html#event" tabindex="-1" aria-disabled="true">近期活動</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="header">
</header>
<!-- 宗旨 -->
<section>
<div class="container py-5 mt-5">
<div class="row justify-content-center g-4">
<div class="col-lg-4"><img src="https://images.unsplash.com/photo-1539635278303-d4002c07eae3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="purpose-img" class="w-100 object-fix-cover" style="height: 400px;"></div>
<div class="col-lg-5">
<h2 class="fw-bold">社團宗旨 :</h2>
<p class="mt-5 fs-5">  本社團創立係以響應政府提倡全民正當休閒活動，提升登山品質，改善生態環境為宗旨，並將之納入本會組織章程中，期能薪火相傳，永續經營，真正做到推展登山活動，鍛鍊身心，增進國民健康，養成克苦耐勞，互助互愛精神及協助發展觀光事業，暨研究自然科學之目的。</p>
</div>
</div>
</div>
</section>
<!-- 活動 -->
<section id="event">
<div class="container py-4 my-5 border-top border-3 text-center">
<h2 class="my-5">近期活動</h2>
<div class="row g-3">
<div class="col-lg-4">
<div class="card h-100">
<img src="https://i1.wp.com/chingfungtravel.com/wp-content/uploads/2018/06/DSC_0848.jpg?resize=800%2C445&ssl=1" class="card-img-top object-fix-cover h-100" alt="雪山東峰">
<div class="card-body">
<h5 class="card-title">雪山東峰</h5>
<p class="card-text">2/16~2/19 四天三夜</p>
<a href="./event01.html" class="btn btn-outline-warning w-100">我有興趣</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100">
<img src="https://pic.pimg.tw/aarielle/1656992924-3224959955-g.jpg" class="card-img-top object-fix-cover h-100" alt="獵鷹尖一線天">
<div class="card-body">
<h5 class="card-title">獵鷹尖一線天</h5>
<p class="card-text">3/16~3/17 兩天一夜</p>
<a href="./event02.html" class="btn btn-outline-warning w-100">我有興趣</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100">
<img src="https://onnidaily.com/wp-content/uploads/2022/01/DSCF9316-585x329.jpg" class="card-img-top h-100 object-fix-cover" alt="玉山主峰">
<div class="card-body">
<h5 class="card-title">玉山主峰</h5>
<p class="card-text">3/14~3/18 五天四夜</p>
<a href="./event03.html" class="btn btn-outline-warning w-100">我有興趣</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 照片 -->
<section id="picture">
<div class="container py-4 my-5 border-top border-3 d-flex flex-column align-items-center">
<h2 class="my-5">精彩回憶</h2>
<div id="carouselExampleIndicators" class="carousel slide carousel-dark w-100 w-lg-50" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6"></button>
</div>
<div class="carousel-inner h-100">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1522850067562-a4c60453058d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGhpa2luZ3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" class="d-block w-100 carousel-img object-fix-contain" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1501554728187-ce583db33af7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" class="d-block w-100 carousel-img object-fix-contain" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1587221703223-181d78a8fc4c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80" class="d-block w-100 carousel-img object-fix-contain" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1440186347098-386b7459ad6b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="d-block w-100 carousel-img object-fix-contain" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1511714975599-bf72be56a08e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="d-block w-100 carousel-img object-fix-contain" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1511715885542-a3713331633d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="d-block w-100 carousel-img object-fix-contain" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<!-- 協助 -->
<section class="bg-light py-4">
<div class="container text-center py-2">
<h2 class="my-4">更多協助..</h2>
<div class="row g-4 mb-3 justify-content-center">
<div class="col-lg-3 d-flex justify-content-center help-link"><div class="py-5 rounded shadow-lg position-relative" style="min-width: 200px;"><a href="#" class="h6 stretched-link text-decoration-none link-dark"><i class="bi bi-line"></i>泰山登山社</a></div></div>
<div class="col-lg-3 d-flex justify-content-center help-link"><div class="py-5 rounded shadow-lg position-relative" style="min-width: 200px;"><a href="#" class="h6 stretched-link text-decoration-none link-dark"><i class="bi bi-facebook"></i>泰山登山社粉絲團</a></div></div>
<div class="col-lg-3 d-flex justify-content-center help-link"><div class="py-5 rounded shadow-lg position-relative" style="min-width: 200px;"><a href="#" class="h6 stretched-link text-decoration-none link-dark"><i class="bi bi-telephone"></i>06-6542315</a></div></div>
</div>
</div>
</section>
<footer class="footer bg-dark text-center">
<p class="text-white">作品欣賞-僅學習使用</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>