-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
313 lines (278 loc) · 17 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
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kisaan Sewa</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="Logo.png" type="image/x-icon">
</head>
<body>
<!-- header -->
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom head_stick header_bg_color">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<img src="Logo.png" height="50px" alt="Logo" style="margin-right: 10px; mix-blend-mode: multiply;">
<span class="fs-4 title">Kisaan Sewa</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="#Expert" class="nav-link active" aria-current="page">Register as Expert</a></li>
<li class="nav-item"><a href="#Black_Soil" class="nav-link">Features</a></li>
<!-- <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> -->
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
<li class="nav-item"><a href="#Desert Soil" class="nav-link">About</a></li>
</ul>
</header>
<!-- hero -->
<div class="row flex-lg-row-reverse align-items-center g-5 py-5 hero" >
<div class="col-10 col-sm-8 col-lg-6">
<img src="Hero1.webp" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy" style="border-radius: 50px;">
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Grow Smarter, Conserve Better: Smart Water Management for Agriculture</h1>
<p class="lead">"Grow Smarter, Conserve Better" encapsulates our commitment to empowering farmers with innovative water management solutions. Our system optimizes water usage, ensuring that every drop counts, while simultaneously enhancing crop yields and sustainability. With our technology, agriculture becomes not just smarter but also more environmentally responsible, securing a prosperous future for farmers and the planet alike.
</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2"><a href="https://www.dackkms.gov.in/Account/aboutus.aspx#:~:text=A%20countrywide%20common%20eleven%20digit,allotted%20for%20Kisan%20Call%20Centre." target="_blank" style="color: white; text-decoration: none; ">Contact Expert</a></button>
<button id="BookSlot" type="button" class="btn btn-primary btn-lg px-4 me-md-2">Book your Slot</a></button>
</div>
<form id="myForm" class="row g-3">
<style>
#myForm {
display: none; /* Hide the form by default */
}
</style>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Name</label>
<input type="text" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Mobile No</label>
<input type="text" class="form-control" id="inputPassword4">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
<button id="Book" type="submit" class="btn btn-primary">Book My Slot</button>
<script>
document.getElementById("Book").addEventListener("click", function() {
var formContainer = document.getElementById("myForm");
myForm.style.display = "none"; // Hide the form
});
</script>
</form>
</div>
</div>
</div>
</div>
<!-- cards -->
<a href="#Black_Soil" class="Underline">
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5 hero ">
<div class="col card_bottom" >
<div id="Black" class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg soil_img" style="background-image: url('card1.jpeg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Black Soil</h3>
<style>#Black{
transition: transform 0.3s ease; /* Add transition for smooth transformation */
}
/* CSS for the enlarged image on hover */
#Black:hover {
transform: scale(1.2); /* Enlarge the image by 20% on hover */
z-index: 1;
}
</style>
</div>
</div>
</div>
</a>
<a href="#Alluvial Soil" class="Underline">
<div class="col" >
<div id="Alluvial" class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg soil_img" style="background-image: url('card2.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Alluvial Soil</h3>
<style>#Alluvial{
transition: transform 0.3s ease; /* Add transition for smooth transformation */
}
/* CSS for the enlarged image on hover */
#Alluvial:hover {
transform: scale(1.2); /* Enlarge the image by 20% on hover */
z-index: 1;
}
</style>
</div>
</div>
</div>
</a>
<a href="#Red Soil" class="Underline">
<div class="col" >
<div id="Red"class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg soil_img" style="background-image: url('card3.webp');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Red soil</h3>
<style>#Red{
transition: transform 0.3s ease; /* Add transition for smooth transformation */
}
/* CSS for the enlarged image on hover */
#Red:hover {
transform: scale(1.2); /* Enlarge the image by 20% on hover */
z-index: 1;
}
</style>
</div>
</div>
</div>
</a>
<a href="#Laterite Soil" class="Underline">
<div class="col" >
<div id="Laterite"class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg soil_img" style="background-image: url('Laterite.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Laterite Soil</h3>
<style>#Laterite{
transition: transform 0.3s ease; /* Add transition for smooth transformation */
}
/* CSS for the enlarged image on hover */
#Laterite:hover {
transform: scale(1.2); /* Enlarge the image by 20% on hover */
z-index: 1;
}
</style>
</div>
</div>
</div>
</a>
<a href="#Mountain or Forest Soil" class="Underline">
<div class="col" >
<div id="Mountain" class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg soil_img" style="background-image: url('Mountain\ or\ Forest\ Soil.avif');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Mountain or Forest Soil</h3>
<style>#Mountain{
transition: transform 0.3s ease; /* Add transition for smooth transformation */
}
/* CSS for the enlarged image on hover */
#Mountain:hover {
transform: scale(1.2); /* Enlarge the image by 20% on hover */
z-index: 1;
}
</style>
</div>
</div>
</div>
</a>
<a href="#Desert Soil" class="Underline">
<div class="col" >
<div id="Desert"class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg soil_img" style="background-image: url('Desert\ Soil.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Desert Soil</h3>
<style>#Desert{
transition: transform 0.3s ease; /* Add transition for smooth transformation */
}
/* CSS for the enlarged image on hover */
#Desert:hover {
transform: scale(1.2); /* Enlarge the image by 20% on hover */
z-index: 1;
}
</style>
</div>
</div>
</div>
</a>
</div>
<!-- Details -->
<div class="p-5 mb-4 bg-body-tertiary rounded-3 container">
<div class="container-fluid py-5" id="Black_Soil">
<h1 class="display-5 fw-bold">Black Soil</h1>
<p class="col-md-8 fs-4">For crops like cotton, which are commonly grown in black soil regions of India, the water requirement can range from 500 to 800 millimeters (mm) over the entire growing season. This includes rainfall and supplemental irrigation.
During critical growth stages such as flowering and fruiting, crops may require higher amounts of water to ensure proper development and yield. In these stages, the water requirement may be around 50 to 70 mm per week.</p>
<img src="speaker.svg" height="30px" width="30px" alt="icon">
</div>
</div>
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5" id="Alluvial Soil">
<h1 class="display-5 fw-bold">Alluvial Soil</h1>
<p class="col-md-8 fs-4">Alluvial soil is typically found in river valleys and plains. It is usually fertile and well-draining. Water requirements for crops grown in alluvial soil can vary depending on factors like crop type, climate, and specific soil characteristics. However, a general guideline could be around 0.75 to 1.25 inches (19 to 32 mm) of water per week during the growing season. Irrigation frequency may vary but could range from every 3-5 days, with moderate amounts each time.
</p>
<img src="speaker.svg" height="30px" width="30px" alt="icon">
</div>
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5" id="Red Soil">
<h1 class="display-5 fw-bold">Red Soil</h1>
<p class="col-md-8 fs-4">Red soil, also known as ferric soil, is common in tropical and subtropical regions. It is often rich in iron oxide but tends to be low in fertility and moisture-retention capacity. Crops grown in red soil may require around 1 to 1.5 inches (25 to 38 mm) of water per week during the growing season. Irrigation frequency may need to be more frequent than in soils with better water-retention capacity, perhaps every 2-4 days, with moderate amounts each time.
</p>
<img src="speaker.svg" height="30px" width="30px" alt="icon">
</div>
</div>
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5" id="Laterite Soil">
<h1 class="display-5 fw-bold">Laterite Soil</h1>
<p class="col-md-8 fs-4">Laterite soil is typically found in tropical regions with heavy rainfall. It is rich in iron and aluminum but often lacks fertility and may be acidic. Water requirements for crops grown in laterite soil can vary, but they may require around 1 to 1.5 inches (25 to 38 mm) of water per week during the growing season. Irrigation frequency may be similar to red soil, perhaps every 2-4 days, with moderate amounts each time.
</p>
<img src="speaker.svg" height="30px" width="30px" alt="icon">
</div>
</div>
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5" id="Mountain or Forest Soil">
<h1 class="display-5 fw-bold">Mountain or Forest Soil</h1>
<p class="col-md-8 fs-4">Soil in mountainous or forested areas can vary widely depending on factors such as altitude, climate, and vegetation cover. Generally, these soils tend to be well-draining and rich in organic matter. Water requirements for crops in mountain or forest soil may range from 0.5 to 1 inch (13 to 25 mm) of water per week during the growing season, with irrigation frequency varying based on local conditions.
</p>
<img src="speaker.svg" height="30px" width="30px" alt="icon">
</div>
</div>
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5" id="Desert Soil">
<h1 class="display-5 fw-bold">Desert Soil</h1>
<p class="col-md-8 fs-4" id="text-container" >Desert soil, also known as arid soil, is found in dry regions with low rainfall. It tends to be sandy and low in organic matter, making it poor at retaining moisture. Crops grown in desert soil require careful irrigation management. Water requirements may vary widely depending on crop type and local conditions but could range from 0.25 to 0.5 inches (6 to 13 mm) of water per week during the growing season. Irrigation frequency may need to be frequent, perhaps every 2-3 days, with small amounts each time to prevent water loss through evaporation.</p>
<img src="speaker.svg" height="30px" width="30px" alt="icon" id="speak-button" >
</div>
</div>
<!-- Expert -->
<h1 id="Expert">Register As Expert</h1>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Full Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Contact Number</label>
<input type="number" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Email</label>
<input type="email" class="form-control" id="exampleInputPassword1">
</div>
<div id="emailHelp" class="form-text">We'll never share your data with anyone else.</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- footer -->
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
<li class="nav-item"><a href="#Black_Soil" class="nav-link px-2 text-body-secondary">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
</ul>
<p class="text-center text-body-secondary">© 2024 Kisaan Sewa, Inc.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>