Skip to content

Commit fead759

Browse files
henmohrhenmohr
committed
Adiciona botão de contato
Signed-off-by: henmohr <henriquemohr@redes.ufsm.br>
1 parent a957937 commit fead759

5 files changed

Lines changed: 449 additions & 11 deletions

File tree

‎demo-header.html‎

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>LibreCode - Demo Header</title>
6+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
7+
8+
<!-- Google Fonts -->
9+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
10+
11+
<!-- Font Awesome -->
12+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
13+
14+
<style>
15+
* {
16+
margin: 0;
17+
padding: 0;
18+
box-sizing: border-box;
19+
}
20+
21+
body {
22+
font-family: "Open Sans", sans-serif;
23+
}
24+
25+
#intro {
26+
width: 100%;
27+
position: relative;
28+
background-color: #d8d7d7ff;
29+
padding: 180px 0 120px 0;
30+
display: flex;
31+
align-items: center;
32+
min-height: 600px;
33+
}
34+
35+
#intro .container {
36+
max-width: 1140px;
37+
margin: 0 auto;
38+
padding: 0 15px;
39+
}
40+
41+
#intro .intro-info {
42+
max-width: 900px;
43+
margin: 0 auto;
44+
text-align: center;
45+
}
46+
47+
#intro .intro-info h2 {
48+
padding: 0;
49+
font-size: 64px;
50+
text-align: center;
51+
font-weight: 700;
52+
line-height: 1.2;
53+
color: #2c3e50;
54+
margin-bottom: 0;
55+
font-family: "Montserrat", sans-serif;
56+
}
57+
58+
#intro .intro-info h2 span {
59+
color: #e5332a;
60+
text-decoration: none;
61+
font-weight: 800;
62+
position: relative;
63+
display: inline-block;
64+
}
65+
66+
#intro .intro-info h2 span::after {
67+
content: '';
68+
position: absolute;
69+
bottom: 8px;
70+
left: 0;
71+
right: 0;
72+
height: 12px;
73+
background: rgba(229, 51, 42, 0.2);
74+
z-index: -1;
75+
border-radius: 2px;
76+
}
77+
78+
#intro .intro-info p {
79+
color: #333;
80+
text-align: center;
81+
font-size: 28px;
82+
font-weight: 400;
83+
line-height: 1.6;
84+
margin-top: 30px;
85+
margin-bottom: 0;
86+
font-family: "Montserrat", sans-serif;
87+
}
88+
89+
/* Contact CTA Buttons */
90+
#intro .intro-cta {
91+
margin-top: 35px;
92+
text-align: center;
93+
display: flex;
94+
flex-wrap: wrap;
95+
justify-content: center;
96+
gap: 15px;
97+
}
98+
99+
#intro .btn-contact {
100+
display: inline-flex;
101+
align-items: center;
102+
gap: 10px;
103+
font-family: "Montserrat", sans-serif;
104+
font-size: 16px;
105+
font-weight: 600;
106+
letter-spacing: 0.5px;
107+
padding: 14px 32px;
108+
color: #fff;
109+
border: 2px solid;
110+
border-radius: 50px;
111+
text-decoration: none;
112+
transition: all 0.3s ease;
113+
}
114+
115+
#intro .btn-contact:hover {
116+
color: #fff;
117+
transform: translateY(-2px);
118+
text-decoration: none;
119+
}
120+
121+
#intro .btn-contact:active {
122+
transform: translateY(0);
123+
}
124+
125+
#intro .btn-contact i {
126+
font-size: 20px;
127+
}
128+
129+
/* WhatsApp Button */
130+
#intro .btn-whatsapp {
131+
background: #25D366;
132+
border-color: #25D366;
133+
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
134+
}
135+
136+
#intro .btn-whatsapp:hover {
137+
background: #20BA5A;
138+
border-color: #20BA5A;
139+
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
140+
}
141+
142+
#intro .btn-whatsapp:active {
143+
box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3);
144+
}
145+
146+
/* Telegram Button */
147+
#intro .btn-telegram {
148+
background: #0088cc;
149+
border-color: #0088cc;
150+
box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
151+
}
152+
153+
#intro .btn-telegram:hover {
154+
background: #006fa8;
155+
border-color: #006fa8;
156+
box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
157+
}
158+
159+
#intro .btn-telegram:active {
160+
box-shadow: 0 2px 10px rgba(0, 136, 204, 0.3);
161+
}
162+
163+
/* Email Button */
164+
#intro .btn-email {
165+
background: #e5332a;
166+
border-color: #e5332a;
167+
box-shadow: 0 4px 15px rgba(229, 51, 42, 0.3);
168+
}
169+
170+
#intro .btn-email:hover {
171+
background: #c72b23;
172+
border-color: #c72b23;
173+
box-shadow: 0 6px 20px rgba(229, 51, 42, 0.4);
174+
}
175+
176+
#intro .btn-email:active {
177+
box-shadow: 0 2px 10px rgba(229, 51, 42, 0.3);
178+
}
179+
180+
/* Responsividade */
181+
@media (max-width: 991px) {
182+
#intro {
183+
padding: 140px 0 60px 0;
184+
}
185+
186+
#intro .intro-info h2 {
187+
font-size: 48px;
188+
}
189+
190+
#intro .intro-info p {
191+
font-size: 24px;
192+
}
193+
}
194+
195+
@media (max-width: 767px) {
196+
#intro {
197+
padding: 120px 0 80px 0;
198+
min-height: 500px;
199+
}
200+
201+
#intro .intro-info h2 {
202+
font-size: 36px;
203+
line-height: 1.3;
204+
}
205+
206+
#intro .intro-info h2 span::after {
207+
height: 8px;
208+
bottom: 4px;
209+
}
210+
211+
#intro .intro-info p {
212+
font-size: 20px;
213+
margin-top: 20px;
214+
}
215+
216+
#intro .btn-contact {
217+
font-size: 14px;
218+
padding: 12px 24px;
219+
}
220+
221+
#intro .btn-contact i {
222+
font-size: 18px;
223+
}
224+
}
225+
226+
@media (max-width: 574px) {
227+
#intro {
228+
padding: 100px 0 60px 0;
229+
min-height: 450px;
230+
}
231+
232+
#intro .intro-info h2 {
233+
font-size: 28px;
234+
}
235+
236+
#intro .intro-info p {
237+
font-size: 18px;
238+
line-height: 1.5;
239+
}
240+
241+
#intro .intro-cta {
242+
flex-direction: column;
243+
align-items: center;
244+
}
245+
246+
#intro .btn-contact {
247+
font-size: 14px;
248+
padding: 12px 28px;
249+
width: 100%;
250+
max-width: 280px;
251+
justify-content: center;
252+
}
253+
254+
#intro .btn-contact i {
255+
font-size: 18px;
256+
}
257+
}
258+
</style>
259+
</head>
260+
261+
<body>
262+
<section id="intro" class="clearfix">
263+
<div class="container">
264+
<div class="intro-info">
265+
<h2>Tecnologia com<br><span>transparência</span> e <span>liberdade</span></h2>
266+
<p>Somos uma cooperativa digital de especialistas em desenvolvimento de software livre</p>
267+
<div class="intro-cta">
268+
<a href="https://wa.me/552120422073" target="_blank" rel="noopener noreferrer" class="btn-contact btn-whatsapp" aria-label="Fale conosco no WhatsApp">
269+
<i class="fa fa-whatsapp"></i> WhatsApp
270+
</a>
271+
<a href="https://t.me/LibreCodeCoop" target="_blank" rel="noopener noreferrer" class="btn-contact btn-telegram" aria-label="Fale conosco no Telegram">
272+
<i class="fa fa-telegram"></i> Telegram
273+
</a>
274+
<a href="mailto:contato@librecode.coop" class="btn-contact btn-email" aria-label="Envie-nos um email">
275+
<i class="fa fa-envelope"></i> Email
276+
</a>
277+
</div>
278+
</div>
279+
</div>
280+
</section>
281+
282+
<section style="padding: 60px 20px; text-align: center; background: #f8f9fa;">
283+
<div style="max-width: 800px; margin: 0 auto;">
284+
<h3 style="margin-bottom: 20px; color: #2c3e50;">Demonstração do Novo Header</h3>
285+
<p style="color: #666; line-height: 1.6;">
286+
Esta é uma demonstração do novo header com o botão de call-to-action do WhatsApp.
287+
O botão está completamente responsivo e funcional, redimensione a janela para ver
288+
as adaptações para diferentes tamanhos de tela.
289+
</p>
290+
<p style="color: #666; margin-top: 20px;">
291+
<strong>Melhorias implementadas:</strong>
292+
</p>
293+
<ul style="text-align: left; color: #666; line-height: 1.8; max-width: 600px; margin: 20px auto;">
294+
<li><strong>WhatsApp:</strong> Botão verde (#25D366) com link direto para iniciar conversa</li>
295+
<li><strong>Telegram:</strong> Botão azul (#0088cc) com link para o canal da cooperativa</li>
296+
<li><strong>Email:</strong> Botão vermelho (#e5332a) com link mailto para contato@librecode.coop</li>
297+
<li>Efeito hover com elevação e mudança de cor em todos os botões</li>
298+
<li>Totalmente responsivo: empilham verticalmente em telas pequenas</li>
299+
<li>Ícones e textos bem alinhados com Font Awesome</li>
300+
<li>Sombras suaves e animações de transição</li>
301+
</ul>
302+
</div>
303+
</section>
304+
</body>
305+
</html>

‎package-lock.json‎

Lines changed: 6 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)