-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontato.html
171 lines (144 loc) · 8.41 KB
/
contato.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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contato</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="flex flex-col min-h-screen">
<!-- Navbar -->
<nav class="pt-2">
<div class="container mx-auto flex justify-between items-center px-4">
<!-- Logo ou nome do site -->
<!-- <div class="text-white text-lg font-bold">Fatec Jaú</div> -->
<img class="w-32" src="./img/logodsm-branco.png" alt="logodsm-branco">
<!-- Menu hamburguer (visível em telas pequenas) -->
<nav>
<div class="md:hidden flex items-center">
<button id="hamburger" class="text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<!-- Links de navegação (visíveis em telas grandes) -->
<div class="hidden md:flex space-x-4">
<a href="./index.html" class="text-white px-4 py-2 rounded">Início</a>
<a href="./professores.html" class="text-white px-4 py-2 rounded">Professores</a>
<a href="./projetos.html" class="text-white px-4 py-2 rounded ">Projetos</a>
<a href="./contato.html" class="text-white px-4 py-2 rounded ">Contato</a>
<a href="./desenvolvedores.html" class="text-white px-4 py-2 rounded">Desenvolvedores</a>
</div>
</div>
</nav>
<!-- Menu Dropdown (oculto em telas grandes, aparece em telas pequenas) -->
<div id="menu" class="md:hidden bg-purple-800 px-6 py-2 hidden">
<a href="./index.html" class="text-white block px-4 py-2 rounded hover:bg-purple-300">Início</a>
<a href="./professores.html" class="text-white block px-4 py-2 rounded hover:bg-purple-300">Professores</a>
<a href="./projetos.html" class="text-white block px-4 py-2 rounded hover:bg-purple-300">Projetos</a>
<a href="./contato.html" class="text-white block px-4 py-2 rounded hover:bg-purple-300">Contato</a>
<a href="./desenvolvedores.html" class="text-white block px-4 py-2 rounded hover:bg-purple-300">Desenvolvedores</a>
</div>
<!-- Script para alternar o menu -->
<script>
const hamburger = document.getElementById('hamburger');
const menu = document.getElementById('menu');
hamburger.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>
<!-- Hero Section -->
<header class="text-white py-10">
<div class="container mx-auto text-center">
<h1 class="text-4xl font-bold mb-1">Desenvolvimento de Software Multiplataforma</h1>
<p class="text-lg">Entre em contato conosco! Nossa equipe está pronta para te atender.</p>
</div>
</header>
<div class="py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">FATEC-JAHU
</h2>
<a href="./formulario-contato.html"
class="mt-2 mb-2 inline-block bg-purple-600 text-white px-5 py-3 rounded-lg shadow hover:bg-purple-800 transition duration-300">
Formulário de Contato</a>
<p class="mt-2 text-lg/8 text-gray-600">Estamos conectados em várias redes sociais!
Quer ficar por dentro de tudo sobre o curso de Desenvolvimento de Software Multiplataforma? Siga-nos
nas nossas redes sociais e acompanhe:</p>
</div>
<div
class="mx-auto mt-5 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-300 pt-10 sm:mt-5 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<article class="flex max-w-xl flex-col items-start justify-between">
<div class="group relative">
<h3 class="mt-5 text-lg/6 font-semibold text-gray-900">
<span class="absolute inset-0"></span>
🌟 Siga-nos no Instagram! <br> <br> Fique por dentro das últimas novidades, conteúdos
exclusivos da Fatec Jahu.
</h3>
<p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">No nosso perfil, você vai encontrar: <br>
-Divulgações de eventos <br>
-Datas de vestibular
</p>
</div>
<div class="px-6 pt-4 pb-2 my-1 mb-3 flex items-center justify-center">
<a href="https://www.instagram.com/fatecjahu/"
class="flex items-center justify-center bg-purple-600 text-white px-5 py-3 rounded-lg shadow hover:bg-purple-800 transition duration-300">
<i class="fab fa-instagram fa-2xl text-white mr-2"></i> Instagram
</a>
</div>
</article>
<article class="flex max-w-xl flex-col items-start justify-between">
<div class="group relative">
<h3 class="mt-5 text-lg/6 font-semibold text-gray-900">
<span class="absolute inset-0"></span>
📢 Curta nossa página no Facebook! <br> <br>
Acompanhe nossa página para receber as últimas atualizações e interagir com nossos
profissionais
</h3>
<p class="mt-5 line-clamp-3 text-sm/6 text-gray-600"> Aqui você encontra: <br>
-Depoimento de alunos <br>
-Conteúdos exclusivos
</p>
</div>
<div class="px-6 pt-4 pb-2 my-1 mb-3 justify-center">
<a href="https://www.facebook.com/@fatecjahu/?mibextid=ZbWKwL"
class="flex items-center justify-center bg-purple-600 text-white px-5 py-3 rounded-lg shadow hover:bg-purple-800 transition duration-300">
<i class="fab fa-facebook fa-2xl text-white mr-2"></i> Facebook
</a>
</div>
</article>
<article class="flex max-w-xl flex-col items-start justify-between">
<div class="group relative">
<h3 class="mt-5 text-lg/6 font-semibold text-gray-900">
<span class="absolute inset-0"></span>
🎓 Encontre-nos no linkedin! <br> <br>
Siga-nos no linkedin para saber das principais notícias e desenvolvimentos da faculdade!
</h3>
<p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">Aqui você encontra: <br>
-Vagas de estágio <br>
-Atualizações sobre a faculdade <br>
</p>
</div>
<div class="px-6 pt-4 pb-2 my-1 mb-3">
<a href="https://www.linkedin.com/in/fatec-jahu-08998837?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app"
class="flex items-center justify-center bg-purple-600 text-white px-5 py-3 rounded-lg shadow hover:bg-purple-800 transition duration-300">
<i class="fab fa-linkedin fa-2xl text-white mr-2"></i> LinkedIn
</a>
</div>
</article>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-white py-4 mt-10">
<div class="container mx-auto text-center">
<p>© 2024 Fatec Jaú</p>
</div>
</footer>
</body>
</html>