-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
301 lines (299 loc) · 15.1 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="Ie=edge">
<meta name="description" content="Site desenvolvido para o Trabalho de conclusão de curso do Técnico em Design Gráfico na Etec Carlos de Campos">
<title>Museu do Ipiranga</title>
<link rel="shortcut icon" href="img/logo1.png" type="image/x-icon">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="background">
<header>
<div class="logo">
<img src="img/logo2.png" alt="Museu do Ipiranga" id="logo">
</div>
<ul>
<li>O museu</li>
<li>Acervo</li>
<li>Exposições</li>
<li>Contato</li>
<li><img src="img/magnifying-glass-solid.svg" alt="" srcset=""></li>
</ul>
</header>
<main>
<section class="main-content">
<div class="content">
<h1>Bem-vindo ao Museu <br>do Ipiranga</h1><br>
<button class="btn">Garanta seu ingresso</button>
</div>
</section>
</div>
<section class="informacoes">
<img src="img/salao-principal.jpg" alt="Salão principal do museu." id="arquitetura">
<div class="informacoes-content">
<h1>Sobre o museu</h1>
<p>O Museu do Ipiranga é a sede do Museu Paulista, que é um museu especializado em história e cultural material e integra a Universidade de São Paulo. <br>
O edifício em que hoje estão instaladas as exposições e espaços para atividades educativas e culturais foi projetado para ser um monumento em comemoração à Proclamação da Independência, ocorrida em 1822. O edifício foi construído entre 1885 e 1890. Em 1894, o recém-criado Museu do Estado (Museu Paulista) foi transferido para o monumento.
</div>
</section>
<section class="destaques">
<div class="destaques-content">
<h1>Destaques</h1>
<div class="cards swipper wrapper">
<div class="card swiper-wrapper">
<div class="card-img">
<img src="img/Para-entender-o-Museu-1.jpg" alt="">
</div>
<div class="card-content">
<h2>Para entender o museu</h2>
</div>
</div>
<div class="card swiper-wrapper">
<div class="card-img">
<img src="img/UMA-HISTORIA-DO-BRASIL-e1673383784980.jpg" alt="">
</div>
<div class="card-content">
<h2>Uma história do Brasil</h2>
</div>
</div>
<div class="card swiper-wrapper">
<div class="card-img">
<img src="img/Passados-imaginados.jpg" alt="">
</div>
<div class="card-content">
<h2>Passados Imaginados</h2>
</div>
</div>
<div class="card swiper-wrapper">
<div class="card-img">
<img src="img/Coletar-Imagens-e-objetos.jpg" alt="">
</div>
<div class="card-content">
<h2>Coletar: Imagens e objetos</h2>
</div>
</div>
<div class="card swiper-wrapper">
<div class="card-img">
<img src="img/Comunicar-Loucas.jpg" alt="">
</div>
<div class="card-content">
<h2>Comunicar: Louças</h2>
</div>
</div>
<div class="card swiper-wrapper">
<div class="card-img">
<img src="img/Conservar-Brinquedos.jpg" alt="">
</div>
<div class="card-content">
<h2>Conservar: Brinquedos</h2>
</div>
</div>
</div>
</section>
<section class="acervo">
<div class="acervo-content">
<div class="titulo">
<h1>Acervo</h1>
<div class="veja-mais">
<p>Conheça nosso acervo</p>
<img src="img/arrow-right-solid.svg" alt="">
</div>
</div>
</div>
<div class="acervo-obras">
<div class="coluna">
<div class="obra">
<img src="img/quadro-independenciaoumorte.jpg" alt="">
<div class="obra-content">
<h3>Independencia ou morte</h3>
<p>Pedro Américo - 1888</p>
</div>
</div>
<div class="obra">
<img src="img/quadro5-ÖNDIA CARAJµ FUMANDO O CACHIMBO FEITO DA FRUTA DO RARICOCà.jpg" alt="">
<div class="obra-content">
<h3>Índia Carajá fumando o cachimbo <br>feito da fruta do Raricocó</h3>
<p>Adrien Henri Vital van Emelen</p>
</div>
</div>
<div class="obra">
<img src="img/quadro9-retratode dpedroi.png" alt="">
<div class="obra-content">
<h3>Retrato de Dom pedro I</h3>
<p>Benedito calixto - 1902</p>
</div>
</div>
</div>
<div class="coluna">
<div class="obra">
<img src="img/quadro - RETRATO DE DONA LEOPOLDINA DE HABSBURGO E SEUS FILHOS.jpg" alt="">
<div class="obra-content">
<h3>Retrato de Dona Leopoldina de <br>Habsburgo e seus filhos.</h3>
<p>Domenico Failutti - 1921</p>
</div>
</div>
<div class="obra">
<img src="img/quadro3-HEROI DA GUERRA DO PARAGUAI.jpg" alt="">
<div class="obra-content">
<h3>Heroi da Guerra do Peraguai</h3>
<p>Adrien Henri Vital van Emelen</p>
</div>
</div>
<div class="obra">
<img src="img/quadro6-NAU CAPITANIA DE CABRAL, ÖNDIOS A BORDO DA CAPITANIA DE CABRAL.jpg" alt="">
<div class="obra-content">
<h3>Nau Capitania de Cabral, Índios a <br> bordo da Capitania de Cabral</h3>
<p>Oscar Pereira da Silva</p>
</div>
</div>
</div>
<div class="coluna">
<div class="obra">
<img src="img/quadro - MUSEU PAULISTA, ESCADARIA NOBRE, NICHO- ESTµTUA DE D.PEDRO I, PAINIS LATERAIS E ESCADARIA COM AS ¶NFORAS.jpg" alt="">
<div class="obra-content">
<h3>Escadaria nobre, Estátua de Dom Pedro I, <br> paineis laterais e escadaria</h3>
</div>
</div>
<div class="obra">
<img src="img/quadro.jpg" alt="">
<div class="obra-content">
<h3>Retrato de Maria Quitéria de Jesus Medeiros</h3>
<p>Domenico Failutti - 1920</p>
</div>
</div>
<div class="obra">
<img src="img/quadro - PELOURINHO E ARSENAL DA MARINHA EM SANTOS, 1850.jpg" alt="">
<div class="obra-content">
<h3>Pelourinho e Arsenal da Marinha em <br> Santos</h3>
<p>Benedito Calixto de Jesus - 1850</p>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<section class="parceiros">
<h2>Patrocínio</h2>
<div class="patrocinio">
<div class="linha1">
<img src="img/p1-removebg-preview.png" alt="" srcset="">
<img src="img/p2-removebg-preview.png" alt="" srcset="">
<img src="img/p3-removebg-preview(1).png" alt="" srcset="">
<img src="img/p4-removebg-preview.png" alt="" srcset="">
<img src="img/p5-removebg-preview.png" alt="" srcset="">
<img src="img/p6-removebg-preview.png" alt="" srcset="">
</div>
<div class="linha2">
<img src="img/p7-removebg-preview.png" alt="">
<img src="img/p8-removebg-preview.png" alt="">
<img src="img/p9-removebg-preview.png" alt="">
<img src="img/p10-removebg-preview.png" alt="">
<img src="img/p11-removebg-preview.png" alt="">
</div>
</div>
<div class="copatrocinio">
<h2>Copatrocínio</h2>
<div class="linha3">
<img src="img/p12-removebg-preview.png" alt="">
<img src="img/p13-removebg-preview(1).png" alt="">
<img src="img/p14-removebg-preview(1).png" alt="">
<img src="img/p15-removebg-preview.png" alt="">
<img src="img/p16-removebg-preview(1).png" alt="">
<img src="img/p17-removebg-preview.png" alt="">
</div>
<div class="linha4">
<img src="img/p18-removebg-preview.png" alt="">
<img src="img/p19-removebg-preview.png" alt="">
<img src="img/p20-removebg-preview.png" alt="">
<img src="img/p21-removebg-preview(1).png" alt="">
<img src="img/p22" alt="">
<img src="img/p23" alt="">
</div>
<div class="linha5">
<img src="img/p24-removebg-preview.png" alt="">
<img src="img/p25-removebg-preview.png" alt="">
</div>
<div class="parceiria">
<h2>Parceiria</h2>
<div class="linha6">
<img src="img/p26-removebg-preview.png" alt="">
</div>
</div>
<div class="empresa-parceira">
<h2>Empresas Parceiras</h2>
<div class="linha7">
<img src="img/p27-removebg-preview.png" alt="">
<img src="img/p29-removebg-preview.png" alt="">
<img src="img/p30-removebg-preview.png" alt="">
<img src="img/p31-removebg-preview.png" alt="">
</div>
</div>
</div>
</section>
<section class="endereco">
<div class="mapa">
<a href="https://www.google.com.br/maps/place/Museu+do+Ipiranga+-+USP/@-23.585578,-46.6122539,17z/data=!3m1!4b1!4m6!3m5!1s0x94ce5be650476023:0x2c33390e6e3805b1!8m2!3d-23.585578!4d-46.609679!16s%2Fm%2F026dyx4?entry=ttu" target=""><img src="img/mapa.jpeg" alt="Localição do museu no mapa" id="mapa"></a>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<div class="museu">
<div class="footer-logo">
<img src="img/logo2.png" alt="Logo do Museu">
</div>
<div class="topico1-footer-content">
<h4>Conheça o Museu do Ipiranga</h4>
<p>Parque da Independência - <br> Ipiranga, São Paulo - SP, 04263-000</p>
</div>
<div class="topico2-footer-content">
<h4>Funcionamento</h4>
<p>De terça a domingo, das 10 às 17h. <br>A bilheteria abre às 9h. A última <br>entrada é às 16h.</p>
</div>
</div>
<div class="museu2">
<div class="topico3-footer-content">
<h4>Sobre nós</h4>
<ul>
<li>Sobre o museu</li>
<li>Equipe</li>
<li>Museu digital</li>
<li>Dúvidas frequentes</li>
<li>Acessibilidade</li>
<li>Contato</li>
</ul>
</div>
<div class="topico4-footer-content">
<h4>Visite</h4>
<ul>
<li>Exposições</li>
<li>Eventos</li>
</ul>
</div>
<div class="topico5-footer-content">
<h4>Acervo</h4>
<ul>
<li>Nossas coleções</li>
<li>Acervo online</li>
<li>Biblioteca</li>
<li>Empréstimo</li>
<li>Solicitação de imagens</li>
</ul>
</div>
</div>
</div>
<div class="redes-sociais">
<img src="img/facebook-f.svg" alt="facebook">
<img src="img/instagram.svg" alt="instagram">
<img src="img/twitter.svg" alt="twitter">
<img src="img/tiktok(1).svg" alt="tiktok">
<img src="img/youtube.svg" alt="youtube">
</div>
</footer>
</body>
</html>