-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
236 lines (205 loc) · 9.96 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
<!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>Trybewarts</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="main-geral">
<header>
<nav>
<a href="https://gregoriomhbezerra.github.io/">Página inicial do portfólio</a>
<a href="https://www.linkedin.com/in/gregoriobezerra/" target="_blank"><abbr title="abre em nova aba">Meu Linkedin</abbr></a>
</nav>
</header>
<section class="lessons-pixels-art">
<!-- Esta section abaixo trata-se de parte do HTML do projeto Lessons Learned, que utiliza o scriptPixelArt.js - O CSS de todos os projetos iniciais foram feitos no style.css -->
<section class="lessons">
<img src="https://avatars.githubusercontent.com/u/110674033?v=4" alt="Imagem com perfil esquerdo de Gregório Bezerra, que está com camisa de mangas cumpridas azul" id="minha_foto">
<p>
<strong>Brasileiro</strong> e morador de <strong>Recife-PE</strong>, sou arqueólogo de formação e estudante de Desenvolvimento Web.
</p>
<p>
Nesta página encontra-se um reseumo/conjunto dos primeiros projetos realizados no curso da Trybe.<strong> Hoje em dia eu mudaria muito do que fiz, mas optei por manter os códigos como registro do desenvolvimento e também para rir um pouco.</strong>
</p>
</section>
<!-- Esta section abaixo trata-se do HTML do projeto Pixels Art, que utiliza o scriptPixelArt.js - O CSS de todos os projetos iniciais foram feitos no style.css -->
<section id="article-project">
<h1 id="title">
Paleta de Cores
</h1>
</section>
</section>
<section class="section-todo-trybewarts">
<!-- Esta section abaixo trata-se do HTML do projeto Trybewarts, que utiliza o script.js - O CSS de todos os projetos iniciais foram feitos no style.css -->
<section>
<header class="header">
<!-- <img src="images/trybewarts-header-logo.svg" alt="Logo da Trybewarts" class="trybewarts-header-logo"> -->
<h1 id="trybewarts-header-title">Trybewarts</h1>
<form action="" class="trybewarts-login" method="get">
<label for="email">
<input type="email" name="email" id="email" placeholder="Email">
</label>
<label for="senha">
<input id="senha" type="password" name="password" placeholder="Senha">
</label>
<button id="btnEntrar">Entrar</button>
</form>
</header>
<form action="" id="evaluation-form">
<h2>Formulário de Avaliação Trybewarts</h2>
<!-- Primeira Section -->
<fieldset id="section-one">
<legend>Quem é você e qual sua casa?</legend>
<label for="input-name">
<input type="text" id="input-name" placeholder="Nome">
</label>
<label for="input-lastname">
<input type="text" id="input-lastname" placeholder="Sobrenome">
</label>
<label for="input-email">
<input type="text" id="input-email" placeholder="Email">
</label>
<label id="label-casa">Casa:
<select name="House" id="house" title="Casa:">
<option value="Gitnória" id="gitnoria-house">Gitnória</option>
<option value="Reactpuff" id="reactpuff-house">Reactpuff</option>
<option value="Corvinode" id="corvinode-house">Corvinode</option>
<option value="Pytherina" id="pytherina-house" selected>Pytherina</option>
</select>
</label>
</fieldset>
<!-- Segunda section -->
<fieldset id="section-two">
<legend>Escolha apenas uma família, mas quantos conteúdos quiser</legend>
<label id="label-family">Qual sua família?</label>
<br>
<section id="teste">
<label for="frontend">
<input type="radio" name="family" id="frontend" value="Frontend">Frontend
</label>
<label for="backend">
<input type="radio" name="family" id="backend" value="Backend">Backend
</label>
<label for="fullstack">
<input type="radio" name="family" id="fullstack" value="FullStack">FullStack
</label>
</section>
<label for="" id="label-content">Qual conteúdo você está com mais vontade de aprender?</label>
<br>
<label for="hoFs">
<input type="checkbox" name="" value="HoFs" id="hoFs" class="subject">HoFs
</label>
<label for="jest">
<input type="checkbox" name="" value="Jest" id="jest" class="subject">Jest
</label>
<label for="promises">
<input type="checkbox" name="" value="Promises" id="promises" class="subject">Promises
</label>
<label for="react">
<input type="checkbox" name="" value="React" id="react" class="subject">React
</label>
<label for="sql">
<input type="checkbox" name="" value="SQL" id="sql" class="subject">SQL
</label>
<label for="python">
<input type="checkbox" name="" value="Python" id="python" class="subject">Python
</label>
</fieldset>
<!-- Terceira section -->
<fieldset>
<legend>Nos avalie de 1 a 10</legend>
<label id="label-rate">Como você avalia a Trybewarts?
<input type="radio" name="rate" value="1" id="">1
<input type="radio" name="rate" value="2" id="">2
<input type="radio" name="rate" value="3" id="">3
<input type="radio" name="rate" value="4" id="">4
<input type="radio" name="rate" value="5" id="">5
<input type="radio" name="rate" value="6" id="">6
<input type="radio" name="rate" value="7" id="">7
<input type="radio" name="rate" value="8" id="">8
<input type="radio" name="rate" value="9" id="">9
<input type="radio" name="rate" value="10" id="">10
</label>
</fieldset>
<!-- Quarta section -->
<fieldset>
<legend>Comente algo, marque o check e nos envie seu formulário</legend>
<label for="textarea" class="textarea">Deixe seu comentário:
<textarea name="" id="textarea" cols="30" rows="10" maxlength="500"></textarea>
</label>
<label for="counter">Caracteres restantes:
<p id="counter">500</p>
</label>
<label for="agreement" id="label-infos">Você concorda com o uso das informações acima?
<input type="checkbox" name="" id="agreement">
</label>
<button type="submit" id="submit-btn" disabled>Enviar</button>
</fieldset>
</form>
<section id="form-data">
<p id="form-data-nome">Nome: </p>
<p id="form-email">Email: </p>
<p id="form-casa">Casa: </p>
<p id="form-familia">Família: </p>
<p id="form-materias">Matérias: </p>
<p id="form-avaliacao">Avaliação: </p>
<p id="form-observacoes">Observações: </p>
</section>
</section>
<!-- Esta section abaixo trata-se do HTML do projeto toDoList, que utiliza o scriptTodoList.js - O CSS de todos os projetos iniciais foram feitos no style.css -->
<section class="todo-list">
<header>
<h1>
Minha Lista de Tarefas
</h1>
<p id="funcionamento">
Clique duas vezes em um item para marcá-lo como completo
</p>
</header>
<main id="main-todo">
<section>
<label for="texto-tarefa">
<button id="criar-tarefa">
Adicionar
</button>
<input type="text" name="itemDaLista" id="texto-tarefa" placeholder="digite a tarefa a ser inserida">
</label>
<button id="salvar-tarefas">
Salvar tarefas
</button>
<button id="remover-finalizados">
Remover os <em>finalizados</em>
</button>
<button id="mover-cima">
⇑
</button>
<button id="mover-baixo">
⇓
</button>
<button id="remover-selecionado">
Remover <em>selecionado</em>
</button>
<button id="apaga-tudo">
Apagar tudo
</button>
</section>
<ol id="lista-tarefas">
</ol>
</main>
</section>
</section>
<footer>
<p>
Criado por <a href="https://www.linkedin.com/in/gregoriobezerra/" target="_blank"><abbr title="Abre o Linkedin em uma nova aba">Gregório Bezerra</abbr></a> © 2022
</p>
</footer>
</main>
<script src="script.js"></script>
<!-- <script src="scriptPixelsArt.js"></script>
<script src="scriptTodoList.js"></script> -->
</body>
</html>