forked from PreOnBoarding-Team17/Week4_JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
289 lines (262 loc) · 12.9 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
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- device_view -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- metas_title -->
<title>꾸까 | 언제나 꽃과 함께, NO.1 플라워브랜드</title>
<meta property="og:title" content="꾸까 - kukka" />
<meta property="og:description"
content="그 시즌 가장 예쁜 꽃을 받아보는 꽃 정기구독. 당일 배송되는 꽃바구니와 전국꽃배달서비스, 꾸까 오프라인 매장에서 진행하는 플라워클래스와 원데이클래스." />
<meta property="og:image"
content="https://kukka-2-media-123.s3.amazonaws.com/static/kukkart_new/img/sns/og_kukka.png" />
<meta name="keywords" content="꾸까, 꽃배달, 전국꽃배달서비스" />
<meta name="description"
content="그 시즌 가장 예쁜 꽃을 받아보는 꽃 정기구독. 당일 배송되는 꽃바구니와 전국꽃배달서비스, 꾸까 오프라인 매장에서 진행하는 플라워클래스와 원데이클래스." />
<!-- etc -->
<link rel="icon" href="favicon.ico" />
<!-- css -->
<link rel="stylesheet" href="./CSS/Reset.css" />
<link rel="stylesheet" href="./CSS/GlobalStyles.css" />
<link rel="stylesheet" href="./CSS/GNB.css" />
<link rel="stylesheet" href="./CSS/Youtube.css" />
<link rel="stylesheet" href="./CSS/Banner.css" />
<link rel="stylesheet" href="./CSS/Slider.css" />
<link rel="stylesheet" href="./CSS/Footer.css" />
<link rel="stylesheet" href="./CSS/Modal.css" />
<!-- js -->
<script defer src="JS/GNB.js"></script>
<script defer src="./JS/Banner.js"></script>
<script defer src="./JS/Slider.js"></script>
<script defer src="./JS/Footer.js"></script>
<script defer src="./JS/Modal.js"></script>
<!--[if lt IE 9]>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="header">
<div class="mobile-header">
<div class="mobile-logo">
<a href="https://kukka.kr/"><img src="./Asset/mobile-logo.jpg" alt="logo" /></a>
</div>
<div class="mobile-img"><a href="https://kukka.kr/cart/?next=/account/login/"><img src="./Asset/shop.jpg"
class="menu-img" alt="logo" /></span></a></div>
</div>
<div class="nav-wrapper">
<nav>
<ul class="menus">
<li class="menu mobile-block">
<a href="https://kukka.kr/" class="logo"><img src="./Asset/logo.png" alt="logo" /></a>
</li>
<li class="menu">
<a href="#video"><span class="menu-text">동영상</span></a>
</li>
<li class="menu">
<a href="#flower-class"><span class="menu-text">플라워클래스</span></a>
</li>
<li class="menu mobile-block">
<a href="https://kukka.kr/account/login/?next=/account/dashboard/"><img src="./Asset/profile.jpg"
class="menu-img" alt="profile" /></a>
<a href="https://kukka.kr/cart/?next=/account/login/"><img src="./Asset/shop.jpg" class="menu-img"
alt="shopping" /></span></a>
</li>
</ul>
</nav>
</div>
</div>
<div id="video" class="youtube">
<div class="youtube-area">
<iframe id="youtube__player"
src="https://www.youtube.com/embed/N0dc-idpwoE?autoplay=1&mute=1&loop=1&playlist=N0dc-idpwoE&enablejsapi=1&origin=http://localhost:5500"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
현재 브라우저에서는 iframe 이 지원되지 않습니다
</iframe>
</div>
<a href="https://youtu.be/N0dc-idpwoE" target="youtube__player" class="youtube__caption">
kukka 꾸까│ 한 달 내내 진심을 전해요.
</a>
</div>
<div id="flower-class" class="slider">
<div class="slider__container">
<div class="slider__header">
<h3 class="slider__title">
<span>꽃과 함께 하는 일상, </span>
<b>플라워클래스</b>
</h3>
</div>
<div class="slider__body">
<div class="slider__main">
<a class="slider__main--link" href="#">
<img class="slider__main--img pc" src="./Asset/Slider/Slider_1.jpeg" alt="메인 이미지" />
<img class="slider__main--img mobile" src="./Asset/Slider/Slider_1.jpeg" alt="메인 이미지" />
<span id="main-image_pc" class="slider__main--image pc"
style="background-image: url('./Asset/Slider/Slider_1.jpeg')"></span>
<span id="main-image_mobile" class="slider__main--image mobile" style="
background-image: url('./Asset/Slider/Slider_1.jpeg');
"></span>
<strong class="slider__main--title">1월 플라워 클래스 ></strong>
<span class="slider__main--subtitle">매주 새로운 커리큘럼으로 배우는</span>
</a>
</div>
<ul class="slider__sub">
<li class="slider__sub--item first">
<div>
<dl class="slider__sub--wrapper">
<dt class="slider__sub--thumbnail">
<a class="slider__sub--thumbnail__link" style="background-image: url('./Asset/Slider/Slider_2.jpeg');"
href="">
<img class="slider__sub--thumbnail__img" src="./Asset/Slider/Slider_2.jpeg" alt="이미지">
<span id="sub-image_first" class="slider__sub--thumbnail__image"
style="background-image: url('./Asset/Slider/Slider_2.jpeg')"></span>
</a>
</dt>
<dd class="slider__sub--summary">
<span id="title_first" class="slider__sub--summary-title">오아시스 리스(2/21~2/27)</span>
<span id="price_first" class="slider__sub--summary-price">79,000원</span>
<span class="blank"></span>
<span id="chipList_first" class="slider__sub--summary-chips">
<a class="slider__sub--summary-chip purple" href="">광화문점</a>
<a class="slider__sub--summary-chip cyan" href="">잠실점</a>
<a class="slider__sub--summary-chip orange" href="">월계점</a>
<a class="slider__sub--summary-chip lightblue" href="">구로점</a>
<a class="slider__sub--summary-chip yellow" href="">송파점</a>
<a class="slider__sub--summary-chip blue" href="">부산동래점</a>
</span>
</dd>
</dl>
</div>
</li>
<li class="slider__sub--item second">
<div>
<dl class="slider__sub--wrapper">
<dt class="slider__sub--thumbnail">
<a class="slider__sub--thumbnail__link" style="background-image: url('./Asset/Slider/Slider_3.jpeg');"
href="">
<img class="slider__sub--thumbnail__img" src="./Asset/Slider/Slider_3.jpeg" alt="이미지">
<span id="sub-image_second" class="slider__sub--thumbnail__image"
style="background-image: url('./Asset/Slider/Slider_3.jpeg')"></span>
</a>
</dt>
<dd class="slider__sub--summary">
<span id="title_second" class="slider__sub--summary-title">클래식 핸드타이드(2/28~3/6)</span>
<span id="price_second" class="slider__sub--summary-price">79,000원</span>
<span class="blank"></span>
<span id="chipList_second" class="slider__sub--summary-chips">
<a class="slider__sub--summary-chip cyan" href="">잠실점</a>
<a class="slider__sub--summary-chip orange" href="">월계점</a>
<a class="slider__sub--summary-chip lightblue" href="">구로점</a>
<a class="slider__sub--summary-chip yellow" href="">송파점</a>
<a class="slider__sub--summary-chip blue" href="">부산동래점</a>
</span>
</dd>
</dl>
</div>
</li>
</ul>
<button class="slider__button-left"></button>
<button class="slider__button-right"></button>
</div>
</div>
</div>
<div class="banner">
<div class="banner__inner">
<div class="banner__header">
<h3 class="banner__header__title">꾸까 브랜드 스토리</h3>
</div>
<div class="banner__contents">
<div id="banner-carousel" class="banner__container slide">
<div class="carousel-inner" style="transform: translateX(0);">
<div class="banner__left carousel-item active">
<a href="javascript:void(0)" class="banner__link">
<img class="banner__background" src="./Asset/banner-background.png" alt="background" />
<span class="banner__real-img"></span>
<span class="banner__real-img mobile"></span>
<h3 class="banner__title">꾸까 브랜드 이야기</h3>
<p class="banner__description">
꽃으로 라이프스타일을 만들어가는 <br />kukka의 문화를 소개해요.
<span class="banner__more">Brand story</span>
</p>
</a>
</div>
<div class="banner__right carousel-item active">
<a href="javascript:void(0)" class="banner__link">
<img class="banner__background" src="./Asset/banner-background.png" alt="background" />
<span class="banner__real-img"></span>
<span class="banner__real-img mobile"></span>
<h3 class="banner__title">꾸까 오프라인 쇼룸</h3>
<p class="banner__description">
꽃을 가까이서 만져보고 향기도 맡아보고, <br />꽃 속에서 작은
휴식을 누릴 수 있는 kkuka의 오프라인 쇼룸
<span class="banner__more">꾸까 쇼룸 안내</span>
</p>
</a>
</div>
</div>
<ol class="banner__carousel__nav">
<li class="banner__carousel__nav-item active"></li>
<li class="banner__carousel__nav-item"></li>
</ol>
</div>
</div>
</div>
</div>
<div class="modal">
<div class="modal-img">
<a href="https://www.naver.com/"><img class="popup-img" src="./Asset/modal.png" alt="pop1"></a>
</div>
<div class="modal-text">
<input id="modal-check" type="checkbox" name="check" />
<label for="modal-check">오늘은 더 이상 보지 않기</label>
<span class="close"></span>
</div>
</div>
<div class="footer">
<div class="footer-wrapper">
<div class="footer__logos">
<a href="https://www.facebook.com/kukka.kr/"><img src="./Asset/facebook.png" alt="facebook" /></a>
<a href="https://www.instagram.com/kukkakorea/"><img src="./Asset/instagram.png" alt="instagram" /></a>
<a href="https://www.youtube.com/channel/UC_zQakXCUPvjcfsU067zyCQ?view_as=subscriber"><img
src="./Asset/youtube.png" alt="youtube" /></a>
</div>
<div class="footer__contact">
<div>
<span class="footer__contact-info">꾸까 고객센터</span><span class="footer__contact-phone">1661-1031</span>
</div>
<div>(평일 10:00 - 13:00, 14:00 - 18:00 / 주말 & 공휴일 제외) <a href="https://kukka.kr/faq/"
class="service-center footer__contact-pc">꾸까
고객센터 ></a></div>
<div>기업제휴 문의 : 070-4238-8251 </div>
<div class="footer__about-img"><img src="/Asset/footer-logo.jpg" alt="footer-logo" /></div>
<div class="footer__contact-last">
<a href="https://www.youtube.com/channel/UC_zQakXCUPvjcfsU067zyCQ?view_as=subscriber"
class="service-center">꾸까
고객센터 ></a>
</div>
</div>
<div class="footer__about">
<div>상호명: 꾸까(kukka)</div>
<div>사업자 등록번호: 264-81-32594</div>
<div>대표자: 박춘화</div>
<br class="br" />
<div>소재지: 서울시 서초구 남부순환로333길 10 kukka</div>
<div><a href="#">기업공시</a></div>
<div>통신판매신고번호 2018-서울서초-1692</div>
<br class="br" />
<div>© 2014-2021 kukka, Inc. All rights reserved.</div>
</div>
<div class="footer__tems">
<a href="https://kukka.kr/agreement/?next=/">이용약관</a>
<a href="https://kukka.kr/privacy/?next=/">개인정보처리방침</a>
<a href="https://partners.kukka.kr/">제휴안내</a>
</div>
</div>
</div>
</body>
</html>