-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.html
188 lines (187 loc) · 9.19 KB
/
main.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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>우리의식탁</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="app">
<img id="appicon" src="img/appicon.svg" alt="app icon" />
<p>앱 다운받고</p>
<span>할인·혜택소식</span>
<p>을 실시간으로 받아보세요!</p>
</div>
<div class="menu">
<div id="header-top">
<a id="title" href="main.html">
<p style="height: 16px"></p>
<img id="main_title" src="img/main_title.svg" alt="main title" />
</a>
</div>
<div id="select">
<a id="store" href="main.html"
style="color: rgb(147, 112, 98); border-bottom: 2px solid rgb(147, 112, 98)">스토어</a>
<a id="recipe" href="recipe.html">레시피</a>
<a id="guide" href="guide.html">키친가이드</a>
<a class="divid"></a>
<a id="curation">CURATION</a>
<a id="event">EVENT</a>
</div>
</div>
<div id="storeMenu">
<div id="storeBox_1">
<div id="storeBox">
<div class="storeLine">
<p id="storeHome">스토어 홈</p>
<p id="editorRecommend">에디터 추천</p>
<p id="limited">한정특가</p>
<p id="theBest">베스트</p>
<p id="newItem">신상품</p>
<p id="plan">기획전</p>
<p id="brand">브랜드</p>
</div>
<div class="storeLine">
<p id="food" style="padding-bottom: 20px">푸드</p>
<p class="list">베이커리·떡·간식</p>
<p class="list">반찬·냉장·김치</p>
<p class="list">건강식품</p>
<p class="list">정육·계란</p>
<p class="list">간편식·조리식품</p>
<p class="list">음료·커피·차</p>
<p class="list">채소·과일</p>
<p class="list">면류·장류·조미료</p>
<p class="list">과일청·잼</p>
<p class="list">수산·해산·건어물</p>
</div>
<div class="storeLine">
<p class="list" style="padding-top:58px;">견과·쌀</p>
<p class="list">베이비·키즈</p>
<p class="list">비건</p>
<p class="list">전통주</p>
</div>
<div class="storeLine">
<p id="kitchen" style="padding-bottom: 20px">키친</p>
<p class="list">조리도구</p>
<p class="list">그릇·컵</p>
<p class="list">프라이팬·냄비</p>
<p class="list">주방수납·밀폐용기</p>
<p class="list">주방소모품</p>
<p class="list">수저·수저통</p>
<p class="list">주방소품</p>
<p class="list">커피용품</p>
</div>
<div class="storeLine">
<p id="living" style="padding-bottom: 20px">리빙</p>
<p class="list">수납·정리</p>
<p class="list">욕실·세제·청소</p>
<p class="list">생활·잡화</p>
<p class="list">홈·인테리어</p>
<p class="list">뷰티·헬스</p>
<p class="list">베이비·키즈</p>
<p class="list">패브릭</p>
<p class="list">반려동물</p>
</div>
<div class="storeLine">
<p id="homeApplication" style="padding-bottom: 20px">가전</p>
<p class="list">주방가전</p>
<p class="list">생활·건강가전</p>
<p class="list">청소기</p>
<p class="list">계절가전</p>
<p class="list">이미용가전</p>
<p class="list">음향가전</p>
</div>
</div>
</div>
</div>
</header>
<main>
<img id="ad_1" src="img/ad_1.png" alt="ad_1" />
<div class="mainBox">
<h1 class="message">EDITOR'S CHOICE</h1>
<div id="item_change_box">
<div class="circle"></div>
<div class="item_box_set" id="editorChoice1" onclick="changeImg()">
<div class="item_box">
<img class="img" src="img/무농약 착한 연잎밥.jpg" alt="연잎밥" />
<p class="name">[한정특가]고소한 찰기!무농약 착한 연잎밥&연양밥 10개입(옵션선택)</p>
<p class="originPrice">25000</p>
<div class="price_info">
<p class="discount">10%</p>
<p class="price">22,400</p>
<span>원</span>
</div>
</div>
<div class="item_box">
<img class="img" src="img/수작업 황태채.jpg" alt="황태채" />
<p class="name">[공동구매]수작업으로 손질한 프리미엄 황태채</p>
<p class="originPrice">21000</p>
<div class="price_info">
<p class="discount">30%</p>
<p class="price">14,700</p>
<span>원</span>
</div>
</div>
<div class="item_box">
<img class="img" src="img/밤호박.jpg" alt="밤호박" />
<p class="name">[단독특가]산지직송!제주에서 자란 달디단 '밤호박'(2kg)</p>
<p class="originPrice">19900</p>
<div class="price_info">
<p class="discount">20%</p>
<p class="price">15,900</p>
<span>원</span>
</div>
</div>
</div>
<div class="item_box_set" id="editorChoice2" onclick="changeImg()">
<div class="item_box">
<img class="img" src="img/꿀수박.jpg" alt="꿀수박" />
<p class="name">[공동구매]1년에 한번 수확!경북 안동에서 온'꿀수박'(5-6kg)</p>
<p class="originPrice">49,000</p>
<div class="price_info">
<p class="discount">40%</p>
<p class="price">24,500</p>
<span>원</span>
</div>
</div>
<div class="item_box">
<img class="img" src="img/제주산 순살 고등어.jpg" alt="제주산 순살 고등어" />
<p class="name">[신규상품]99.9%가시제거!새벽청년 제주산 순살 고등어 단독특가</p>
<p class="originPrice">26,500</p>
<div class="price_info">
<p class="discount">29%</p>
<p class="price">18,900</p>
<span>원</span>
</div>
</div>
<div class="item_box">
<img class="img" src="img/우즈 저온 제습기.jpg" alt="제습기" />
<p class="name">[공동구매]스웨덴No.1 프리미엄 우즈 저온 제습기[텍1]</p>
<p class="originPrice">1,290,000</p>
<div class="price_info">
<p class="discount">32%</p>
<p class="price">878,000</p>
<span>원</span>
</div>
</div>
</div>
</div>
<div style="display:flex; flex-direction:row">
<div class="changeDot" id="choice1">
</div>
<div class="changeDot" id="choice2">
</div>
</div>
</div>
<div class="mainBox">
<h1 class="message">TIME LIMITED</h1>
</div>
</main>
<script src="function.js"></script>
</body>
</html>