-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
328 lines (300 loc) · 13.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes, minimum-scale=0.5,maximum-scale=3.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/xeicon.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="js/common.js"></script> <!--동적인 부분을 담당하는 JS-->
<title>뉴마커스</title>
</head>
<body>
<header>
<section class="site-top">
<div class="left">
<a href="#">
<i class="xi-bars"></i>
</a>
<a href="#">
<i class="xi-search"></i>
</a>
</div>
<a href="#" class="logo">
<img src="images/logo.png" alt="로고">
</a>
<div class="right">
<a href="#">
<i class="xi-user-o"></i>
</a>
<a href="#">
<i class="xi-cart-o"></i>
</a>
</div>
</section>
<nav>
<a href="#">제품 구매</a>
<a href="#">질문과 답변</a>
<a href="#">구매후기</a>
<a href="#">고객센터</a>
</nav>
</header>
<main>
<section class="main-banner">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="images/main_banner1.jpg" alt="메인배너1">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/main_banner2.jpg" alt="메인배너1">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/main_banner3.jpg" alt="메인배너1">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/main_banner4.jpg" alt="메인배너1">
</a>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<section class="sub-menus">
<a href="#">에어간판</a>
<a href="#">실사출력</a>
<a href="#">현수막&배너</a>
<a href="#">인쇄홍보물</a>
<a href="#">대량발주건</a>
<a href="#">기획상품</a>
<a href="#">특가상품</a>
<a href="#">마켓</a>
<a href="#">개인결제</a>
</section>
<section class="sub-banner">
<a href="#">
<img src="images/sub_banner1.jpg" alt="서브배너1">
</a>
<a href="#">
<img src="images/sub_banner2.jpg" alt="서브배너2">
</a>
<a href="#">
<img src="images/sub_banner3.jpg" alt="서브배너3">
</a>
</section>
<section class="products">
<h3>베스트 상품</h3>
<ul>
<li>
<a href="#" class="product-image">
<img src="images/product1.jpg" alt="상품1">
</a>
<div class="product-price">
<span class="price montserrat">110,000</span>원 ~
</div>
<div class="product-name">
LED 유선 에어간판 완제품
</div>
<div class="review-rate">
<span class="star">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
</span>
<span class="no-of-review montserrat">
1,966 리뷰
</span>
</div>
</li>
<li>
<a href="#" class="product-image">
<img src="images/product2.jpg" alt="상품2">
</a>
<div class="product-price">
<span class="price montserrat">110,000</span>원 ~
</div>
<div class="product-name">
에어간판 천갈이
</div>
<div class="review-rate">
<span class="star">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
</span>
<span class="no-of-review montserrat">
1,573 리뷰
</span>
</div>
</li>
<li>
<a href="#" class="product-image">
<img src="images/product3.jpg" alt="상품3">
</a>
<div class="product-price">
<span class="price montserrat">5,300</span>원 ~
</div>
<div class="product-name">
포맥스제작 3t 벽메뉴판 간판 재단 인쇄 출력
</div>
<div class="review-rate">
<span class="star">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
</span>
<span class="no-of-review montserrat">
329 리뷰
</span>
</div>
</li>
<li>
<a href="#" class="product-image">
<img src="images/product4.jpg" alt="상품4">
</a>
<div class="product-price">
<span class="price montserrat">11,000</span>원 ~
</div>
<div class="product-name">
배너게시대
</div>
<div class="review-rate">
<span class="star">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
</span>
<span class="no-of-review montserrat">
749 리뷰
</span>
</div>
</li>
</ul>
<button type="button" class="more-button">더보기</button>
</section>
<img src="images/sub_banner4.jpg" alt="서브배너4" class="bottom-banner">
<section class="products">
<h3>추천상품</h3>
<ul>
<li>
<a href="#" class="product-image">
<img src="images/product5.jpg" alt="상품5">
</a>
<div class="product-price">
<span class="price montserrat">8,000</span>원 ~
</div>
<div class="product-name">
투명시트지 필름 클리어 인쇄 제작 출력
</div>
<div class="review-rate">
<span class="star">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
</span>
<span class="no-of-review montserrat">
96 리뷰
</span>
</div>
</li><li>
<a href="#" class="product-image">
<img src="images/product6.jpg" alt="상품6">
</a>
<div class="product-price">
<span class="price montserrat">13,200</span>원 ~
</div>
<div class="product-name">
환갑 칠순 팔순 생신 생일 현수막
</div>
<div class="review-rate">
<span class="star">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
<img src="images/star.png" alt="별점">
</span>
<span class="no-of-review montserrat">
1,044 리뷰
</span>
</div>
</li>
</ul>
</section>
</main>
<footer>
<a href="#" class="logo">
<img src="images/logo_bottom.png" alt="하단 로고">
</a>
<a href="tel:0327651884" class="center-phone montserrat">
<img src="images/phone.png" alt="전화번호">
032.765.1884
</a>
<div class="bank-info">
입금정보:신한은행 <span class="montserrat">100-033-833284</span> (주)뉴마커스
</div>
<div class="company-info">
(주)뉴마커스 사업자 정보
<img src="images/arrow_dn.png" alt="더보기">
</div>
<div class="links">
<a href="#">회사소개</a>
<a href="#">이용약관</a>
<a href="#">개인정보처리방침</a>
<a href="#" class="last">PC버전</a>
</div>
</footer>
<section class="bottom-quick-menu">
<button type="button">
<i class="xi-bars"></i>
</button>
<div class="links">
<a href="#">
<img src="images/pen.png" alt="구매후기">
</a>
<a href="#">
</a>
<a href="#">
</a>
<a href="#">
</a>
</div>
</section>
<section class="bottom-quick-links">
<a href="#">
<img src="images/top.png" alt="상단이동">
</a>
<a href="#">
<img src="images/cs.png" alt="상담예약">
</a>
<a href="#">
<img src="images/webhard.png" alt="웹하드">
</a>
<a href="#">
<img src="images/kakao.png" alt="카카오">
</a>
</section>
<aside></aside>
</body>
</html>