-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
361 lines (361 loc) · 14.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
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./css/index.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
</head>
<body>
<div id="root">
<main>
<section class="header">
<div class="header-inner">
<h1>
<img src="./img/logo-w.svg" />
</h1>
<div class="header-inner__info">
<p>Shibuya Media Pedia</p>
<h2>
<span>渋谷の都市媒体を<br />網羅していくメディアサイト</span>
</h2>
<a href="#">
<p>View Detail</p>
<i class="fas fa-arrow-right"></i>
</a>
</div>
<a class="header-inner__ohh" href="#">
<div class="header-inner__ohh__info">
<h3>OOH 360° View Generator</h3>
<p>OOHを360°で閲覧したり<br />掲出イメージを作成できます</p>
</div>
<div class="header-inner__ohh__img">
<img src="./img/ooh.jpg" alt="" />
<span>
<i class="fas fa-arrow-right"></i>
</span>
</div>
</a>
</div>
<div class="header-cover"></div>
</section>
<div class="menu">
<div class="menu-inner">
<h1>
<a href="/"><img src="./img/logo-b.svg" /></a>
</h1>
<ul>
<li>施設から探す</li>
<li>マップから探す</li>
<li>ジャンルから探す</li>
</ul>
</div>
<div class="menu-bottom">
<a href="#" class="menu-bottom__btn">
<p>お問い合わせ</p>
<img src="./img/icon-mail.svg" />
</a>
<a href="#" class="menu-bottom__icon">
<span class="star">0</span>
<i class="fas fa-star"></i>
</a>
<a href="#" class="menu-bottom__icon">
<i class="fas fa-search"></i>
</a>
<a href="#" class="menu-bottom__icon lineAll">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</a>
</div>
</div>
<section class="about">
<div class="about-content">
<div class="about-content__info">
<h2>About Shibuya Media</h2>
<p>
世界から注目を集める都市メディア 「Shibuya Media」。<br />渋谷は毎週221万人が来訪し、10代~20代の若者が多く集う世界が注目する都市媒体です。
</p>
<a href="#">
<p>View Detail</p>
<i class="fas fa-arrow-right"></i>
</a>
</div>
<div class="about-content__img">
<img src="./img/map.png" />
</div>
</div>
</section>
<section class="feature">
<div class="feature-content">
<div class="feature-content__info">
<h2>Feature</h2>
<p>おすすめメディアのご紹介</p>
<div class="feature-content__info__lists">
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
</div>
<div class="info__meg">
<h4>渋谷スクランブルスクエアビジョン</h4>
<p>
渋谷スクランブルスクエアに設置された、国内最大で迫力のある大型屋外ビジョンです。
</p>
<span>SCSQ</span>
</div>
</a>
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
</div>
<div class="info__meg">
<h4>
フクラスビジョンセット<br />(フロントビジョン/エントランスビジョン)
</h4>
<p>
渋谷フクラスに設置された大型ビジョンです。JR渋谷駅西口から視認が可能なフロントビジョンと、隣接する交差点から視認が可能なエントランスビジョンの2面のセットとなります。
</p>
<span>50㎡以下</span><span>フクラス(東急プラザ渋谷)</span>
</div>
</a>
</div>
</div>
<div class="feature-content__btn">
<i class="fas fa-angle-left"></i>
<i class="fas fa-angle-right"></i>
</div>
</div>
</section>
<section class="Search">
<div class="Search-content">
<div class="Search-content__info">
<div class="Search-content__info__title">
<h2>Search</h2>
<a href="#">
<p>絞り込む</p>
<i class="fas fa-search"></i>
</a>
</div>
<p>施設から探す</p>
<div class="Search-content__info__lists">
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
<div class="info__img__hightlight">
<p>駅</p>
<span>Station</span>
</div>
</div>
<div class="info__meg">
<h4>渋谷駅構内の広告媒体を検索</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
<div class="info__img__hightlight">
<p>屋外</p>
<span>Outside</span>
</div>
</div>
<div class="info__meg">
<h4>屋外または屋内での分類で広告媒体を検索</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
<div class="info__img__hightlight">
<p>商業設施</p>
<span>Commercial facility</span>
</div>
</div>
<div class="info__meg">
<h4>地図上から広告媒体を検索</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
</div>
</div>
<div class="Search-content__info2">
<div class="Search-content__info2-1">
<p>マップから探す</p>
<div class="Search-content__info__lists">
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
<div class="info__img__hightlight">
<p>駅</p>
<span>Station</span>
</div>
</div>
<div class="info__meg">
<h4>渋谷駅構内の広告媒体を検索</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
</div>
</div>
<div class="Search-content__info2-2">
<div class="Search-content__info__title">
<p>施設から探す</p>
<a href="#">
<p>絞り込む</p>
</a>
</div>
<div class="Search-content__info__lists">
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
<div class="info__img__hightlight">
<p>駅</p>
<span>Station</span>
</div>
</div>
<div class="info__meg">
<h4>渋谷駅構内の広告媒体を検索</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
<div class="info__img__hightlight">
<p>屋外</p>
<span>Outside</span>
</div>
</div>
<div class="info__meg">
<h4>屋外または屋内での分類で広告媒体を検索</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
</div>
</div>
</div>
<div class="Search-content__info">
<p>ジャンルから探す</p>
<div class="Search-content__info__lists">
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
<div class="info__img__hightlight">
<p>駅</p>
<span>Station</span>
</div>
</div>
<div class="info__meg">
<h4>渋谷駅構内の広告媒体を検索</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
<div class="info__img__hightlight">
<p>屋外</p>
<span>Outside</span>
</div>
</div>
<div class="info__meg">
<h4>屋外または屋内での分類で広告媒体を検索</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" alt="" />
<div class="info__img__hightlight">
<p>商業設施</p>
<span>Commercial facility</span>
</div>
</div>
<div class="info__meg">
<h4>地図上から広告媒体を検索</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
</div>
</div>
</div>
</section>
<section class="Showcase">
<div class="Showcase-content">
<div class="Showcase-content__info">
<div class="Showcase-content__info__title">
<h2>Showcase</h2>
<a href="#">
<p>View All</p>
<i class="fas fa-search"></i>
</a>
</div>
<p>広告事例のご紹介</p>
<div class="Showcase-content__info__lists">
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" />
</div>
<div class="info__title">
<p>渋谷スクランブルスクエア<br/>開業告知展開</p>
</div>
<div class="info__meg">
<h4>渋谷スクランブルスクエア株式会社様が、2019年11月1日開業された渋谷スクランブルスクエア」の告知を駅構内の媒体を中心に数多く展開されました。</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" />
</div>
<div class="info__title">
<p>渋谷スクランブルスクエア<br/>開業告知展開</p>
</div>
<div class="info__meg">
<h4>渋谷スクランブルスクエア株式会社様が、2019年11月1日開業された渋谷スクランブルスクエア」の告知を駅構内の媒体を中心に数多く展開されました。</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="info__img">
<img src="./img/detail_71_1.jpg" />
</div>
<div class="info__title">
<p>渋谷スクランブルスクエア<br/>開業告知展開</p>
</div>
<div class="info__meg">
<h4>Coming Soon</h4>
<span><i class="fas fa-arrow-right"></i></span>
</div>
</a>
</div>
</div>
</div>
</section>
<section class='Generator'>
<div class="Generator__wrapper">
<div class="Generator__wrapper__info">
<p>OOH 360°View&Generator</p>
<h2>
<span>360°でメディアの周辺環境を閲覧したり、簡単にリアルな掲出イメージを制作できるツール</span>
</h2>
<a href="#">
<p>View More</p>
<i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</section >
</main>
</div>
<script src="./js/index.js"></script>
</body>
</html>