-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (184 loc) · 10.4 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
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>AgênciaBold</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
<section id="hero-section">
<div id="menu">
<div class="img-conteiner"></div>
<div id="menu-conteiner-links">
<a href="#hero-section" class="menu-links">Início</a>
<a href="#section-porquenos" class="menu-links">Por que nós?</a>
<a href="#depoimentos" class="menu-links">Depoimentos</a>
<a href="#contato" class="menu-links" id="menu-contact">Entre em contato</a>
</div> <!--menu-items-->
<div id="menu-mobile-bars">
<input id = "menu-button" type="checkbox" style="display: none;" onclick="Menu()">
<label for= "menu-button"><i class="fas fa-bars"></i></label>
</div>
<div id="menu-mobile-links">
<a href="#hero-section" class="menu-links">Início</a>
<a href="#section-porquenos" class="menu-links">Por que nós?</a>
<a href="#depoimentos" class="menu-links">Depoimentos</a>
<a href="#contato" class="menu-links">Entre em contato</a>
</div> <!--menu-items-->
</div> <!--menu-->
<div class="principal">
<h1 tabindex="0"><span>Promova</span> <span><b>experiências</b></span> <span>aos</span> <span>seus</span> <span>clientes</span></h1>
<p>E veja resultados expressivos dia após dia</p>
<a href="https://ms-guilherme.github.io/Terra-Energy/" target="_blank"><img src="images/mockup.png" alt="Apresentação de Portfólio"></a>
</div> <!--principal-->
</section> <!--hero-section-->
<section id="logos-section">
<div id="logos-section-conteiner">
<img class="logos" src="images/LOGO1.png" alt="The North Face logo">
<img class="logos" src="images/LOGO2.png" alt="Uber logo">
<img class="logos" src="images/LOGO3.png" alt="Amazon logo">
<img class="logos" src="images/LOGO4.png" alt="Farfetch logo">
<img class="logos" src="images/LOGO5.png" alt="Rappi logo">
</div>
</section> <!-- Logo --->
<section id="section-porquenos">
<h2>Por que nós?</h2>
<p id="porquenos-p">Uma <b>experiência incrível</b> para seus clientes, com <b>resultados espetaculares</b> para sua empresa.</p>
<div id="porque-boxs-conteiner">
<div class="porque-boxs">
<img id="icone1" src="images/ICONE1.png" alt="Planejamento">
<h3>Planejamento impecável</h3>
<p class="porque-boxs-p">Conte com a Agência Bold no planejamento de seus projetos, conteúdos, campanhas ou estratégias. <br>Nossos profissionais altamente qualificados estão preparados para qualquer desafio!</p>
</div>
<div class="porque-boxs">
<img id="icone2" src="images/ICONE2.png" alt="Resultados">
<h3>Pague pelos resultados</h3>
<p class="porque-boxs-p">Aqui você paga de acordo com o retorno que ganha em cada campanha. <br>Não deixe a oportunidade de ter melhores resultados para amanhã! <br>Entre em contato e vamos conversar sobre sua necessidade.</p>
</div>
<div class="porque-boxs">
<img id="icone3" src="images/ICONE3.png" alt="Suporte">
<h3>Suporte e acompanhamento</h3>
<p class="porque-boxs-p">Mesmo após terminarmos nosso projeto ou estratégia, a Agência Bold acompanhará os futuros desdobramentos e resultados, oferecendo todo suporte possível para você e sua equipe.</p>
</div>
</div>
</section> <!-- Por que nós -->
<section id="entre-contato">
<h2>Vamos começar seu projeto?</h2>
<p>Fale com um consultor e tire sua ideia do papel</p>
<a href="#contato">ENTRAR EM CONTATO</a>
</section> <!-- Entre em Contato-->
<section id="beneficios">
<div id="beneficios-list">
<h2>Benefícios para você</h2>
<div class="list-div">
<img src="images/check.png" alt="Check!">
<p>Garantia de resultados, pague de acordo com o desempenho do seu projeto ou campanha.</p>
</div>
<div class="list-div">
<img src="images/check.png" alt="Check!">
<p>Equipe qualificada. Nossos profissionais possuem vasta experiência nacional e no exterior.</p>
</div>
<div class="list-div">
<img src="images/check.png" alt="Check!">
<p>Acreditamos que trabalhos criativos são os que mais se destacam em meio a multidão. Saia do feijão com arroz.</p>
</div>
<div id="div-a"><a href="#contato">ENTRAR EM CONTATO</a></div>
</div>
<div id="div-imagem1" class="beneficios-div">
<img id="imagem1" src="images/IMAGEM1.png" alt="Benefícios">
</div>
</section> <!-- Benefícios -->
<section id="beneficios-mobile">
<div id="beneficios-list">
<h2>Benefícios para você</h2>
<div class="list-div">
<img src="images/check.png" alt="Check!">
<p>Garantia de resultados, pague de acordo com o desempenho do seu projeto ou campanha.</p>
</div>
<div class="list-div">
<img src="images/check.png" alt="Check!">
<p>Equipe qualificada. Nossos profissionais possuem vasta experiência nacional e no exterior.</p>
</div>
<div class="list-div">
<img src="images/check.png" alt="Check!">
<p>Acreditamos que trabalhos criativos são os que mais se destacam em meio a multidão. Saia do feijão com arroz.</p>
</div>
<div id="div-a"><a href="#contato">ENTRAR EM CONTATO</a></div>
</div>
</section> <!-- Benefícios Mobile -->
<section id="depoimentos">
<h2>Depoimentos</h2>
<div id="depoimentos-conteiner">
<div class="depoimento-div">
<img src="images/DEPOIMENTO1.png" alt="Depoimento">
<h3>Miriam Souza</h3>
<p>Uber</p>
<p>"O trabalho da Agência Bold foi fundamental para as nossas estratégias de 2023. <br> Juntos, tivemos excelentes resultados e nossos clientes ficaram surpresos com a qualidade."</p>
<img class="rate" src="images/RATE.png" alt="5 Estrelas">
</div>
<div class="depoimento-div">
<img src="images/DEPOIMENTO2.png" alt="Depoimento">
<h3>Lucas Mendes</h3>
<p>The North Face</p>
<p>"Buscamos a Agência Bold para nos ajudar com campanhas de growth marketing focadas em um público extremamente específico. <br> Com ela, houve um faturamento maior que 300%."</p>
<img class="rate" src="images/RATE.png" alt="5 Estrelas">
</div>
<div class="depoimento-div">
<img src="images/DEPOIMENTO3.png" alt="Depoimento">
<h3>Zaya Menphis</h3>
<p>Rappi</p>
<p>"A estratégia de lançamento da marca não seria a mesma sem o trabalho comprometido da Agência Bold. Meus agradecimentos ao Guilherme, que abraçou nossos desafios como um de nós."</p>
<img class="rate" src="images/RATE.png" alt="5 Estrelas">
</div>
</div>
</section> <!-- Depoimentos -->
<section id="contato"> <!-- Contato -->
<h2>Entre em Contato</h2>
<p id="contato-p"></p>
<input class="form" type="text" placeholder="Nome">
<input class="form" type="email" placeholder="Email">
<textarea class="form" placeholder="Insira sua mensagem..."></textarea>
<input type="submit" onclick="Formulario()">
</section> <!-- Contato -->
<footer>
<p>Desenvolvido por <b>Guilherme Menezes</b></p>
<div id="menu-conteiner-links-footer">
<a href="#hero-section" name="menu-links-footer" class="menu-links">Início</a>
<a href="#section-porquenos" name="menu-links-footer" class="menu-links">Por que nós?</a>
<a href="#depoimentos" name="menu-links-footer" class="menu-links">Depoimentos</a>
</div> <!--menu-items-->
<div id="footer-imgs-conteiner">
<a href="https://github.com/ms-guilherme" target="_blank"><img src="images/github-logo.png" alt="GitHub de Guilherme Menezes"></a>
<a href="https://www.instagram.com/ms.guilherm/" target="_blank"><img src="images/instagram-logo.png" alt="Instagram de Guilherme Menezes"></a>
</div>
</footer>
<script>
window.addEventListener("resize", ()=> {
if (window.innerWidth > 590) {
document.getElementById('menu-mobile-links').style.left = '-600px';
document.getElementById('menu-button').checked = false;
}
})
function Menu() {
let button = document.getElementById('menu-button');
if (button.checked) {
let menu = document.getElementById("menu-mobile-links").style.left = '-10px';
}
else {
let menu = document.getElementById("menu-mobile-links").style.left = '-600px';
}
}
function Formulario() {
let campos = document.querySelectorAll('.form');
campos.forEach((textos) => {
textos.value = "";
})
let p = document.getElementById('contato-p');
p.innerHTML = "Mensagem enviada! <br> Em breve, entraremos em contato com você!";
}
</script>
</body>
</html>