-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintro.html
221 lines (213 loc) · 13.7 KB
/
intro.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="/css/GoPower.css" />
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<style>
body {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#banner {
background-image: url(images/banner2.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}
.img-thumbnail {
filter: brightness(0.45);
transition: all 0.5s;
}
.img-thumbnail:hover {
filter: brightness(1);
}
</style>
<title>課程介紹</title>
</head>
<body class="bg-dark">
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<h1 class="navbar-brand" id="logo">GoPower首頁</h1>
<button data-toggle="collapse" data-target="#submenu" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse justify-content-end" id="submenu">
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-link">GoPower首頁</a></li>
<li class="nav-item"><a href="about.html" class="nav-link">關於我們</a></li>
<li class="nav-item"><a href="intro.html" class="nav-link text-info">課程介紹</a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row" id="banner">
<div class="col"></div>
</div>
<div class="row">
<div class="col-12 col-md-4 col-lg-2 offset-lg-3 my-5 text-center">
<img src="images/workout1.jpg" alt="" class="img-thumbnail" data-toggle="modal" data-target="#l1" />
<h5 class="text-info mt-2 mb-0">基礎體重訓練</h5>
<p class="text-light small">基本的四肢運動養成</p>
<a href="#" class="btn btn-small btn-info">前往</a>
<div class="modal" id="l1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">基礎體重訓練:</div>
<div class="modal-body">
<img src="images/workout1.jpg" alt="" class="img-fluid" />
<p class="text-left">
你是否有想過開始運動改變體態？無論是減脂、減重或增加肌耐力！每天只要花10分鐘的時間，你不用買訓練器材只用自己的體重就可以執行，如果你每天都認真執行這樣的計畫，在短時間內就可看到自己身體的改變，但這個訓練不會讓你快速獲得夢想中的身形，尤其是在體重超重的情形之下，不過卻能為你開啟運動的大門。現在就讓我們開始用這5種動作，執行４週的訓練計畫吧！
</p>
</div>
<div class="modal-footer"><a href="">×</a></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-2 my-5 text-center">
<img src="images/workout2.jpg" alt="" class="img-thumbnail" data-toggle="modal" data-target="#l2" />
<h5 class="text-info mt-2 mb-0">飛輪運動教室</h5>
<p class="text-light small">訓練腳步最基本耐力</p>
<a href="#" class="btn btn-small btn-info">前往</a>
<div class="modal" id="l2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">飛輪課程介紹：</div>
<div class="modal-body">
<img src="images/workout2.jpg" alt="" class="img-fluid" />
<p class="text-left">
飛輪也是一種有氧運動，可以幫助你燃燒脂肪達到減脂的效果，除了燃燒脂肪之外，對於心肺功能的提升及下半身肌力也有很大的幫助。<br />
同樣都是有氧運動，相較於跑步來說騎飛輪比較不易受傷，適合於體重過重或是膝蓋有問題不適合跑步的人。
</p>
</div>
<div class="modal-footer"><a href="">×</a></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-2 my-5 text-center">
<img src="images/workout3.jpg" alt="" class="img-thumbnail" data-toggle="modal" data-target="#l3" />
<h5 class="text-info mt-2 mb-0">地板運動操</h5>
<p class="text-light small">讓身體柔軟與訓練反應</p>
<a href="#" class="btn btn-small btn-info">前往</a>
<div class="modal" id="l3">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">地板運動操:</div>
<div class="modal-body">
<img src="images/workout3.jpg" alt="" class="img-fluid" />
<p class="text-left">
提到健身運動，大多數人都想到戶外，其實，在家裡，地板也不錯的運動場地。<br />
(1)擁有緊實的大腿：側臥在地板上，屈膝並踩在地板上，保持身體前後平衡，下腿伸直放鬆時置於地板上，用力時上抬並配合吐氣。<br />
(2)預防腰痛及臀部訓練：仰臥躺在地板上，彎曲膝蓋，兩腳分開與腰同寬，雙手放在身體兩側，開始吸氣。一邊吐氣，一邊讓臀部用力，來抬高腰部。切記在臀部落下時，不能接觸地板。
</p>
</div>
<div class="modal-footer"><a href="">×</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 col-lg-2 offset-lg-3 my-5 text-center">
<img src="images/workout4.jpg" alt="" class="img-thumbnail" data-toggle="modal" data-target="#l4" />
<h5 class="text-info mt-2 mb-0">進階地板運動操</h5>
<p class="text-light small">養成肌肉的收放與彈性</p>
<a href="#" class="btn btn-small btn-info">前往</a>
<div class="modal" id="l4">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">進階地板運動操:</div>
<div class="modal-body">
<img src="images/workout4.jpg" alt="" class="img-fluid" />
<p class="text-left">
(1)體側腰部運動：身體側坐，單手扶在腦後，另一手置於體側，吸氣。一邊吐氣，一邊抬高腦後手臂的手肘，使體側部位伸直。本動作可以伸展體側兩邊的肌肉，使腰部變細。<br />
(2)腹部運動：平躺在地上或床上，雙腿併攏抬高，與地面大約成45度，雙手扶在腦後，運用腹部的力量將頭部及肩膀抬起，同時雙腿併攏向內縮，讓頭部與膝蓋儘量觸碰在一起。這個動作可以有效消除腹部贅肉，收緊上腹部和下腹部的肌肉。
</p>
</div>
<div class="modal-footer"><a href="">×</a></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-2 my-5 text-center">
<img src="images/workout5.jpg" alt="" class="img-thumbnail" data-toggle="modal" data-target="#l5" />
<h5 class="text-info mt-2 mb-0">輔助器具操作</h5>
<p class="text-light small">培養身體的耐壓力</p>
<a href="#" class="btn btn-small btn-info">前往</a>
<div class="modal" id="l5">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">輔助器具操作:</div>
<div class="modal-body">
<img src="images/workout5.jpg" alt="" class="img-fluid" />
<p class="text-left">
怎樣才能在健身後更好的拉伸肌肉呢？除了常規的拉伸運動之外，我們還可以利用一些器具來放鬆我們的肌肉，如果在眾多器械中挑一個，首選當然是使用泡沫滾軸啦！<br />
泡沫滾軸也可以稱為瑜伽柱，根據運動訓練目的的不同分為三種方法：泡沫軸筋放鬆訓練法、泡沫軸拉伸訓練法和泡沫軸核心力量訓練法。
</p>
</div>
<div class="modal-footer"><a href="">×</a></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-2 my-5 text-center">
<img src="images/workout6.jpg" alt="" class="img-thumbnail" data-toggle="modal" data-target="#l6" />
<h5 class="text-info mt-2 mb-0">風火輪鍛鍊</h5>
<p class="text-light small">進階的腳步肌耐力養成</p>
<a href="#" class="btn btn-small btn-info">前往</a>
<div class="modal" id="l6">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">風火輪鍛鍊:</div>
<div class="modal-body">
<img src="images/workout6.jpg" alt="" class="img-fluid" />
<p class="text-left">
首先，風火健腹輪可以起到減肥減脂的作用。主要鍛鍊腹部、小臂、肩部、大腿小腿等，可以讓身體更加有型。
其次，能夠有效地訓練到咱們的核心肌肉群。而且不同的動作對身體的各個部位有不同鍛鍊效果，大家鍛鍊時可以針對自己的健身基礎和訓練需求來做動作。<br />
有這樣的作用，是因為我們在用它進行鍛鍊的時候，幾乎調用了全身的骨骼在做支撐（會感覺有些難），所以對身體正面的刺激是非常大的。
</p>
</div>
<div class="modal-footer"><a href="">×</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="row bg-secondary jumborton jumborton-fluid py-5">
<div class="col text-light text-center small">-GOPOWER FITNESS © 2020-</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>