forked from reprograma/On5-projeto-final
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
349 lines (312 loc) · 13.8 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>M de Maravilhosa</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900|Roboto+Slab:700|Roboto:400,400i"
rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<nav class="navegacao">
<div class="navegacao__box container">
<a class="navegacao__logo" href="index.html">
<img class="img-responsive" src="img/logo-white.png" alt="Logo M de Maravilhosa" />
</a>
<div class="navegacao__itens" id="menuResponsivo">
<div class="navegacao__nav">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="http://www.reprograma.com.br/" target="_blank">Conheça a {reprograma}</a>
</li>
</ul>
</div>
<div class="navegacao__redes-sociais">
<a href="https://www.facebook.com/ReprogramaBr/" target="_blank">
<img src="img/icon-facebook.png" alt="Ícone do Facebook" />
</a>
<a href="https://twitter.com/ReprogramaBr" target="_blank">
<img src="img/icon-twitter.png" alt="Ícone do Twitter" />
</a>
<a href="https://www.instagram.com/reprogramabr/" target="_blank">
<img src="img/icon-instagram.png" alt="Ícone do Instagram" />
</a>
<a href="https://www.linkedin.com/company/reprogramabr/" target="_blank">
<img src="img/icon-linkedin.png" alt="Ícone do LinkedIn" />
</a>
</div>
</div>
<div class="navegacao__menu-hamburguer" id="btnResponsivo">
<a href="#">
<img src="img/menu-nav.png" alt="Menu de navegação" />
</a>
</div>
</div>
</nav>
<header class="header">
<div class="container">
<div class="principal">
<h1 class="principal__titulo">
Você conhece as mulheres que mudaram o mundo?
</h1>
<a class="principal__btn btn btn_roxo" href="#mulheres-maravilhosas">Quero Conhecer</a>
</div>
</div>
</header>
<main>
<section class="maravilhosas container" id="mulheres-maravilhosas">
<h3 class="maravilhosas__titulo">
Veja todas as mulheres homenageadas nesse projeto!
</h3>
<div class="maravilhosas__box">
<div class="maravilhosas__perfil">
<a href="./maravilhosas/AdaCruz/michelle-obama.html">
<img class="img-responsive" src="./maravilhosas/AdaCruz/img/a3-02262020-michelle-jpg.jpg"
alt="Michelle Obama com a mão no rosto" />
<p>Michelle Obama</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="maravilhosas/andreia-castanharo/hedy-lamar.html">
<img class="img-responsive" src="./maravilhosas/andreia-castanharo/img/capasinais.PNG"
alt="foto da mulher chamada Hedy Lamar com logo de sinais" />
<p> Hedy Lamarr</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/carolina-brito/maria-cristina.html">
<img class="img-responsive" src="./maravilhosas/carolina-brito/img/IMG_4719.JPG"
alt="Foto antiga em preto e branco do rosto de uma mulher com a mão no queixo, de cabelos curtos e ondulados, e batom vermelho sobreposto aos tons de preto e branco da fotografia" />
<p>Maria Cristina Barbalho de Oliveira</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/christiane-gomes/marielle-franco.html">
<img class="img-responsive" src="./maravilhosas/christiane-gomes/img/marielle-franco-inicio.jpg"
alt="Foto da Marielle Franco" />
<p>Marielle Franco</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/claudia-martins/imperatriz-leopoldina.html">
<img class="img-responsive" src="./maravilhosas/claudia-martins/img/Imperatriz_rainha_D._Leopoldina.jpg"
alt="Imagem da Imperatriz Leopoldina" />
<p>Imperatriz Leopoldina</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/denise-lopes/dorothy-vaughan.html">
<img class="img-responsive" src="./maravilhosas/denise-lopes/img/Dorothy.jpg" alt="" />
<p>Dorothy Vaughan</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="maravilhosas/gabriela-castro/chimamanda-ngozi-adichie.html">
<img class="img-responsive" src="maravilhosas/gabriela-castro/img/chimamanda_index.jpg" alt="" />
<p>Chimamanda Ngozi Adichie</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/gabriela-turquetti/katia-krafft.html">
<img class="img-responsive" src="./maravilhosas/gabriela-turquetti/img/katia_photo1.jpg"
alt="Katia Krafft" />
<p>Katia Krafft</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/helena-magaldi/rosalind-franklin.html">
<img class="img-responsive" src="./maravilhosas/helena-magaldi/img/tableFranklin.jpg" alt="" />
<p>Rosalind Franklin</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="/maravilhosas/izaira/ingridy.html">
<img class="img-responsive" src="/maravilhosas/izaira/img/indy-green.jpg" alt="" />
<p>Ingridy Souza</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/jackeline-lopes/patricia-galvao.html">
<img class="img-responsive" src="./maravilhosas/jackeline-lopes/img/home.jpg" alt="Foto de Pagu" />
<p>Patrícia Galvão – Pagu</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/jaqueline-botelho/maria-de-nazare.html">
<img class="img-responsive" src="./maravilhosas/jaqueline-botelho/img/foto-mae.JPG"
alt="Maria de Nazaré, maranhense nascida em 1960" />
<p>Maria de Nazaré da Costa</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/joana-maciel/zuzu-angel.html">
<img class="img-responsive" src="./maravilhosas/joana-maciel/img/zuzu-angel-perfil.jpg" alt="" />
<p>Zuzu Angel</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/juliana-mariotto/alcione-mariotto.html">
<img class="img-responsive" src="./maravilhosas/juliana-mariotto/img/img-mulher.jpeg"
alt="Foto de uma mulher de etnia branca, de alargador nas orelhas, olhos verdes, cabelo curto e preto." />
<p>Alcione Mariotto</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/larissa-medeiros/elis-regina.html">
<img class="img-responsive" src="./maravilhosas/larissa-medeiros/img/elis4.PNG" alt="" />
<p>Elis Regina</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/leidiane-campos/edith-stein.html" target="_blank">
<img class="img-responsive" src="./maravilhosas/leidiane-campos/img/edith-stein-index.png" alt="" />
<p>Edith Stein</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/louise-josephine/j-k-rowling.html">
<img class="img-responsive" src="./maravilhosas/louise-josephine/img/jkrowling.jpg" alt="" />
<p>J. K. Rowling</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="/maravilhosas/luciaVulcano/bjork.html">
<img class="img-responsive" src="./maravilhosas/luciaVulcano/img/bjork.png" alt="" />
<p>Björk</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/lucianahb/asia-ramazan-antar.html">
<img class="img-responsive" src="./img/img-mulher-asia.jpg"
alt="imagem no estilo desenho de uma mulher séria, carregando uma arma de fogo" />
<p>Asia Ramazan Antar</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/malu-souza/tina-turner.html">
<img class="img-responsive" src="./maravilhosas/malu-souza/img/tina/tina.jpg" alt="Tina Turner" />
<p>Tina Turner</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/rose-felix/denise-coates.html">
<img class="img-responsive" src="./maravilhosas/rose-felix/img/denise.jpg"
alt="Denise Coates, mulher de cabelos negros, curto. Pele clara e olhos azuis." />
<p>Denise Coates</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/mehl-juliao/anne-frank.html">
<img class="img-responsive" src="./maravilhosas/mehl-juliao/img/anne-frank.jpg" alt="Foto de Anne Frank" />
<p>Anne Frank</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/muriel-donzellini/marilena-moretti.html">
<img class="img-responsive" src="./maravilhosas/muriel-donzellini/img/marilena_perfil.jpg"
alt="Mulher sorrindo, iluminada por um raio de sol. Está usando um lenço vermelho em sua cabeça. Há muitas plantas atrás dela." />
<p>Marilena Aparecida Moretti Alves</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/natanny-moura/viola-davis.html">
<img class="img-responsive" src="./maravilhosas/natanny-moura/img/viola_inicial.jpg" alt="" />
<p>Viola Davis</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/nayalla-lima/danielle-gomes.html">
<img class="img-responsive" src="maravilhosas/nayalla-lima/img/Danielle_Gomes.jpeg"
alt="Foto de uma mulher chamada Danielle Gomes" />
<p>Danielle Gomes</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/nicolle-sturzbecher/jenny-lawson.html">
<img class="img-responsive jenny-lawson" src="./maravilhosas/nicolle-sturzbecher/img/capajenny.png"
alt="jenny-lawson" />
<p>Jenny Lawson</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/rabeshiLopes/leonorLopes.html">
<img class="img-responsive" src="./maravilhosas/rabeshiLopes/img/foto1.jpeg" alt="" />
<p>Leonor Morais</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/raquel-calazans/juliana-nakabayashi.html">
<img class="img-responsive" src="./maravilhosas/raquel-calazans/img/ju-flores__quadrada.png"
alt="Foto de Juliana Nakabayashi com flores ao lado" />
<p>Juliana Nakabayashi</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/midori-korin/tomoe-gozen.html">
<img class="img-responsive" src="./img/tomoe-thumbnail.jpg" alt="ilustracao representando tomoe" />
<p>Tomoe Gozen</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/thais-muller/zilda-arns.html">
<img class="img-responsive" src="././maravilhosas/thais-muller/img/zilda.perfil.jpg"
alt="Foto de Zilda Arns" />
<p>Zilda Arns</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="maravilhosas/thamirys-abilio/index.html">
<img class="img-responsive" src="./maravilhosas/thamirys-abilio/img/perfilnise.jpg"
alt="foto de nise da silveira" />
<p>Nise da Silveira (Thamirys Abilio)</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/valerianascimento/vnindex.html">
<img class="img-responsive" src="./img/neusa sousa.jpg" alt="" />
<p>Neusa Santos Sousa</p>
</a>
</div>
<div class="maravilhosas__perfil">
<a href="./maravilhosas/vanessa-osorio/garotas-eniac.html">
<img class="img-responsive" src="./maravilhosas/vanessa-osorio/img/GE_ICON.png"
alt="Imagem das garotas ENIAC - Atualmente" />
<p>____Garotas do ENIAC___</p>
</a>
</div>
</div>
</section>
</main>
<footer class="rodape">
<div class="rodape__principal">
<ul class="rodape__navegacao">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="http://www.reprograma.com.br/" target="_blank">Conheça a {reprograma}</a>
</li>
</ul>
<div class="rodape__logo">
<img class="img-responsive" src="img/logo-white.png" alt="logo M de Maravilhosa" />
</div>
<div class="rodape__redes-sociais">
<a href="https://www.facebook.com/ReprogramaBr/" target="_blank">
<img src="img/fb-icone.png" alt="Icone do facebook Reprograma" />
<span>/br.mdemaravilhosa</span>
</a>
</div>
</div>
<div class="rodape__cc">
<p>20120 | Feito com amor por Reprograma</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>