-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathlandingpage.html
216 lines (207 loc) · 11.5 KB
/
landingpage.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<title>Meu Soninho</title>
<link rel="stylesheet" href="css/landingpage.css">
<script src="landingpage.js" defer></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</head>
<body>
<header id="up">
<nav>
<div class="logo">
<img class="imglogo" src="assets/logo.png" alt="">
<h1>Meu Soninho</h1>
</div>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#funcionalidades">Funcionalidades</a></li>
<li><a href="#contato1">Contato</a></li>
<li><a href="login.html">Fazer login</a></li>
</ul>
</nav>
</header>
<main>
<div class="Tela_inicial" id="inicio">
<div class="textos">
<div>
<h1 class="h1">
Um <span class="dif">sono de qualidade</span> para um dia de produtividade</h1>
</div>
<div>
<br/>
<p class="p"> Com dicas personalizadas, monitoramento de horas dormidas e lembretes para o horário ideal de dormir, o Meu Soninho ajuda você a organizar seu tempo de sono de acordo com sua rotina. Deixe para trás as noites de insônia e desperte cada dia mais produtivo.</p>
<br/>
</div>
<a href="#slide-info" class="botão">Saiba mais</a>
</div>
<div><img class="perfil" src="assets/logo1.jpeg" alt="" id="imageProfile"></div>
</div>
<div class="Tela_informações">
<div class="container-info">
<h1 class="titulo2"> Curiosidades</h1>
<div id="slide-info" class="blocos">
<div>
<h2>O que é Meu Soninho?</h2>
<p>É um site/app desenvolvido para melhorar a qualidade de vida dos seus usuários, com um foco especial na qualidade do sono. Ele oferece diversas funcionalidades que ajudam a organizar a rotina e facilitar o dia a dia, desde lembretes importantes até dicas práticas para relaxamento. A interface é projetada para ser leve e aconchegante, com uma estética fofa e amigável, tendo como mascote a adorável Nina, um urso panda que está sempre presente para guiar e trazer conforto em cada interação.</p>
</div>
<div>
<h2> Quem somos? </h2>
<p>O aplicativo está em desenvolvimento pela Empresa DreamSpace administrada pelos estudantes do 2° ano do curso Técnico em Informática no IFPI - Campus Picos. A ideia do site/app surgiu durante a disciplina de Projeto Integrador, onde os alunos puderam unir suas habilidades e conhecimentos para criar uma solução que impactasse positivamente a vida dos usuários. Agora, o projeto está sendo colocado em prática na forma de um site, dentro da disciplina de Introdução à Programação Web, onde o grupo está trabalhando para trazer uma experiência real e funcional para o público.</p>
</div>
<div>
<h2>Ambições para o futuro</h2>
<p>As ambições futuras para o aplicativo envolvem diversas melhorias e expansões. A equipe planeja integrar o app com dispositivos de saúde para um monitoramento mais preciso do sono e da saúde geral e realizar parcerias com especialistas em bem-estar e saúde do sono para garantir que o conteúdo oferecido seja fundamentado e credibilizado por profissionais.</p>
</div>
</div>
</div>
</div>
<div class="hbl" id="funcionalidades">
<div class="titulo3">
<h1>Funcionalidades</h1>
</div>
<div class="body-slide">
<div class="main-slide">
<ul class='slider'>
<li class='item' style="background-image: url('assets/python.png')">
<div class='content'>
<h2 class='title'>Plano personalizado para a sua rotina de sono</h2>
<p class='description'> Consigo desenvolver programas simples e automatizar algumas tarefas, mas ainda
estou longe de ser um especialista. Estou sempre buscando aprender mais e melhorar minhas habilidades
na linguagem. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('assets/html.png')">
<div class='content'>
<h2 class='title'>Acompanhamento da quantidade de horas de sono</h2>
<p class='description'> Tenho um conhecimento razoável em HTML. Consigo desenvolver sites simples e
funcionais, como esse, mas ainda estou em processo de aprendizado contínuo. Estou confiante em criar
páginas da web básicas e utilizáveis, mas sei que há muito mais para explorar e dominar nessa
linguagem. Estou comprometido em aprimorar minhas habilidades e criar projetos web cada vez melhores.
</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('assets/css.png')">
<div class='content'>
<h2 class='title'>Notificação com avisos e dicas de rotina</h2>
<p class='description'> Atualmente, possuo um bom conhecimento na linguagem CSS. Ao longo do tempo,
adquiri habilidades sólidas na estilização e formatação de elementos HTML. No entanto, reconheço que
ainda há muito a aprender. Embora me sinta confortável com o que já sei, estou ciente de que sempre
haverá áreas para aprimoramento e novos desafios a enfrentar no mundo do CSS.</p>
<button href="#">Read More</button>
</div>
</li>
<li class='item' style="background-image: url('assets/js.png')">
<div class='content'>
<h2 class='title'>Hábitos noturnos e diários para uma boa noite de sono </h2>
<p class='description'> Estou no estágio inicial de aprendizado da linguagem JavaScript. Neste momento,
estou me dedicando a compreender os conceitos fundamentais e a sintaxe básica da linguagem. Estou
explorando suas funcionalidades por meio de pequenos scripts e projetos simples. É evidente que ainda
tenho muito a aprender para dominar completamente suas aplicações e possibilidades.</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('assets/arduino.png')">
<div class='content'>
<h2 class='title'>Dicas de músicas e sons relaxantes</h2>
<p class='description'> Estou atualmente em processo de aprendizado da linguagem Arduino. Sendo um
iniciante, estou me familiarizando com os conceitos básicos e a estrutura da linguagem. Ainda estou
explorando suas funcionalidades e experimentando com pequenos projetos. Reconheço que tenho um longo
caminho pela frente para compreender totalmente suas aplicações e potencialidades.</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('assets/arduino.png')">
<div class='content'>
<h2 class='title'>Alarme com missões</h2>
<p class='description'> Estou atualmente em processo de aprendizado da linguagem Arduino. Sendo um
iniciante, estou me familiarizando com os conceitos básicos e a estrutura da linguagem. Ainda estou
explorando suas funcionalidades e experimentando com pequenos projetos. Reconheço que tenho um longo
caminho pela frente para compreender totalmente suas aplicações e potencialidades.</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('assets/arduino.png')">
<div class='content'>
<h2 class='title'>Ranking de motivação com a urso panda, Nina </h2>
<p class='description'> Estou atualmente em processo de aprendizado da linguagem Arduino. Sendo um
iniciante, estou me familiarizando com os conceitos básicos e a estrutura da linguagem. Ainda estou
explorando suas funcionalidades e experimentando com pequenos projetos. Reconheço que tenho um longo
caminho pela frente para compreender totalmente suas aplicações e potencialidades.</p>
<button>Read More</button>
</div>
</li>
</ul>
<nav class='nav'>
<ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
<ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
</nav>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</div>
<div class="tudo-ctt" >
<div class="content-ctt" id="contato1">
<div class="esquerdinha">
<h1>Contato</h1>
<p>Se você está interessado no desenvolvimento do Meu Soninho ou tem alguma dúvida sobre o site/app, preencha as lacunas ao lado e deixe sua dúvida/opinião.
Responderemos o mais rápido possível! </p>
<div class="seta">
<div id="seta"></div>
</div>
</div>
<div class="body-contato">
<section>
<h2>Entre em contato</h2>
<form action="https://api.staticforms.xyz/submit" method="post">
<label>Nome</label>
<input type="text" name="name" placeholder="Digite seu nome" autocomplete="off" required>
<label>Email</label>
<input type="email" name="email" placeholder="Digite seu email" autocomplete="off" required>
<label>Mensagem</label>
<textarea name="message" cols="30" rows="10" placeholder="Digite sua mensagem" required></textarea>
<button type="submit">Enviar</button>
</form>
</section>
</div>
</div>
</div>
</main>
<footer>
<div class="f.info">
<h3> Saiba mais: </h3>
<li>
<a href="https://www.canva.com/design/DAFyqcOMe3s/yqwzUlvBrBDpwcFO-PQ1PA/edit?utm_content=DAFyqcOMe3s&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton"> Leia o Projeto </a>
</li>
<li> IFPI - Campus Picos</li>
<li> appmeusoninho@gmail.com</li>
<br/>
<div class="rede_social">
<a href="https://www.instagram.com/appmeusoninho/?utm_source=ig_web_button_share_sheet" class="instagram">
<img src="assets/logo_instagram.png" alt="logo do instagram">
</a>
<a href="https://pt-br.facebook.com/">
<img src="assets/logo_facebook.jpg" alt="logo do facebook">
</a>
<a href="https://br.linkedin.com/"></a>
<img src="assets/logo_linkedin.jpeg" alt="logo do linkedin">
</a>
</div>
</div>
<div class="copyright"></div>
<p>© 2024 Meu Soninho | Empresa DreamSpace | Todos os direitos reservados </p>
<br/>
</div>
<a href="#up" class="up">
<img src="assets/up-seta.png" alt="">
</a>
</footer>
</body>
</html>