https://keiopicnicclub.github.io/index.html

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="description" content="">
8    <meta name="author" content="">
9    <link rel="shortcut icon" href="assets/ico/favicon.png">
10
11    <title>KEPC - 京王線ピクニッククラブ</title>
12
13    <!-- Bootstrap core CSS -->
14    <link href="assets/css/bootstrap.css" rel="stylesheet">
15
16    <!-- Custom styles for this template -->
17    <link href="assets/css/main.css" rel="stylesheet">
18
19    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
20
21    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
22    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
23
24    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
25    <!--[if lt IE 9]>
26      

26<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

26
27      

27<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

27
28    <![endif]-->
29
30    

30<script src="assets/js/modernizr.custom.js"></script>

30
31
32  </head>
33
34  <body>
35
36	<!-- Menu -->
37	<nav class="menu" id="theMenu">
38		<div class="menu-wrap">
39			<h1 class="logo"><a href="index.html#home">KEPC</a></h1>
40			<i class="fa fa-arrow-right menu-close"></i>
41			<a href="index.html">Home</a>
42			<a href="works.html">Works</a>
43			<a href="Pic/index.html">Photos</a>
44			<a href="team.html">Team</a>
45			<!--<a href="rooftop.html">Rooftop Picnic Tokyo</a>-->
46			<a href="mailto:[email protected]">Contact</a>
47			<a href="https://www.facebook.com/keiopicnicclub"><i class="fa fa-facebook"></i></a>
48			<!--<a href="#"><i class="fa fa-twitter"></i></a>-->
49			<!--<a href="#"><i class="fa fa-dribbble"></i></a>-->
50			<a href="mailto:[email protected]"><i class="fa fa-envelope"></i></a>
51		</div>
52
53		<!-- Menu button -->
54		<div id="menuToggle"><i class="fa fa-bars"></i></div>
55	</nav>
56
57	<!-- MAIN IMAGE SECTION -->
58	<div id="headerwrap">
59		<div class="container">
60			<div class="row">
61				<div class="col-lg-8 col-lg-offset-2">
62					<h1>KEPC</h1>
63					<h2>We are Keio-line Picnic Club</h2>
64					<div class="spacer"></div>
65					<i class="fa fa-angle-down"></i>
66				</div>
67			</div><!-- row -->
68		</div><!-- /container -->
69	</div><!-- /headerwrap -->
70
71	<!-- WELCOME SECTION -->
72    <div class="container">
73      <div class="row mt">
74      	<div class="col-lg-8">
75          <div class="spacer"></div>
76	        <h2>好きなひと と 好きな場所 が増える</h2>
77          <div class="spacer"></div>
78	        <p>私たちは東京の都心から郊外へと東西に延びる京王線沿線を主に舞台として活動するピクニッククラブです。
79            <br><br>「ピクニックしたい」<br>「楽しむことに貪欲でありたい」<br>「都市空間を再定義したい」<br><br>の３つの基本的欲求を原動力に、
80ピクニックを楽しむことを通して、豊かなライフスタイルとは何かを感じ、考えています。
81お外でみんなが輪になってご飯を食べ、会話を交わすことで生まれる体験とコミュニケーションはピクニックでしか得られないもの。
82ピクニックの楽しさと豊かさを追求することで、都心から郊外に延びる京王線というリニアなエリアで現代における豊かな都市生活を提案したい。</p>
83      	</div>
84      	<div class="col-lg-4">
85      		<p class="pull-right">
86            <br>
87            <a href="https://www.facebook.com/keiopicnicclub"><button type="button" class="btn btn-green">Facebook ページへ</button></a>
88          </p>
89      	</div>
90      </div><!-- /row -->
91      <div class="spacer"></div>
92    </div><!-- /.container -->
93
94    <!-- SUB IMAGE SECTION -->
95    <div id="subwrap0">
96      <div class="container">
97        <div class="spacer"></div>
98        <div class="spacer"></div>
99        <h2>ピクニックを楽しもう</h2>
100        <img class="headerlogo" src="assets/img/logo/kepc_logo_white.png" />
101        <div class="row">
102        </div>
103      </div>
104    </div>
105
106    <!-- PORTFOLIO SECTION -->
107    <div id="portfolio">
108    	<div class="container">
109	    	<div class="row mt">
110          <div class="spacer"></div>
111          <h1>NEWS</h1>
112  				<ul class="grid effect-2" id="grid">
113            <li><a href="works.html#works2018"><img src="assets/img/works/kepc31.jpg"></a></li>
114            <li><a href="works.html#works2017"><img src="assets/img/works/kepc30.jpg"></a></li>
115            <li><a href="works.html#works2017"><img src="assets/img/works/ivory102.png"></a></li>
116            <li><a href="works.html#works2017"><img src="assets/img/works/kepc29.jpg"></a></li>
117            <li><a href="works.html#works2016"><img src="assets/img/works/kepc28.jpg"></a></li>
118            <li><a href="works.html#works2016"><img src="assets/img/works/kepc27.jpg"></a></li>
119            <li><a href="works.html#works2016"><img src="assets/img/works/sotonoba01.png"></a></li>
120            <li><a href="works.html#works2015"><img src="assets/img/works/kepc26.jpg"></a></li>
121            <li><a href="works.html#works2015"><img src="assets/img/works/kepc25.jpg"></a></li>
122  				</ul>
123          <div class="spacer"></div>
124	    	</div><!-- row -->

125	    </div><!-- container -->
126    </div><!-- portfolio -->
127
128
129	<!-- SERVICES SECTION -->
130	<div id="services">
131		<div class="container">
132			<div class="row mt">
133				<div class="col-lg-1 centered">
134					<i class="fa fa-globe"></i>
135				</div>
136        <div class="col-lg-3">
137					<h3>ピクニッククラブとは</h3>
138					<p>2002年にピクニック生誕200年を記念して結成された東京ピクニッククラブを走りとして、日本全国でピクニッククラブが生まれています。
139          私たちは2010年より活動を開始してから一貫して、ピクニックのイメージとは一見結びつかない「+α」を組み合わせて新しい公共空間の使い方・遊び方を開拓しています。</p>
140				</div>
141
142        <div class="col-lg-1 centered">
143					<i class="fa fa-certificate"></i>
144				</div>
145				<div class="col-lg-3">
146					<h3>なぜ京王線？</h3>
147					<p>学生時代に京王線を利用して過ごしたメンバーを中心として始めたため、
148            日常的に利用している京王線というリニアなエリアに着目しました。
149            京王線は路線が地上を走っている部分が多く、電車に乗っていながら街を散歩しているような気分にさせてくれます。
150            駅も街に馴染んだ小ぶりな駅が多く、ちょっと途中下車したくなるような街にあふれています。
151            ピクニックや街歩きを通して、京王沿線の素敵な空間や公園、お店などを発見していきたいです。</p>
152				</div>
153
154				<div class="col-lg-1 centered">
155					<i class="fa fa-question-circle"></i>
156				</div>
157				<div class="col-lg-3">
158					<h3>ロゴのひみつ</h3>
159					<p>ロゴはいわば、わたしたちの分身。
160            京王線ピクニッククラブのロゴにはいろんな意味が含まれています。
161            京王線の路線図をよーく目を凝らして見てみると…。</p>
162				</div>
163
164			</div><!-- row -->
165      <div class="spacer"></div>
166		</div><!-- container -->
167	</div><!-- services section -->
168
169  <!-- SUB IMAGE SECTION -->
170  <div id="subwrap1">
171    <div class="container">
172      <div class="row">
173        <div id="mapbg">
174          <iframe height="700px" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="opacity: 0.35;" src="map.html"></iframe>
175          <!--<iframe height="700px" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="opacity: 0.35;" src="https://a.tiles.mapbox.com/v4/kepc.lm2dpi3d/attribution.html?access_token=pk.eyJ1Ijoia2VwYyIsImEiOiJRMDgySDFBIn0.mHm6-fL0FipR7vnzmPNLZg"></iframe>-->
176          <h2>Rooftop Picnic Tokyo</h2>
177        </div>
178      </div><!-- row -->
179    </div><!-- /container -->
180  </div><!-- /headerwrap -->
181
182	<!-- CALL TO ACTION -->
183	<div id="call">
184		<div class="container">
185			<div class="row">
186				<h3>屋上×ピクニック</h3>
187				<div class="col-lg-8 col-lg-offset-2">
188					<p>屋上を公共空間と見立てて都市に素敵な場所を増やしていくプロジェクト。<br>
189            衛星から見た都市は当然ながら多くを屋上が占めており、総面積で考えれば膨大な外部空間が有益な使い道を持たない場所になっています。
190            もし、街の屋上が公園のように公共空間としてふるまい、みんなが好きなように使える場所が増えたら、きっと街はもっと楽しくなります。
191            ピクニックを通して、屋上の公共空間としての可能性を探り、考え、実践していきます。</p>
192					<!--<p><a href="rooftop.html"><button type="button" class="btn btn-green">プロジェクト ページへ</button></a></p>-->
193				</div>
194			</div><!-- row -->
195		</div><!-- container -->
196	</div><!-- Call to action -->
197
198  <!-- SUB IMAGE SECTION -->
199  <!--<div id="subwrap2">
200    <div class="container">
201      <div class="spacer"></div>
202      <div class="spacer"></div>
203      <h2>Picnic Wedding</h2>
204      <div class="row">
205      </div>
206    </div>
207  </div>
208
209	<div id="call">
210		<div class="container">
211			<div class="row">
212				<h3>結婚式×ピクニック</h3>
213				<div class="col-lg-8 col-lg-offset-2">
214					<p>Coming soon...</p>
215					<p><button type="button" class="btn btn-green btn-lg">Call To Action Button</button></p>
216				</div>
217			</div>
218		</div>
219	</div>-->
220
221	<div class="container">
222		<div class="row mt">
223			<div class="col-lg-12">
224				<h1></h1>
225				<p></p>
226        <p>Copyright ©2015 KEIO Picnic Club.<img class="footerlogo" src="assets/img/logo/kepc_logo.png" /></p>
227				<br>
228			</div><!-- col-lg-12 -->
229		</div><!-- row -->
230	</div><!-- container -->
231
232
233    <!-- Bootstrap core JavaScript
234    ================================================== -->
235    <!-- Placed at the end of the document so the pages load faster -->
236    

236<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

236
237    

237<script src="assets/js/bootstrap.min.js"></script>

237
238    

238<script src="assets/js/main.js"></script>

238
239	

239<script src="assets/js/masonry.pkgd.min.js"></script>

239
240	

240<script src="assets/js/imagesloaded.js"></script>

240
241    

241<script src="assets/js/classie.js"></script>

241
242	

242<script src="assets/js/AnimOnScroll.js"></script>

242
243	

243<script>

243
244    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
245    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
246    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
247    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
248
249    ga('create', '

249UA-17781882-4

249', 'auto');
250    ga('send', 'pageview');
251
252		

252new AnimOnScroll( document.getElementById( 'grid' ), {
253			minDuration : 0.4,
254			maxDuration : 0.7,
255			viewportFactor : 0.2
256		} );
257	</script>

257
258  </body>
259</html>