-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (102 loc) · 4.94 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
<!DOCTYPE html>
<html lang="pt-br">
<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>Landing Page</title>
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" media="screen and (max-width: 1200px)" href="css/layout_tablet.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="css/layout_smartphone.css">
<script src="https://kit.fontawesome.com/fa6968a204.js" crossorigin="anonymous"></script>
</head>
<body>
<!--Cabeçalho-->
<header>
<div class="container-grid conteudo-header">
<img class="logo" src="imagens/logos_senai_branco.png" alt="Logo senai">
<nav id="menu-header" class="menu-header">
<a href="#" title="Inicio da página">Inicio</a>
<a href="#mouse">Sobre</a>
<a href="#endereco">Endereço</a>
<a class="botao" href="mailto:[email protected]" target="blank">Contate-nos</a>
</nav>
<a class="menu-barras" href="javascript: void(0)" onclick="mostrarMenu()">
<i id="icone-menu" class="fas fa-bars"></i>
</a>
</div>
</header>
<!--Conteúdo do Site-->
<main>
<div class="banner">
<div class="container-grid conteudo-banner">
<div class="texto-banner">
<h1>cursos técnicos senai</h1>
<div class="linha-amarela"></div>
<span class="titulo-senai">Senai Informática</span>
<img class="mouse" id="mouse" src="imagens/mouse-down.png" alt="Imagem de um mouse">
</div>
</div>
</div>
<section class="sobre-projetos">
<div class="container-grid">
<h2>Sobre os Projetos</h2>
<div class="conteudo-sobre">
<img class="imagem-sobre" src="imagens/imagem-seção-sobre.jpg" alt="Homem explicando conteúdo dos cursos para vários alunos">
<div class="texto-sobre">
<span class="texto-participantes">participantes</span>
<h3>Mais de 80 alunos organizados em 16 grupos</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, veniam eos est laudantium modi quis ea porro dolorem fuga sint architecto et vel saepe atque nemo soluta nulla enim itaque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, veniam eos est laudantium modi quis ea porro dolorem fuga sint architecto et vel saepe atque nemo soluta nulla enim itaque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, veniam eos est laudantium modi quis ea porro dolorem fuga sint architecto et vel saepe atque nemo soluta nulla enim itaque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, veniam eos est laudantium modi quis ea porro dolorem fuga sint architecto et vel saepe atque nemo soluta nulla enim itaque. lore</p>
</div>
</div>
</div>
</section>
<section class="info">
<div class="container-grid conteudo-info">
<div class="card-info">
<h3>Local</h3>
<p>Botucatu</p>
</div>
<div class="card-info">
<h3>Duração</h3>
<p>90 dias</p>
</div>
<div class="card-info">
<h3>Desafios</h3>
<p>+30 Desafios</p>
</div>
</div>
</section>
<section class="endereco" id="endereco">
<div class="container-grid conteudo-endereco">
<h2>Endereço:</h2>
<div class="texto-endereco">
<p>Av. Dr. Jaime de Almeida Pinto, 1332 Jd. Reflorenda, Botucatu - SP CEP: 18605-318</p>
</div>
<a href=https://goo.gl/maps/GAVyqzHjHEBaZkPVA target="blank"><img class="mapa" src="imagens/mapabtu.png" alt="Mapa mostrando a localização da escola."></a>
</div>
</section>
</main>
<!--Rodapé-->
<footer>
<span>Copyright © 2023 - Escola Senai "Luiz Massa"</span>
</footer>
<script>
function mostrarMenu() {
var menu = document.getElementById("menu-header");
var icone = document.getElementById("icone-menu");
if (getComputedStyle(menu).display == 'none') {
menu.style.display = "flex";
icone.classList.remove("fa-bars");
icone.classList.add("fa-times");
// Mudar para times
} else {
menu.style.display = "none";
icone.classList.remove("fa-times");
icone.classList.add("fa-bars");
// Mudar para bars
}
}
</script>
</body>
</html>