-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
223 lines (208 loc) · 10.1 KB
/
about.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
<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=PT+Serif&display=swap" rel="stylesheet">
<title>CRACK | About</title>
<style>
.title{
font-family: 'Staatliches', cursive;
font-size:40px;
}
.cover{
background:url(images/backimage.jpg);
background-size:cover;
}
.bg-size{
height:400px;
}
body{
background-color:black;
}
.font-change{
font-size:20px;
}
.font-adj{
font-size:30px;
}
.tab-pane p{
font-size:20px;
}
.current{
border-bottom:4px solid red;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-dark">
<div class="col-9">
<img src="images/emblem.png" class="rounded-circle mr-3" height="70px" width="70px">
<a href="index.html" class="navbar-brand text-white align-middle title">CRACK</a>
</div>
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div id="menu" class="collapse navbar-collapse">
<div class="col-3">
<ul class="navbar-nav">
<li class="nav-item mr-2"><a href="index.html" class="nav-link text-white font-weight-bold">HOME</a>
<li class="nav-item mr-2"><a href="#" class="nav-link text-white font-weight-bold current">ABOUT</a>
<li class="nav-item"><a href="contact.html" class="nav-link text-white font-weight-bold">CONTACT</a>
</ul>
</div>
</div>
</nav>
<div class="alert alert-warning text-center mb-0 rounded-0 alert-dismissible fade show">
<strong>活動報告のTwitterを更新しました！(2019/10/30)</strong>
<button class="close" data-dismiss="alert">
×
</button>
</div>
<div class="cover text-white">
<div class="bg-size d-flex align-items-center container">
<h1 class="display-1"><strong>Welcome to CRACK!</strong></h1>
</div>
</div>
</header>
<main>
<section class="text-white">
<h2 class="text-center display-2 text-light my-5">Features</h2>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#history" class="nav-link active mr-4 font-adj" data-toggle="tab">HISTORY</a></li>
<li class="nav-item"><a href="#boots" class="nav-link mr-4 font-adj" data-toggle="tab">BOOTS</a></li>
<li class="nav-item"><a href="#time" class="nav-link mr-4 font-adj" data-toggle="tab">TIME</a></li>
<li class="nav-item"><a href="#place" class="nav-link mr-4 font-adj" data-toggle="tab">PLACE</a></li>
<li class="nav-item"><a href="#belief" class="nav-link mr-4 font-adj" data-toggle="tab">BELIEF</a></li>
<li class="nav-item"><a href="#message" class="nav-link mr-4 font-adj" data-toggle="tab">MESSAGE</a></li>
</ul>
<div class="tab-content py-4">
<div id="history" class="tab-pane active">
<p>このCRACKは2018年5月に始動しました！<br>
最初の参加者は10人ほどでした！<br>
そして、2019年に1年生が入ってくるようになって爆発的にその人数を増やしています！<br>
2019年7月には史上最高人数の17人参加を達成しました！</p>
</div>
<div id="boots"class="tab-pane">
<p>ピッチが人工芝なので、トレシューが最も望ましいですね<br>
ただ、フットサルシューズも可です！<br>
ただ、ピッチが滑りやすいのでトレシューの方が良いですね<br>
スパイクは厳禁です</p>
</div>
<div id="time" class="tab-pane">
<p>毎週水曜の21時～23時までです<br>
この時間は元々、20時～22時でしたが、紆余曲折を経て21時からになっています！<br>
時間は遅いですが都合が付きやすく、夏場では良い時間帯です<br>
冬場でも夜の方が運動しやすいでしょう！</p>
</div>
<div id="place" class="tab-pane">
<p>SOLTIRO PARK福岡西で活動しています<br>
基本的にはAかBコートでフットサルしています！<br>
コートはその時々によって変わりますが、問題ありません！<br>
良いピッチなのでぜひ参加しましょう！</p>
</div>
<div id="belief" class="tab-pane">
<p>私たちは基本的にはサッカーやフットサルの経験者しか入会を認めていません<br>
経験者のみでアクティブにプレーするのがポリシーです<br>
未経験OKのサークルはたくさんありますが、経験者のみはココだけでしょう！<br>
十分にこのCRACKでプレーする価値があります！</p>
</div>
<div id="message" class="tab-pane">
<p>あなたがもし経験者なら私たちと一緒にフットサルをしましょう！<br>
きっと素晴らしいサークル体験になります<br>
contactフォームから連絡を送ってきてください！<br>
あなたのCRACKへの参加を心から待っています！</p>
</div>
</div>
</div>
</section>
<section class="mb-5">
<div class="container">
<div class="col-sm-12">
<h2 class="text-center display-2 text-light mt-5">Questions</h2>
</div>
<div class="row">
<div class="card-deck mx-auto row">
<div class="col-md-4 py-4">
<div class="card bg-primary">
<h5 class="card-header">Q. 初心者は参加できますか？</h5>
<div class="card-body">
<p class="card-text">A. 申し訳ないですが、まったくの初心者は断っています</p>
</div>
</div>
</div>
<div class="col-md-4 py-4">
<div class="card bg-warning">
<h5 class="card-header">Q. お金はいつ集めますか？</h5>
<div class="card-body">
<p class="card-text">A. 活動の前後に集めていますが、基本いつでも大丈夫です</p>
</div>
</div>
</div>
<div class="col-md-4 py-4">
<div class="card bg-danger">
<h5 class="card-header">Q. 車や原付で行けますか？</h5>
<div class="card-body">
<p class="card-text">A. 無料の駐車場があるので大丈夫ですが、道が狭いので注意してください</p>
</div>
</div>
</div>
<div class="col-md-4 py-4">
<div class="card bg-success">
<h5 class="card-header">Q. 参加費が安くなったりすることはありますか？</h5>
<div class="card-body">
<p class="card-text">A. 無料回があり、そのときに参加費が0円になります</p>
</div>
</div>
</div>
<div class="col-md-4 py-4">
<div class="card bg-info">
<h5 class="card-header">Q. マネージャーは募集していますか？</h5>
<div class="card-body">
<p class="card-text">A. 現在はマネージャーは募集していません</p>
</div>
</div>
</div>
<div class="col-md-4 py-4">
<div class="card bg-secondary">
<h5 class="card-header">Q. 施設に備え付けの更衣室はありますか？</h5>
<div class="card-body">
<p class="card-text">A. 更衣室は男女ともにあるので、着替えはそこでお願いします</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container border-top border-light">
<img src="images/emblem.png" class="rounded-circle mx-auto mt-3 d-block" height="200px" width="200px">
<div class="text-center">
<h2 class="title text-white">CRACK</h2>
<p class="font-change text-white">Time : Wednesday 9:00 PM～</p>
<p class="font-change text-white">Place : Soltiro Park 福岡西</p>
<p class="font-change text-white">Qualification : 経験者優遇</p>
<p class="text-white"><small>Copyright© 2019 @CRACK All Rights Reserved.</small></p>
</div>
</div>
</footer>
<!-- 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(function(){
'use script';
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>