-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (146 loc) · 9.47 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
<!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>FRESH FINDER - 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="#"><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>
<!-- SEARCH SECTION -->
<section id="search" class="top-banner banner-image-1">
<div class="banner-text">
<h1 class="toasted bold">FRESH PRODUCE NEAR YOU WITH <span class="green-light">FRESH FINDER</span></h1>
<div class="main-search">
<form action="search-results.html">
<label for="store" class="bold">SEARCH BY NAME</label><br>
<input type="text" id="store" name="store" class="search-input" placeholder="Find your store" />
<br class="hide">
<button type="submit" class="search-button bold green-light">SEARCH</button>
</form>
</div>
<form action="#instructions">
<button type="submit" class="works-button green-med bold">HOW TO FIND A STORE</button>
</form>
</div>
</section>
<!-- INSTRUCTIONS SECTION -->
<section id="instructions">
<h3 class="green-med bold">YOU CAN FIND THE CLOSEST STORE IN A VERY SIMPLE MANNER</h3>
<div class="instruction-set">
<div class="instruction-card instruction1">
<img class="instruction-icon" src="./images/search.png" alt="search">
<h4 class="instruction-title green-light bold">SEARCH</h4>
<p class="instruction-text">We have the biggest database on local businesses that deal with organic products and we bring it to the reach of your hands. Look for stores where you can find hand-selected, best quality produce products.</p>
</div>
<div class="instruction-card instruction2">
<img class="instruction-icon" src="./images/map.png" alt="map">
<h4 class="instruction-title green-light bold">LOCATE</h4>
<p class="instruction-text">Our application allows you to find our partner stores through different search criteria, including location, name, type of products, proximity, and others.</p>
</div>
<div class="instruction-card instruction3">
<img class="instruction-icon" src="./images/business-card.png" alt="info">
<h4 class="instruction-title green-light bold">GET THE INFO</h4>
<p class="instruction-text">Once you have found your preferred store we will give you all the information you need to make contact with it. If you want to get delivery you will have the number or the address in case you want to go there by yourself.</p>
</div>
<div class="instruction-card instruction4">
<img class="instruction-icon" src="./images/shop.png" alt="shop">
<h4 class="instruction-title green-light bold">START SHOPPING</h4>
<p class="instruction-text">After you decided how to get your groceries from the store, start shopping and let us know your experience not only with our application but with the stores themselves.</p>
</div>
</div>
</section>
<!-- FEATURES SECTION -->
<section id="features">
<h3 class="green-med bold features-header">REASONS TO USE FRESH FINDER</h3>
<article class="app-feature feature-1">
<a href="#"><img class="feature-image" src="./images/map2.jpg" alt="feature1"></a>
<div class="feature-content">
<h6 class="feature-title toasted bold">LOCATIONS AROUND THE WORLD</h6>
<p class="feature-text green-med">We work hard to get partners from around the world into our application. Right now we have more than 3000 partners in 80 countries and we never stop looking to give you the best chance to find one near you.</p>
</div>
</article>
<article class="app-feature feature-2">
<a href="#"><img class="feature-image" src="./images/store9.jpg" alt="feature2"></a>
<div class="feature-content">
<h6 class="feature-title green-light bold">BIG AND UPDATED DATABASE</h6>
<p class="feature-text green-dark">Our database is updated constantly, not only by our partners themselves but by our team that verifies the information regularly to ensure that when you find a store that meets your needs all the information you get is the actual information of the business.</p>
</div>
</article>
<article class="app-feature feature-3">
<a href="#"><img class="feature-image" src="./images/store2.jpg" alt="feature3"></a>
<div class="feature-content">
<h6 class="feature-title toasted bold">ALL THE INFORMATION IN ONE PLACE</h6>
<p class="feature-text green-light">With our application, you get a lot of information about the store you selected. This information goes from the most basic one like address or telephone number to the more complex like directions to get there and products offered. Besides that our community will help you to know how good is the store with our review system that is embedded in the information you get.</p>
</div>
</article>
</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>