Skip to content

Commit 0d57820

Browse files
walber-vazwalber-vaz
committed
Enhance responsiveness and styling across multiple sections, including navigation, hero, skills, portfolio, and contact. Implement media queries for mobile optimization, update button styles, and improve layout for better user experience.
1 parent 87643d3 commit 0d57820

7 files changed

Lines changed: 2345 additions & 182 deletions

File tree

‎trabalho-ads-js-html-js/contato.html‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Contato - Walber Vaz</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
11+
<body>
12+
<header>
13+
<nav class="navbar">
14+
<div class="nav-container">
15+
<h1 class="logo">Walber Vaz</h1>
16+
<ul class="nav-menu">
17+
<li class="nav-item">
18+
<a href="index.html" class="nav-link">Home</a>
19+
</li>
20+
<li class="nav-item">
21+
<a href="sobre.html" class="nav-link">Sobre Mim</a>
22+
</li>
23+
<li class="nav-item">
24+
<a href="formacao.html" class="nav-link">Formação</a>
25+
</li>
26+
<li class="nav-item">
27+
<a href="portfolio.html" class="nav-link">Portfólio</a>
28+
</li>
29+
<li class="nav-item">
30+
<a href="contato.html" class="nav-link active">Contato</a>
31+
</li>
32+
</ul>
33+
<div class="hamburger">
34+
<span class="bar"></span>
35+
<span class="bar"></span>
36+
<span class="bar"></span>
37+
</div>
38+
</div>
39+
</nav>
40+
</header>
41+
42+
<main>
43+
<section class="page-header">
44+
<div class="container">
45+
<h1>Entre em Contato</h1>
46+
<p>Vamos conversar sobre projetos, oportunidades ou apenas trocar uma ideia!</p>
47+
</div>
48+
</section>
49+
50+
<section class="contact-content">
51+
<div class="container">
52+
<div class="contact-grid">
53+
<div class="contact-info">
54+
<h2>Vamos nos conectar!</h2>
55+
<p>
56+
Estou sempre aberto a novas oportunidades, projetos interessantes
57+
e conexões profissionais. Se você tem uma ideia, um projeto em mente
58+
ou apenas quer bater um papo sobre tecnologia, ficarei feliz em conversar!
59+
</p>
60+
61+
<div class="contact-methods">
62+
<div class="contact-method">
63+
<div class="contact-icon">📧</div>
64+
<div class="contact-details">
65+
<h4>Email</h4>
66+
<p>email@email.com</p>
67+
</div>
68+
</div>
69+
70+
<div class="contact-method">
71+
<div class="contact-icon">📱</div>
72+
<div class="contact-details">
73+
<h4>WhatsApp</h4>
74+
<p>(91) 9999-9999</p>
75+
</div>
76+
</div>
77+
78+
<div class="contact-method">
79+
<div class="contact-icon">📍</div>
80+
<div class="contact-details">
81+
<h4>Localização</h4>
82+
<p>São Miguel do Guama, Pará</p>
83+
</div>
84+
</div>
85+
86+
<div class="contact-method">
87+
<div class="contact-icon">💼</div>
88+
<div class="contact-details">
89+
<h4>LinkedIn</h4>
90+
<p>linkedin.com/in/walber-vaz</p>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
96+
<div class="contact-form-container">
97+
<div class="contact-form">
98+
<h3>Envie uma mensagem</h3>
99+
<p>Preencha o formulário abaixo e entrarei em contato o mais breve possível.</p>
100+
101+
<div class="form-container">
102+
<div class="form-group">
103+
<label for="nome">Nome Completo</label>
104+
<input type="text" id="nome" name="nome" required>
105+
<span class="form-error" id="nome-error"></span>
106+
</div>
107+
108+
<div class="form-group">
109+
<label for="email">Email</label>
110+
<input type="email" id="email" name="email" required>
111+
<span class="form-error" id="email-error"></span>
112+
</div>
113+
114+
<div class="form-group">
115+
<label for="telefone">Telefone (opcional)</label>
116+
<input type="tel" id="telefone" name="telefone">
117+
</div>
118+
119+
<div class="form-group">
120+
<label for="assunto">Assunto</label>
121+
<select id="assunto" name="assunto" required>
122+
<option value="">Selecione um assunto</option>
123+
<option value="projeto">Projeto/Colaboração</option>
124+
<option value="oportunidade">Oportunidade de Trabalho</option>
125+
<option value="duvida">Dúvida Técnica</option>
126+
<option value="networking">Networking</option>
127+
<option value="outro">Outro</option>
128+
</select>
129+
<span class="form-error" id="assunto-error"></span>
130+
</div>
131+
132+
<div class="form-group">
133+
<label for="mensagem">Mensagem</label>
134+
<textarea id="mensagem" name="mensagem" rows="6" required placeholder="Descreva sua mensagem, projeto ou oportunidade..."></textarea>
135+
<span class="form-error" id="mensagem-error"></span>
136+
</div>
137+
138+
<div class="form-group checkbox-group">
139+
<label class="checkbox-label">
140+
<input type="checkbox" id="newsletter" name="newsletter">
141+
<span class="checkmark"></span>
142+
Gostaria de receber atualizações sobre meus projetos
143+
</label>
144+
</div>
145+
146+
<button type="button" class="btn btn-primary" onclick="enviarMensagem()">
147+
Enviar Mensagem
148+
</button>
149+
</div>
150+
</div>
151+
</div>
152+
</div>
153+
</div>
154+
</section>
155+
</main>
156+
157+
<footer>
158+
<div class="container">
159+
<p>&copy; 2025 Walber Vaz. Todos os direitos reservados.</p>
160+
<p>Projeto desenvolvido para a disciplina Fundamentos da Programação Web</p>
161+
</div>
162+
</footer>
163+
<script>
164+
const hamburger = document.querySelector('.hamburger');
165+
const navMenu = document.querySelector('.nav-menu');
166+
167+
hamburger.addEventListener('click', () => {
168+
hamburger.classList.toggle('active');
169+
navMenu.classList.toggle('active');
170+
});
171+
172+
document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => {
173+
hamburger.classList.remove('active');
174+
navMenu.classList.remove('active');
175+
}));
176+
177+
function validarEmail(email) {
178+
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
179+
return regex.test(email);
180+
}
181+
182+
function limparErros() {
183+
document.querySelectorAll('.form-error').forEach(error => {
184+
error.textContent = '';
185+
});
186+
document.querySelectorAll('.form-group').forEach(group => {
187+
group.classList.remove('error');
188+
});
189+
}
190+
191+
function mostrarErro(campo, mensagem) {
192+
const errorElement = document.getElementById(campo + '-error');
193+
const formGroup = document.getElementById(campo).closest('.form-group');
194+
195+
errorElement.textContent = mensagem;
196+
formGroup.classList.add('error');
197+
}
198+
199+
function enviarMensagem() {
200+
limparErros();
201+
202+
const nome = document.getElementById('nome').value.trim();
203+
const email = document.getElementById('email').value.trim();
204+
const assunto = document.getElementById('assunto').value;
205+
const mensagem = document.getElementById('mensagem').value.trim();
206+
207+
let temErro = false;
208+
209+
if (!nome || nome.length < 2) {
210+
mostrarErro('nome', 'Nome deve ter pelo menos 2 caracteres');
211+
temErro = true;
212+
}
213+
214+
if (!email) {
215+
mostrarErro('email', 'Email é obrigatório');
216+
temErro = true;
217+
} else if (!validarEmail(email)) {
218+
mostrarErro('email', 'Email inválido');
219+
temErro = true;
220+
}
221+
222+
if (!assunto) {
223+
mostrarErro('assunto', 'Selecione um assunto');
224+
temErro = true;
225+
}
226+
227+
if (!mensagem || mensagem.length < 10) {
228+
mostrarErro('mensagem', 'Mensagem deve ter pelo menos 10 caracteres');
229+
temErro = true;
230+
}
231+
232+
if (!temErro) {
233+
alert(`Obrigado, ${nome}! Sua mensagem foi enviada com sucesso. Responderei em breve!`);
234+
235+
document.getElementById('nome').value = '';
236+
document.getElementById('email').value = '';
237+
document.getElementById('telefone').value = '';
238+
document.getElementById('assunto').value = '';
239+
document.getElementById('mensagem').value = '';
240+
document.getElementById('newsletter').checked = false;
241+
}
242+
}
243+
244+
document.addEventListener('DOMContentLoaded', function () {
245+
const inputs = ['nome', 'email', 'assunto', 'mensagem'];
246+
247+
inputs.forEach(inputId => {
248+
const input = document.getElementById(inputId);
249+
input.addEventListener('input', function () {
250+
const errorElement = document.getElementById(inputId + '-error');
251+
const formGroup = input.closest('.form-group');
252+
253+
if (input.value.trim()) {
254+
errorElement.textContent = '';
255+
formGroup.classList.remove('error');
256+
}
257+
});
258+
});
259+
});
260+
</script>
261+
</body>
262+
263+
</html>

0 commit comments

Comments
 (0)