-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (104 loc) · 3.76 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./src/css/reset.css" />
<link rel="stylesheet" href="./src/css/styles.css" />
</head>
<body>
<main>
<section class="form">
<div class="logo">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
/>
</svg>
</div>
<h1 class="form__title">Acesse sua Conta</h1>
<p class="form__description">
Bem-vindo de volta! Por favor, insira suas informações
</p>
<form>
<label class="form-control__label">E-mail</label>
<input type="email" class="form-control" />
<label class="form-control__label">Senha</label>
<div class="password-field">
<input
type="password"
class="form-control"
minlength="4"
id="password"
/>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
/>
</svg>
</div>
<div class="password__settings">
<label class="password__settings__remember">
<input type="checkbox" />
<span class="custom__checkbox">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</span>
Lembre-se de mim
</label>
<a href="#">Esqueceu a Senha?</a>
</div>
<button type="submit" class="form__submit" id="submit">Entrar</button>
</form>
<p class="form__footer">
Não tem uma conta?<br />
<a href="#">Criar uma conta</a>
</p>
</section>
<section class="form__animation">
<div id="ball">
<div class="ball">
<div id="face">
<div class="ball__eyes">
<div class="eye_wrap"><span class="eye"></span></div>
<div class="eye_wrap"><span class="eye"></span></div>
</div>
<div class="ball__mouth"></div>
</div>
</div>
</div>
<div class="ball__shadow"></div>
</section>
</main>
<script src="./src/js/index.js"></script>
</body>
</html>