AgriGuruInfo/fodder.html at master · Liyo08/AgriGuruInfo · GitHub

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
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fodder Crops</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            background: #f9f9f9;
            color: #333;
        }
        .container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 0 20px;
        }
        h1 {
            text-align: center;
            font-size: 32px;
            margin: 20px 0;
            color: #333;
        }
        .overview, .details {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
        }
        .card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            text-align: center;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .card img {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }
        .card h2 {
            font-size: 16px;
            padding: 10px;
            margin: 0;
            color: #444;
        }
        .crop-box {
            display: flex;
            flex-wrap: wrap;
            background: white;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .crop-image {
            flex: 1 1 250px;
            text-align: center;
            padding: 10px;
        }
        .crop-image img {
            width: 90%;
            border-radius: 8px;
            object-fit: cover;
        }
        .crop-image h3 {
            margin-top: 10px;
            font-size: 18px;
            color: #333;
        }
        .crop-details {
            flex: 2 1 300px;
            padding: 15px 20px;
            font-size: 15px;
            line-height: 1.5;
        }
        @media (max-width: 700px) {
            .crop-box {
                flex-direction: column;
            }
            .crop-image, .crop-details {
                flex: 1 1 100%;
            }
        }
        .navbar {
    position: fixed; /* stays on top when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #b2d8b2; /* light green */
    padding: 10px 20px;
    box-sizing: border-box; /* ensures padding does not add extra width */
}


.navbar-left h1 {
    margin: 0;
    font-size: 24px;
    color: #2e4d2e; /* dark green for contrast */
    font-weight: 600;
}

.navbar-right a {
    margin-left: 20px;
    text-decoration: none;
    color: #2e4d2e;
    font-weight: 500;
    transition: color 0.3s, border-bottom 0.3s;
    padding-bottom: 4px;
}

.navbar-right a:hover {
    color: #1c331c;
    border-bottom: 2px solid #1c331c;
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar-right {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .navbar-right a {
        margin: 5px 10px 5px 0;
    }
}
.heading {

            padding-top:40px;
            text-align: center;
            font-size: 32px;
            margin: 20px 0;
            color: #333;}
    </style>
</head>
<body>
    <nav class="navbar">
    <div class="navbar-left">
        <h1>AgriGrow</h1>
    </div>
    <div class="navbar-right">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="types.html">Types</a>
        <a href="contact.html">Contact</a>
    </div>
</nav>
<div class="container">
    <h1 class="heading">Fodder Crops</h1>

    <div class="overview">
        <h2>Overview</h2>
        <p>
            Fodder crops are grown specifically to provide nutritious feed for livestock, ensuring milk and meat productivity while maintaining soil fertility. They are crucial for sustainable livestock management and improving the economic conditions of farmers.
        </p>
    </div>

    <div class="details">
        <h2>Details</h2>
        <p>
            <strong>Climate & Season:</strong> Thrive in moderate to warm climates with sufficient rainfall or irrigation.<br>
            <strong>Soil:</strong> Fertile, well-drained soils enhance biomass yield.<br>
            <strong>Watering:</strong> Regular irrigation during growth stages is essential.<br>
            <strong>Fertilizers:</strong> Organic manure and balanced NPK fertilizers support lush growth.<br>
            <strong>Challenges:</strong> Pests, water stress, and overgrazing should be managed for sustainable production.
        </p>
    </div>

    <h2 style="text-align:center; margin-top: 40px;">Detailed Crop Information</h2>

    <div class="crop-box">
        <div class="crop-image">
            <img src="https://i.pinimg.com/736x/0d/04/06/0d040646c071fc2d13bfb43050d88e5b.jpg" alt="Sorghum">
        </div>
        <div class="crop-details">
            <h1>Sorghum (Fodder)</h1>
            <strong>Overview:</strong> Sorghum is a drought-tolerant fodder crop providing green and dry fodder for cattle.<br><br>
            <strong>Season:</strong> Sown in Kharif season (June-July).<br><br>
            <strong>Soil:</strong> Well-drained loamy soils.<br><br>
            <strong>Growth Cycle:</strong> 90-110 days.<br><br>
            <strong>Seed Cycle:</strong> Direct sowing in rows.<br><br>
            <strong>Watering:</strong> Requires irrigation during dry spells.<br><br>
            <strong>Pest Management:</strong> Monitor for shoot fly and stem borers.<br><br>
            <strong>Harvest:</strong> Harvest at the flowering stage for maximum nutrient value.
        </div>
    </div>

    <div class="crop-box">
        <div class="crop-image">
            <img src="https://i.pinimg.com/736x/f6/cb/5d/f6cb5dba12ceecea7dfa963eb6dd3673.jpg" alt="Maize Fodder">
        </div>
        <div class="crop-details">
            <h1>Maize (Fodder)</h1>
            <strong>Overview:</strong> Maize is a high-yielding fodder crop providing succulent green fodder rich in energy.<br><br>
            <strong>Season:</strong> Sown in Kharif and summer seasons.<br><br>
            <strong>Soil:</strong> Fertile, well-drained soils.<br><br>
            <strong>Growth Cycle:</strong> 60-80 days.<br><br>
            <strong>Seed Cycle:</strong> Direct sowing.<br><br>
            <strong>Watering:</strong> Requires regular irrigation.<br><br>
            <strong>Pest Management:</strong> Monitor for stem borers.<br><br>
            <strong>Harvest:</strong> Harvest at tasseling or early milk stage for best nutrition.
        </div>
    </div>

    <div class="crop-box">
        <div class="crop-image">
            <img src="https://i.pinimg.com/736x/94/6d/69/946d69fc99b1f0335433dd6ed52d3f67.jpg" alt="Berseem">
        </div>
        <div class="crop-details">
            <h1>Berseem (Egyptian Clover)</h1>
            <strong>Overview:</strong> Berseem is a winter fodder crop providing protein-rich green fodder for livestock.<br><br>
            <strong>Season:</strong> Sown in Rabi season (October-November).<br><br>
            <strong>Soil:</strong> Well-drained loamy soils with good fertility.<br><br>
            <strong>Growth Cycle:</strong> 50-60 days for first cut; multiple cuts possible.<br><br>
            <strong>Seed Cycle:</strong> Broadcast or line sowing.<br><br>
            <strong>Watering:</strong> Regular irrigation required.<br><br>
            <strong>Pest Management:</strong> Watch for aphids and fungal diseases.<br><br>
            <strong>Harvest:</strong> First cut at 45-50 cm height; subsequent cuts every 25-30 days.
        </div>
    </div>

    <div class="crop-box">
        <div class="crop-image">
            <img src="https://i.pinimg.com/736x/f0/51/27/f05127a624ad159d4defa70846a0263f.jpg" alt="Napier Grass">
        </div>
        <div class="crop-details">
            <h1>Napier Grass</h1>
            <strong>Overview:</strong> Napier Grass is a perennial fodder crop producing high biomass for green fodder.<br><br>
            <strong>Season:</strong> Can be planted year-round in warm climates.<br><br>
            <strong>Soil:</strong> Well-drained fertile soils.<br><br>
            <strong>Growth Cycle:</strong> Ready for first harvest in 60-75 days.<br><br>
            <strong>Seed Cycle:</strong> Propagated using stem cuttings.<br><br>
            <strong>Watering:</strong> Requires regular irrigation.<br><br>
            <strong>Pest Management:</strong> Generally pest-resistant.<br><br>
            <strong>Harvest:</strong> Cut when the plant is 90-100 cm tall for best quality.
        </div>
    </div>

    <div class="crop-box">
        <div class="crop-image">
            <img src="https://i.pinimg.com/1200x/27/20/6b/27206b398933d9769f6c3da2e2c4db7f.jpg" alt="Lucerne">
        </div>
        <div class="crop-details">
            <h1>Lucerne (Alfalfa)</h1>
            <strong>Overview:</strong> Lucerne is a protein-rich perennial fodder crop suitable for green fodder and hay.<br><br>
            <strong>Season:</strong> Sown in Rabi and summer seasons.<br><br>
            <strong>Soil:</strong> Well-drained loamy soils with good fertility.<br><br>
            <strong>Growth Cycle:</strong> 60-70 days for first cut; multiple cuts possible.<br><br>
            <strong>Seed Cycle:</strong> Broadcast or line sowing.<br><br>
            <strong>Watering:</strong> Requires regular moisture.<br><br>
            <strong>Pest Management:</strong> Watch for aphids and leaf spot.<br><br>
            <strong>Harvest:</strong> First cut at 60-70 days; cut when 50% flowering.
        </div>
    </div>

    <div class="crop-box">
        <div class="crop-image">
            <img src="https://i.pinimg.com/1200x/1c/98/d4/1c98d4f14cba5950a27abe9eaefd3b18.jpg" alt="Cowpea">
        </div>
        <div class="crop-details">
            <h1>Cowpea (Fodder)</h1>
            <strong>Overview:</strong> Cowpea provides high-quality green fodder and enriches soil fertility through nitrogen fixation.<br><br>
            <strong>Season:</strong> Grown in Kharif and summer seasons.<br><br>
            <strong>Soil:</strong> Sandy loam soils with good drainage.<br><br>
            <strong>Growth Cycle:</strong> 50-60 days.<br><br>
            <strong>Seed Cycle:</strong> Direct sowing in rows.<br><br>
            <strong>Watering:</strong> Requires moderate irrigation.<br><br>
            <strong>Pest Management:</strong> Monitor for aphids and leaf spot.<br><br>
            <strong>Harvest:</strong> Harvest at flowering stage for maximum nutrient content.
        </div>
    </div>

    <div class="crop-box">
        <div class="crop-image">
            <img src="https://i.pinimg.com/1200x/9b/5f/cb/9b5fcbfbcc9bc3b76dd7616f6669fcbb.jpg" alt="Oats Fodder">
        </div>
        <div class="crop-details">
            <h1>Oats (Fodder)</h1>
            <strong>Overview:</strong> Oats provide succulent green fodder during the winter months.<br><br>
            <strong>Season:</strong> Sown in Rabi season (October-November).<br><br>
            <strong>Soil:</strong> Well-drained loamy soils.<br><br>
            <strong>Growth Cycle:</strong> 90-100 days.<br><br>
            <strong>Seed Cycle:</strong> Broadcast or line sowing.<br><br>
            <strong>Watering:</strong> Requires timely irrigation.<br><br>
            <strong>Pest Management:</strong> Monitor for rust and aphids.<br><br>
            <strong>Harvest:</strong> Harvest at the boot stage for maximum nutrition.
        </div>
    </div>

    <div class="crop-box">
        <div class="crop-image">
            <img src="https://i.pinimg.com/736x/db/ed/be/dbedbe927c32ebe2b0a5b7da23455e87.jpg" alt="Ryegrass">
        </div>
        <div class="crop-details">
            <h1>Ryegrass</h1>
            <strong>Overview:</strong> Ryegrass is a cool-season fodder crop used for pastures and silage.<br><br>
            <strong>Season:</strong> Sown in Rabi season.<br><br>
            <strong>Soil:</strong> Fertile, well-drained soils.<br><br>
            <strong>Growth Cycle:</strong> 60-80 days for the first cut.<br><br>
            <strong>Seed Cycle:</strong> Broadcast sowing.<br><br>
            <strong>Watering:</strong> Requires adequate moisture.<br><br>
            <strong>Pest Management:</strong> Monitor for leaf rust and aphids.<br><br>
            <strong>Harvest:</strong> Harvest at the heading stage for best quality.
        </div>
    </div>

    <div class="crop-box">
        <div class="crop-image">
            <img src="https://i.pinimg.com/736x/b3/eb/cd/b3ebcd8ed15901f85d9ed57cb8200fb5.jpg" alt="Guar">
        </div>
        <div class="crop-details">
            <h1>Guar (Cluster Bean)</h1>
            <strong>Overview:</strong> Guar is a leguminous fodder crop with good green fodder yield and soil improvement benefits.<br><br>
            <strong>Season:</strong> Sown in Kharif season.<br><br>
            <strong>Soil:</strong> Sandy loam to loamy soils.<br><br>
            <strong>Growth Cycle:</strong> 60-70 days.<br><br>
            <strong>Seed Cycle:</strong> Direct sowing in rows.<br><br>
            <strong>Watering:</strong> Requires moderate irrigation.<br><br>
            <strong>Pest Management:</strong> Monitor for leaf spot and aphids.<br><br>
            <strong>Harvest:</strong> Harvest at flowering for green fodder.
        </div>
    </div>

    <div class="crop-box">
        <div class="crop-image">
            <img src="https://i.pinimg.com/736x/81/56/44/8156446ec858fe56446836081ab8f138.jpg" alt="Sudan Grass">
        </div>
        <div class="crop-details">
            <h1>Sudan Grass</h1>
            <strong>Overview:</strong> Sudan Grass is a high-yielding summer fodder crop providing palatable green fodder.<br><br>
            <strong>Season:</strong> Sown in summer and early monsoon.<br><br>
            <strong>Soil:</strong> Well-drained sandy loam soils.<br><br>
            <strong>Growth Cycle:</strong> 50-60 days for the first cut.<br><br>
            <strong>Seed Cycle:</strong> Direct sowing in rows.<br><br>
            <strong>Watering:</strong> Requires sufficient moisture.<br><br>
            <strong>Pest Management:</strong> Monitor for stem borers.<br><br>
            <strong>Harvest:</strong> Harvest at the early boot stage for quality fodder.
        </div>
    </div>
</div>

</body>
</html>