-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
319 lines (290 loc) · 14.5 KB
/
index.html
File metadata and controls
319 lines (290 loc) · 14.5 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="Imagens/iconleaf.png">
<link rel="stylesheet" type="text/CSS" href="CSS/index.css">
<script src="jquery.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header id="topo">
<div class="menuHamburguer">
<a href="#"><img class="icone_menu" src="Imagens/menuhamburguer.svg" /></a>
</div>
<nav class="menu">
<a href="#" class="item_menu">Início</a>
<a href="HTML/quemsomosnos.html" class="item_menu">Quem somos?</a>
<a href="HTML/produtos.html" class="item_menu">Produtos</a>
<a href="HTML/receitinhas.html" class="item_menu">Receitinhas</a>
</nav>
<div class="logo">
<img src="Imagens/logo.svg" alt="logo" />
</div>
<div class="autenticacao">
<a href="HTML/formulario.html">Entrar</a>
<a href="HTML/produtos.html"><img src="Imagens/carrinho.svg" alt="Carrinho de compras"></a>
</div>
</header>
<section class="buscar">
<div id="divBusca">
<img src="Imagens/lupa.svg" alt="Pesquisar..." />
<input type="text" id="txtBusca" placeholder="Encontre um produto..." />
<button id="btnBusca">Pesquisar</button>
</div>
</section>
<main>
<section id="banner">
<div id="btnAnte"></div>
<div id="btnProx"></div>
<div id="botoes">
<input type="radio" id="b0" name="banners" value="0" />
<input type="radio" id="b1" name="banners" value="1" />
<input type="radio" id="b2" name="banners" value="2" />
<input type="radio" id="b3" name="banners" value="3" />
</div>
</section>
<section class="index-texto">
<!--breve descrição do serviço de alimentação oferecido pelo site. Mais informações serão produzidas na seção "Quem somos nós?"-->
<p>Somos uma família de agricultores da cidade de Antônio Carlos, Santa Catarina. Cuidar da
terra e
produzir alimentos nos dá muito orgulho. Aqui você pode encontrar o que estamos produzindo no
momento. Você escolhe o que precisa e nós levamos até sua casa. Sustentável, barato e prático! E,
fazendo
isso, você ainda contribui para o crescimento e desenvolvimento da agricultura familiar, o
verdadeiro pilar
que alimenta as famílias brasileiras!
</p>
</section>
<section class="flex-container">
<article id="flex-item">
<div class="escopo-wrapper">
<h2>Escopo do Projeto</h2>
<p>
A empresa Produtos da Terra procurou os desenvolvedores Bianca Schmitt, Eduardo Franco,
Guilherme
Rodrigues e Mariana Paz para o desenvolvimento de um site, com intuito de realizar o comércio
eletrônico(E-commerce) de legumes e verduras, com especificações para criar uma landing page que acesse outras 3 páginas, cada uma com as funções pré-definidas abaixo:
</p>
<h3>
1. Landing Page
</h3>
<p>
Com base na empresa (grupo), fale brevemente sobre os fundadores e a parte do
desenvolvimento. Deve existir um botão de acessibilidade que transforme as letras utilizadas na
página em um tamanho maior para pessoas com baixa visão;
</p>
<h3>
2.Pagina de Calculadora (Simples e Científica);
</h3>
<p>Criar uma calculadora simples, contendo apenas as 4 operações básicas da matemática</p>
<h3>
3.Pagina de cadastro com seguintes campos:
</h3>
<p>
Nome, CPF, data de nascimento, gênero, CEP, telefone, email, mensagem,
botão de limpar formulário e botão de enviar;
</p>
<h3>
4.Página com Programação Orientada a Objetos.
</h3>
<p>
Foram realizadas diversas reuniões para aprimorar o escopo e desenvolver o site.
</p>
</div>
<div class="parceria-wrapper">
<h3>PARCERIAS:</h3>
<div>
<img class="parceiros" src="Imagens/SoulCode.jpg">
<img class="parceiros" src="Imagens/logo-tnt.png">
</div>
</div>
</article>
<aside id="flex-item1">
<h2>Desenvolvedores:</h2>
<button class="btnDev" type="button" onclick="mostrar1()">Bianca
Schmitt</button>
<div class="esconder1">
<img class="img" src="Imagens/Bianca.jpeg">
<p >
Bianca Klein Schmitt é estudante de desenvolvimento Web
Full-Stack na SoulCode Academy. Com os conhecimentos obtidos no curso, concebeu a ideia e o estilo
do
site.
Além disso, desenvolveu a landing page, o carrossel de imagens, a responsividade, além de colaborar
com
a
equipe quando foi preciso.
</p>
</div>
<button class="btnDev" type="button" onclick="mostrar2()">Eduardo
Franco</button>
<div class="esconder2">
<img class="img" src="Imagens/WhatsApp Image 2021-10-23 at 22.07.13 (1).jpeg">
<p>
Eduardo Franco é Técnico em Informática e estudante de desenvolvimento Web Full Stack na Soul Code Academy. Utilizou a tecnologia Javascript voltada para a programação orientada a objeto e colaborou com o time em detalhes relacionados ao design.
</p>
</div>
<button class="btnDev" type="button" onclick="mostrar3()">Guilherme
Rodrigues</button>
<div class="esconder3">
<img class="img" src="Imagens/Guilherme.jpeg"/>
<p >
Guilherme Marcelino Rodrigues tem 19 anos, é técnico industrial e estudante de desenvolvimento Web Full-Stack na SoulCode Academy. Com os conhecimentos obtidos no curso, concebeu as funcionalidades e a interface da calculadora. Além disso, desenvolveu utilizando o paradigma POO, compôs o fluxo de trabalho no git/github, além de colaborar com o resto da equipe quando foi preciso.
</p>
</div>
<button class="btnDev" type="button" onclick="mostrar4()">Mariana Paz</button>
<div class="esconder4">
<img class="img" src="Imagens/Mariana1 (1) (1) (1) (1).jpeg">
<p >
Mariana Paz, advogada e estudante de desenvolvimento Web Full Stack na SoulCode Academy. Utilizou a tecnologia Javascript para realizar validação do formulário e colaborou no design do site, além de colaborar com o resto da equipe quando foi preciso.
</p>
</div>
</aside>
</section>
<p id="subir">
<!--imagem linkada para subir ao inicio da pagina-->
<a href="#topo"><img src="Imagens/subir.png"></a>
</p>
</main>
<!-- *****************************************FOOTER*************************************** -->
<footer>
<!-- ***************************************************COMECEI A SECTION************* -->
<section class="sectionFooter">
<div id="footer1">
<nav class=" classfooter">
<ul>
<p id="institucional"> INSTITUCIONAL </p>
<li>Quem somos</li>
<li> Como funciona</li>
<li>Fundo do pequeno produtor</a></li>
<li> Famílias produtora</li>
<li> Visitas ao produtor</li>
<li>
<button id="btnNews" type="button" onclick="mostrarParagrafo()"
value="exibe paragrafo">Newsletter</button>
<p class="escondido">Deixe seu email aqui e receba ofertas e novidades exclusivas:</p>
<p class="escondido"><input type="text" placeholder="digite o seu e-mail aqui" /></p>
</li>
</ul>
</nav>
</div>
<div id="footer2">
<nav class="classfooter">
<ul>
<section class="redesSociais">
<p id="redesSociais"> SIGA NOSSAS REDES </p>
<div id="central">
<div id="div1">
<li class="linha">
<img src="https://img.icons8.com/material-outlined/24/000000/twitter.png"
alt=" ícone do Twitter" a href="" />
</li>
</div>
<div id="div2">
<li>
<img src="https://img.icons8.com/material-rounded/24/000000/linkedin.png"
alt="ícone do linkedIn " />
</li>
</div>
<div id="div3">
<li>
<img src="https://img.icons8.com/material-outlined/24/000000/instagram-new--v1.png"
alt="ícone do instagram" />
</li>
</div>
<div id="div4">
<li>
<img src="https://img.icons8.com/material-rounded/24/000000/facebook-new.png"
alt="ícone do facebook" />
</li>
</div>
</div>
</section>
</ul>
</nav>
</div>
<div id="footer3">
<nav class=" classfooter">
<ul>
<p id="central"> FALE CONOSCO </p>
<li> <img src="https://img.icons8.com/material-sharp/24/000000/no-phones--v1.png"
alt=" ícone de telefone " /> (XX) XXXX-XXXX</li>
<li><img src="https://img.icons8.com/material-outlined/24/000000/email.png"
alt="ícone de email " />
faleconosco@produtodaterra.com.br </li>
<li><img src="https://img.icons8.com/material/24/000000/internet.png"
alt="ícone de servidor " />
www.produtosdaterra.com.br </li>
<li><img src="https://img.icons8.com/material/24/000000/marker--v1.png" alt="ícone de mapa" />
Rua Desidério Schmitt, Antônio Carlos-SC, Brasil, CEP 88180-000.
</li>
</ul>
</nav>
</div>
</section>
<!-- *******************************************************FECHEI A SECTION************* -->
<!-- ************************************* DIV PARA FORMAS DE PAGAMENTO -->
<p id="formaPag"> Formas de pagamento:</p>
<div id="pagamento">
<div class="pagamento">
<li>
<img src="https://img.icons8.com/fluency/48/000000/mastercard.png" alt="ícone do cartão " />
</li>
</div>
<div class="pagamento">
<li>
<img src="https://img.icons8.com/fluency/48/000000/visa.png" alt="ícone do cartão" />
</li>
</div>
<div class="pagamento">
<li>
<img src="https://img.icons8.com/fluency/48/000000/card-in-use-1.png" />
</li>
</div>
<div class="pagamento">
<li>
<img src="https://img.icons8.com/color/50/000000/mercado-pago.png" />
</li>
</div>
<div class="pagamento">
<li>
<img src="https://img.icons8.com/color/48/000000/paypal.png" />
</li>
</div>
<div class="pagamento">
<li>
<img src="https://img.icons8.com/fluency/48/000000/diners-club.png" />
</li>
</div>
<div class="pagamento">
<li>
<img src="https://img.icons8.com/color/48/000000/american-express-squared.png" />
</li>
</div>
</div>
</footer>
<section id="rodape">
<p>
Copyright © 2021 Produtos da Terra | Todos os direitos reservados | Políticas de
Privacidade | Políticas de
Cookies
</p>
</section>
<script src="JavaScript/index.js"></script>
<!-- ***************************************************ADICIONANDO O VLIBRAS *********************** -->
<div vw class="enabled">
<div vw-access-button class="active"></div>
<div vw-plugin-wrapper>
<div class="vw-plugin-top-wrapper"></div>
</div>
</div>
<script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
<script>
new window.VLibras.Widget('https://vlibras.gov.br/app');
</script>
<!-- *************************************************** VLIBRAS *********************** -->
</body>
</html>