-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCancer.html
325 lines (291 loc) · 11.7 KB
/
Cancer.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
<!DOCTYPE html>
<html>
<head>
<title>Signo de Câncer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
background-image: url("https://i.postimg.cc/Dw7J41TJ/Frasco-para-viagem-3.gif");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /* Background fixo ao rolar a página */
color: #fff;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
color: #000000;
text-align: center;
margin-top: 30px;
}
h2 {
color: #000000;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 800px;
margin: 30px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
margin-bottom: 150px;
}
.characteristics {
margin-top: 20px;
}
.characteristics h2 {
color: #000000;
margin-bottom: 10px;
}
.characteristics p {
margin-bottom: 15px;
}
.back-btn {
position: fixed;
top: 40px;
left: 40px;
display: flex;
align-items: center;
padding: 10px 20px;
background-color: #8E44AD;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
z-index: 1;
}
.back-btn .arrow {
margin-right: 5px;
}
.back-btn:hover {
background-color: #663399;
}
footer {
text-align: center;
padding: 1px;
margin-top: 2px; /* Adicionei um margin-top para controlar a altura */
background-color: rgba(241, 241, 241, 0.5);
color: #000;
border-radius: 5px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1; /* Certifique-se de que o footer esteja em um nível superior */
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.footer-links a {
color: #000;
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
.images-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.symbol img,
.tattoo img {
width: 100%;
max-width: 300px;
margin: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.symbol,
.tattoo {
width: 100%;
}
.floating-button {
position: fixed;
top: 20px;
right: 20px;
background-color: #a111b4;
color: #fff;
border: none;
border-radius: 50%;
width: 75px;
height: 75px;
font-size: 12px;
line-height: 1.2;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
overflow: hidden;
}
.floating-button:hover {
transform: scale(1.05);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}
.floating-button:before {
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: 8px;
background: linear-gradient(to bottom, #ec0666, #d30516);
opacity: 0;
z-index: -1;
transition: opacity 0.2s ease;
}
/* Estilos para o texto dentro do botão */
.button-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Estilos para a mensagem de sorte */
.fortune-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 300px;
background-color: rgba(207, 11, 214, 0.9);
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
display: none;
}
.floating-button:hover:before {
opacity: 1;
}
.fortune-popup h3 {
margin-top: 0;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
color: #999;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<br> <br>
<div class="background-container"></div>
<div class="container">
<h1>Signo de Câncer</h1>
<a class="back-btn" href="index.html"><span class="arrow">←</span></a>
<div class="characteristics">
<h2>Sobre o signo de Câncer:</h2>
<p>Câncer é o quarto signo do zodíaco e está associado ao período de 21 de junho a 22 de julho. É regido pela Lua e é considerado um signo do elemento Água, o que o torna emocional, intuitivo e sensível. Os cancerianos são conhecidos por sua empatia e natureza protetora.</p>
</div>
<div class="characteristics">
<h2>Características principais de Câncer:</h2>
<ul>
<li>Emocional: Os cancerianos têm uma grande profundidade emocional e são sensíveis às emoções dos outros.</li>
<li>Empatia: Eles são muito empáticos e se preocupam com o bem-estar emocional dos outros.</li>
<li>Intuitivo: Os cancerianos têm uma forte intuição e podem captar as nuances emocionais.</li>
<li>Natureza protetora: Eles têm uma natureza protetora e cuidam das pessoas ao seu redor.</li>
<li>Ligação familiar: Câncer valoriza profundamente as relações familiares e laços emocionais.</li>
<li>Criatividade: Eles têm uma imaginação rica e uma abordagem criativa para a vida.</li>
<li>Reservado: Os cancerianos podem ser reservados e levar tempo para confiar plenamente.</li>
</ul>
</div>
<div class="images-container">
<div class="symbol">
<h2>Símbolo de Câncer</h2>
<img src="https://eshop-api.emutuadigital.com/storage/4/catalog/productMedia/6155dbf646b7f65/6155dbf6e58cc5225.png" alt="Símbolo de Câncer">
</div>
</div>
<div class="images-container">
<div class="tattoo">
<h2>Ideia para tatuagem de Câncer</h2>
<img src="https://blog.pajaris.com.br/wp-content/uploads/2021/02/tatuagem-de-cancer-2.jpg" alt="Tatuagem de Câncer">
</div>
</div>
</div>
<button class="floating-button" id="fortuneButton">Mensagem Especial</button>
<span class="button-text"></span>
</button>
<div class="fortune-popup" id="fortunePopup">
<span class="close-btn" onclick="closeFortunePopup()">×</span>
<h3>Mensagem do Dia:</h3>
<p id="fortuneMessage">Clique no botão para obter uma mensagem especial.</p>
</div>
<footer>
<footer class="footer">
<div class="footer-links">
<a href="https://www.linkedin.com/in/gleisonamorim/" target="_blank">Me conheça no LinkedIn</a>
<span class="separator">|</span>
<a href="https://drive.google.com/file/d/1zgNLnZVdlBxYTsSKZuJH926G-nWGuZbC/view?usp=drive_link" target="_blank" rel="noopener noreferrer">Baixar App</a>
</div>
</footer>
<script>
function showFortunePopup() {
var popup = document.getElementById("fortunePopup");
var message = document.getElementById("fortuneMessage");
var randomIndex = Math.floor(Math.random() * messages.length);
message.textContent = messages[randomIndex];
popup.style.display = "block";
}
function closeFortunePopup() {
var popup = document.getElementById("fortunePopup");
popup.style.display = "none";
}
var messages = [
"Seu amor e cuidado são como um farol para aqueles ao seu redor. Espalhe sua luz e inspire positividade, querido câncer.",
"Aproveite o poder curativo do seu instinto. Você é capaz de superar qualquer desafio que cruzar seu caminho, Câncer.",
"Sua intuição é sua maior aliada. Confie nos sinais do universo e siga o caminho que o levará ao sucesso.",
"Seu coração compassivo é uma dádiva. Use sua empatia para construir relacionamentos duradouros e duradouros.",
"As ondas de mudança estão trazendo oportunidades incríveis. Abra-se para o desconhecido e veja onde a vida o transporte, Câncer.",
"Sua natureza resiliente é sua força secreta. Enfrente cada desafio com coragem e saiba que você é capaz de superá-los.",
"Você possui um dom especial para nutrir e apoiar. Suas ações amorosas têm um impacto duradouro naqueles ao seu redor.",
"Este é o momento de se concentrar em suas metas e sonhos. Seu esforço incansável o leva a grandes corpos, câncer.",
"Mantenha-se fiel à sua intuição. Suas escolhas são guiadas por uma sabedoria interior profunda e valiosa.",
"Sua imaginação é o berço da criação. Deixe suas ideias fluírem e transforme-as em realidade, Câncer.",
"Seu coração generoso é uma fonte de bênçãos. Abrace cada oportunidade de gozar amor e vitória pelo mundo.",
"Confie na jornada que está trilhando. Cada passo o aproxima de um futuro brilhante e repleto de emoção.",
"Sua dedicação incansável está rendendo frutos notáveis. Continue a trabalhar com paixão e alcance suas metas, Câncer.",
"O amor e a harmonia estão à sua volta. Cultive relações saudáveis e deixe sua influência positiva brilhar.",
"Aproveite o presente como uma dádiva. Cada momento é uma oportunidade para crescer e se fortalecer.",
"Seu instinto é protetor é importante. Use-o para guiar suas escolhas e proteger aqueles que você ama, Câncer.",
"A criatividade está fluindo em sua direção. Use sua imaginação para enfrentar desafios com soluções inovadoras.",
"Você é um farol de esperança para os outros. Compartilhe sua sabedoria e inspire mudanças positivas no mundo.",
"Sua intuição é como uma bússola. Confie em sua orientação interna para tomar decisões que o levem ao sucesso.",
"Sua natureza sensível é uma força incrível. Use-a para criar conexões profundas e genuínas com aqueles ao seu redor, Câncer.",
"Aproveite as oportunidades que se apresentam. Você está destinado a um futuro brilhante e cheio de realizações.",
"Sua empatia é um dom poderoso. Use-a para entender as necessidades dos outros e fazer uma diferença positiva.",
"Cada passo é uma vitória em sua jornada. Continue avançando com espiritualidade e alcance o sucesso, Câncer.",
"Você é capaz de transformar desafios em oportunidades. Mantenha-se resiliente e confiante em sua capacidade de superar qualquer obstáculo.",
"Sua sensibilidade é uma dádiva para o mundo. Deixe seu coração guiar suas ações e inspire compaixão onde quer que vá.",
"A confiança é a chave para desbloquear seu potencial máximo. Acredite em si mesmo e alcance as estrelas, Câncer.",
"Mantenha-se conectado à sua intuição. Ela o guiará para o caminho certo, mesmo nas situações mais desafiadoras.",
"Apreciar as pequenas alegrias da vida é uma fonte de felicidade e firmeza. Celebre cada momento, querido Câncer.",
"Você tem o poder de moldar seu próprio destino. Visualize suas metas e trabalhe incansavelmente para realizá-las.",
"Sua experiência é admirável. Continue avançando, enfrentando cada obstáculo com coragem, e alcançará o sucesso que merece.",
];
var fortuneButton = document.getElementById("fortuneButton");
fortuneButton.addEventListener("click", showFortunePopup);
</script>
<script>
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>
</body>
</html>