-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
351 lines (351 loc) · 12.9 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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
<!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" />
<link rel="stylesheet" href="./css/index.css" />
<link rel="shortcut icon" href="./imgs/favicon.png" type="image/png">
<link rel="stylesheet" href="css/footer-and-header.css" />
<script src="./js/script.js" defer></script>
<title>Sparkle Sorrisos</title>
</head>
<body>
<nav>
<div class="logo">
<a href="#"
><img src="./imgs/SparkleSorrisos.svg" alt="SparkleSorrisos logo"
/></a>
</div>
<a href="#" class="toggle-btn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li class="show-drop">
<a href="#"
>TRATAMENTOS<img
id="expand"
src="./imgs/expandir.svg"
alt="expand icon"
/></a>
</li>
<li id="dropdown-list">
<ul>
<li class="dropdown">
<a href="./pages/clinica-geral.html">Clínica Geral</a>
</li>
<li class="dropdown">
<a href="./pages/endodontia.html">Endodontia</a>
</li>
<li class="dropdown">
<a href="./pages/estetica.html">Estética</a>
</li>
<li class="dropdown">
<a href="./pages/implantes.html">Implantes</a>
</li>
<li class="dropdown">
<a href="./pages/ortodontia.html">Ortodontia</a>
</li>
<li class="dropdown">
<a href="./pages/proteses.html">Próteses</a>
</li>
</ul>
</li>
<li><a href="./pages/contato.html">CONTATO</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
</nav>
<header>
<div>
<h1 class="blue-line">
Seu Sorriso Sparkling<span class="dot">.</span>
</h1>
<a class="action-btn" href="https://api.whatsapp.com/send?phone=554391436064"
>agende uma consulta<img
src="./imgs/whatsapp.svg"
alt="whatsapp icon"
/></a>
</div>
</header>
<div class="man-smile"></div>
<section class="differentials">
<h2 class="secondary-title blue-line">
diferenciais<span class="dot">.</span>
</h2>
<div class="bg-cards">
<div class="card">
<img src="./imgs/atendimento.svg" alt="headphone icone" />
<h3>ATENDIMENTO</h3>
<p>
Nosso atendimento é um dos pontos mais
<span>aclamados pelos nossos clientes</span>, na verdade, faz parte
da cultura da nossa empresa para que, independentemente do numero de
clientes, o nosso objetivo é fazer com que nosso cliente se sinta
como sendo o unico sendo atendido, dando toda a devida ateção caso a
caso.
</p>
</div>
<div class="card middle">
<img src="./imgs/tec.svg" alt="tecnologia icone" />
<h3>EQUIPAMENTO DE PONTA</h3>
<p>
O mundo muda de maneira extraordinariamente rapida, logo, o mesmo se
pode dizer dos equipamentos odontologicos, mas mesmo assim, a
SparkleSorrisos sempre se mantém extremamente atualizada com os
<span>melhores equipamentos e os melhores softwares.</span>
</p>
</div>
<div class="card">
<img src="./imgs/star.svg" alt="estrela icone" />
<h3>PROFISSIONAIS QUALIFICADOS</h3>
<p>
Infelizmente, hoje em dia há muitos profissionais que não honram a
própria profissão e muitas vezes acabam prejudicando muito não só a
si mesmos, mas também aos próprios clientes, isso é algo
entristecedor e não queremos que isso aconteça com nossos clientes,
por isso só contratamos <span>os melhores profissionais.</span>
</p>
</div>
</div>
</section>
<section class="testimonials">
<div class="dps">
<img src="./imgs/depoimento-laço.svg" alt="laço de puxar" />
<div class="text-testimonials">
<h2 class="secondary-title">depoimentos<span class="dot">.</span></h2>
<div class="dp1">
<p>
"Ameei! Pra mim uma das melhores clinicas do Brasil, atendimento
nota dez e o doutor era extremamente profissional e simpático."
</p>
<h3 class="name">Ana Julia</h3>
</div>
<div class="dp2">
<p>
"Levei a minha filha que estava morrendo DOR ae na semana passada,
meu problema foi resolvido no mesmo dia, se eu tiver algum
problema no dente, ja sei aonde ir."
</p>
<h3 class="name">Ricardo Rodrigues</h3>
</div>
</div>
</div>
<a class="action-btn" href="https://api.whatsapp.com/send?phone=554391436064"
>agende uma consulta<img src="./imgs/whatsapp.svg" alt="whatsapp icon"
/></a>
</section>
<section class="specialties">
<h2 class="secondary-title blue-line">
especialidades<span class="dot">.</span>
</h2>
<div class="specialties-cards">
<div class="card">
<img src="./imgs/clinica-geral.jpg" alt="clinica geral" />
<h3>Clínica Geral</h3>
<a href="./pages/clinica-geral.html">saiba mais</a>
</div>
<div class="card">
<img src="./imgs/endodontia.jpg" alt="endodontia" />
<h3>Endodontia</h3>
<a href="./pages/endodontia.html">saiba mais</a>
</div>
<div class="card">
<img src="./imgs/estetica.jpg" alt="estetica" />
<h3>Estética</h3>
<a href="./pages/estetica.html">saiba mais</a>
</div>
<div class="card">
<img src="./imgs/implante.jpg" alt="implantes" />
<h3>Implantes</h3>
<a href="./pages/implantes.html">saiba mais</a>
</div>
<div class="card">
<img src="./imgs/ortodontia.jpg" alt="ortodontia" />
<h3>Ortodontia</h3>
<a href="./pages/ortodontia.html">saiba mais</a>
</div>
<div class="card">
<img src="./imgs/protese.jpg" alt="proteses" />
<h3>Próteses</h3>
<a href="./pages/proteses.html">saiba mais</a>
</div>
</div>
</section>
<section class="about">
<div class="about-txt">
<h2 class="secondary-title">sobre nós<span class="dot">.</span></h2>
<p>
A clínica odontológica <span>SparkleSorrisos</span> foi fundada em
<span>2005 em Rolândia</span>, desde de o começo da SparkleSorrisos
prezamos por uma cultura com extremo
<span>foco na gentileza e prontidão</span>, e independente do tamanho
da empresa, pretendemos continuar melhorando com essa cultura em mente.
</p>
<div class="icon-txt">
<img src="./imgs/prontidao.svg" alt="foguete icone" />
<h3>PRONTIDÃO</h3>
</div>
<div class="border-line"></div>
<div class="icon-txt">
<img src="./imgs/gentileza.svg" alt="coraçao icone" />
<h3>GENTILEZA</h3>
</div>
<a class="action-btn" href="https://api.whatsapp.com/send?phone=5543991436064"
>agende uma consulta<img
src="./imgs/whatsapp.svg"
alt="whatsapp icon"
/></a>
</div>
</section>
<img class="building" src="./imgs/predio.jpg" alt="predio" />
<section class="faq" id="faq">
<div class="faq-question">
<div class="question">
<h3>Onde estamos localizados?</h3>
<img
src="./imgs/expandir-faq.svg"
class="question-arrow"
alt="expandir icone"
/>
</div>
<div class="answer">
<p>
Nós estamos localizados no endereço:
<span>R. Aly Pertou, 818 - Curitiba - PR, 84045-1952</span>
</p>
</div>
</div>
<div class="faq-question">
<div class="question">
<h3>Qual o tipo de clareamento dental ideal para você?</h3>
<img
src="./imgs/expandir-faq.svg"
class="question-arrow"
alt="expandir icone"
/>
</div>
<div class="answer">
<p>
Você pode tanto optar por fazer o
<span
>clareamento caseiro que é perfeito para quem tem uma
sensibilidade muito alta</span
>, porém ela depende completamente do paciente e pode ser um pouco
cansativa, mas você pode também optar por fazer o
<span>clareamento dental de consultório</span> com luz ultravioleta,
que é
<span
>perfeito para quem não tem a pacienciência de usar a moldeira
todos os dias em casa</span
>, além de ter um resultado mais rápido.
</p>
</div>
</div>
<div class="faq-question">
<div class="question">
<h3>Oque torna o nosso atendimento humanizado tão importante?</h3>
<img
src="./imgs/expandir-faq.svg"
class="question-arrow"
alt="expandir icone"
/>
</div>
<div class="answer">
<p>
Como ja dissertamos sobre, a
<span>gentileza faz parte da cultura da nossa empresa</span>, e por
isso, nós nos importantamos muito com o bem estar físico e
psicológico do paciente, então nos atentamos para sempre
<span>acolher o paciente e todos os seus medos.</span>
</p>
</div>
</div>
<div class="faq-question">
<div class="question">
<h3>Porque visitar um dentista regularmente é tão importante?</h3>
<img
src="./imgs/expandir-faq.svg"
class="question-arrow"
alt="expandir icone"
/>
</div>
<div class="answer">
<p>
Pois assim podemos trabalhar com a prevenção de doenças de uma
maneira muito mais <span>eficiente</span>, além disso, mesmo se você
já tiver algum problema, será muito mais <span>facil</span> trata-lo
se conseguirmos identifica-lo no começo, e para que isso aconteça, e
necessário fazer <span>consultas regularmente.</span>
</p>
</div>
</div>
<div class="faq-question">
<div class="question">
<h3>Seu filho tem medo de ir ao dentista, oque podemos fazer?</h3>
<img
src="./imgs/expandir-faq.svg"
class="question-arrow"
alt="expandir icone"
/>
</div>
<div class="answer">
<p>
Em nossa clinica temos especialistas que trabalham com
<span>pediatria</span> que sabem muito bem como lidar com crianças,
então podemos garantir que com a nossa clinica, seu
<span>filho começara amar ir para o dentista.</span>
</p>
</div>
</div>
<div class="faq-question">
<div class="question">
<h3>O tratamento de canal dói?</h3>
<img
src="./imgs/expandir-faq.svg"
class="question-arrow"
alt="expandir icone"
/>
</div>
<div class="answer">
<p>
<span>Definitivamente não!</span> Principalmente quando se é
utilizado um bom anestésico, e se isso for combinada com a excelente
técnica de nossos profissionais, não existira dor nenhuma.
</p>
</div>
</div>
</section>
<footer>
<div class="contact">
<h2 class="secondary-title">contatos<span class="dot">.</span></h2>
<p>Email: [email protected]</p>
<p>Telefone: +55 (43) 99143-6064</p>
<p>
Horario de funcionamento: Segunda - Sexta, das 8h as 20h, Sabados, das
8h as 14h.
</p>
<div class="midias">
<a href="#"><img src="./imgs/facebook.svg" alt="facebook icone" /></a>
<a href="#"
><img src="./imgs/instagram.svg" alt="instagram icone"
/></a>
<a href="#"><img src="./imgs/linkedin.svg" alt="linkedin icone" /></a>
</div>
</div>
<div class="border-line"></div>
<div class="localization">
<img src="./imgs/mapa.jpg" alt="mapa" />
<p>R. Aly Pertou, 818 - Curitiba - PR, 84045-1952</p>
<a class="action-btn" href="https://api.whatsapp.com/send?phone=554391436064"
>agende uma consulta<img
src="./imgs/whatsapp.svg"
alt="whatsapp icon"
/></a>
</div>
</footer>
</body>
</html>