forked from winc1980/waxaHP
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
345 lines (318 loc) · 17.5 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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>早稲田大学天文同好会WAXA</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google Fonts 'Montserrat' -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Google Fonts 'Noto+Serif' -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
<!-- Google Fonts Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- Swiper.js 4.3.3 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<link rel="icon" href="src/favicon.ico">
<style>
#place {
background: url(src/place_bg_sp01.png) no-repeat center/cover;
}
@media screen and (min-width: 768px) {
#place {
background: url(src/place_bg_pc01.png) no-repeat center/cover;
}
}
</style>
</head>
<body>
<div id="page">
<!-- ヘッダーここから -->
<header id="header">
<div class="header_wrapper">
<div class="header_logoandtitle">
<a href="index.html"><img src="src/WAXA_logo.svg" alt="WAXA_logo" id="header_waxa_logo" /></a>
<a href="index.html">
<h1>
早稲田大学天文同好会 <span>WAXA</span>
</h1>
</a>
</div>
<div class="header_menu-content-pc">
<ul>
<li>
<a href="#activity" class="header_menu_hover">活動内容</a>
</li>
<li>
<a href="#information" class="header_menu_hover">情報</a>
</li>
<li>
<a href="#place" class="header_menu_hover">活動場所</a>
</li>
<li>
<a href="https://www.instagram.com/waxa_tenmon/"><img src="src/instagram-logo.svg" class="header_menu_sns_transform" alt="instagram link"></a>
</li>
<li>
<a href="https://twitter.com/waxa_souten"><img src="src/twitter-logo.svg" class="header_menu_sns_transform" alt="Twitter link"></a>
</li>
<li>
<a href="#contact" id="header_application-btn" class="header_menu_btn_transform">入会はこちら</a>
</li>
</ul>
</div>
</div>
<div class="header_hamburger-menu">
<input type="checkbox" id="header_menu-btn-check" />
<label for="header_menu-btn-check" class="header_menu-btn"><span></span></label>
<!-- ここからメニュー -->
<div class="header_menu-content">
<ul>
<li>
<label for="header_menu-btn-check" onclick="location.href='#activity'" class="header_menu_hover">活動内容</label>
</li>
<li>
<label for="header_menu-btn-check" onclick="location.href='#information'">情報</label>
</li>
<li>
<label for="header_menu-btn-check" onclick="location.href='#place'">活動場所</label>
</li>
<li>
<label for="header_menu-btn-check" onclick="location.href='https://www.instagram.com/waxa_tenmon/'">Instagram</label>
</li>
<li>
<label for="header_menu-btn-check" onclick="location.href='https://twitter.com/waxa_souten'">Twitter</label>
</li>
<li>
<label for="header_menu-btn-check" onclick="location.href='#contact'">お問い合わせ</label>
</li>
</ul>
</div>
<!--ここまでメニュー-->
</div>
</header>
<!-- ヘッダーここまで -->
<main id="main">
<!-- メインビジュアルここから -->
<section id="mv">
<div class="mv_wrapper">
<img src="src/main-visual-sp.webp" class="mv_sp_img" alt="">
<img src="src/main-visual.webp" class="mv_pc_img" alt="">
<div class="mv_contents_wrapper">
<h1>そうだ、<br>星を見に行こう。</h1>
<a href="#contact">入会はこちら</a>
</div>
</div>
</section>
<!-- メインビジュアルここまで -->
<!-- 活動内容ここから -->
<section id="activity">
<div class="container">
<div class="row">
<div class="contents">
<div class="title fade">
<h2 style="margin: 0">Activity</h2>
<p>活動内容</p>
</div>
<div class="message fade">
<p>
天文同好会は星空を見るのが好きな人が集まるサークルです。月に数度、長野にある山小屋に星を見に行きます。普段はカメラ班、星座班、望遠鏡班に分かれて活動したり全体で遊んだりしてます。天文に詳しい人もたくさんいますがそれ以上に、詳しくないが星を見たい人、仲間とわいわいしたい人もたくさんいるので気軽にsns等に連絡ください。
</p>
</div>
</div>
</div>
<div class="activity__figure row fade">
<img src="src/activity.png" alt="images" />
</div>
</div>
</section>
<!-- 活動内容ここまで -->
<!-- Infomationここから -->
<section id="information">
<div class="container">
<div class="row fade">
<div class="images">
<div><img src="src/history-01.png" alt="" /></div>
<div><img src="src/history-02.png" alt="" /></div>
<div><img src="src/history-03.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="contents">
<div class="title fade">
<h2 style="margin: 0">Information</h2>
<p>サークル情報</p>
</div>
<div class="message fade">
<table>
<tr>
<th>人数</th><td>150人以上</td>
</tr>
<tr>
<th>他大学</th><td>参加可能</td>
</tr>
<tr>
<th>設立</th><td>1960年</td>
</tr>
<tr>
<th>年会費</th><td>2,500円</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- Infomationここまで -->
<!-- 活動風景ここから -->
<section id="gallery">
<div class="gallery_container fade">
<div class="gallery_title">
<h2 style="margin: 0" class="gallery_title_h2">Gallery</h2>
</div>
<div class="gallery_text">
<p><span>活動風景</span></p>
</div>
</div>
<div class="swiper-parent fade">
<!-- Swiper START -->
<div class="swiper-container">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide"><img src="src/slider1.png" alt="Swiper01"></div>
<div class="swiper-slide"><img src="src/activity.png" alt="Swiper02"></div>
<div class="swiper-slide"><img src="src/slider3.png" alt="Swiper03"></div>
<div class="swiper-slide"><img src="src/slider5.png" alt="Swiper05"></div>
<div class="swiper-slide"><img src="src/slider6.png" alt="Swiper06"></div>
<div class="swiper-slide"><img src="src/slider1.png" alt="Swiper01"></div>
<div class="swiper-slide"><img src="src/slider3.png" alt="Swiper03"></div>
<div class="swiper-slide"><img src="src/slider6.png" alt="Swiper06"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev gallery_button_pc_only"></div>
<div class="swiper-button-next gallery_button_pc_only"></div>
</div>
</div>
<!-- Swiper END -->
</section>
<!-- 活動風景ここまで -->
<!-- 活動場所ここから -->
<section id="place">
<div class="place__container">
<div class="place__content">
<div class="place__flex">
<div class="contents">
<div class="title">
<h2>Place</h2>
<p>活動場所</p>
</div>
<div class="message">
<p>主な活動場所は学生会館E1108です。活動の詳細についてはTwitterやInstagramをご覧ください。</p>
</div>
<div class="place_fields">
<div class="place_boxies">
<div class="place_box place_box1">
<a href="https://www.waseda.jp/inst/student/facility/studentcenter">学生会館について</a>
</div>
<div class="place_box place_box2">
<a href="https://www.waseda.jp/fsci/assets/uploads/2022/03/2022nishiwaseda-shuttle-bus-timetable.pdf">キャンパス間連絡バス</a>
</div>
<div class="place_box place_box3">
<a href="https://waseda.app.box.com/s/lwwbo30xn58b1mjoahvthnmbrad5xqrm">学生会館へのアクセス方法</a>
</div>
</div>
<p>
※早稲田大学のHPに
<br class="place__tag--sp">リンクが飛びます。
</p>
</div>
</div>
<div class="place_map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25919.536515236803!2d139.7315984135291!3d35.70304328206423!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d1dc627dc3b%3A0xb8cb5ac09b074b5d!2z5pep56iy55Sw5aSn5a2mIOaIuOWxseOCreODo-ODs-ODkeOCuQ!5e0!3m2!1sja!2sjp!4v1671290912806!5m2!1sja!2sjp"
width="500" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- 活動場所ここまで -->
<!-- お問い合わせここから -->
<section id="contact" style="background-image:url('src/contact_bg.jpg');">
<!-- background-imageのパスはWordPressから指定するため直接指定 -->
<div class="container">
<div class="box">
<div class="title">
<h2>Contact</h2>
<p><span>お問い合わせ</span></p>
</div>
<div class="message">
<p>体験・入会は、WAXAの公式<a href="#">Instagram</a>もしくは公式<a href="#">Twitter</a>に、「体験したい」「入会したい」という旨のメッセージをDMで送っていただくか、下記フォームよりお問い合わせください。</p>
</div>
<form>
<div class="form_control" style="margin-bottom:30px;">
<label>お名前</label>
<div class="badge">
<p>必須</p>
</div>
<input class="input_form" type="text" name="name" placeholder="お名前を入力してください">
</div>
<div class="form_control" style="margin-bottom:30px;">
<label>メールアドレス</label>
<div class="badge">
<p>必須</p>
</div>
<input class="input_form" type="email" name="email" placeholder="メールアドレスを入力してください">
</div>
<div class="form_control" style="margin-bottom:30px;">
<label>ご要望</label>
<div class="badge">
<p>必須</p>
</div>
<div class="form_check">
<div class="form_check_radio">
<input type="radio" id="radio1" name="request" value="入会したい">
<label for="radio1">入会したい</label>
</div>
<div class="form_check_radio">
<input type="radio" id="radio2" name="request" value="その他">
<label for="radio3">その他（ご質問等）</label>
</div>
</div>
</div>
<div class="form_control">
<label style="flex:6;">質問・その他</label>
<textarea class="input_form" name="contents" rows="5" placeholder="質問や気になる点がありましたら、お気軽にお問い合わせください。"></textarea>
</div>
</form>
</div>
</div>
<div class="container">
<div class="button">
<div>送信する</div>
<span class="material-symbols-outlined">chevron_right</span>
</div>
</div>
</section>
<!-- お問い合わせここまで -->
</main>
<!-- フッターここから -->
<footer id="footer">
<div class="footer_wrapper">
<p>©
<script type="text/javascript">
myDate = new Date();
myYear = myDate.getFullYear();
document.write(myYear);
</script>
Copyright: 天文同好会WAXA
</p>
</div>
</footer>
<!-- フッターここまで -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>