This repository has been archived by the owner on Jul 25, 2023. It is now read-only.
forked from dudamdev/reutilicias-pi
-
Notifications
You must be signed in to change notification settings - Fork 0
/
hortalicias.html
278 lines (225 loc) · 11.7 KB
/
hortalicias.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
<!DOCTYPE html>
<html lang="pt-br">
<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>Hortalícias</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="shortcut icon" href="assets/img/logo.ico" type="image/x-icon">
<link rel="stylesheet" href="assets/css/base.css">
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/header.css">
<link rel="stylesheet" href="assets/css/footer.css">
<link rel="stylesheet" href="assets/css/style_index.css">
<link rel="stylesheet" href="assets/css/carousel_index.css">
<link rel="stylesheet" href="assets/css/over-bootstrap.css">
<link rel="stylesheet" href="assets/css/cards-receitas.css">
<link rel="stylesheet" href="assets/css/media-style.css">
</head>
<body>
<header class="cabecalho">
<a href="index.html" class="logo_menu"><img src="assets/img/logo.png" alt="Logo Reutilicias" class="logo_menu"></a>
<span id="burguer" class="material-icons" width="200" onclick="clickMenu()">menu</span>
<nav class="menu" id="items">
<a href="receitas.html">Receitas</a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">Categorias</button>
<ul class="dropdown-menu">
<li><a href="petlicias.html">PET<span>licias</span></a></li>
<li><a href="veganlicias.html">VEGAN<span>licias</span></a></li>
<li><a href="hortalicias.html">HORTA<span>licias</span></a></li>
</ul>
</div>
<a href="feira.html">Feira</a>
<a href="sobre-nos.html">Sobre nós</a>
</nav>
</header>
<!-- carousel -->
<div class="slider">
<div class="slides">
<!-- radio buttons -->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!-- slide images -->
<div class="slide first">
<img src="assets/img/slider-horta/slider1.png" alt="Imagem 1 do banner inicial">
</div>
<div class="slide">
<img src="assets/img/slider-horta/slider2.png" alt="Imagem 2 do banner inicial">
</div>
<div class="slide">
<img src="assets/img/slider-horta/slider3.png" alt="Imagem 3 do banner inicial">
</div>
<div class="slide">
<img src="assets/img/slider-horta/slider4.png" alt="Imagem 4 do banner inicial">
</div>
<!-- navigation auto -->
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<div class="manual-navigation">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
</div>
</div>
<main>
<section class="receitas">
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/borra-de-cafe.png" alt="Borra de Café">
<div class="receitas--cards--texto--hort">
<h3>Borra de Café</h3>
<p>Rica em nitrogênio, faz a alegria das minhocas. Além disso, combate fungos, formigas e outros
organismos que danificam as plantas.</p>
<p><span>Modo de uso:</span> espalhe borra seca por cima da terra.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/cascas-de-ovo.png" alt="Cascas de Ovo">
<div class="receitas--cards--texto--hort">
<h3>Cascas de Ovo</h3>
<p>Rica em cálcio.</p>
<p><span>Modo de uso:</span> moa no liquidificador (e aproveite para afiar as lâminas do
eletrodoméstico) e misture à terra.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/cascas-de-batata.png" alt="Cascas de Batata">
<div class="receitas--cards--texto--hort">
<h3>Cascas de Batata</h3>
<p>É rica em nutrientes diversos e ajuda nas folhagens.</p>
<p><span>Modo de uso:</span> coloque as cascas sobre a terra. A água do cozimento pode ser usada na
rega, depois de fria.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/casca-de-banana.png" alt="Cascas de Banana">
<div class="receitas--cards--texto--hort">
<h3>Cascas de Banana</h3>
<p>Rica em fósforo e potássio, importantes para as plantas.</p>
<p><span>Modo de uso:</span> pode ser picada em cubinhos ou batida no liquidificador e misturada à
terra.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/restos-de-cenoura.png" alt="Restos de Cenoura">
<div class="receitas--cards--texto--hort">
<h3>Restos de Cenoura</h3>
<p>Contêm vitaminas e sais minerais, úteis para enriquecer a terra.</p>
<p><span>Modo de uso:</span> pode ser colocada diretamente na terra.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/cascas-de-manga.png" alt="Cascas de Manga">
<div class="receitas--cards--texto--hort">
<h3>Cascas de Manga</h3>
<p>Como não é uma fruta cítrica, pode ser usada para enriquecer a terra.</p>
<p><span>Modo de uso:</span> pode ser colocada diretamente sobre a terra.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/coentro.png" alt="Coentro">
<div class="receitas--cards--texto--hort">
<h3>Coentro</h3>
<p>Ajuda a combater ácaros e pulgões.</p>
<p><span>Modo de uso:</span> bata os talos com água para fazer um spray.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/restos-de-frutos-do-mar.png" alt="Restos de Frutos do Mar">
<div class="receitas--cards--texto--hort">
<h3>Restos de Frutos do Mar</h3>
<p>São fontes de fósforo e nitrogênio.</p>
<p><span>Modo de uso:</span> ainda crus, podem ser enterrados em buracos de cerca de 40 centímetros
abaixo do solo.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/leite.png" alt="Leite">
<div class="receitas--cards--texto--hort">
<h3>Leite</h3>
<p>Rico em cálcio. Tomateiros gostam muito desse tipo de rega.</p>
<p><span>Modo de uso:</span> lave as embalagens de leite e regue as plantas.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/leguminosas.png" alt="Leguminosas">
<div class="receitas--cards--texto--hort">
<h3>Leguminosas</h3>
<p>Auxiliam na produção de nitrogênio e na rotação de culturas dos vasos.</p>
<p><span>Modo de uso:</span> plante alguns feijões junto dos vasos com outras plantas, depois corte
as folhas e enterre-as.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/vinagre.png" alt="Vinagre">
<div class="receitas--cards--texto--hort">
<h3>Vinagre</h3>
<p>Ajuda no crescimento das plantas, além de servir como inseticida natural.</p>
<p><span>Modo de uso:</span> pulverize o vinagre diluído em água nas plantas.</p>
</div>
</div>
<div class="receitas--cards--imagem">
<img src="assets/img/cards-hortalicias/couve-e-brocolis.png" alt="Couve e Brócolis">
<div class="receitas--cards--texto--hort">
<h3>Couve e Brócolis</h3>
<p>Ajudam na renovação da terra.</p>
<p><span>Modo de uso:</span> pique os talos em cubos pequenos e enterre na terra.</p>
</div>
</div>
</section>
</main>
<footer class="rodape">
<section id="email-redes">
<div>
<label for="emailid" class="titulo-reuti">Assine nossa Newsletter: </label>
<input type="email" id="emailid" placeholder="email@dominio.com">
</div>
<nav class="redes-sociais">
<a href="#"><img src="assets/img/redes_sociais/instagram.svg" alt="Ícone Instagram" class="icones"></a>
<a href="#"><img src="assets/img/redes_sociais/youtube.svg" alt="Ícone YouTube" class="icones"></a>
<a href="#"><img src="assets/img/redes_sociais/twitter.svg" alt="Ícone Twitter" class="icones"></a>
</nav>
</section>
<section id="rodape-info">
<p class="rodape-texto">Página desenvolvida em conformidade com as regras do Projeto Integrador do primeiro semestre do curso de
Desenvolvimento de Software Multiplataforma</p>
<p class="copyright rodape-texto">Copyright 2022 ©️</p>
</section>
</footer>
<script src="assets/js/main.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<script>
function changeSize() {
if (window.innerWidth >= 769) {
items.style.display = 'flex'
}
else {
items.style.display = 'none'
}
}
function clickMenu() {
if (items.style.display == 'flex') {
items.style.display = 'none'
}
else {
items.style.display = 'flex'
}
}
</script>
</body>
</html>