-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
266 lines (265 loc) · 10.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>백종원 골목식당</title>
<link rel="stylesheet" href="main/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<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:wght@100&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="background">
<div class="header">
<div class="in-header">
<div class="home">
<a href="index.html"
><img src="assets/images/titlelogo_mainscreen.png" alt=""
/></a>
</div>
<div class="search">
<input id="item" type="text" placeholder="가게 이름을 검색해보세요" />
<img
class="bt"
src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png"
/>
<div class="search-title">검색</div>
</div>
<div class="login">
<a href="../login/login.html">
<button>로그인</button>
</a>
</div>
<div class="regi">
<a href="../find_signup/sign_up.html">
<button>회원가입</button>
</a>
</div>
</div>
</div>
</div>
<!-- 배경 사진 -->
<div class="container">
<div class="text">
<div class="highlight">
<div class="name">
<span>조보아</span>
<span>씨</span>
</div>
<p>이것 좀 먹어봐유!</p>
</div>
<div class="descript">
<p style="text-align: left">
우리 동네에 백종원의 골목식당에 나왔던 식당들이 있을까?
</p>
<p style="text-align: left">
백's 골목식당에서 우리 동네 골목식당들을 찾아보세요!
</p>
</div>
</div>
<div id="img_container" style="padding-top: 80px">
<div class="slide_wrap">
<div class="slide_box">
<div class="slide_list clearfix">
<div class="slide_content slide01">
<img
style="width: 850px; height: auto; padding-top: 100px"
src="assets/images/버거인.png"
alt=""
/>
</div>
<div class="slide_content slide02">
<img
style="width: 850px; height: auto; padding-top: 100px"
src="assets/images/연돈.png"
alt=""
/>
</div>
<div class="slide_content slide03">
<img
style="width: 850px; height: auto; padding-top: 100px"
src="assets/images/가야가야.png"
alt=""
/>
</div>
<div class="slide_content slide04">
<img
style="width: 850px; height: auto; padding-top: 100px"
src="assets/images/오복함흥냉면.png"
alt=""
/>
</div>
<div class="slide_content slide05">
<img
style="width: 850px; height: auto; padding-top: 100px"
src="assets/images/정가네지짐이.png"
alt=""
/>
</div>
</div>
<!-- // .slide_list -->
</div>
<!-- // .slide_box -->
</div>
<!-- // .slide_wrap -->
</div>
</div>
<!-- // .container -->
<div class="slide_controller">
<div class="slide_btn_box">
<button type="button" class="slide_btn_prev">
<i class="fa-solid fa-angle-left"></i>
</button>
<button type="button" class="slide_btn_next">
<i class="fa-solid fa-angle-right"></i>
</button>
</div>
<!-- // .slide_btn_box -->
<ul class="slide_pagination"></ul>
<!-- // .slide_pagination -->
</div>
<script src="./slideShow.js"></script>
<div class="scroll">
<div class="scroll1">내 근처 골목 식당이 궁금하다면?</div>
<div class="scroll2">스크롤 해보세요!</div>
<div class="zoom">↓</div>
</div>
<div class="all-map">
<div id="map"></div>
<div id="result">
<div class="find-by-keyword">
<div id="keyword-result">키워드로 찾기</div>
<div class="keywords">
<div class="keywords_container">
<div class="key">
<button id="keyword1" class="keyword">달콤해요</button>
<button id="keyword2" class="keyword">담백해요</button>
<button id="keyword3" class="keyword">느끼해요</button>
<button id="keyword4" class="keyword">자극적이에요</button>
<button id="keyword5" class="keyword">달달해요</button>
<button id="keyword6" class="keyword">혼밥하기 좋아요</button>
<button id="keyword7" class="keyword">
친구들과 방문하기 좋아요
</button>
<button id="keyword8" class="keyword">
가족 외식하기 좋아요
</button>
<button id="keyword9" class="keyword">데이트하기 좋아요</button>
<button id="keyword10" class="keyword">
단체 모임하기 좋아요
</button>
<button id="keyword11" class="keyword">친절해요</button>
</div>
<div class="key">
<button id="keyword12" class="keyword">청결해요</button>
<button id="keyword13" class="keyword">
인테리어가 예뻐요
</button>
<button id="keyword14" class="keyword">주차하기 편해요</button>
<button id="keyword15" class="keyword">사진이 잘 나와요</button>
<button id="keyword16" class="keyword">
대중교통으로 방문하기 편해요
</button>
<button id="keyword17" class="keyword">
야외 좌석(테라스)가 있어요
</button>
<button id="keyword18" class="keyword">포장 가능해요</button>
<button id="keyword19" class="keyword">가성비가 좋아요</button>
<button id="keyword20" class="keyword">조용해요</button>
<button id="keyword21" class="keyword">
애완동물 동반 가능해요
</button>
</div>
</div>
</div>
</div>
<div class="find-by-location">
<div id="location-result">위치로 찾기</div>
<div class="location_container">
<div class="loc">
<button id="seoul" class="loc_btn">서울</button>
<button id="gyeonggi" class="loc_btn">경기</button>
<button id="incheon" class="loc_btn">인천</button>
<button id="busan" class="loc_btn">부산</button>
<button id="daegu" class="loc_btn">대구</button>
<button id="daejeon" class="loc_btn">대전</button>
<button id="gwangju" class="loc_btn">광주</button>
<button id="gyeongnam" class="loc_btn">경남</button>
</div>
<div class="loc">
<button id="gyeongbuk" class="loc_btn">경북</button>
<button id="ulsan" class="loc_btn">울산</button>
<button id="gangwon" class="loc_btn">강원</button>
<button id="chungnam" class="loc_btn">충남</button>
<button id="chungbuk" class="loc_btn">충북</button>
<button id="jeonnam" class="loc_btn">전남</button>
<button id="jeonbuk" class="loc_btn">전북</button>
<button id="jeju" class="loc_btn">제주</button>
</div>
</div>
</div>
<div class="search_btn_container">
<button id="search_btn">검색하기</button>
</div>
<div id="search-result">검색 결과</div>
<div id="result-list" class="search-result">
<div class="result">
<div class="rest-name"></div>
<div class="rest-menu">키워드, 위치를 선택한 후 검색하기 버튼을 눌러주세요</div>
</div>
</div>
</div>
</div>
</div>
<div
class="about-us"
style="
height: 30px;
display: flex;
margin-bottom: 30px;
font-size: 14px;
font-weight: bold;
color: #cacaca;
"
>
<div class="left-about" style="display: flex; padding-left: 5%">
<div class="about" style="margin-right: 40px">ABOUT AS</div>
<div class="about" style="margin-right: 20px">味친놈들</div>
<div class="about">UMC</div>
</div>
<div class="center-about" style="display: flex; padding-left: 12%">
<div class="about" style="margin-right: 40px">CONTACT</div>
<div class="about" style="margin-right: 20px">연락처 010 1234 0000</div>
<div class="about" style="margin-right: 20px">이메일 [email protected]</div>
<div class="about">인스타그램 @abcdefg</div>
</div>
<div
class="right-about"
style="display: flex; margin-left: auto; padding-right: 5%"
>
<div class="about" style="margin-right: 40px">SERVICE</div>
<div class="about" style="margin-right: 20px">연락처 010 1234 5678</div>
<div class="about" style="margin-right: 20px">이메일 [email protected]</div>
</div>
</div>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=1105caefe8133f02fb02b6090b63c644"
></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./map.js"></script>
<script src="./search.js"></script>
</body>
</html>