-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (52 loc) · 2.25 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Adiciona a fontes de texto -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@600&family=Roboto+Mono:wght@700&display=swap"
rel="stylesheet"
/>
<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>Habits</title>
<!-- aqui importamos o CSS para o HTML -->
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- Cabeçalho -->
<header>
<!-- Imagem do logotipo do aplicativo -->
<img src="./assets/logo.svg" alt="Logomarca do aplicativo Habits" />
<button>
<!-- Botão Registrar o dia -->
<img src="./assets/plus.svg" alt="Ícone sinal de mais roxo" />
<div>
Registrar o meu dia
</div>
</button>
</header>
<!-- Geralmente os inputs ficam dentro de uma caixa chamada form, aqui usamos uma identificação, tipo RG mas que não pode ser repetido esse nome em outra id ou em alguma classe -->
<form id="form-habits">
<!-- Divs são uma caixa genérica, mas podemos criar classificações nela, classes podem ser repetidas os nomes, aqui teremos os hábitos -->
<div class="habits">
<!-- Nessa div temos os hábito, se apertamos Windows + . abre os emoticons -->
<div class="habit" data-name="run">🏃</div>
<div class="habit" data-name="water">💧</div>
<div class="habit" data-name="food">🍎</div>
<div class="habit" data-name="journal">🗞️</div>
<div class="habit" data-name="takePills">💊</div>
<div class="habit" data-name="sleep">💤</div>
</div>
<!-- Nessa div temos os dias -->
<div class="days"> </div>
</div>
</form>
<!-- aqui importamos a biblioteca da Rocketseat a ser usada no projeto -->
<script src="https://cdn.jsdelivr.net/gh/maykbrito/libs/NLWSetup/source/NLWSetup.js"></script>
<!-- aqui importamos o JavaScript no HTML -->
<script src="./script.js"></script>
</body>
</html>