-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (230 loc) · 9.42 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
<!DOCTYPE html>
<html lang="en">
<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>Letzplant</title>
<!-- favicon -->
<link rel="shortcut icon" href="./images/favicon.png" type="image/x-icon">
<!-- font awesome stylesheet -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- external custom stylesheet -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- header -->
<header>
<a class="brand-container links" href="#">
<span class="brand">Letz</span>
<span class="brand">Plant</span>
<i class="fa fa-seedling"></i>
</a>
<div class="header-left-div">
<a class="header-btn links" href="#">Contact us</a>
<a class="header-btn btn links" id="signin-btn" href="#" title="sign-in">Sign In</a>
</div>
</header>
<!-- home -->
<section id="home-section">
<div class="home-content">
<p class="home-text">
You can't buy happiness, but you can buy plants, and that's pretty much the same thing.
</p>
<p class="home-text">
Letz plant the one stop destination for all your plant needs.
</p>
<p class="home-text">
Please, sign in to track your orders.
</p>
<div class="search-box-container">
<i class="fas fa-search"></i>
<input
type="search"
id="search-box"
placeholder="Plants / Productss"
/>
</div>
<button id="search-btn" class="btn" title="search">Search</button>
</div>
</section>
<!-- Products section -->
<section id="gallery-section">
<div class="section-heading">Popular Products</div>
<div id="gallery-content">
<div class="gallery-img-container">
<img class="gallery-img" src="./images/aloe-vera-plant.jpeg" alt="aloe-vera-plant" />
<p class="img-hint">Aloe vera</p>
</div>
<div class="gallery-img-container">
<img class="gallery-img" src="./images/betel-leaf-plant.jpeg" alt="betel leaf" />
<p class="img-hint">betel leaf</p>
</div>
<div class="gallery-img-container">
<img class="gallery-img" src="./images/bougainvillea-plant.jpeg" alt="bougainvillea-plant" />
<p class="img-hint">bougainvillea</p>
</div>
<div class="gallery-img-container">
<img class="gallery-img" src="./images/dendrobium-plant.jpeg" alt="dendrobium-plant" />
<p class="img-hint">betel leaf</p>
</div>
<div class="gallery-img-container">
<img class="gallery-img" src="./images/Jasmine-Plant.jpeg" alt="Jasmine-Plant" />
<p class="img-hint">dendrobium</p>
</div>
<div class="gallery-img-container">
<img class="gallery-img" src="./images/lemon-plant.jpeg" alt="lemon-plant" />
<p class="img-hint">lemon plant</p>
</div>
<div class="gallery-img-container">
<img class="gallery-img" src="./images/neon-pothos.jpeg" alt="neon-pothos" />
<p class="img-hint">neon potho</p>
</div>
<div class="gallery-img-container">
<img class="gallery-img" src= "./images/peace-lily.jpeg" alt="peace-lily" />
<p class="img-hint">peace lily</p>
</div>
<div class="gallery-img-container">
<img class="gallery-img" src="./images/rose-plant.jpeg" alt="rose-plant" />
<p class="img-hint">Orange rose</p>
</div>
<div class="gallery-img-container">
<img class="gallery-img" src="./images/tulip-plant.jpeg" alt="tulip-plant" />
<p class="img-hint">Tulip</p>
</div>
</div>
</section>
<!-- Fertilizers section -->
<section id="fertilizers-section" class="section">
<div class="image-container">
<img
class="section-img"
src="./images/fertilizer.jpeg"
alt="natural fertilizers"
/>
</div>
<div class="section-description">
<div class="section-heading">Natural Fertilizers</div>
<div class="section-text">
<li>Don't panic it's organic, we make fertilizers using vermicompost which is non-toxic.</li>
<li>Earthworms help neutralize soil acidity and reduce waste upto 50%. It is suitable for all types of vegetation and flowers.</li>
</div>
<button class="section-btn">Read more</button>
<button class="section-btn">Order now</button>
</div>
</section>
<!-- Tools section -->
<section id="tools-section" class="section">
<div class="image-container">
<img
class="section-img"
src="./images/gardening-tools.png"
alt="gardening-tools"
/>
</div>
<div class="section-description">
<div class="section-heading">Gardening Tools</div>
<div class="section-text">
<li>Gardening is a medicince that does not requires prescription and has no limit on dosage.</li>
<li>Choose from wide variety of tools, to build your own paradise.</li>
</div>
<button class="section-btn">Buy tools</button>
<button class="section-btn">Sell here</button>
</div>
</section>
<!-- Aquaphonics section -->
<section id="aquaphonics-section" class="section">
<div class="image-container">
<img
class="section-img"
src="./images/aquaponics.jpeg"
alt="about-aquaphonics"
/>
</div>
<div class="section-description">
<div class="section-heading">Aquaphonics</div>
<div class="section-text">
<li>We support and help Aquaponics which allows both aquaculture and hydroponics to coexist and support each other. </li>
<li>Nitrifying bacteria convert the fish waste into nutrients that serve the plants. The water then passes through the plant roots for filtration before circulating back to the tank.</li>
</div>
<button class="section-btn">Know more</button>
</div>
</section>
<!-- About section section -->
<section id="about-section" class="section">
<div class="image-container">
<img
class="section-img"
src="./images/saplings.jpeg"
alt="Saplings"
/>
</div>
<div class="section-description">
<div class="section-heading">Why Us ?</div>
<div class="section-text">
<li>We support NGOs as a matter of fact, we offer them free saplings to make the earth a better place.</li>
<li>There are no shipment charges applied across India, cash on delivery, various payment options.</li>
</div>
<button class="section-btn">Order now</button>
</div>
</section>
<!-- Newsletter section -->
<section id="newsletter-section" class="section">
<div class="image-container">
<img
class="section-img"
src="./images/npk-fertilizer.png"
alt="newsletter"
/>
</div>
<div class="section-description">
<div class="section-heading">Subscribe for newsletters</div>
<div class="section-text">
<li>How do you make my plants grow faster?</li>
<li>Most effective way of speeding up plants growth is through fertilizers which varies in terms of their NPK composition.</li>
<li>N - nitrogen, P - phosphorus, K - potassium.</li>
<li>Sign in and Subscribe for weekly newsletters.</li>
</div>
<button class="section-btn">Subscribe</button>
</div>
</section>
<!-- footer -->
<footer>
<div class="footer-links-division">
<div class="social-container-division">
<a class="brand-container links" href="#">
<span class="brand">Letz</span>
<span class="brand">Plant</span>
<i class="fa fa-seedling"></i>
</a>
<span>Follow Us On :</span>
<div class="social-links-container">
<a class="social-links"><span><i class="fab fa-facebook-f"></i></span></a>
<a class="social-links"><span><i class="fab fa-twitter"></i></span></a>
<a class="social-links"><span><i class="fab fa-linkedin-in"></i></span></a>
<a class="social-links"><span><i class="fab fa-youtube"></i></span></a>
</div>
</div>
<div id="footer-links-container">
<span><a class="footer-links">about us</a></span>
<span><a class="footer-links">FAQs</a></span>
<span><a class="footer-links">locate our store</a></span>
<span><a class="footer-links">help & support</a></span>
<span><a class="footer-links">careers</a></span>
<span><a class="footer-links">contact us</a></span>
<span><a class="footer-links">customer care</a></span>
<span><a class="footer-links">sell on Letzplant</a></span>
<span><a class="footer-links">shipping policy</a></span>
<span><a class="footer-links">terms of use</a></span>
<span><a class="footer-links">privacy policy</a></span>
</div>
</div>
<p id="copyrights">© 2022, Letzplant, All rights reserved.</p>
<!-- scroll to top button -->
<a id="scroll-top-btn" class="footer-btn btn" href="#" title="scroll to top"><i class="fas fa-arrow-up"></i></a>
</footer>
</body>
</html>