-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (143 loc) · 7.64 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
<!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="./styles/styles.css">
<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=Krona+One&family=Montserrat:wght@400;600;700&display=swap"
rel="stylesheet">
<title>Calmaria</title>
</head>
<body>
<main>
<header>
<nav>
<img src="./assets/logo.png" alt="logo">
<span class="linha"></span>
<ul>
<li><a href="#nosso-espaco">Nosso espaço</a></li>
<li><a href="#servico">Servicos</a></li>
<li><a href="#contatos">Contato</a></li>
</ul>
</nav>
<section id="home">
<div class="textos-home">
<h1>Boas-vindas ao seu refúgio de <span> paz e bem-estar</span></h1>
<button class="btn-main">Quero relaxar</button>
</div>
<div class="img-home">
<img src="./assets/home-image.png" alt="Mulher de bruços recebendo massagem nas costas">
</div>
</section>
</header>
<section id="nosso-espaco">
<div class="detalhes">
<div class="imgs-espaco">
<img class="img-espaco" src="./assets/espaco-1.png"
alt="Espaço iluminado pelo sol com design futurista composto por piscina e plantas">
</div>
<div class="espaco-textos">
<h2 class="titulo">Tecnologia e natureza potencializando seu relaxamento</h2>
<p class="infos">Oferecemos equipamentos de ponta, produtos certificados e uma equipe de
profissionais ultra qualificados para dissipar seu estresse e ajudar você na busca por
equilíbrio e tranquilidade.</p>
<img class="separador" src="./assets/separador-direita.svg" alt="separador de seções">
</div>
</div>
<div class="detalhes">
<div class="imgs-espaco">
<img class="img-espaco" src="./assets/espaco-2.png"
alt="Mulher sentada numa banheira com uma taça na mão">
<img class="img-espaco" src="./assets/espaco-3.png" alt="Espaço com uma piscina e um sofá ao fundo">
</div>
<div class="espaco-textos">
<h2 class="titulo">Elevando seu bem-estar a um novo patamar</h2>
<p class="infos">No Calmaria Spa cada visita é uma jornada revigorante para mais serenidade e
disposição! Independente da sua rotina, vamos ajudar você a encontrar seu paraíso
particular.</p>
<img class="separador" src="./assets/separador-esquerda.svg" alt="separador de seções">
</div>
</div>
</section>
<section id="servico">
<div class="cards">
<div class="card">
<img src="./assets/icon-massagem.png" alt="Icone de massagem">
<h3 class="card-titulo">Massagens</h3>
<img src="./assets/Soft Star.png" alt="soft star">
<p class="card-texto">Relaxantes, terapêuticas, desportivas e drenagens. Conte com nossos
terapeutas especializados para aliviar suas tensões, tratar dores e retenção de líquido
através
dessa técnica milenar tão eficiente para o organismo humano.</p>
</div>
<div class="card">
<img src="./assets/icon-tratamentos.png" alt="Icone de tratamento com figura de uma banheira">
<h3 class="card-titulo">Tratamentos Corporais</h3>
<img src="./assets/Soft Star.png" alt="soft star">
<p class="card-texto">Tratamos sua pele com gentileza através de esfoliações corporais suaves,
hidratações profundas do corpo e do rosto, além de limpeza facial. Você também pode
desfrutar de
banhos revigorantes de sais.</p>
</div>
<div class="card">
<img src="./assets/icon-dias-especiais.png" alt="Icone de Dias especiais com figura de produtos">
<h3 class="card-titulo">Dias especiais</h3>
<img src="./assets/Soft Star.png" alt="soft star">
<p class="card-texto">Pacotes cuidadosamente elaborados, desde o "Dia Revitalizante" com
massagens e tratamentos faciais, até o "Dia Serenidade" com banhos terapêuticos e meditação.
Mime-se com momentos de refúgio de tranquilidade.</p>
</div>
</div>
</section>
<section id="desconto">
<img src="./assets/mandala-esquerda.png" alt="Mandala lado esquerdo">
<div class="desconto-form">
<h4>Inscreva-se para ganhar descontos!</h4>
<p>Cadastre seu email para receber descontos e novidades sobre o espaço e nossos serviços.</p>
<div class="input-btn">
<input type="email">
<button type="submit">Inscrever</button>
</div>
</div>
<img src="./assets/mandala-direita.png" alt="Mandala lado direito">
</section>
<section id="contatos">
<div class="contatos-imgs">
<img src="./assets/contato-img-1.png" alt="Homem deitado em banheira">
<img src="./assets/contato-img-2.png" alt="Mulher olhando para o horizonte dentro de uma banheira">
<img src="./assets/contato-img-3.png"
alt="Visão superior de um livro nas mãos de uma pessoa dentro de uma banheira">
</div>
<div class="contatos-form">
<h4 class="titulo">Entre em contato</h4>
<p class="infos">Reserve seu horário, tire dúvidas ou proponha sugestões, nosso canal é aberto para
você!</p>
<form class="inputs">
<div class="form-group">
<label for="nomeContato">Nome</label>
<input type="text" id="nomeContato" placeholder="Digite nome completo">
</div>
<div class="form-group">
<label for="emailContato">Email</label>
<input type="email" id="emailContato" placeholder="Digite seu email">
</div>
<div class="form-group">
<label for="telefoneContato">Telefone</label>
<input type="text" id="telefoneContato" placeholder="(xx) xxxxx-xxxx">
</div>
<div class="form-group">
<label for="mensagemContato">Mensagem</label>
<textarea type="text" id="mensagemContato" placeholder="Escreva sua mensagem"></textarea>
</div>
<button class="btn">Enviar</button>
</form>
</div>
</section>
<footer>
<small>Desenvolvido por Anastasiia De Oliveira durante o curso de Alura. Projeto fictício sem fins comerciais.</small>
</footer>
</main>
</body>
</html>