-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (205 loc) · 8.31 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
<!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
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<title>Projeto Nutripuc</title>
</head>
<body>
<header>
<nav>
<a id="home" href="/"><img class="logo" src="./assets/logo166x156.png" alt="Logo" /></a>
<div>
<ul>
<li><a href="#about">Sobre</a></li>
<li><a href="#plans">Planos</a></li>
<li><a href="#contact">Contato</a></li>
<li>
<button
type="button"
class="btn btn-light md d-md-none"
data-bs-toggle="modal"
data-bs-target="#loginModal"
>
Login
</button>
</li>
</ul>
</div>
<button type="button" class="login" data-bs-toggle="modal" data-bs-target="#loginModal">Login</button>
<button class="menu-icon" href="/"><img src="assets\hambergermenu.png" alt="menu" /></button>
</nav>
<section class="outdoor">
<div class="CTA-glass"></div>
<div class="CTA">
<h1>Nutrição otimizada</h1>
<p>
As melhores ferramentas de gestão para o seu consultório, com um único objetivo: mudar vidas através da
nutrição consciente.
</p>
<a href="signup.html" class="mt-3 custom-btn">Faça seu cadastro</a>
</div>
</section>
<div class="hero-image-container">
<img src="assets\brooke-lark-GwNsgnSAfQM-unsplash.jpg" alt="Imagem de outdoor" />
</div>
</header>
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalLabel">Faça seu Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="loginForm">
<div class="mb-3">
<label for="loginModalEmail" class="form-label">E-mail</label>
<input type="email" class="form-control" id="loginModalEmail" aria-describedby="emailHelp" />
</div>
<div class="mb-3">
<label for="loginTypeSelect" class="form-label">Selecione o tipo de usuário</label>
<select class="form-select" id="loginTypeSelect" aria-label="Tipo de usuário">
<option value="nutricionista">Nutricionista</option>
<option value="paciente">Paciente</option>
</select>
</div>
<div class="mb-3">
<label for="loginModalSenha" class="form-label">Senha</label>
<input type="password" class="form-control" id="loginModalSenha" />
</div>
<button type="submit" class="custom-btn">Fazer login</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
<main>
<section id="intro">
<img src="assets\nathan-dumlao-bRdRUUtbxO0-unsplash.jpg" alt="Imagem de introdução" />
<div class="section-text">
<p>
Queremos promover a interação ideal entre nutricionistas e pacientes, visando o uso inteligente das
ferramentas que oferecemos, respeitando a individualidade e necessidade de cada paciente com ferramentas
voltadas para a melhor experiência no acompanhamento nutricional.
</p>
<p>
Oferecemos ferramentas que será possível acompanhar diariamente os pacientes com anamnese completa, cálculo
de nutrientes, orientações de protocolos, gráfico de evolução, além de outras vantagens exclusivas.
</p>
</div>
</section>
<section id="about">
<h2>Sobre</h2>
<div class="container-cards-about">
<div class="card-about">
<img src="./assets/nutri-icon.png" alt="Nutrição Clínica" />
<h3>Nutrição Clínica</h3>
<p>
Plano de emagrecimento saudável, voltado para o tratamento de patologias e condições clínicas, através da
alimentação e seu balanceamento.
</p>
</div>
<div class="card-about">
<img src="./assets/nutri-icon.png" alt="Nutrição Funcional" />
<h3>Nutrição Funcional</h3>
<p>
Nutrição especializada que trata cada paciente, com os dados bioquímicos e fisiológicos para um
planejamento e individualizado, potencializando resultados.
</p>
</div>
<div class="card-about">
<img src="./assets/nutri-icon.png" alt="Nutrição Esportiva" />
<h3>Nutrição Esportiva</h3>
<p>
Para pacientes que buscam otimizar o desempenho esportivo, profissional ou amador, melhorar a condição
física e os aspectos estéticos relacionados à composição corporal.
</p>
</div>
</div>
</section>
<section id="plans">
<h2>Planos</h2>
<div class="container-cards-plans">
<div class="card-plan card-plan-basic">
<h3>Básico</h3>
<ul>
<li>Anamnese completa</li>
<li>Avaliação Clinica</li>
<li>Cadastro de receitas</li>
<li>Acesso a 30 pacientes</li>
</ul>
<p>R$59,00</p>
<button class="plans-btn">Assinar</button>
</div>
<div class="card-plan card-plan-plus">
<h3>Plus</h3>
<ul>
<li>Anamnese completa</li>
<li>Avaliação Clinica</li>
<li>Cadastro de receitas</li>
<li>Acesso a 80 pacientes</li>
<li>Gerar receita</li>
</ul>
<p>R$79,00</p>
<button class="plans-btn">Assinar</button>
</div>
<div class="card-plan card-plan-premium">
<h3>Premium</h3>
<ul>
<li>Anamnese completa</li>
<li>Avaliação Clinica</li>
<li>Cadastro de receitas</li>
<li>Pacientes ilimitados</li>
<li>Gerar receita</li>
</ul>
<p>R$109,00</p>
<button class="plans-btn">Assinar</button>
</div>
</div>
</section>
</main>
<footer id="contact">
<div class="container-logo">
<a href="#home">
<img class="logo" src="./assets/logo166x156.png" alt="Logo" />
</a>
</div>
<div class="footer-right">
<div class="info">
<h4>Contato</h4>
<p>Grupo 02, PUC Minas</p>
<span><img src="./assets/🦆 icon _gmail_.png" alt="gmail" /></span>
<span><img src="./assets/🦆 icon _whatsapp_.png" alt="whatsapp" /></span>
</div>
<div class="social">
<h4>Redes Sociais</h4>
<span><img src="./assets/🦆 icon _instagram_.png" alt="instagram" /></span>
<span><img src="./assets/🦆 icon _twitter_.png" alt="twitter" /></span>
<span><img src="./assets/🦆 icon _facebook_.png" alt="facebook" /></span>
<span><img src="./assets/🦆 icon _linkedin_.png" alt="linkedin" /></span>
<span><img src="./assets/🦆 icon _youtube_.png" alt="youtube" /></span>
</div>
</div>
</footer>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
<script src="./script.js"></script>
<script src="./login.js"></script>
</body>
</html>