yamanouchi-renovation/index.html at master · risagon/yamanouchi-renovation · GitHub

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
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!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">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>山ノ内町建築コンペ</title>
    <meta name="description" content="
      自分たちの手で実際に家をリノベーションできる、学生向け建築コンペを長野県山ノ内町で開催します。
      コンペに参加する皆さんには、
      若者に「非日常な体験」を提供できる、若者が集まる拠点ハウス
      を考えていただきます。
      山ノ内町で過ごした人、過ごそうとしている人々が拠点ハウスにやってきて、いつもの毎日とは一味違う、素敵な時間を過ごす。
      そんな空間を作り出すハウスのアイデアを広く集めるために、本コンペを実施します。">

    <meta property="og:site_name" content="山ノ内町建築コンペ">
    <meta property="og:title" content="山ノ内町建築コンペ">
    <meta property="og:description" content="
      自分たちの手で実際に家をリノベーションできる、学生向け建築コンペを長野県山ノ内町で開催します。
      コンペに参加する皆さんには、
      若者に「非日常な体験」を提供できる、若者が集まる拠点ハウス
      を考えていただきます。
      山ノ内町で過ごした人、過ごそうとしている人々が拠点ハウスにやってきて、いつもの毎日とは一味違う、素敵な時間を過ごす。
      そんな空間を作り出すハウスのアイデアを広く集めるために、本コンペを実施します。">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://yamanouchi-renovationcompe.com">
    <meta property="og:image" content="http://yamanouchi-renovationcompe.com/img/ogp_image.png">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:image" content="http://yamanouchi-renovationcompe.com/img/ogp_image.png">
    <meta name="twitter:site" content="実際に家をリノベーションできる、学生向け建築コンペを長野県山ノ内町で開催します。">

    <link rel="shortcut icon" ype="image/vnd.microsoft.icon" href="./img/favicon.ico">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
    <link rel="stylesheet" href="./index.css">

    <link href="https://fonts.googleapis.com/css?family=Amatic+SC:400|Rancho" rel="stylesheet">
    <link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
  </head>
  <body>
    <div class="wrapper" id="landing">
      <div class="d-flex">
        <img src="./img/nagano.png" alt="山ノ内町建築コンペ">
        <div class="col">
          <div class="position-absolute text-right btns">
            <div class="btn more-btn">
              LEARN MORE
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper bg-white" id="concept" name="concept">
      <div class="title">
        <div class="text-center">
          <i class="fa fa-home"></i>
        </div>
        <h2 class="text-center">About</h2>
      </div>
      <div class="my-5 concept-content">
        <p>
          長野県北部にある山ノ内町には志賀高原と呼ばれる国立公園があり、1年を通して大自然が楽しめます。<br>
          志賀高原だけでなく、スノーモンキーパークや温泉といった観光資源をもつ山ノ内町では現在、若者の観光客数が減少しているという問題を抱えています。
        </p>
        <p>
          <strong>若者が山ノ内町に来て活動し、山ノ内町が盛り上がる。</strong>
        </p>
        <p>
          そんな未来を作るために、コンペに参加する皆さんには<br>
          若者に「非日常な体験」を提供できる、若者が集まる拠点ハウス
          を考えていただきます。<br>
          山ノ内町で過ごした人、過ごそうとしている人々が拠点ハウスにやってきて、いつもの毎日とは一味違う、素敵な時間を過ごす。<br>
          そんな空間を作り出すハウスのアイデアを広く集めるために、本コンペを実施します。<br>
        </p>
        <p>
          本建築コンペは<strong>長野県元気づくり支援金事業</strong>です。詳細は<a href="https://www.pref.nagano.lg.jp/shinko/kensei/shichoson/shinko/shienkin/index.html">こちら</a>。
        </p>
      </div>
    </div>
    <div class="wrapper" id="architecture">
      <div class="title">
        <div class="text-center">
          <i class="fa fa-home text-white"></i>
        </div>
        <h2 class="text-white text-center">Architecture</h2>
      </div>
      <div class="my-5 px-4 py-4 text-white font-weight-bold architecture-content">
        <p>
          本建築コンペでは、コンペで出たアイデアをもとに実際に建物をリノベーションします。<br>
          コンペに参加する方はリノベーションにも参加することができます。
        </p>
        <p>
          リノベーションする対象の建物は山ノ内町建築コンペの初日に参加者全員で見学します。
        </p>
      </div>
    </div>
    <div class="wrapper bg-deepblue" id="yamanouchi">
      <div class="title">
        <div class="text-center">
          <i class="fa fa-home text-white"></i>
        </div>
        <h2 class="text-center text-white">Yamanouchi Machi</h2>
      </div>
      <div class="row">
        <p class="col-12 text-white">リノベーションする建物がある山ノ内町を紹介した写真や動画です。<br>写真、動画をクリックすると拡大・再生できます。</p>
        <div class="col-6 col-md-4">
          <div class="py-3 pr-3 position-relative" data-toggle="video-modal" data-video="Uzt3snLkEcg">
            <div class="d-flex justify-content-center align-items-center bg-white text-deepblue rounded-circle position-absolute icon">
              <i class="fab fa-youtube"></i>
            </div>
            <div class="embed-responsive embed-responsive-4by3">
              <div class="d-flex justify-content-center align-items-center w-100 embed-responsive-item thumbnail" style="background-image: url('http://img.youtube.com/vi/Uzt3snLkEcg/hqdefault.jpg')" >
                <i class="fas fa-play"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-4">
          <div class="py-3 pr-3 position-relative" data-toggle="video-modal" data-video="UZn0aV5GfvI">
            <div class="d-flex justify-content-center align-items-center bg-white text-deepblue rounded-circle position-absolute icon">
              <i class="fab fa-youtube"></i>
            </div>
            <div class="embed-responsive embed-responsive-4by3">
              <div class="d-flex justify-content-center align-items-center w-100 embed-responsive-item thumbnail" style="background-image: url('http://img.youtube.com/vi/UZn0aV5GfvI/hqdefault.jpg')" >
                <i class="fas fa-play"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-4">
          <div class="py-3 pr-3 position-relative" data-toggle="video-modal" data-video="XYs2DhgMDOc">
            <div class="d-flex justify-content-center align-items-center bg-white text-deepblue rounded-circle position-absolute icon">
              <i class="fab fa-youtube"></i>
            </div>
            <div class="embed-responsive embed-responsive-4by3">
              <div class="d-flex justify-content-center align-items-center w-100 embed-responsive-item thumbnail" style="background-image: url('http://img.youtube.com/vi/XYs2DhgMDOc/hqdefault.jpg')" >
                <i class="fas fa-play"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="col-6 col-md-4">
          <div class="py-3 pr-3 position-relative" data-toggle="modal" data-target="#photoModal">
            <div class="d-flex justify-content-center align-items-center bg-white text-deepblue rounded-circle position-absolute icon">
              <i class="fa fa-image"></i>
            </div>
            <div class="embed-responsive embed-responsive-4by3">
              <div class="d-flex justify-content-center align-items-center w-100 embed-responsive-item thumbnail" style="background-image: url('./img/monkey.jpg')" >
                <i class="fas fa-image"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
        <div class="modal-dialog modal-lg d-flex align-items-center h-100" role="document">
          <div class="modal-content border-0 p-0">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe type="text/html"
                class="embed-responsive-item"
                src=""
                frameborder="0"
                allowfullscreen>
              </iframe>
            </div>
            <button type="button" class="btn close-btn" data-dismiss="modal">×</button>
          </div>
        </div>
      </div>
      <div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="photoModal" aria-hidden="true">
        <div class="modal-dialog modal-lg d-flex align-items-center h-100" role="document">
          <div class="modal-content border-0 p-0">
            <div class="embed-responsive embed-responsive-16by9">
              <div class="embed-responsive-item thumbnail" style="background-image: url('./img/monkey.jpg')" >
              </div>
            </div>
            <button type="button" class="btn close-btn" data-dismiss="modal">×</button>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper bg-white" id="outline">
      <div class="title">
        <div class="text-center">
          <i class="fa fa-home text-deepblue"></i>
        </div>
        <h2 class="text-center text-deepblue">Outline</h2>
      </div>
      <div class="d-flex flex-wrap">
        <div class="col-12 col-md-6 my-4">
          <div class="d-flex flex-wrap justify-content-center">
            <div class="d-flex justify-content-center align-items-center icon">
              <i class="fa fa-calendar-alt"></i>
            </div>
            <div class="col font-weight-bold">
              <div class="outline-title">
                日程
              </div>
              <div>
                7または8月にワークショップを開きます。<br>
                コンペ合宿は <br>
                2018年9月11日から2018年9月15日。
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 my-4">
          <div class="d-flex flex-wrap">
            <div class="d-flex justify-content-center align-items-center icon">
              <i class="fa fa-users"></i>
            </div>
            <div class="col font-weight-bold">
              <div class="outline-title">
                人数
              </div>
              <div>
                30名
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 my-4">
          <div class="d-flex flex-wrap">
            <div class="d-flex justify-content-center align-items-center icon">
              <i class="fa fa-yen-sign"></i>
            </div>
            <div class="col font-weight-bold">
              <div class="outline-title">
                参加費用
              </div>
              <div>
                ￥20,000程度<br>
                (補助金により変動します)
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 my-4">
          <div class="d-flex flex-wrap">
            <div class="d-flex justify-content-center align-items-center icon">
              <i class="fa fa-check-circle"></i>
            </div>
            <div class="col font-weight-bold">
              <div class="outline-title">
                参加条件
              </div>
              <div>
                今年度も来年度も学生であること<br>
                建築学科が望ましい<br>
                (大学院に進学する学生も対象です)
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 my-4">
          <div class="d-flex flex-wrap">
            <div class="d-flex justify-content-center align-items-center icon">
              <i class="fa fa-edit"></i>
            </div>
            <div class="col font-weight-bold">
              <div class="outline-title">
                宿泊先
              </div>
              <div>
                志賀高原 癒しの湯 幸の湯<br>
                詳細は<a href="http://sachinoyu.com/">こちら</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 my-4">
          <div class="d-flex flex-wrap">
            <div class="d-flex justify-content-center align-items-center icon">
              <i class="fa fa-calendar-times"></i>
            </div>
            <div class="col font-weight-bold">
              <div class="outline-title">
                募集締め切り
              </div>
              <div>
                2018年5月31日
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 mt-5 mb-3 text-center">
          <div class="d-inline-block px-3 px-sm-5 py-3 register-btn">
            受付は終了しました
          </div>
        </div>
        <div class="col-12 font-weight-bold caution">
          ※申込者数が上限を超えた場合、ご参加をお断りする場合がございます。申し込み締切日の1、2日後に、申し込み時に入力していただくメールアドレス宛に参加可・不可の連絡をいたします。
        </div>
      </div>
    </div>
    <div class="wrapper bg-deepblue text-white" id="organizers">
      <div class="title">
        <div class="text-center">
          <i class="fa fa-home text-white"></i>
        </div>
        <h2 class="text-white text-center">organizer</h2>
      </div>
      <div class="d-flex flex-wrap justify-content-center">
        <div class="px-4 col-12 col-md-5 text-center">
          <img src="./img/umiyama.jpg" alt="海山裕太">
          <div class="text-center font-weight-bold mt-3">
            海山裕太
          </div>
          <p class="text-left">
            参加者がスムーズに、そして楽しんで活動できるように頑張りたいと思います！
          </p>
        </div>
        <div class="px-4 col-12 col-md-5 text-center">
          <img src="./img/ishiwata.jpg" alt="石渡萌生">
          <div class="text-center font-weight-bold mt-3">
            石渡萌生
          </div>
          <p class="text-left">
            自分たちで考え、手を動かしてつくる楽しさを感じていただけたら嬉しいです！
          </p>
        </div>
      </div>
    </div>
    <div class="wrapper" id="contact">
      <div class="title">
        <div class="text-center">
          <i class="fa fa-home"></i>
        </div>
        <h2 class="text-center">Contact</h2>
      </div>
      <div class="text-center">
        お問い合わせは
        <a href="mailto:umiyama98@gmail.com">海山裕太(umiyama98@gmail.com)</a>まで
      </div>
    </div>
  </body>
  <script type="text/javascript">
    $(function(){
      $("[data-toggle='video-modal']").on('click', function(){
        $('#videoModal iframe').attr({'src': 'http://www.youtube.com/embed/'+ $(this).attr('data-video') +'?autoplay=1'});
        $('#videoModal').modal('show');
      })
      $('#videoModal').on('hide.bs.modal', function(){
        $('#videoModal iframe').attr({'src': ''});
      })
      const content_top = $("#concept").offset().top;
      $('.more-btn').on('click', function(){
        $('html,body').animate({ scrollTop: content_top }, 'cubic-bezier(0.68, -0.55, 0.27, 1.55)');
      })
    })
  </script>
</html>