-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
47 lines (44 loc) · 3.2 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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="styles/paisagem.css" media="screen and (orientation: landscape)"> <!-- só vai rodar esse CSS se a tela estiver nessa orientação -->
<link rel="stylesheet" href="styles/retrato.css" media="screen and (orientation: portrait)">
</head>
<body>
<div id="page">
<nav>
<img src="images/menuIcon.svg" alt="" id="menu" onclick="mostrar()">
<ul id="menuOpcoes">
<li>Opção</li>
<li>Opção</li>
<li>Opção</li>
<li>Opção</li>
<li>Opção</li>
</ul>
</nav>
<!-- banner para baixo -->
<picture>
<source media="(max-width: 600px)" srcset="images/mulherdancandoMenor.jpg" class="banner"> <!-- srcset não é um sort fixo, ele obedece a condição que pedi (se o maxwidth for de 600px pego o srcset, senão, pego a imagem normal, padrão abaixo)-->
<img src="images/mulherdancando.jpg" alt="" class="banner">
</picture>
<h1>Um título</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores eum dolor odio voluptates totam? Facere optio perferendis saepe odit non ducimus dicta tempore voluptatibus asperiores quasi dolorem voluptatum, quisquam nostrum. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam ut consequuntur atque minima, asperiores ipsa libero! Id, repellendus assumenda dolorum, corrupti tempora earum maxime cum quam minima suscipit a in.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores eum dolor odio voluptates totam? Facere optio perferendis saepe odit non ducimus dicta tempore voluptatibus asperiores quasi dolorem voluptatum, quisquam nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus iste voluptatum eum possimus? Sit, numquam non, eum, ratione similique vero provident blanditiis tenetur dolores ex dolore nobis? Quibusdam, labore dolores? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda rerum dolorum officia explicabo eaque? Provident soluta eos, tempora quasi in harum exercitationem explicabo fugiat quos totam placeat iusto odit sunt?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores eum dolor odio voluptates totam? Facere optio perferendis saepe odit non ducimus dicta tempore voluptatibus asperiores quasi dolorem voluptatum, quisquam nostrum. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, nostrum asperiores quo sequi maiores non placeat veniam nesciunt mollitia veritatis rerum iure porro magni voluptatibus earum, a omnis, molestiae perspiciatis!</p>
</div>
<script>
function mostrar(){
if (menuOpcoes.style.display == "none"){
menuOpcoes.style.display = "block"
} else {
menuOpcoes.style.display = "block"
}
}
</script>
</body>
</html>