-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch-results.html
231 lines (223 loc) · 13.3 KB
/
search-results.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LOCAL STYLE SHEETS -->
<link rel="stylesheet" href="./css/styles.css">
<!-- CDN LINKS -->
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<!-- FONTAWESOME CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- BOOTSTRAP CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link rel="icon" href="./images/leaf.png">
<title>Stores Near You</title>
</head>
<body>
<header>
<!-- MAIN NAVBAR -->
<nav class="main-nav">
<div class="logo-container pl-3">
<a class="" href="index.html"><img class="logo" src="./images/logo-transparent.png" alt="logo"></a>
</div>
<div class="menu">
<a class="main-link white bold" href="index.html"><i class="fa fa-search" aria-hidden="true"></i> <span class="menu-item">STORES</span></a>
<a class="main-link white bold" href="#"><i class="fa fa-user" aria-hidden="true"></i> <span class="menu-item">ABOUT</span></a>
<a class="main-link white bold" href="#"><i class="fa fa-rss" aria-hidden="true"></i> <span class="menu-item">BLOG</span></a>
<a class="main-link white bold" href="#"><i class="fa fa-bars" aria-hidden="true"></i> <span class="menu-item">MORE</span></a>
</div>
</nav>
</header>
<main>
<section id="filters" class="banner-image-2">
<div class ="banner-text filters-text">
<!-- Drop down menu when it hovers in the plus icon on mobile size -->
<h1 class="toasted bold">FILTER YOUR RESULTS </h1>
<div class="drop-filters hide-med">
<a class="filter-button green-med hide-med bold" href=""><i class="fa fa-plus fa-2x" aria-hidden="true"></i></a>
<div class="drop-content green-bg-med">
<a class="drop-link toasted bold" href="#">City</a>
<a class="drop-link toasted bold" href="#">Distance</a>
<a class="drop-link toasted bold" href="#">Rating</a>
<a class="drop-link toasted bold" href="#">Type</a>
</div>
</div>
<!-- </h3> -->
<div class="filters-menu">
<div class="filter-item">
<div class="dropdown">
<button class="btn btn-lg green-bg-med green-light bold dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CITY
</button>
<div class="dropdown-menu green-bg-med" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item green-light bold" href="#">New York</a>
<a class="dropdown-item green-light bold" href="#">Portland</a>
<a class="dropdown-item green-light bold" href="#">San Francisco</a>
</div>
</div>
</div>
<div class="filter-item">
<div class="dropdown">
<button class="btn btn-lg green-bg-dark toasted bold dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
DISTANCE
</button>
<div class="dropdown-menu green-bg-dark" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item toasted bold" href="#">1 Km</a>
<a class="dropdown-item toasted bold" href="#">5 km</a>
<a class="dropdown-item toasted bold" href="#">10 km</a>
</div>
</div>
</div>
<div class="filter-item">
<div class="dropdown">
<button class="btn btn-lg green-bg-light green-med bold dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
RATING
</button>
<div class="dropdown-menu green-bg-light green-dark" aria-labelledby="dropdownMenuButton3">
<a class="dropdown-item green-med bold" href="#">🥑🥑🥑🥑🥑</a>
<a class="dropdown-item green-med bold" href="#">🥑🥑🥑🥑</a>
<a class="dropdown-item green-med bold" href="#">🥑🥑🥑</a>
<a class="dropdown-item green-med bold" href="#">🥑🥑</a>
<a class="dropdown-item green-med bold" href="#">🥑</a>
</div>
</div>
</div>
<div class="filter-item">
<div class="dropdown">
<button class="btn btn-lg green-bg-dark green-light bold dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
TYPE
</button>
<div class="dropdown-menu green-bg-dark" aria-labelledby="dropdownMenuButton4">
<a class="dropdown-item green-light bold" href="#">Farmer's Market</a>
<a class="dropdown-item green-light bold" href="#">Super Market</a>
<a class="dropdown-item green-light bold" href="#">F&V Store</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="results">
<h3 class="green-med bold">YOUR SEARCH RESULTS</h3>
<div class="results-display">
<article class="result-item result-type1">
<img class="result-image" src="./images/store1.jpg" alt="result1">
<div class="result-content">
<a class="result-link green-med" href="info-page1.html">
<h3 class="bold toasted">KWICK-E-MART</h3>
<p>We are a small local mini-market where you can find all sorts of food and beverages from fresh to preprocessed. Our drive is customer satisfaction so you will have a fantastic experience when you get into our store.</p>
</a>
</div>
</article>
<article class="result-item result-type2">
<img class="result-image" src="./images/store4.jpg" alt="result1">
<div class="result-content">
<a class="result-link green-dark" href="info-page2.html">
<h3 class="bold toasted">NOOK'S CRANNY</h3>
<p>Nook's Cranny is a startup market where you can buy anything the town is producing at a very competitive price but we also buy anything you have for sale. In case you want to sell your items out of business ours you can leave them in our box and the next day we will wire you the money.</p>
</a>
</div>
</article>
<article class="result-item result-type1">
<img class="result-image" src="./images/store5.jpg" alt="result1">
<div class="result-content">
<a class="result-link green-med" href="info-page3.html">
<h3 class="bold toasted">OLD MCDONALD FARMER'S MARKET</h3>
<p>In our community, there is not another market like us, where you can find the best products always fresh from the farm 7 days a week, 365 days a year. We work with farms from the area to have the best products available and to help local business owners distribute their products.</p>
</a>
</div>
</article>
<article class="result-item result-type2">
<img class="result-image" src="./images/store6.jpg" alt="result1">
<div class="result-content">
<a class="result-link green-dark" href="">
<h3 class="bold toasted">CLOUD-9</h3>
<p>We are a large retail store operated on a self-service basis, selling groceries, fresh produce, meat, bakery and dairy products, and sometimes an assortment of non-food goods.</p>
</a>
</div>
</article>
<article class="result-item result-type1">
<img class="result-image" src="./images/supermarket2.jpg" alt="result1">
<div class="result-content">
<a class="result-link green-med" href="">
<h3 class="bold toasted">CENTRAL MARKET</h3>
<p>We are a large retail store operated on a self-service basis, selling groceries, fresh produce, meat, bakery and dairy products, and sometimes an assortment of non-food goods.</p>
</a>
</div>
</article>
<article class="result-item result-type2">
<img class="result-image" src="./images/store9.jpg" alt="result1">
<div class="result-content">
<a class="result-link green-dark" href="">
<h3 class="bold toasted">NJ MART</h3>
<p>We are a large retail store operated on a self-service basis, selling groceries, fresh produce, meat, bakery and dairy products, and sometimes an assortment of non-food goods.</p>
</a>
</div>
</article>
<article class="result-item result-type1">
<img class="result-image" src="./images/supermarket1.jpg" alt="result1">
<div class="result-content">
<a class="result-link green-med" href="">
<h3 class="bold toasted">JOSE'S BODEGA</h3>
<p>We are a large retail store operated on a self-service basis, selling groceries, fresh produce, meat, bakery and dairy products, and sometimes an assortment of non-food goods.</p>
</a>
</div>
</article>
<article class="result-item result-type2">
<img class="result-image" src="./images/supermarket3.jpg" alt="result1">
<div class="result-content">
<a class="result-link green-dark" href="">
<h3 class="bold toasted">ROC'S</h3>
<p>We are a large retail store operated on a self-service basis, selling groceries, fresh produce, meat, bakery and dairy products, and sometimes an assortment of non-food goods.</p>
</a>
</div>
</article>
</div>
</section>
</main>
<footer id="footer">
<!-- NAV BAR FOR THE FOOTER -->
<div class="footer-bar">
<div class="footer-bar-section social-section">
<a class="footer-bar-item toasted bold" href="#"><i class="fa fa-facebook" aria-hidden="true"></i> <span class="social-text">FACEBOOK</span></a>
<a class="footer-bar-item toasted bold" href="#"><i class="fa fa-twitter" aria-hidden="true"></i> <span class="social-text">TWITTER</span></a>
<a class="footer-bar-item toasted bold" href="#"><i class="fa fa-rss" aria-hidden="true"></i> <span class="social-text">BLOG</span></a>
<a class="footer-bar-item toasted bold" href="#"><i class="fa fa-opencart" aria-hidden="true"></i> <span class="social-text">OPEN CART</span></a>
</div>
<div class="footer-bar-section navigation-section">
<a class="footer-bar-item green-light bold" href="#">HOME</a>
<a class="footer-bar-item green-light bold" href="#">SEARCH</a>
<a class="footer-bar-item green-light bold" href="#">ABOUT US</a>
<a class="footer-bar-item green-light bold" href="#">ADVERTISE</a>
</div>
</div>
<!-- CONTACT AND MISC SECTION -->
<div class="card-deck m-0 mt-5 align-center">
<div class="card border-0">
<div class="card-body green-bg-dark">
<h5 class="card-title toasted bold">SUBSCRIBE</h5>
<input type="text" name="store" class="search-input" placeholder="Get news form your stores" />
<button type="submit" class="search-button subscribe-button bold green-light">SUBSCRIBE</button>
</div>
</div>
<div class="card border-0">
<div class="card-body green-bg-dark">
<h5 class="card-title toasted bold">CONTACT</h5>
<p class="card-text toasted">Want to be a part of our community?<br><a class="footer-bar-item w-100 green-med" href="">info@freshfinder.com</a></p>
</div>
</div>
<div class="card border-0">
<div class="card-body green-bg-dark">
<h5 class="card-title toasted bold">ABOUT</h5>
<p class="card-text toasted">Fresh Finder is an application that looks to help local and small bussinesses to increase their sales by connecting them with a larger community of people looking for more healthy food alternatives. If you want to know more <a class="footer-bar-item w-100 green-med" href="">Go Here</a></p>
</div>
</div>
</div>
<p class="toasted align-right bold pr-3 pt-5">© 2020 M&m interactive</p>
</footer>
</body>
</html>