-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
351 lines (344 loc) · 16.4 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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="js/script.js" defer></script>
<title>내셔널지오그래픽_리뉴얼</title>
</head>
<body>
<div class="page_container">
<nav id="nav" class="main__nav">
<a href="#" class="nav__logo">
<img src="img/logo.png" alt="내셔널지오그래픽 로고">
</a>
<input type="checkbox" class="nav__checkbox"id="mobile_nav--toggle">
<label for="mobile_nav--toggle" class="mobile_menu">
MENU
<span class="material-icons menu_icon">
drag_handle
</span>
<span class="material-icons close_icon">
close
</span>
</label>
<div class="mobile__nav__bg">
<span class="bg"></span>
<span class="bg"></span>
<span class="bg"></span>
<span class="bg"></span>
<span class="bg"></span>
</div>
<ul class="nav__menu">
<li><a href="#">HOME</a></li>
<li><a href="#">BRAND</a></li>
<li><a href="sub.html">SHOWS</a></li>
<li><a href="#">YOUTUBE</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">MAGAZINE</a></li>
<li><a href="#">STORE</a></li>
</ul>
</nav>
<header id="header" class="main-header">
<video class="header__video" src="video/intro.m4v" muted loop autoplay></video>
<div class="header__overlay">
<hgroup class="header__main-title">
<h2>ONE STEP TO THE EDGE<br>OF IMPOSSIBLE<br>AND THEN, FURTHER.</h2>
<h3>지구와 인류 그리고 '우리'를 둘러싼 살아있는 이야기</h3>
</hgroup>
<ul class="header__social">
<li><a href="#"><img src="img/icon_yt.png" alt="유튜브 바로가기"></a></li>
<li><a href="#"><img src="img/icon_fb.png" alt="페이스북 바로가기"></a></li>
<li><a href="#"><img src="img/icon_insta.png" alt="인스타그램 바로가기"></a></li>
</ul>
</div>
<button onclick = "location.href = './index.html#news'" class="btn-scroll">
<span class="btn-scroll__mouse">
<span class="btn-scroll__wheel"></span>
</span>
<span class="btn-scroll__text">scroll</span>
</button>
</header>
<main>
<!-- 뉴스 -->
<section id="news" class="content-container">
<a href="#" class="container-title marker-left"><h2>NEWS</h2></a>
<div class="news__wrap wrap--flex">
<article class="news__article">
<a href="#" class="post-link">
<figure>
<img class="post__thumbnail" src="img/news_thumb_01.png" alt="맨몸으로_절벽을_오르는_등반가_알렉스_호놀드의_프리솔로_썸네일">
</figure>
<h5 class="article__headline">
맨몸으로 절벽을 오르는 등반가,
</h5>
<h5 class="article__headline">
알렉스 호놀드의 <프리솔로>
</h5>
</a>
</article>
<article class="news__article post">
<a href="#" class="post-link">
<figure>
<img class="post__thumbnail" src="img/news_thumb_02.png" alt="인류의_새로운_시작_그_두번째_이야기_썸네일">
</figure>
<h5 class="article__headline">
인류의 새로운 시작, 그 두번째 이야기
</h5>
</a>
</article>
<article class="news__article">
<a href="#" class="post-link">
<figure>
<img class="post__thumbnail" src="img/news_thumb_03.png" alt="일회용_플라스틱_사용_줄이기_캠페인_썸네일">
</figure>
<h5 class="article__headline">
일회용 플라스틱 사용 줄이기 캠페인!
</h5>
</a>
</article>
</div>
<!-- news wrap -->
<button class="btn-more">
<span class="material-icons btn-more__icon">
add
</span>
<span class="btn-more__text">
SEE MORE
</span>
</button>
</section>
<!-- 매거진 -->
<section id="magazine" class="content-container">
<a href="#" class="container-title marker-left"><h2>MAGAZINES</h2></a>
<div class="magazine__wrap wrap--flex">
<article class="magazine__article">
<a href="#" class="post-link">
<figure>
<img class="post__thumbnail" src="img/magazine_thumb_01.png" alt="내셔널지오그래픽_매거진_썸네일">
</figure>
<h5 class="article__headline">
내셔널지오그래픽 매거진
</h5>
<span class="article__subtitle">
9월호, 경이로운 작은 물체
</span>
</a>
</article>
<article class="magazine__article">
<a href="#" class="post-link">
<figure>
<img class="post__thumbnail" src="img/magazine_thumb_02.png" alt="내셔널지오그래픽_트래블러_매거진_썸네일">
</figure>
<h5 class="article__headline">
내셔널지오그래픽 트래블러 매거진
</h5>
<span class="article__subtitle">
9월호, DEEP DIVE INTO THE WILD
</span>
</a>
</article>
</div>
<!-- magazine_-wrap -->
<button class="btn-more">
<span class="material-icons btn-more__icon">
add
</span>
<span class="btn-more__text">
SEE MORE
</span>
</button>
</section>
<!-- 쇼 프로그램 -->
<section id="shows" class="content-container">
<a href="sub.html" class="container-title marker-left"><h2>SHOWS</h2></a>
<ul class="slide__btns">
<li><button class="prev_btn disabled">
<span class="material-icons">
arrow_back_ios
</span>
</button></li>
<li><button class="next_btn"><span class="material-icons">
arrow_forward_ios
</span></button></li>
</ul>
<div class="slide-container">
<ul class="slide">
<li>
<a href="#">
<figure>
<img src="img/slide_img_01.png" alt="늑대의_왕국">
</figure>
<span class="shows__category">WILD</span>
<span class="show__title">늑대의 왕국</span>
</a>
</li>
<li>
<a href="#">
<figure>
<img src="img/slide_img_02.png" alt="글로벌_시티즌">
</figure>
<span class="shows__category">REALITY</span>
<span class="show__title">글로벌 시티즌</span>
</a>
</li>
<li>
<a href="#">
<figure>
<img src="img/slide_img_03.png" alt="고든램지_언차티드">
</figure>
<span class="shows__category">FOOD</span>
<span class="show__title">고든램지: 언차티드</span>
</a>
</li>
<li>
<a href="#">
<figure>
<img src="img/slide_img_04.png" alt="샤크어택5">
</figure>
<span class="shows__category">SHARK FEST</span>
<span class="show__title">샤크 어택 5</span>
</a>
</li>
<li>
<a href="#">
<figure>
<img src="img/slide_img_05.png" alt="히틀러_심판의_날2">
</figure>
<span class="shows__category">MILITARY</span>
<span class="show__title">히틀러 심판의 날 2</span>
</a>
</li>
<li>
<a href="#">
<figure>
<img src="img/slide_img_06.png" alt="킹덤3">
</figure>
<span class="shows__category">WILD</span>
<span class="show__title">킹덤 III</span>
</a>
</li>
<li>
<a href="sub.html" class="slide_more">
<div>
<span class="material-icons btn-more__icon">
add
</span>
SEE MORE
</div>
</a>
</li>
</ul>
</div>
<div class="shows__bg off"></div>
</section>
<!-- 스토어 -->
<section id="store" class="content-container">
<a href="#" class="container-title marker-left"><h2>STORE</h2></a>
<div class="store__wrap wrap--flex">
<article class="store__article store__article--first">
<a href="#" class="post-link">
<figure>
<img class="post__thumbnail" src="img/store_thumb_01.png" alt="내셔널지오그래픽_어패럴">
</figure>
<h5 class="article__headline">
내셔널지오그래픽 어패럴
</h5>
<span class="article__subtitle">
2021FW 컬렉션
</span>
</a>
</article>
<article class="store__article store__article--second">
<a href="#" class="post-link">
<figure>
<img class="post__thumbnail" src="img/store_thumb_02.png" alt="스킨플레이어">
</figure>
<h5 class="article__headline">
스킨플레이어
</h5>
<span class="article__subtitle">
내셔널지오그래픽 모바일 액세서리
</span>
</a>
</article>
</div>
<!--store__wrap -->
</section>
</main>
<footer id="footer">
<div class="footer__wrap">
<ul class="footer__menu">
<li><a href="#">HOME</a></li>
<li><a href="#">BRAND</a></li>
<li><a href="sub.html">SHOWS</a></li>
<li><a href="#">YOUTUBE</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">MAGAZINE</a></li>
<li><a href="#">STORE</a></li>
</ul>
<address>
<ul class="footer__address">
<li><span>CONTACT US</span></li>
<li>
<span class="footer__address__part-name">
의류
</span>
<span class="footer__address__phone-number">
02.1588.2906
</span>
</li>
<li>
<span class="footer__address__part-name">
매거진
</span>
<span class="footer__address__phone-number">
02.2004.8800
</span>
</li>
<li>
<span class="footer__address__part-name">
트래블러 매거진
</span>
<span class="footer__address__phone-number">
02.763.8600
</span>
</li>
<li>
<span class="footer__address__part-name">
방송
</span>
<span class="footer__address__phone-number">
02.3490.2742
</span>
</li>
<li>
<span class="footer__address__part-name">
모바일 액세서리
</span>
<span class="footer__address__phone-number">
080.643.1234
</span>
</li>
</ul>
</address>
<div class="footer__info">
<span class="footer__info__copyright">
COPYRIGHT © 2018 NATIONAL GEOGRAPHIC KOREA LLT. ALL RIGHT RESERVED
</span>
<ul class="footer__info__link">
<li><a href="#">개인정보 취급방침(업데이트됨)</a></li>
<li><a href="#">이용약관</a></li>
</ul>
</div>
</div>
<!-- footer_-wrap -->
</footer>
<div class="stars"></div>
</div>
<!-- container -->
</body>
</html>