-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproduct.html
305 lines (294 loc) · 16.5 KB
/
product.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
<!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, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="title" content="The Ordinary | Products">
<meta name="description" content="The Ordinary is an evolving collection of treatments offering familiar, effective clinical technologies positioned to raise integrity in skincare.">
<meta name="keywords" content="디 오디너리, 스킨 케어, 헤어 케어, 메이크업, 뷰티, 코스메틱, The Ordinary,Skin care, Hair care, Make-up, Beauty, Cosmetic">
<meta property="og:title" content="The Ordinary | Products">
<meta property="og:description" content="The Ordinary is an evolving collection of treatments offering familiar, effective clinical technologies positioned to raise integrity in skincare.">
<meta property="og:image" content="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZUYjJ%2FbtqJjFGvYnX%2FF4iKbvfAOw3pgucAxz499K%2Fimg.jpg">
<meta property="og:url" content="https://absolutelyfullycapable.github.io/the-ordinary/product.html">
<!-- twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="The Ordinary | Products">
<meta name="twitter:description" content="The Ordinary is an evolving collection of treatments offering familiar, effective clinical technologies positioned to raise integrity in skincare.">
<meta name="twitter:image" content="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZUYjJ%2FbtqJjFGvYnX%2FF4iKbvfAOw3pgucAxz499K%2Fimg.jpg">
<meta name="twitter:url" content="https://absolutelyfullycapable.github.io/the-ordinary/product.html">
<title>The Ordinary | Products</title>
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#222222">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400&family=Noto+Sans+KR:wght@300;400&display=swap" rel="stylesheet">
<!-- font-family: 'Kumbh Sans', 'Noto Sans KR', sans-serif; -->
<link rel="stylesheet" href="css/font.css">
<!-- font-family:'AntroVectra', 'TamoroScriptPersonalUseOnly', 'ZapfHumanistRoman'; -->
<!-- CSS 연결 -->
<link rel="stylesheet" href="common/normalize.css">
<link rel="stylesheet" href="css/product.css">
<!-- JS/jQuery 연결 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js"></script>
<script src="js/product.js"></script>
</head>
<body>
<div class="container">
<!-- mobile header -->
<header>
<div class="wrapper-menu">
<div class="line-menu half start"></div>
<div class="line-menu"></div>
<div class="line-menu half end"></div>
</div>
<h1><a href="index.html">The Ordinary</a></h1>
<div class="search"><a href="#"></a></div>
</header>
<!-- PC header -->
<div id="PC_header">
<ul class="menu1">
<li>제품
<ul>
<li><a href="product.html">모든 제품</a></li>
<li><a href="product.html">스킨 케어</a></li>
<li><a href="product.html">헤어 케어</a></li>
<li><a href="product.html">메이크업</a></li>
</ul>
</li>
<li>브랜드 소개</li>
<li>공지 사항</li>
<li>Q & A</li>
</ul>
<h1><a href="index.html">logo</a></h1>
<ul class="menu2">
<li>로그인</li>
<li>회원 가입</li>
<li><a href="#"><img src="images/search.svg" alt="검색 버튼"></a></li>
</ul>
</div>
<!-- search -->
<div id="search_box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" class="close"><path d="M284.286 256.002L506.143 34.144c7.811-7.811 7.811-20.475 0-28.285-7.811-7.81-20.475-7.811-28.285 0L256 227.717 34.143 5.859c-7.811-7.811-20.475-7.811-28.285 0-7.81 7.811-7.811 20.475 0 28.285l221.857 221.857L5.858 477.859c-7.811 7.811-7.811 20.475 0 28.285a19.938 19.938 0 0014.143 5.857 19.94 19.94 0 0014.143-5.857L256 284.287l221.857 221.857c3.905 3.905 9.024 5.857 14.143 5.857s10.237-1.952 14.143-5.857c7.811-7.811 7.811-20.475 0-28.285L284.286 256.002z"/></svg>
<p>search</p>
<div class="box">
<input type="text" id="search_txt" class="search_txt" autofocus>
<div class="txt"><button>검색</button></div>
</div>
</div>
<!-- mobile navigation -->
<nav>
<ul class="gnb">
<li>
<ul>
<li><a href="#">로그인</a></li>
<li><a href="#">회원 가입</a></li>
</ul>
</li>
<li><a href="product.html">All products</a></li>
<li><a href="product.html">Skin care</a></li>
<li><a href="product.html">Hair care</a></li>
<li><a href="product.html">Make-up</a></li>
<li><a href="#">브랜드 소개</a></li>
<li><a href="#">공지 사항</a></li>
<li><a href="#">Q & A</a></li>
</ul>
</nav>
<div id="banner">
<div class="txt">
<h2>All products</h2>
<p>디 오디너리의 모든 제품들을 만나 보세요!</p>
</div>
</div>
<div id="main">
<form>
<div class="select_box1">
<select name="select" id="select1">
<option value="all" selected>전체</option>
<option value="skin_care">스킨 케어</option>
<option value="hair_care">헤어 케어</option>
<option value="make_up">메이크업</option>
</select>
</div>
<div class="PC_select">
<ul>
<li class="click">전체</li>
<li>스킨 케어</li>
<li>헤어 케어</li>
<li>메이크업</li>
</ul>
</div>
<div class="select_box2">
<select name="select" id="select2">
<option value="선택1" selected>신제품순</option>
<option value="선택2">판매순</option>
<option value="선택3">리뷰순</option>
<option value="선택3">높은 가격순</option>
<option value="선택3">낮은 가격순</option>
</select>
</div>
</form>
<div class="products">
<a href="detail.html" class="product1 skin">
<ul>
<li class="img">
<img src="images/product1.jpg" alt="데일리 세트 (Daily Set)">
<div class="discount">7%</div>
<div class="cart"></div>
</li>
<li>데일리 세트 (Daily Set)</li>
<li><em>20,500 <span>원</span></em> 19,000 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product2 skin">
<ul>
<li class="img">
<img src="images/product2.jpg" alt="[대용량] 스쿠알란 클렌저 150ml">
<div class="cart"></div>
</li>
<li>[대용량] 스쿠알란 클렌저 150ml</li>
<li>19,900 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product3 makeup">
<ul>
<li class="img">
<img src="images/product3.jpg" alt="세럼 파운데이션 (14 colors)">
<div class="cart"></div>
</li>
<li>세럼 파운데이션 (14 colors)</li>
<li>7,800 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product4 makeup">
<ul>
<li class="img">
<img src="images/product4.jpg" alt="커버리지 파운데이션 (14 colors)">
<div class="cart"></div>
</li>
<li>커버리지 파운데이션 (14 colors)</li>
<li>7,900 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product5 skin">
<ul>
<li class="img">
<img src="images/product5.jpg" alt="비 오일">
<div class="cart"></div>
</li>
<li>비 오일</li>
<li>9,200 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product6 skin">
<ul>
<li class="img">
<img src="images/product6.jpg" alt="아미노 애시드 + 비5">
<div class="cart"></div>
</li>
<li>아미노 애시드 + 비5</li>
<li>6,800 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product7 skin">
<ul>
<li class="img">
<img src="images/product7.jpg" alt="아스코르빅 애씨드 8% + 알파 알부틴 2%">
<div class="cart"></div>
</li>
<li>아스코르빅 애씨드 8% + 알파 알부틴 2%</li>
<li>10,000 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product8 skin">
<ul>
<li class="img">
<img src="images/product8.jpg" alt="100% 오가닉 버진 치아 씨드 오일">
<div class="cart"></div>
</li>
<li>100% 오가닉 버진 치아 씨드 오일</li>
<li>7,700 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product9 skin">
<ul>
<li class="img">
<img src="images/product9.jpg" alt="에틸레이티드 아스코르빅 애씨드 15% 솔루션">
<div class="cart"></div>
</li>
<li>에틸레이티드 아스코르빅 애씨드 15% 솔루션</li>
<li>18,000 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product10 hair">
<ul>
<li class="img">
<img src="images/product10.jpg" alt="헤어 케어 멀티-펩타이드 세럼 포 헤어 덴시티">
<div class="cart"></div>
</li>
<li>헤어 케어 멀티-펩타이드 세럼 포 헤어 덴시티</li>
<li>17,900 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product11 skin">
<ul>
<li class="img">
<img src="images/product11.jpg" alt="100% 버진 씨-벅톤 프루트 오일">
<div class="cart"></div>
</li>
<li>100% 버진 씨-벅톤 프루트 오일</li>
<li>14,900 <span>원</span></li>
</ul>
</a>
<a href="detail.html" class="product12 skin">
<ul>
<li class="img">
<img src="images/product12.jpg" alt="비타민C 써스펜션 30% 인 실리콘">
<div class="cart"></div>
</li>
<li>비타민C 써스펜션 30% 인 실리콘</li>
<li>7,900 <span>원</span></li>
</ul>
</a>
</div>
<div class="page">
<ul>
<li><img src="images/prev.svg" alt="전 페이지로 이동하기 버튼"></li>
<li class="click">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><img src="images/next.svg" alt="다음 페이지로 이동하기 버튼"></li>
</ul>
</div>
</div>
<!-- footer -->
<footer>
<p style="color:#cccbaa;">070-7777-9014</p>
<p>MON - SUN 12:00 - 21:00</p>
<ul>
<li><a href="#">agreement</a></li>
<li><a href="#">privacy</a></li>
<li><a href="#">policy</a></li>
<li><a href="#">guide</a></li>
</ul>
<p style="color:#969687;">상호명: 데시엠아시아퍼시픽 대표 번호: 070-7777-9014 주소: 서울 강남구 압구정로12길 34-4</p>
<ul>
<li><a href="https://absolutelyfullycapable.github.io/portfolio" target="_blank">포트폴리오 바로 가기</a> </li>
<li><a href="https://github.com/absolutelyfullycapable" target="_blank">Github 바로 가기</a></li>
</ul>
<p>본 사이트는 비상업적 용도로 만들어진 포트폴리오용 사이트입니다. 사이트 제작 시 사용된 일부 이미지의 라이센스는 데시엠에게 있습니다.</p>
<p>COPYRIGHT (C) ALL RIGHTS RESERVED<br>DESIGN BY Ji Hye LEE</p>
<p class="hidden">COPYRIGHT (C) ALL RIGHTS RESERVED DESIGN BY Ji Hye LEE</p>
</footer>
<!-- scroll button -->
<div id="scroll_btn"></div>
</div>
</body>
</html>