-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
133 lines (113 loc) · 5.29 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mobile_firt_Portifolio</title>
<link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="assets/css/styles_mq.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<!-- Na sequencia de acima para baixo: colocado como favicon;
link para o css do menu mobile; link para o css do google fonts -->
</head>
<!-- Criado uma função para quando o tamanho da tela for menor que 768px,
o menu mobile será ativado -->
<body onresize="mudouTamanho()">
<header>
<h1>The Mobile Firt - Menu</h1>
</header>
<!-- Usando o google icons o menu é criado, junto com uma função usado no
javascript para exibir o menu burger no evento de onclik-->
<span id="burger" class="material-symbols-outlined" onclick="clickMenu()">
menu
</span>
<!-- Todos os links do menu pertence ao um conteiner com uma lista não numerada
e um id para ser usado no Medias Queries-->
<menu id="itens">
<ul>
<li><a href="#">mobile</a></li>
<li><a href="#"> tablet</a></li>
<li><a href="#">smart_tv</a></li>
<li><a href="#">desktop</a></li>
</ul>
</menu>
<!-- Todas as imagens são oculta pelo atributo none, e a cada mudança de resolução
de tela será exibido somente as imagens que pertence a cada tela-->
<main>
<img src="assets/icon-phone.png" alt="teste com celular" id="mobile">
<img src="assets/icon-tablet.png" alt="teste com celular" id="tablet">
<img src="assets/icon-print.png" alt="versão impressora" id="print">
<img src="assets/icon-pc.png" alt="teste com desktop" id="pc">
<img src="assets/icon-tv.png" alt="teste com smart tv" id="tv">
<!-- Dentro do main foi criado um div com um id para ser usado no Medias Queries
e dentro dele foi criado um div com um id para ser usado no Medias Queries
onde a estrutura article será redimencionada para cada visualização de tela-->
<article>
<h2>Testando Media Queries</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, veniam itaque! Iste
natus excepturi molestiae
inventore facere nisi nesciunt ad, dolore aliquam architecto eveniet deleniti ab mollitia repellendus
nulla.
Quam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magni consectetur incidunt
facere
cupiditate ex aperiam praesentium quam quibusdam. Quia molestiae maiores ex nulla provident, in sequi
eveniet
accusamus placeat. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam adipisci laboriosam
asperiores
pariatur. Dicta nisi accusamus adipisci corporis ducimus fuga optio totam, ullam mollitia veniam et
libero minus
qui voluptatum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, veniam itaque! Iste
natus excepturi molestiae
inventore facere nisi nesciunt ad, dolore aliquam architecto eveniet deleniti ab mollitia repellendus
nulla.
Quam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates magni consectetur incidunt
facere
cupiditate ex aperiam praesentium quam quibusdam. Quia molestiae maiores ex nulla provident, in sequi
eveniet
accusamus placeat. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam adipisci laboriosam
asperiores
pariatur. Dicta nisi accusamus adipisci corporis ducimus fuga optio totam, ullam mollitia veniam et
libero minus
qui voluptatum.
</p>
</article>
</main>
<footer>
<p>
@Ivan Paulino - Mobile First - 2024
</p>
</footer>
<!-- -->
<script>
/*
verifica se o tamanho da tela mudou para menor de 768px para assim aplicar o estilo
deixando assim o menu estatico oculto e bloqueado para visualizar
*/
function mudouTamanho() {
if (window.innerWidth >= 768) {
//itens.style.display = 'inline-block'
itens.style.display = 'block'
} else {
itens.style.display = 'none'
}
}
//exibir o menu burger em tela menor
/*
Ao clicar no menu, bloqueado (block) caso esteja deve ser exibido (none) e vice versa
mas deixando assim oculto o menu com o "id=burger"
*/
function clickMenu() {
if (itens.style.display == 'block') {
itens.style.display = 'none'
} else {
itens.style.display = 'block'
}
}
</script>
</body>
</html>