-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
344 lines (344 loc) · 19.8 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
<!DOCTYPE html>
<html lang="en">
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&family=Lily+Script+One&family=Lato&family=Open+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
<script type="module" defer src="assets/js/headerNavigationAnimation.js"></script>
<title>ION Nutri | Foco no resultado</title>
<meta name="description" content="Webpage for a nutrition expert">
<meta name="robots" content="index, follow" />
</head>
<body>
<header>
<div class="header-bar">
<input type="checkbox" class="menu-checkbox" id="menu-checkbox" />
<label for="menu-checkbox">Contatos</label>
<address class="header-bar__contact">
<a class="header-bar__contact__item email" href="mailto:claudia.gomes@ionnutri.com.br">claudia.gomes@ionnutri.com.br</a>
<a class="header-bar__contact__item email" href="mailto:contato@ionnutri.com.br">contato@ionnutri.com.br</a>
<a class="header-bar__contact__item phone" href="tel:+551131641214">(11) 3164-1214</a>
<a class="header-bar__contact__item phone" href="tel:+5511910813015">(11) 9 1081-3015</a>
</address>
<a href="#" class="header-bar__cart">Carrinho</a>
</div>
<div class="header-navigation">
<img class="header-navigation__logo" src="assets/img/logo.png" alt="logo" />
<input type="checkbox" class="nav-checkbox" id="nav-checkbox" />
<label for="nav-checkbox">Menu</label>
<nav>
<ul class="header-navigation__items">
<li class="header-navigation__item"><a class="header-navigation__link" href="#">Home</a></li>
<li class="header-navigation__item"><a class="header-navigation__link" href="#">Quem Somos</a></li>
<li class="header-navigation__item"><a class="header-navigation__link" href="#">Área do Profissional</a></li>
<li class="header-navigation__item"><a class="header-navigation__link" href="#">Contato</a></li>
<li class="header-navigation__item"><a class="header-navigation__link" href="#">Blog</a></li>
<div class="header-navigation__underline" id="nav-underline"></div>
</ul>
</nav>
<a class="header-navigation__cta link-button" href="#">Comprar Kit</a>
</div>
</header>
<main>
<section class="banner-container">
<div class="banner__bg">
</div>
<figure class="molecule">
<img class="molecule__image" src="assets/img/molecula.png" alt="molecule"/>
</figure>
<div class="banner__content-wrapper">
<article class="banner__content">
<h1 class="banner__content__title">NUTRIMETABOLÔMICA</h1>
<p class="banner__content__text">A nutrimetabolômica é a ciência que avalia o efeito da dieta sob a saúde de um individuo. Essa avaliação é importante pois nosso metabolismo é altamente dinâmico, vivendo sob interferências de fatores ambientais e genéticos, fatores estes que tornam um indivíduo único! Nesse cenário, ao invés de questionar quais alimentos um indivíduo consome, é possível determinar o caminho metabólico e os efeitos de sua passagem no organismo.</p>
<div class="banner__button-container">
<a class="banner__content__cta link-button" href="#">Comprar Kit</a>
<a class="banner__content__cta link-button invert-button" href="#">Tire suas dúvidas pelo Whatsapp</a>
</div>
</article>
<div>
<figure class="banner__image image-shadow">
<img class="banner__image__picture" src="assets/img/carrossel1.jpg" alt="image cartoon">
</figure>
</div>
</div>
</section>
<section class="info">
<figure class="info__image">
<img class="info__image__content" src="assets/img/books.jpg" alt="books" />
</figure>
<article class="info__content">
<h2 class="info__content__h2">A nutrição como você nunca viu!</h2>
<h3 class="info__content__h3">O que é o teste?</h3>
<p class="info__content__p">É uma das avaliações mais abrangentes e avançadas da medicina de precisão. Consiste em um teste metabolômica salivar, desenvolvido para avaliar diferentes aspectos do metabolismo e detectar desequilíbrios metabólicos e nutricionais antes que se manifestem como doenças crônicas. </p>
<a class="link-button info__content__button" href="#">QUERO COMPRAR AGORA O MEU TESTE</a>
</article>
</section>
<section class="info info-blue">
<article class="info__content">
<h2 class="info__content__h2">O Futuro da Nutrição Está Aqui!</h2>
<h3 class="info__content__h3">Por que fazer o teste?</h3>
<p class="info__content__p">Os metabolitos avaliados pela IonNutri são produtos do seu metabolismo, ou seja, eles contam para gente a sua história! - Através da sua história podemos oferecer uma compreensão bioquímica integrada da sua saúde. - Identifica ponto-a-ponto os desequilíbrios metabólicos e seus impactos na saúde. - Revela a falta de um nutriente ou se a capacidade do corpo de produzir energia a partir dos alimentos está prejudicada. - Uma vez identificados os desequilíbrios, pode-se propor correções de modo individualizado e personalizado. - Possibilita o fornecimento adequado de nutrientes de acordo com a necessidade metabólica especifica do individuo, permitindo assim, que cada organismo alcance seu equilíbrio, prevenindo o desenvolvimento de doenças ou melhorando o prognóstico de doenças já existentes.</p>
<a class="link-button info__content__button" href="#">QUERO COMPRAR AGORA O MEU TESTE</a>
</article>
<figure class="info__image image-shadow">
<img class="info__image__content" src="assets/img/books.jpg" alt="books"/>
</figure>
</section>
<section class="testimonials">
<h2 class="testimonials__title">Veja os <span class="testimonials__title--special">Relatos de mudança de vida</span></h2>
<p class="testimonials__description">Pellentesque etiam blandit in tincidunt at donec. Eget ipsum dignissim placerat nisi, adipiscing mauris non purus parturient.</p>
<div class="testimonials__cards">
<div class="testimonials__cards__card">
<p class="card__text">Pellentesque etiam blandit in tincidunt at donec. Eget ipsum dignissim placerat nisi, adipiscing mauris non.</p>
<div class="card__person">
<img class="card__person__image" src="assets/img/imageTestimonial.jpg" alt="picture of person"/>
<p class="card__person__name">Berry Gunawan</p>
<p class="card__person__rating">3.5</p>
</div>
</div>
<div class="testimonials__cards__card">
<p class="card__text">Pellentesque etiam blandit in tincidunt at donec. Eget ipsum dignissim placerat nisi, adipiscing mauris non.</p>
<div class="card__person">
<img class="card__person__image" src="assets/img/imageTestimonial.jpg" alt="picture of person"/>
<p class="card__person__name">Berry Gunawan</p>
<p class="card__person__rating">3.5</p>
</div>
</div>
<div class="testimonials__cards__card">
<p class="card__text">Pellentesque etiam blandit in tincidunt at donec. Eget ipsum dignissim placerat nisi, adipiscing mauris non.</p>
<div class="card__person">
<img class="card__person__image" src="assets/img/imageTestimonial.jpg" alt="picture of person"/>
<p class="card__person__name">Berry Gunawan</p>
<p class="card__person__rating">3.5</p>
</div>
</div>
</div>
</section>
<section class="explanation">
<h2 class="explanation__title">Como é <span class="explanation__title--special">feito o teste?</span></h2>
<ul class="explanation__list">
<li class="explanation__list__item">
<figure>
<img src="assets/img/imagemetapa.svg" alt="Checklist"/>
</figure>
<h3>1º passo</h3>
<p>Após adquirir o teste, você receberá no e-mail de cadastro um link para preencher um questionário com as informações sobre sua saúde atual</p>
</li>
<li class="explanation__list__item">
<figure>
<img src="assets/img/imagemetapa.svg" alt="Checklist"/>
</figure>
<h3>2º passo</h3>
<p>Após o preenchimento e envio desse questionário de saúde, o seu kit de coleta do teste será encaminhado ao endereço fornecido</p>
</li>
<li class="explanation__list__item">
<figure>
<img src="assets/img/imagemetapa3.svg" alt="Folha com gráficos"/>
</figure>
<h3>3º passo</h3>
<p>Após a realização da sua coleta de saliva, você entrará em contato com a IonNutri para providenciarmos a retirada da amostra. Assim que amostra chegar em nosso laboratório, aguarde 20 dias úteis para receber seus resultados</p>
</li>
</ul>
<a class="link-button explanation__link" href="#">Mais detalhes</a>
</section>
<section class="advantages">
<h3 class="advantages__title">Nosso <span class="advantages__title--special">Diferencial</span></h3>
<div class="advantages__card-wrapper">
<article class="advantages__card">
<img src="assets/img/card1.png" alt="card"/>
<h3>Metaboloma individualizado (n=1)</h3>
<p>More off this less hello samlande lied much over tightly circa horse taped mightly</p>
<a href="#">Saber mais</a>
</article>
<article class="advantages__card">
<img src="assets/img/card2.png" alt="card"/>
<h3>Aquisição de dados (espectrometria demassa)</h3>
<p>More off this less hello samlande lied much over tightly circa horse taped mightly</p>
<a href="#">Saber mais</a>
</article>
<article class="advantages__card">
<img src="assets/img/card3.png" alt="card"/>
<h3>Análise de dados (em tempo real)</h3>
<p>More off this less hello samlande lied much over tightly circa horse taped mightly</p>
<a href="#">Saber mais</a>
</article>
<article class="advantages__card">
<img src="assets/img/card4.png" alt="card"/>
<h3>Análise estatística</h3>
<p>More off this less hello samlande lied much over tightly circa horse taped mightly</p>
<a href="#">Saber mais</a>
</article>
<article class="advantages__card">
<img src="assets/img/card5.png" alt="card"/>
<h3>Resultados esperados: Longevidade e qualidade de vida</h3>
<p>More off this less hello samlande lied much over tightly circa horse taped mightly</p>
<a href="#">Saber mais</a>
</article>
<article class="advantages__card">
<img src="assets/img/card6.png" alt="card"/>
<h3>Mapeamento do metabolismo. (Alimentação ou suplementação)</h3>
<p>More off this less hello samlande lied much over tightly circa horse taped mightly</p>
<a href="#">Saber mais</a>
</article>
<article class="advantages__card">
<img src="assets/img/card7.png" alt="card"/>
<h3>Interpretação de resultados (Anamnese clínica + metabólica)</h3>
<p>More off this less hello samlande lied much over tightly circa horse taped mightly</p>
<a href="#">Saber mais</a>
</article>
<article class="advantages__card">
<img src="assets/img/card8.png" alt="card"/>
<h3>Armazenamento dos resultados de acordo com a LGPD</h3>
<p>More off this less hello samlande lied much over tightly circa horse taped mightly</p>
<a href="#">Saber mais</a>
</article>
</div>
</section>
<section class="client-highlight">
<img class="highlight__image" src="assets/img/clienthighlight.png" alt="Cartoon man" />
<h2 class="highlight__text">Nome do cliente - Profissão</h2>
<p class="highlight__text text__quotations">Tive a oportunidade de visitar o laboratório, conhecer o processo de extração da amostra e comprovar a qualidade e seriedade do trabalho executado. Me senti muito segura em realizar o exame, satisfeita com o resultado e com suporte prestado. Feliz com a parceria firmada e a oportunidade de levar saúde de uma forma assertiva e preventiva aos meus pacientes!</p>
<p class="highlight__signature">Dra Daniela Monteiro</p>
</section>
<section class="invitation">
<div class="invitation__text">
<h2>Venha ser <span>Nosso parceiro</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu eget feugiat habitasse nec, bibendum condimentum.</p>
<ul>
<li>Material expose like metals</li>
<li>Simple neutral colours.</li>
<li>Clear lines and geomatric figures</li>
<li>Material expose like metals</li>
</ul>
<a class="link-button" href="#">Entrar em contato</a>
</div>
<div class="invitation__cards">
<ul>
<li><img src="assets/img/invitation1.png" alt="card"/></li>
<li><img src="assets/img/invitation2.png" alt="card"/></li>
<li><img src="assets/img/invitation3.png" alt="card"/></li>
<li><img src="assets/img/invitation4.png" alt="card"/></li>
<li><img src="assets/img/invitation5.png" alt="card"/></li>
<li><img src="assets/img/invitation6.png" alt="card"/></li>
</ul>
</div>
</section>
<section class="lead-capture">
<img class="lead-capture__image" src="assets/img/leadcapture.png" alt="Cartoon man" />
<article class="lead-capture__main">
<h2 class="lead-capture__title">área aberta para <span class="lead-capture__title--highlight">técnica, referências científicas</span></h2>
<p class="lead-capture__text">Cada um de nós apresenta uma assinatura bioquímico metabólica, tão individual quanto nossas impressões digitais. Por outro lado, nosso metabolismo é altamente dinâmico, vivendo sob interferência de fatores externos e internos, como gênero, idade, fatores genéticos e epigenéticos, estilo de vida, composição da microbiota, dieta e exposição ao meio ambiente.</p>
<form class="lead-capture__form">
<div class="lead-capture__form__field">
<label for="name">Nome</label>
<input type="text" id="name" placeholder=" " required/>
</div>
<div class="lead-capture__form__field">
<label for="email">Email</label>
<input type="email" id="email" placeholder=" " required />
</div>
<button>Baixar PDF</button>
</form>
</article>
</section>
<section class="contact">
<h2>Entre em <span>Contato</span></h2>
<div class="contact__content-wrapper">
<address class="contact__address">
<h3>Informações Gerais</h3>
<h4>Telefone / Whatsapp</h4>
<ul>
<li>(11) 3164-1214</li>
<li>(11) 9 1081-3015</li>
</ul>
<h4>Email</h4>
<ul>
<li>claudia.gomes@ionnutri.com.br</li>
<li>contato@ionnutri.com.br</li>
</ul>
<h4>Localização</h4>
<p>Rua Apiacás, 247, sobreloja, Perdizes, São Paulo, SP.</p>
</address>
<form class="contact__form">
<h3>Mande sua mensagem</h3>
<div class="contact__form__field">
<label for="name-contact">Nome</label>
<input type="text" id="name-contact" placeholder=" " />
</div>
<div class="contact__form__field">
<label for="email-contact">Email</label>
<input type="email" id="email-contact" placeholder=" " />
</div>
<div class="contact__form__field">
<label for="subject-contact">Assunto</label>
<input type="text" id="subject-contact" placeholder=" " />
</div>
<div class="contact__form__field">
<label for="message-contact">Mensagem</label>
<textarea id="message-contact" placeholder=" " ></textarea>
</div>
<button>Enviar</button>
</form>
</div>
</section>
</main>
<footer>
<div class="footer-top">
<div>
<img src="assets/img/logogrande.png" alt="logo" />
</div>
<address>
<h2>Contatos</h2>
<ul>
<li><a href="#">contato@ionnutri.com.br</a></li>
<li><a href="#">claudia.gomes@ionnutri.com.br</a></li>
<li><a href="#">(11) 3164-1214</a></li>
<li><a href="#">(11) 9 1081-3015</a></li>
</ul>
</address>
<nav>
<h2>Páginas</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Quem somos</a></li>
<li><a href="#">Área Profissional</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Política de Privacidade</a></li>
</ul>
</nav>
<address>
<h2>Localização</h2>
<p>Rua Apiacás, 247 sobreloja, Perdizes, São Paulo, SP.</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.9418565509827!2d-46.67862658538461!3d-23.534593566488685!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce573b62728c23%3A0xa9b507e95327dc94!2sIon%20Nutri%20%7C%20Laborat%C3%B3rio%20de%20Testes%20Metabol%C3%B4micos!5e0!3m2!1spt-BR!2sca!4v1676122673683!5m2!1spt-BR!2sca"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
<a class="link-button invert-button" href="">Código de Direitos dos Pacientes</a>
</address>
</div>
<div class="footer-bottom">
<span>©ionnutri - All Rights Reserved</span>
<ul>
<li>
<img class="footer-bottom__social-icon" src="assets/img/footer1.png" alt="Instagram Icon"/>
</li>
<li>
<img class="footer-bottom__social-icon" src="assets/img/footer2.png" alt="Telegram Icon"/>
</li>
<li>
<img class="footer-bottom__social-icon" src="assets/img/footer3.png" alt="Twitter Icon"/>
</li>
</ul>
</div>
</footer>
</body>
</html>