-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (107 loc) · 3.42 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crie seu evento</title>
<link
href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header>
<h1>
Crie e compartilhe seu evento.
</h1>
<p>
O primeiro passo é preencher esse formulário de inscrição.
</p>
</header>
<form id="my-form">
<fieldset>
<div class="fieldset-wrapper">
<legend>Informações do evento</legend>
<div class="input-wrapper">
<label for="event-title">Título do evento <span>(mínimo 8 caracteres)</span></label>
<input
type="text"
id="event-title"
required
minlength="8" />
</div>
<div class="input-wrapper">
<label for="event-link">Link do evento <span>(comece com https://)</span></label>
<input type="url" id="event-link" />
</div>
<div class="input-wrapper">
<label for="event-whatsapp">Whatsapp para contato <span>(somente números)</span></label>
<input type="number" id="event-whatsapp" />
</div>
<div class="input-wrapper">
<label for="event-info">Informações extras</label>
<textarea id="event-info" cols="30" rows="10"></textarea>
</div>
<div class="input-wrapper">
<label for="event-category">Categoria </label>
<select id="event-category">
<option value="live">Ao vivo</option>
<option value="podcast">Podcast</option>
<option value="mentorship">Mentoria</option>
</select>
</div>
</div>
</fieldset>
<fieldset>
<div class="fieldset-wrapper">
<legend>Privacidade</legend>
<div class="input-wrapper">
<label for="event-email">E-mail do administrador <span>(digite um email válido)</span></label>
<input type="email" id="event-email" />
</div>
<div class="input-wrapper">
<label for="event-password">Senha de acesso para os participantes <span>(mínimo 8 caracteres)</span></label>
<input
type="password"
id="event-password"
minlength="8" />
</div>
<div class="checkbox-wrapper">
<input type="checkbox" id="event-private" />
<label for="event-private">Evento privado</label>
</div>
</div>
</fieldset>
<fieldset>
<div class="fieldset-wrapper">
<legend>Dia e hora</legend>
<div class="col-3">
<div class="input-wrapper">
<label for="event-date">Data</label>
<input type="date" id="event-date" />
</div>
<div class="input-wrapper">
<label for="event-begin">Das</label>
<input type="time" id="event-begin" />
</div>
<div class="input-wrapper">
<label for="event-end">até</label>
<input type="time" id="event-end" />
</div>
</div>
</div>
</fieldset>
</form>
<footer>
<button
class="button"
form="my-form">
Salvar evento
</button>
</footer>
</div>
</body>
</html>