-
Notifications
You must be signed in to change notification settings - Fork 1
/
form-success.html
155 lines (147 loc) · 7.94 KB
/
form-success.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
<!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">
<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=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
<title>Alura Books | Cadastro Efetuado</title>
</head>
<body>
<header class="header">
<div class="container">
<input type="checkbox" id="menu" class="container__button">
<!-- menu icon is inside the label to link it to the checkbox when the icon is clicked -->
<label for="menu">
<span class="header__hamburger-menu container__icon "></span>
</label>
<ul class="menu-list">
<li class="menu-list__title">Categorias</li>
<li class="menu-list__item"><a href="#" class="menu-list__link">PROGRAMAÇÃO</a></li>
<li class="menu-list__item"><a href="#" class="menu-list__link">FRONT-END</a></li>
<li class="menu-list__item"><a href="#" class="menu-list__link">INFRAESTRUTURA</a></li>
<li class="menu-list__item"><a href="#" class="menu-list__link">BUSINESS</a></li>
<li class="menu-list__item"><a href="#" class="menu-list__link">DESIGN & UX</a></li>
</ul>
<img src="img/Logo.svg" alt="Logo da Alura Books" class="container__icon">
<h1 class="container__title"><b class="container__title--bold">Alura</b>Books</h1>
</div>
<ul class="nav-options">
<!-- replicating the same content and logic used for hamburger-menu; I tried to use one single menu-list, but couldn't get a good position to it using CSS -->
<input type="checkbox" id="options__menu" class="options__button">
<label for="options__menu">
<li class="options__item">Categorias</li>
</label>
<ul class="menu-list">
<li class="menu-list__item"><a href="#" class="menu-list__link">PROGRAMAÇÃO</a></li>
<li class="menu-list__item"><a href="#" class="menu-list__link">FRONT-END</a></li>
<li class="menu-list__item"><a href="#" class="menu-list__link">INFRAESTRUTURA</a></li>
<li class="menu-list__item"><a href="#" class="menu-list__link">BUSINESS</a></li>
<li class="menu-list__item"><a href="#" class="menu-list__link">DESIGN & UX</a></li>
</ul>
<li class="options__item"><a href="#" class="options__link">Favoritos</a></li>
<li class="options__item"><a href="#" class="options__link">Minha Estante</a></li>
</ul>
<div class="container">
<a href="#"><img src="img/Favoritos.svg" alt="Itens favoritos" class="container__icon container__icon--visible"></a>
<a href="#"><img src="img/Compras.svg" alt="Carrinho de compras" class="container__icon"></a>
<a href="#"><img src="img/Usuario.svg" alt="Menu do usuário" class="container__icon"></a>
</div>
</header>
<section class="banner">
<h2 class="banner__title">Cadastro finalizado</h2>
</section>
<!-- this HTML was provided in the course, so classes were named in portuguese -->
<main class="principal cadastro">
<h2 class="principal__titulo">Sucesso!</h2>
<h3 class="principal__subtitulo cadastro__subtitulo">Você finalizou seu cadastro!</h3>
<p class="principal__texto">Caso deseje editar informações ou atualizá-las no futuro, é só acessar a página de
perfil!</p>
<img src="./img/form-success.png" alt="Ficha de cadastro completada"
class="cadastro__imagem">
</main>
<hr>
<footer>
<h2 class="footer__title">Grupo Alura</h2>
<ul class="footer__list">
<li class="footer__list-title">Educação</li>
<li class="footer__list-item">
<img src="img/Caelum.png" alt="logo da empresa Caelum">
<a href="#" class="footer__list-anchor">Caelum</a>
</li>
<li class="footer__list-item">
<img src="img/CasaDoCodigo.png" alt="logo da empresa Casa do Código">
<a href="#" class="footer__list-anchor">Casa do Código</a>
</li>
</ul>
<ul class="footer__list">
<li class="footer__list-title">Educação Online</li>
<li class="footer__list-item">
<img src="img/Alura.png" alt="logo da empresa Alura">
<a href="#" class="footer__list-anchor">Alura</a>
</li>
<li class="footer__list-item">
<img src="img/AluraEmpresas.png" alt="logo da empresa Alura para empresas">
<a href="#" class="footer__list-anchor">Alura para Empresas</a>
</li>
<li class="footer__list-item">
<img src="img/AluraLatam.png" alt="logo da empresa Alura LATAM">
<a href="#" class="footer__list-anchor">Alura LATAM</a>
</li>
<li class="footer__list-item">
<img src="img/AluraStart.png" alt="logo da empresa Alura Start">
<a href="#" class="footer__list-anchor">Alura Start</a>
</li>
<li class="footer__list-item">
<img src="img/MusicDot.png" alt="logo da empresa MusicDot">
<a href="#" class="footer__list-anchor">MusicDot</a>
</li>
<li class="footer__list-item">
<img src="img/AluraLingua.png" alt="logo da empresa Alura Língua">
<a href="#" class="footer__list-anchor">Alura Língua</a>
</li>
<li class="footer__list-item">
<img src="img/PM3.png" alt="logo da empresa PM3">
<a href="#" class="footer__list-anchor">PM3</a>
</li>
</ul>
<ul class="footer__list">
<li class="footer__list-title">Comunidade</li>
<li class="footer__list-item">
<img src="img/HipstersTech.png" alt="logo da comunidade Hipsters ponto Tech">
<a href="#" class="footer__list-anchor">Hipsters ponto Tech</a>
</li>
<li class="footer__list-item">
<img src="img/Scuba.png" alt="logo da comunidade Scuba Dev">
<a href="#" class="footer__list-anchor">Scuba Dev</a>
</li>
<li class="footer__list-item">
<img src="img/Layers.png" alt="logo da comunidade Layers ponto Tech">
<a href="#" class="footer__list-anchor">Layers ponto Tech</a>
</li>
<li class="footer__list-item">
<img src="img/LikeABoss.png" alt="logo da comunidade Like a Boss">
<a href="#" class="footer__list-anchor">Like a Boss</a>
</li>
<li class="footer__list-item">
<img src="img/CarreiraSemFronteira.png" alt="logo da comunidade Carreira sem Fronteira">
<a href="#" class="footer__list-anchor">Carreira sem Fronteira</a>
</li>
<li class="footer__list-item">
<img src="img/HipstersJobs.png" alt="logo da comunidade Hipsters ponto Job">
<a href="#" class="footer__list-anchor">Hipsters ponto Job</a>
</li>
<li class="footer__list-item">
<img src="img/GUJ.png" alt="logo da comunidade GUJ">
<a href="#" class="footer__list-anchor">GUJ</a>
</li>
</ul>
</footer>
<script src="scripts.js"></script>
</body>