-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (134 loc) · 5.07 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
<!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" />
<meta
name="description"
content="Conecte-se a amigos, familiares e colegas. Crie seu perfil hoje! Crie Eventos. Partilhe fotos. Veja amigos. Chat Online. Eventos. Encontre Amigos. Jogue com os Seus Amigos."
/>
<!--Link CSS-->
<link rel="stylesheet" href="css/style.css" />
<!--Font-->
<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=Roboto:wght@300&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="img/facebook-brands.svg" />
<title>Facebook</title>
</head>
<body>
<main class="container">
<div class="fb_logo">
<img class="logo" src="img/facebook.svg" alt="logo facebook" />
<h2 class="description">
O Facebook ajuda você a se conectar e compartilhar com as pessoas que
fazem parte da sua vida.
</h2>
</div>
<div class="login">
<div class="sign-in">
<input class="email" type="email" placeholder="Email ou telefone" />
<input class="pass" type="password" placeholder="Senha" />
<button class="button-in">Entrar</button>
<!-- IN because of sign-IN -->
<a class="password" href="#">Esqueceu a senha?</a>
</div>
<hr />
<div class="sign-up">
<button class="button-up">Criar nova conta</button>
</div>
<div class="footer">
<p>
<a href="#">Criar uma Página</a> para uma celebridade, uma marca ou
uma empresa.
</p>
</div>
</div>
</main>
<div id="modal" class="modal-container">
<div class="modal-style">
<div class="modal-inf">
<button class="close">X</button>
<h3>Cadastre-se</h3>
<p>É rápido e fácil.</p>
</div>
<hr />
<form action="#" class="form">
<div class="user-inf">
<div>
<input class="form-input" type="text" placeholder="Nome" required />
<input class="form-input" type="text" placeholder="Sobrenome" required />
</div>
<input
class="form-input_dif"
type="email"
placeholder="Celular ou email"
required
/>
<input
class="form-input_dif"
type="password"
placeholder="Nova senha"
required
/>
</div>
<div class="bord">
<label for="#">Data de Nascimento <i class="fas fa-question-circle question"></i
></label>
<div class="option-select">
<select class="select" name="" id="idDay" required></select>
<select class="select" name="" id="idMonth" required></select>
<select class="select" name="" id="select" required></select>
</div>
</div>
<div class="radio-button">
<label for=""
>Gênero <i class="fas fa-question-circle question gender"></i
></label>
<div id="genders">
<div class="genders">
<p>Feminino</p>
<input type="radio" />
</div>
<div class="genders">
<p>Masculino</p>
<input type="radio" />
</div>
<div class="genders">
<p>Personalizado</p>
<input type="radio" />
</div>
</div>
</div>
<p class="dados">
Ao clicar em Cadastre-se, você concorda com nossos
<a href="#">Termos</a>, <a href="">Política de Dados</a> e
<a href="">Política de Cookies.</a>Você poderá receber notificações
por SMS e cancelar isso quando quiser.
</p>
<div class="center-btn">
<button class="button-modal">Cadastrar-se</button>
</div>
</form>
</div>
</div>
<section class="section" id="section">
<div class="relative">
<p>Ao <span class="grey"> informar sua data de nascimento,</span> você ajuda a garantir que a sua experiência no Facebook seja adequada à sua idade. Se quiser alterar quem vê isso, vá para a seção Sobre do seu perfil. Para obter mais detalhes, acesse a nossa <a href="#">Política de Dados.</a></p>
</div>
</section>
<section class="section section-one" id="gender-one">
<div class="relative">
<p>Você poderá alterar quem vê o gênero no seu perfil posteriormente. Selecione Personalizado se deseja escolher outro gênero ou prefere não informá-lo.</p>
</div>
</section>
<script src="./js/main.js"></script>
<script src="https://kit.fontawesome.com/8fc257dc80.js"
crossorigin="anonymous"
></script>
</body>
</html>