-
Notifications
You must be signed in to change notification settings - Fork 0
/
cadastro-produto.html
131 lines (121 loc) · 7.83 KB
/
cadastro-produto.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
<!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>Cadastro de produto</title>
<meta name="description" content="AluraGeek, sua loja online de produtos Geek e Nerd especialmente selecionados. Cadastre um novo produto!">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/cabecalho.css">
<link rel="stylesheet" href="css/contato.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/rodape.css">
<link rel="stylesheet" href="css/cadastro-edicao-produto.css">
</head>
<body>
<a href="#conteudo-principal" class="pular-navegacao">Pular para o conteúdo principal</a>
<header class="cabecalho container">
<div class="cabecalho-divisao">
<a href="index.html" class="cabecalho__link" title="Home Alura Geek">
<img src="img/logo-alurageek.svg" alt width="175" height="50" class="cabecalho__img">
</a>
</div>
<button class="btn-padrao btn-cor-2" role="button">Menu administrador</button>
</header>
<!-- Fim cabeçalho -->
<main>
<section class="cadastro-produto container" id="conteudo-principal">
<form action="" class="cadastro-produto__form form-padrao">
<p class="form__titulo form__descricao--destaque">Adicionar novo produto</p>
<fieldset class="form__campo">
<input type="text" class="campo__texto campo__texto--input" id="cadastro-produto__imagem" name="imagem" placeholder="Digite o endereço URL da imagem" data-tipo="urlImagem" required>
<label for="cadastro-produto__imagem" class="campo__label">URL da imagem</label>
<span class="form__erro"></span>
</fieldset>
<fieldset class="form__campo">
<input type="text" class="campo__texto campo__texto--input" id="cadastro-produto__alt" name="alt" placeholder="Digite a descrição da imagem do produto" data-tipo="alt" required>
<label for="cadastro-produto__alt" class="campo__label">Descrição da imagem</label>
<span class="form__erro"></span>
</fieldset>
<fieldset class="form__campo">
<input type="text" class="campo__texto campo__texto--input" id="cadastro-produto__nome-produto" name="nome-produto" placeholder="Digite o nome do produto" data-tipo="nomeProduto" maxlength="21" required>
<label for="cadastro-produto__nome-produto" class="campo__label">Nome do produto</label>
<span class="form__erro"></span>
</fieldset>
<fieldset class="form__campo">
<input type="number" class="campo__texto campo__texto--input" id="cadastro-produto__preco" name="preco" placeholder="Digite o preco do produto" data-tipo="preco" pattern="^([\d]+[.][\d]{0,2})|([\d]+)$" min="0.01" step="any" required>
<label for="cadastro-produto__preco" class="campo__label">Preço do produto</label>
<span class="form__erro"></span>
</fieldset>
<fieldset class="form__campo">
<textarea name="descricao" class="campo__texto campo__texto--textarea" id="cadastro-produto__descricao" cols="30" rows="10" placeholder="Descreva o produto" data-tipo="descricao" maxlength="200" required></textarea>
<label for="cadastro-produto__descricao" class="campo__label">Descrição do produto</label>
<span class="form__erro"></span>
</fieldset>
<fieldset class="form__campo--botoes">
<button type="submit" class="form__btn--grande btn-padrao btn-cor-1">Adicionar produto</button>
<a href="produtos.html" class="form__btn--grande btn-padrao btn-cor-2">Voltar</a>
</fieldset>
</form>
</section>
<!-- Fim cadastro de produto -->
</main>
<footer>
<section class="contato container">
<div class="contato-divisao">
<img src="img/logo-alurageek.svg" alt="Logotipo da loja Alura Geek" width="180" height="50" class="contato__logo">
<nav class="nav">
<ul class="nav__lista">
<li class="nav__item"><a href="#" class="nav__link">Quem somos</a></li>
<li class="nav__item"><a href="#" class="nav__link">Política de privacidade</a></li>
<li class="nav__item"><a href="#" class="nav__link">Programa fidelidade</a></li>
<li class="nav__item"><a href="#" class="nav__link">Nossas lojas</a></li>
<li class="nav__item"><a href="#" class="nav__link">Quero ser franqueado</a></li>
<li class="nav__item"><a href="#" class="nav__link">Anuncie aqui</a></li>
</ul>
</nav>
</div>
<form action="" class="contato__form form-padrao">
<p class="form__descricao"><strong class="form__descricao--destaque">Fale conosco!</strong><br>Preencha os campos abaixo e envie sua mensagem</p>
<fieldset class="form__campo">
<input type="text" class="campo__texto campo__texto--input" id="contato__nome" name="name" placeholder="Digite seu nome" data-tipo="nome" maxlength="25" required>
<label for="contato__nome" class="campo__label">Nome</label>
<span class="form__erro"></span>
</fieldset>
<fieldset class="form__campo">
<textarea name="body" class="campo__texto campo__texto--textarea" id="contato__mensagem" cols="30" rows="10" placeholder="Digite sua mensagem" data-tipo="mensagem" maxlength="200" required></textarea>
<label for="contato__mensagem" class="campo__label">Mensagem</label>
<span class="form__erro"></span>
</fieldset>
<fieldset>
<button type="submit" class="btn-padrao btn-cor-1">Enviar mensagem</button>
</fieldset>
</form>
</section>
<!-- Fim contato -->
<section class="rodape container">
<p class="creditos">© Desenvolvido por Lucas da Paz - 2022</p>
<ul class="redes">
<li><a href="https://github.com/xLucaspx" class="redes__link" title="Lucas da Paz | GitHub" target="_blank">
<img src="img/redes/logo-github.svg" alt="Logo GitHub" width="45px" height="45px" class="redes__img">
</a></li>
<li><a href="https://www.linkedin.com/in/xlucaspx/" class="redes__link" title="Lucas da Paz | LinkedIn" target="_blank">
<img src="img/redes/logo-linkedin.svg" alt="Logo LinkedIn" width="45px" height="45px" class="redes__img">
</a></li>
<li><a href="https://www.instagram.com/luacspaz/" class="redes__link" title="Lucas da Paz | Instagram" target="_blank">
<img src="img/redes/logo-instagram.png" alt="Logo Instagram" width="45px" height="45px" class="redes__img">
</a></li>
</ul>
</section>
</footer>
<!-- Fim rodapé -->
<script src="js/validacao-form.js"></script>
<script src="js/cadastra-produto.js" type="module"></script>
</body>
</html>