-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathlayout.html
More file actions
303 lines (301 loc) · 15.6 KB
/
layout.html
File metadata and controls
303 lines (301 loc) · 15.6 KB
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
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>갓챠</title>
<link rel="stylesheet" href="./src/css/index.css">
</head>
<body>
<div class="skipNavigation">
<a href="#continue">이어보기 바로가기</a>
<a href="#wanted">보고싶어요 바로가기</a>
<a href="#trending">인기작 바로가기</a>
</div>
<div class="topBanner is-active">
<p class="topBanner__desc">왓챠가 그립지 않으세요? 다시 돌아오셔서 모든 영화, 드라마 무제한으로 감상하세요.</p>
<div class="topBanner__btnGroup">
<button class="topBanner__btnGroup--button btn-primary">이용권 구매</button>
<button class="topBanner__btnGroup--button">쿠폰 등록</button>
</div>
<button class="topBanner--closeButton" aria-label="배너 닫기"></button>
</div>
<header class="header">
<h1 class="header__logo">
<a href="/" class="header__logo--link">
<img src="./src/images/common/logo_top.svg" alt="GOTCHA">
</a>
</h1>
<nav>
<h2 class="a11y-hidden">메인 메뉴</h2>
<div class="header__naviWrap">
<button type="button" class="header--openButton">메뉴</button>
<ul class="header__navigation">
<li class="header__navigation--item tabMenu">
<a href="#" class="header__navigation--link tab-open">탐색하기</a>
<ul class="tabMenu__container">
<li class="tabMenu__item is-active">
<button type="button" class="tabMenu__header tabMenu__header--genre">장르</button>
<ul class="tabMenu__panel">
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link item-new">새로 올라온 작품</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">새로운 에피소드</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">공개 예정인 작품</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">왓챠 익스클루시브</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">영어 자막 지원 작품</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">TV 드라마</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">TV 애니메이션</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">재난</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">로맨틱코디미</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">시트콤</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">SF</a>
</li>
<li class="tabMenu__panel--item">
<a href="" class="tabMenu__panel--link">시대극</a>
</li>
</ul>
</li>
<li class="tabMenu__item">
<button type="button" class="tabMenu__header tabMenu__header--country">국가</button>
<ul class="tabMenu__panel">
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">독일</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">캐나다</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">이탈리아</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">스페인</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">대만</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">영국</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">프랑스</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">인도</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">홍콩</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">중국</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">미국</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">일본</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">한국</a>
</li>
</ul>
</li>
<li class="tabMenu__item">
<button type="button" class="tabMenu__header tabMenu__header--point">특징</button>
<ul class="tabMenu__panel">
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">재능</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">완성도</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">워킹타이틀</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">단편기반</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">마약</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">악역</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">치열한</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">오디션</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">퍼포먼스</a>
</li>
<li class="tabMenu__panel--item">
<a href="#" class="tabMenu__panel--link">뉴욕배경</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="header__navigation--item">
<a href="#" class="header__navigation--link eval-button">평가하기</a>
</li>
<li class="header__navigation--item">
<a href="#" class="header__navigation--link">보고싶어요</a>
</li>
</ul>
</div>
</nav>
<div class="header__searchForm">
<h2 class="a11y-hidden">검색 영역</h2>
<button type="button" class="header__searchForm--button">검색</button>
<form>
<fieldset>
<legend class="a11y-hidden">검색 영역</legend>
<label for="searchInput" class="a11y-hidden">검색</label>
<span class="header__searchForm--input">
<input type="search" id="searchInput" placeholder="제목, 감독, 배우로 검색">
</span>
</fieldset>
</form>
<div class="header__trending">
<h3 class="header__trending--Title">인기 검색어</h3>
<ul class="header__trending--list">
<li class="header__trending--item">
<a href="#" class="header__trending--link">소리도 없이</a>
</li>
<li class="header__trending--item">
<a href="#" class="header__trending--link">해리포터와 마법사의 돌</a>
</li>
<li class="header__trending--item">
<a href="#" class="header__trending--link">와이 우먼 킬</a>
</li>
<li class="header__=trending--item">
<a href="#" class="header__trending--link">와이 우먼 킬2</a>
</li>
</ul>
</div>
</div>
<div class="header__userConfig">
<button class="header__userConfig--user">쓰리박</button>
<div class="header__userConfig--list">
<ul class="header__userConfig--profile">
<li><a href="#" class="profile-icon"><i class="icon-kids"></i>키즈</a></li>
<li><a href="#" class="profile-icon"><i class="icon-custom"></i>박쓰</a></li>
</ul>
<ul class="header__userConfig--edit">
<li><a href="#">프로필 편집</a></li>
</ul>
<ul class="header__userConfig--watched">
<li><a href="#">이어보기</a></li>
<li><a href="#">다 본 작품</a></li>
</ul>
<ul class="header__userConfig--others">
<li><a href="#">설정</a></li>
<li><a href="#">공지사항</a></li>
<li><a href="#">초대하기</a><i class="icon-new"></i></li>
<li><a href="#">고객센터</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
</div>
</div>
</header>
<main class="main">
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
<aside class="controller">
<a href="#" target="_blank" rel="noopener noreferrer" class="controller__random">
<img src="./src/images/common/img_gotcha_random.svg" alt="갓챠 랜덤플레이">
</a>
<a href="#" class="controller__topButton">페이지 TOP으로</a>
</aside>
<footer class="footer">
<ul class="footer__service">
<li class="footer__service--item">
<button type="button">갓챠피디아 서비스 이용약관</button>
</li>
<li class="footer__service--item">
<button type="button"><strong>개인정보 처리 방침</strong></button>
</li>
<li class="footer__service--item">
<button type="button">왓챠 서비스 이용약관</button>
</li>
<li class="footer__service--item">
<a href="#">고객센터</a>
</li>
<li class="footer__service--item">
<a href="#">채용정보</a>
</li>
</ul>
<address class="footer__address">
<dl class="footer__address__content">
<div class="footer__address__content--item">
<dt>고객센터(이용 및 결제 문의)</dt>
<dd>
<a href="mailto:cs@watcha.co.kr">cs@watcha.co.kr</a> /
<a href="tel:02-515-9985">02-515-9985(유료)</a>
</dd>
</div>
<div class="footer__address__content--item">
<dt>제휴 및 대회 협력</dt>
<dd>
<a href="https://watcha.team/contact" target="_blank" rel="noopener noreferrer">https://watcha.team/contact</a>
</dd>
</div>
<div class="footer__address__content--item">
<dt>B2B 이용권 구매 문의</dt>
<dd>쿠프마케팅(<a href="mailto:m_oper@coopnc.com">m_oper@coopnc.com</a> / <a href="tel:070-4020-5289">070-4020-5289</a>)
</dd>
</div>
</dl>
<div class="footer__address--info">
<span>주식회사 갓챠</span>
<span>대표 김호야</span>
<span>서울시 서초구 강남대로 343 신덕빌딩 3층</span>
<span>사업자등록번호 211-88-66013</span>
<span>통신판매업 신고번호 제 2019-서울서초-0965호</span>
</div>
</address>
<ul class="footer__sns">
<li><a href="https://www.facebook.com/watchaKR" target="_blank" rel="noopener noreferrer"
class="footer__sns--item facebook">페이스북</a></li>
<li><a href="https://twitter.com/watcha_kr" target="_blank" rel="noopener noreferrer"
class="footer__sns--item twitter">트위터</a></li>
<li><a href="https://www.instagram.com/watcha_kr/" target="_blank" rel="noopener noreferrer"
class="footer__sns--item instagram">인스타그램</a></li>
<li><a href="https://watcha.team/" target="_blank" rel="noopener noreferrer"
class="footer__sns--item blog">블로그</a></li>
</ul>
<div class="footer__rights">
<a href="/" class="footer__rights--logo">
<img src="./src/images/common/logo_footer.svg" alt="GOTCHA">
</a>
<small class="footer__rights--copyright">Copyright © 2021 by Gotcha, Inc. All rights reserved.</small>
</div>
</footer>
<script src="src/js/common.js"></script>
</body>
</html>
<source/>