-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (116 loc) · 6.23 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Museu Nacional</title>
<!--Normaliza CSS-->
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<!--Estilo Customizado-->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!--[if lt IE 9]>
<script src="./js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<header><!--Cabecalho-->
<div id="logo">
<h1><a href="">Museu Nacional</a></h1>
</div>
<nav><!--Barra de Navegação-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exposições</a></li>
<li><a href="#">Pesquisa</a></li>
<li><a href="#">Acervos</a></li>
<li><a href="#">Vídeos</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<div id="principal">
<div id="conteudo">
<section id="capa">
<img src="./img/museu.png" alt="Museu Nacional">
</section>
<section id="postagens">
<article id="video">
<h3>Vídeo: Conheça o museu</h3>
<iframe width="310" height="170" src="https://www.youtube.com/embed/RGUYb-hivrc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</article>
<article id="mapa">
<h3>Mapa: Encontre o museu</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3675.2063112591054!2d-43.2265289!3d-22.90576!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x997e58a085b7af%3A0x4d11e9a933d38ce3!2sMuseu%20Nacional%20-%20UFRJ!5e0!3m2!1spt-BR!2sbr!4v1610666998345!5m2!1spt-BR!2sbr" width="310" height="170" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</article>
<article id="exposicoes">
<h3>Exposições</h3>
<ul>
<li><a href="#">Os assustadores insetos</a></li>
<li><a href="#">O crânio de Luzia, a mulher mais antiga do Brasil</a></li>
<li><a href="#">Preguiça gigante e tigre-dentes-de-sabre</a></li>
<li><a href="#">Planetas do Brasil Central</a></li>
<li><a href="#">Teresa Cristina: A Imperatriz Arqueóloga</a></li>
<li><a href="#">Arte com Dinossauros - Paleoarte</a></li>
<li><a href="#"><strong>Veja todos (65)</strong></a></li>
</ul>
</article>
<article id="historia">
<h3>200 anos de história</h3>
<p>O Museu Nacional é uma instituição pública Federal vinculada à Universidade Federal do Rio de Janeiro - UFRJ. A origem da instituição remonta à a fundação do Museu Real pelo decreto de 06/06/1818, assinado por D. João VI.</p>
<a href="#"><strong>Leia mais</strong></a>
</article>
</section>
</div>
<aside>
<section id="depoimento">
<img src="./img/depoimento.png" alt="depoimento sobre o museu">
</section>
<section id="visita">
<h4>Faça uma visita</h4>
<form action="">
<fieldset>
<legend>Selecione uma data</legend>
<label for="data">Data: </label>
<input type="date" name="data" id="data" class="campo">
<label for="qtdPessoas">Qtd pessoas: </label>
<input type="number" name="qtdPessoas" id="qtdPessoas" value="1" min="1" class="campo">
</fieldset>
<input type="submit" value="Verificar disponibilidade" class="btn">
</form>
</section>
<section id="galeria">
<h4>Galeria de Fotos</h4>
<a href="">
<img src="./img/imagem1.jpg" alt="" height="93" width="93">
</a>
<a href="">
<img src="./img/imagem2.jpg" alt="" height="93" width="93">
</a>
<a href="">
<img src="./img/imagem3.jpg" alt="" height="93" width="93">
</a>
<a href="">
<img src="./img/imagem4.jpg" alt="" height="93" width="93">
</a>
</section>
</aside>
<footer id="rodape">
<p>
<a href="#">Home</a>
<a href="#">Exposições</a>
<a href="#">Pesquisa</a>
<a href="#">Acervo</a>
<a href="#">Vídeos</a>
<a href="#">Fotos</a>
<a href="#">Contato</a>
</p>
<p>
2021 <a href="#">Museu Nacional</a> - Todos os direitos reservados
</p>
</footer>
</div>
</div>
</body>
</html>