-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPeixes.html
342 lines (303 loc) · 11.8 KB
/
Peixes.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
<!DOCTYPE html>
<html>
<head>
<title>Signo de Peixes</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;
color: #fff;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url("https://i.postimg.cc/sxp1H4Sr/Frasco-para-viagem-13.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 Peixes</h1>
<a class="back-btn" href="index.html"><span class="arrow">←</span></a>
<div class="characteristics">
<h2>Sobre o signo de Peixes:</h2>
<p>Peixes é o décimo segundo e último signo do zodíaco, associado ao período de 19 de fevereiro a 20 de março. É regido por Netuno e é considerado um signo do elemento Água, o que o torna sensível, intuitivo e criativo. Os piscianos são conhecidos por sua empatia e natureza sonhadora.</p>
</div>
<div class="characteristics">
<h2>Características principais de Peixes:</h2>
<ul>
<li>Empatia: Os piscianos têm uma grande capacidade de compreender e se conectar emocionalmente com os outros.</li>
<li>Intuição: Eles confiam em sua intuição e são frequentemente guiados por insights.</li>
<li>Criatividade: Peixes possui uma mente criativa e muitas vezes é atraído pelas artes.</li>
<li>Sensibilidade: Eles são sensíveis e podem ser afetados pelas emoções dos outros.</li>
<li>Sonhadores: Os piscianos têm uma natureza sonhadora e podem ser visionários.</li>
<li>Compaixão: Eles demonstram compaixão e estão dispostos a ajudar os outros.</li>
<li>Adaptabilidade: Peixes é flexível e pode se ajustar a diferentes situações.</li>
</ul>
</div>
<div class="images-container">
<div class="symbol">
<h2>Símbolo de Peixes</h2>
<img src="https://static.dicionariodesimbolos.com.br/upload/87/7a/simbolo-de-peixes-1_xl.png" alt="Símbolo de Peixes">
</div>
</div>
<div class="images-container">
<div class="tattoo">
<h2>Ideia para tatuagem de Peixes</h2>
<img src="https://blog.pajaris.com.br/wp-content/uploads/2021/02/tatuagem-de-peixes.jpg" alt="Tatuagem de Peixes">
</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>
<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 = [
"Sua imaginação é um universo de possibilidades. Explore seus sonhos e transforme-os em realidade, Peixes.",
"Seu coração compassivo é um guia poderoso. Use sua empatia para criar conexões profundas e inspirar positividade ao seu redor.",
"Você é um artista da vida. Pinte sua jornada com cores vibrantes de amor, criatividade e alegria.",
"Sua intuição é um farol confiável. Confie em sua orientação interna para navegar pelas águas da vida com segurança e confiança.",
"Sua sensibilidade é uma força, não uma fraqueza. Use-a para compreender os sentimentos dos outros e criar laços verdadeiros.",
"Você é um curador natural. Compartilhe sua sabedoria de cura e inspire outros a encontrarem conforto e paz.",
"Sua conexão com o mundo espiritual é uma vitória. Deixe essa conexão guiar suas escolhas e inspire outros a encontrarem significado.",
"Sua empatia é um dom de cura. Mostre compaixão e inspire outros a cuidarem uns dos outros.",
"Você é um sonhador corajoso.",
"Sua felicidade é um raio de luz. Espalhe seu amor incondicional e inspire uma mudança positiva no mundo.",
"Sua intuição é sua bússola. Confie nela para tomar decisões que o levarão na direção certa, mesmo nas situações mais complicadas.",
"Você é um poeta da vida. Use suas palavras para inspirar, elevar e tocar o coração das pessoas ao seu redor.",
"Sua capacidade de se adaptar é admirável. Flua com as mudanças e inspire outros a aceitarem a impermanência da vida.",
"Seu coração generoso é um tesouro. Compartilhe sua abundância e inspire outros a fazerem o mesmo.",
"Você é um farol de compaixão. Mostre aos outros o poder da gentileza e inspire um mundo mais amoroso.",
"Sua busca por significado é inspiradora. Continue explorando os mistérios da vida e inspire outros a buscarem a verdade interior.",
"Você é um visionário espiritual. Compartilhe sua visão do mundo e inspire outros a conectarem-se com algo maior.",
"Sua criatividade é ilimitada. Deixe sua mente voar e inspire outros a abraçarem sua expressão única.",
"Você é um nadador destemido nas emoções emocionais. Mergulhe nas suas emoções e inspire outros a fazerem o mesmo.",
"Sua intuição é um guia fiel. Siga os impulsos do seu coração e inspire uma jornada autônoma e significativa.",
"Você é um farol de esperança. Mesmo nass da vida, inspire outros a acreditarem em um amanhã mais brilhante.",
"Sua conexão com o divino é uma fonte de força. Deixe essa conexão iluminar seu caminho e inspire outros a se conectarem também.",
"Você é um canal de empatia. Use essa habilidade para tocar vidas e inspirar a cura emocional.",
"Sua capacidade de tolerar é libertadora. Inspire outros a deixarem ir o passado e abraçarem um futuro cheio de amor.",
"Você é um defensor dos sonhos. Corra atrás dos seus objetivos e inspire outros a seguirem suas paixões.",
"Sua intuição é uma fonte de sabedoria. Confie nela para guiar suas escolhas e inspirar outros a se conectarem com sua intuição.",
"Você é um enviado dos sentimentos profundos. Compartilhe suas emoções e inspire outros a expressarem seu verdadeiro eu.",
"Sua compreensão das complexidades da vida é notável. Compartilhe sua perspectiva e inspire outros a explorarem mais profundamente.",
"Você é um explorador do mundo espiritual. Compartilhe suas descobertas e inspire outros a embarcarem em suas próprias jornadas interiores.",
"Sua capacidade de amar é infinita. Deixe seu amor fluir e inspire outros a experimentarem o poder transformador do amor, Peixes.",
];
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>