├── README.md
├── main.js
├── img
└── flowers.png
├── assets
└── icon
│ ├── cursor-body.cur
│ ├── love-pointer-q.cur
│ └── love-pointer.cur
├── sound
└── Kurt-La_Mujer_Perfecta.mp3
├── flowers.js
├── heartcaputre.html
├── styles2.css
├── anim.js
├── index.html
├── css
├── style.css
└── main.css
├── script2.js
├── styles.css
└── flowers.html
/README.md:
--------------------------------------------------------------------------------
1 | # HAPPY BIRTHDAY v3
2 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | onload = () =>{
2 | document.body.classList.remove("container");
3 | };
--------------------------------------------------------------------------------
/img/flowers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/HAPPY-BIRTHDAY-v3/HEAD/img/flowers.png
--------------------------------------------------------------------------------
/assets/icon/cursor-body.cur:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/HAPPY-BIRTHDAY-v3/HEAD/assets/icon/cursor-body.cur
--------------------------------------------------------------------------------
/assets/icon/love-pointer-q.cur:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/HAPPY-BIRTHDAY-v3/HEAD/assets/icon/love-pointer-q.cur
--------------------------------------------------------------------------------
/assets/icon/love-pointer.cur:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/HAPPY-BIRTHDAY-v3/HEAD/assets/icon/love-pointer.cur
--------------------------------------------------------------------------------
/sound/Kurt-La_Mujer_Perfecta.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/HAPPY-BIRTHDAY-v3/HEAD/sound/Kurt-La_Mujer_Perfecta.mp3
--------------------------------------------------------------------------------
/flowers.js:
--------------------------------------------------------------------------------
1 |
2 | onload = () => {
3 | const c = setTimeout(() => {
4 | document.body.classList.remove("not-loaded");
5 |
6 | const titles = ('I LOVE U ').split('')
7 | const titleElement = document.getElementById('title');
8 | let index = 0;
9 |
10 | function appendTitle() {
11 | if (index < titles.length) {
12 | titleElement.innerHTML += titles[index];
13 | index++;
14 | setTimeout(appendTitle, 300); // 1000ms delay
15 | }
16 | }
17 |
18 | appendTitle();
19 |
20 | clearTimeout(c);
21 | }, 1000);
22 | };
--------------------------------------------------------------------------------
/heartcaputre.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | HAPPY BIRTHDAY v3 | Aoudumber Bade
9 |
10 |
11 |
12 |
13 |
14 |
Capture the hearts! ❤️
15 |
You must capture 10 hearts to reach the next level.
16 |
17 |
20 |
21 |
Hearts captured: 0/10
22 |
23 |
24 |
18 | H
19 | A
20 | P
21 | P
22 | Y
23 |
24 |
25 | B
26 | I
27 | R
28 | T
29 | H
30 | D
31 | A
32 | Y
33 |
34 |
35 | Wishing you a day filled with love and joy! 🎉🎂
36 |
37 |
38 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,900&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Archivo:ital,wght@0,100..900;1,100..900&family=Bilbo+Swash+Caps&family=Inter:opsz,wght@14..32,500&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tiro+Devanagari+Marathi:ital@0;1&display=swap');
3 | *{
4 | font-family: "Inter", sans-serif;
5 | }
6 | body{
7 | color: azure;
8 | width: 100%;
9 | height: 82vh;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | justify-content: center;
14 | background-color: black;
15 | /* padding-top: -30; */
16 | }
17 |
18 | .botones{
19 | padding: 9px;
20 | border-radius: 80px;
21 | background-color: transparent;
22 | border: none;
23 | }
24 |
25 | .botones a{
26 | background-color: #3856ff;
27 | padding: 15px 30px;
28 | border-radius: 80px;
29 | -webkit-border-radius: 80px;
30 | -moz-border-radius: 80px;
31 | -ms-border-radius: 80px;
32 | -o-border-radius: 80px;
33 |
34 | }
35 |
36 | .botones a:focus{
37 | background-color: rgb(50, 194, 194);
38 | }
39 |
40 | .greetings{
41 | font-size: 7rem;
42 | font-weight: 900;
43 | }
44 | .greetings > span{
45 | animation: glow 2.5s ease-in-out infinite;
46 | }
47 | @keyframes glow{
48 | 0%, 100%{
49 | color: #fff;
50 | text-shadow: 0 0 12px #39c6d6, 0 0 50px #39c6d6, 0 0 100px #39c6d6;
51 | }
52 | 10%, 90%{
53 | color: #111;
54 | text-shadow: none;
55 | }
56 | }
57 | .greetings > span:nth-child(2){
58 | animation-delay: .2s ;
59 | }
60 | .greetings > span:nth-child(3){
61 | animation-delay: .4s ;
62 | }
63 | .greetings > span:nth-child(4){
64 | animation-delay: .6s;
65 | }
66 | .greetings > span:nth-child(5){
67 | animation-delay: .8s;
68 | }
69 | .greetings > span:nth-child(6){
70 | animation-delay: 1s;
71 | }
72 | .greetings > span:nth-child(7){
73 | animation-delay: 1s;
74 | }
75 | .greetings > span:nth-child(8){
76 | animation-delay: 1s;
77 | }
78 |
79 |
80 | .description{
81 | font-size: 1.5rem;
82 | margin-bottom: 20px;
83 | }
84 |
85 | .button a{
86 | text-decoration: none;
87 | font-size: 1rem;
88 | color: #111;
89 | }
90 |
91 |
92 | .btn {
93 | border: none;
94 | width: 15em;
95 | height: 4em;
96 | border-radius: 3em;
97 | display: flex;
98 | justify-content: center;
99 | align-items: center;
100 | gap: 12px;
101 | background: linear-gradient(0deg, #A47CF3, #683FEA);
102 | text-decoration: none;
103 | color: #fff;
104 | cursor: pointer;
105 | transition: all 450ms ease-in-out;
106 | }
107 |
108 | .sparkle {
109 | fill: #fbfbfb;
110 | transition: all 800ms ease;
111 | }
112 |
113 | .text {
114 | font-weight: 600;
115 | color: #fbfbfb;
116 | font-size: medium;
117 | }
118 |
119 | .btn:hover {
120 | background: linear-gradient(0deg, #A47CF3, #683FEA);
121 | box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
122 | inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
123 | 0px 0px 0px 4px rgba(255, 255, 255, 0.2),
124 | 0px 0px 180px 0px #9917FF;
125 | transform: translateY(-2px);
126 | }
127 |
128 | .btn:hover .text {
129 | color: white;
130 | }
131 |
132 | .btn:hover .sparkle {
133 | fill: white;
134 | transform: scale(1.2);
135 | }
136 |
137 |
138 | @media screen and (max-width:574px){
139 | .greetings{
140 | display: block;
141 | font-size: 4rem;
142 | font-weight: 800;
143 | text-align: center;
144 | }
145 | .description{
146 | font-size: 2rem;
147 | }
148 |
149 | .button a{
150 | font-size: 1rem;
151 | }
152 | }
153 |
154 |
--------------------------------------------------------------------------------
/script2.js:
--------------------------------------------------------------------------------
1 | const gameArea = document.getElementById("game-area");
2 | const scoreElement = document.getElementById("score");
3 | const progressBar = document.querySelector(".progress");
4 | let score = 0;
5 | let heartInterval;
6 |
7 | function spawnHeart() {
8 | if (score >= 10) return;
9 |
10 | const heart = document.createElement("div");
11 | heart.classList.add("heart");
12 | heart.textContent = "❤️";
13 | heart.style.left = `${Math.random() * 90}vw`;
14 | heart.style.top = `-50px`;
15 |
16 | heart.addEventListener("click", () => {
17 | score++;
18 | scoreElement.textContent = score;
19 | progressBar.style.width = `${(score / 10) * 100}%`;
20 | heart.remove();
21 |
22 | if (score === 10) {
23 | // Add countdown message
24 | let countdown = 5;
25 | const countdownMessage = document.createElement("div");
26 | countdownMessage.style.position = "fixed";
27 | countdownMessage.style.top = "50%";
28 | countdownMessage.style.left = "50%";
29 | countdownMessage.style.transform = "translate(-50%, -50%)";
30 | countdownMessage.style.fontSize = "24px";
31 | countdownMessage.style.color = "#ff0066";
32 | countdownMessage.style.fontWeight = "bold";
33 | document.body.appendChild(countdownMessage);
34 |
35 | const countdownInterval = setInterval(() => {
36 | countdownMessage.textContent = `Congratulations! ❤️🎉\n Moving to the next level in ${countdown} seconds...`;
37 | countdown--;
38 |
39 | if (countdown < 0) {
40 | clearInterval(countdownInterval);
41 | window.location.href = "flowers.html";
42 | }
43 | }, 1000);
44 | }
45 | });
46 |
47 | gameArea.appendChild(heart);
48 |
49 | setTimeout(() => {
50 | heart.remove();
51 | }, 4000);
52 | }
53 |
54 | heartInterval = setInterval(spawnHeart, 1000);
55 |
56 | // Particles in the background
57 | const canvas = document.getElementById("particles");
58 | const ctx = canvas.getContext("2d");
59 | canvas.width = window.innerWidth;
60 | canvas.height = window.innerHeight;
61 |
62 | let particles = [];
63 |
64 | function createParticle() {
65 | return {
66 | x: Math.random() * canvas.width,
67 | y: Math.random() * canvas.height,
68 | size: Math.random() * 8 + 2,
69 | speedY: Math.random() * 2 + 0.5,
70 | opacity: Math.random() * 0.8 + 0.2,
71 | };
72 | }
73 |
74 | for (let i = 0; i < 50; i++) {
75 | particles.push(createParticle());
76 | }
77 |
78 | function drawParticles() {
79 | ctx.clearRect(0, 0, canvas.width, canvas.height);
80 |
81 | for (let particle of particles) {
82 | ctx.fillStyle = `rgba(255, 0, 100, ${particle.opacity})`;
83 | ctx.font = `${particle.size}px Arial`;
84 | ctx.fillText("❤️", particle.x, particle.y);
85 | particle.y -= particle.speedY;
86 |
87 | if (particle.y < -10) {
88 | particle.y = canvas.height;
89 | particle.x = Math.random() * canvas.width;
90 | }
91 | }
92 |
93 | requestAnimationFrame(drawParticles);
94 | }
95 |
96 | drawParticles();
97 |
98 | // Add this code to script2.js (game page)
99 | function initializeAudio() {
100 | const musica = document.getElementById("musica");
101 |
102 | // Retrieve the saved playback time
103 | const savedTime = localStorage.getItem('audioTime');
104 | if (savedTime) {
105 | musica.currentTime = parseFloat(savedTime);
106 | }
107 |
108 | // Save the playback time periodically
109 | setInterval(() => {
110 | localStorage.setItem('audioTime', musica.currentTime);
111 | }, 1000);
112 |
113 | // Handle the end of the song
114 | musica.addEventListener('ended', function() {
115 | musica.currentTime = 0;
116 | musica.play();
117 | });
118 |
119 | // Attempt to play
120 | document.addEventListener("click", function() {
121 | musica.play().catch(function(error) {
122 | console.log("Error playing audio:", error);
123 | });
124 | }, { once: true });
125 |
126 | musica.play().catch(function(error) {
127 | console.log("Autoplay blocked:", error);
128 | });
129 | }
130 |
131 | document.addEventListener("DOMContentLoaded", initializeAudio);
132 |
133 | // Before the page closes or the user navigates away
134 | window.addEventListener('beforeunload', function() {
135 | const musica = document.getElementById("musica");
136 | localStorage.setItem('audioTime', musica.currentTime);
137 | });
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Delius&family=Delius+Unicase:wght@400;700&family=Knewave&display=swap");
2 |
3 | /* Estilos generales */
4 | body {
5 | cursor: url(assets/icon/cursor-body.cur), auto;
6 | font-family: "Delius", cursive;
7 | background-color: #ffffff;
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | height: 100vh;
12 | margin: 0;
13 | }
14 |
15 | /* Contenedor principal */
16 | .container {
17 | width: 600px;
18 | height: 400px;
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | background-color: #fff;
23 | border-radius: 10px;
24 | padding: 20px;
25 | box-shadow: 10px 10px 12px 0px rgba(0, 0, 0, 0.2);
26 | }
27 |
28 | /* Caja fuerte */
29 | .caja-fuerte {
30 | display: flex;
31 | background-color: #fff;
32 | border: 5px solid #e56ab5;
33 | border-radius: 10px;
34 | padding: 20px;
35 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
36 | }
37 |
38 | /* Imagen de la caja fuerte */
39 | .imagen img {
40 | width: 200px;
41 | height: 285px;
42 | border-radius: 10px;
43 | }
44 |
45 | /* Teclado */
46 | .teclado {
47 | margin-left: 20px;
48 | }
49 |
50 | /* Estilos para el display del teclado */
51 | .display {
52 | width: 80%;
53 | height: 50px;
54 | background-color: #eee;
55 | border: 1px solid #ccc;
56 | border-radius: 10px;
57 | display: flex;
58 | align-items: center;
59 | padding: 0 15px;
60 | font-size: 18px;
61 | margin-bottom: 10px;
62 | position: relative;
63 | }
64 |
65 | .display svg {
66 | width: 24px;
67 | height: 24px;
68 | margin-right: 10px;
69 | color: #d1548f; /* Color del ícono */
70 | }
71 |
72 | #texto-codigo {
73 | flex-grow: 1;
74 | font-family: "Delius", cursive;
75 | color: #333;
76 | }
77 |
78 | /* Modo de contraseña */
79 | .display.modo-password #texto-codigo {
80 | font-family: monospace; /* Usamos una fuente monoespaciada para los puntos */
81 | letter-spacing: 2px; /* Espaciado entre los puntos */
82 | }
83 |
84 | /* Botones del teclado */
85 | .botones {
86 | display: grid;
87 | grid-template-columns: repeat(3, 1fr);
88 | gap: 10px;
89 | }
90 |
91 | .botones button {
92 | width: 50px;
93 | height: 50px;
94 | font-size: 18px;
95 | border: none;
96 | border-radius: 5px;
97 | background-color: #d1548f;
98 | color: white;
99 | cursor: url(assets/icon/love-pointer.cur), auto;
100 | transition: background-color 0.3s;
101 | font-family: "Delius Unicase", cursive;
102 | }
103 |
104 | .botones button:hover {
105 | background-color: #e56ab5;
106 | }
107 |
108 | /* Sección del contador (oculta inicialmente) */
109 | #seccion-contador {
110 | display: none;
111 | text-align: center; /* Centra el contenido dentro de la sección */
112 | padding: 20px;
113 | background-color: #fff;
114 | border-radius: 10px;
115 | box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
116 | max-width: 600px;
117 | width: 100%;
118 | }
119 |
120 | /* Cabecera del contador */
121 | .cabecera {
122 | display: flex;
123 | align-items: center;
124 | margin: 30px;
125 | }
126 |
127 | .imagen-cabecera {
128 | width: 80px;
129 | height: 80px;
130 | padding: 4px;
131 | border-radius: 50%;
132 | border: 3px dashed #e56ab5;
133 | margin-right: 40px;
134 | }
135 |
136 | .titulo-cabecera {
137 | background-color: #d1548f;
138 | padding: 10px 40px;
139 | border-radius: 20px;
140 | color: white;
141 | }
142 |
143 | .titulo-cabecera h1 {
144 | margin: 2px;
145 | font-size: 24px;
146 | font-family: "Rubik Spray Paint", cursive;
147 | }
148 |
149 | /* Contador */
150 | .contador {
151 | text-align: center;
152 | }
153 |
154 | /* Primera línea: Años, Meses, Días */
155 | #linea-superior {
156 | font-size: 34px;
157 | font-weight: bold;
158 | color: #d1548f;
159 | margin-bottom: 20px;
160 | font-family: "Knewave", cursive;
161 | }
162 |
163 | #linea-superior span {
164 | margin: 0 5px;
165 | }
166 |
167 | /* Segunda línea: Horas, Minutos, Segundos */
168 | #linea-inferior {
169 | display: flex;
170 | justify-content: center;
171 | align-items: center;
172 | gap: 10px;
173 | }
174 |
175 | .unidad-tiempo {
176 | background-color: #eee;
177 | padding: 15px;
178 | border-radius: 10px;
179 | text-align: center;
180 | }
181 |
182 | .unidad-tiempo span {
183 | font-size: 74px;
184 | font-weight: bold;
185 | color: #d1548f;
186 | display: block;
187 | font-family: "Knewave", cursive;
188 | }
189 |
190 | .unidad-tiempo p {
191 | font-size: 24px;
192 | margin: 5px 0 0;
193 | font-family: "Knewave", cursive;
194 | color: #df4c71;
195 | }
196 |
197 | /* Botón del contador */
198 | .boton-contador {
199 | width: auto; /* Ancho automático para que no ocupe el 100% */
200 | display: inline-flex; /* Flexbox para alinear el contenido */
201 | align-items: center; /* Centrar verticalmente el ícono y el texto */
202 | justify-content: center; /* Centrar horizontalmente */
203 | padding: 15px 30px; /* Ajustamos el padding para que se vea mejor */
204 | background-color: #d1548f;
205 | border: none;
206 | border-radius: 40px;
207 | color: white;
208 | font-size: 18px;
209 | cursor: url(assets/icon/love-pointer.cur), auto;
210 | gap: 8px; /* Espacio entre el ícono y el texto */
211 | margin-top: 20px;
212 | transition: background-color 0.3s;
213 | font-family: "Delius Unicase", cursive;
214 | text-align: center; /* Centramos el texto dentro del botón */
215 | }
216 |
217 | .boton-contador:hover {
218 | background-color: #e56ab5;
219 | }
220 |
221 | .boton-contador svg {
222 | width: 24px;
223 | height: 24px;
224 | flex-shrink: 0; /* Evita que el ícono se reduzca */
225 | }
226 |
227 |
228 | /* Estilos para la sección de la galería */
229 | .seccion-galeria {
230 | display: none;
231 | text-align: center;
232 | padding: 20px;
233 | background-color: #fff;
234 | border-radius: 10px;
235 | box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
236 | max-width: 600px;
237 | width: 100%;
238 | margin: 20px auto;
239 | }
240 |
241 | .titulo-galeria h1 {
242 | font-size: 24px;
243 | color: #d1548f;
244 | font-family: "Rubik Spray Paint", cursive;
245 | margin-bottom: 20px;
246 | }
247 |
248 | .fotos {
249 | display: flex;
250 | flex-wrap: wrap;
251 | justify-content: center;
252 | gap: 10px;
253 | margin-bottom: 20px;
254 | }
255 |
256 | .fotos img {
257 | width: 150px;
258 | height: 150px;
259 | border-radius: 10px;
260 | object-fit: cover;
261 | }
262 |
263 | .boton-transparente {
264 | background-color: transparent;
265 | border: none;
266 | color: #d1548f;
267 | padding: 10px 20px;
268 | border-radius: 20px;
269 | font-size: 16px;
270 | cursor: url(assets/icon/love-pointer-q.cur), auto;
271 | transition: background-color 0.3s, color 0.3s;
272 | font-family: "Delius", cursive;
273 | }
274 |
275 | .boton-transparente:hover {
276 | background-color: #fab2d4;
277 | color: white;
278 | }
279 |
280 | /* Estilos para la sección de la carta */
281 | .seccion-carta {
282 | display: none;
283 | text-align: center;
284 | padding: 20px;
285 | background-color: #fff;
286 | border-radius: 10px;
287 | box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
288 | max-width: 600px;
289 | width: 100%;
290 | margin: 20px auto;
291 | }
292 |
293 | .titulo-carta h1 {
294 | font-size: 24px;
295 | color: #d1548f;
296 | font-family: "Rubik Spray Paint", cursive;
297 | margin-bottom: 20px;
298 | }
299 |
300 | .contenido-carta p {
301 | font-size: 16px;
302 | color: #333;
303 | padding: 8px;
304 | border-radius: 30px;
305 | border: 1px solid #d1548f;
306 | box-shadow: 1px 1px 15px 10px #e98bb7;
307 | line-height: 1.6;
308 | font-family: "Delius", cursive;
309 | text-align: left;
310 | }
311 |
312 |
313 |
314 | @media (max-width: 768px) {
315 | .container {
316 | width: 370px;
317 | height: 400px;
318 | }
319 |
320 | /* Caja fuerte */
321 | .caja-fuerte {
322 | display: flex;
323 | background-color: #fff;
324 | border: 5px solid #e56ab5;
325 | border-radius: 5px;
326 | padding: 20px;
327 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
328 | }
329 |
330 | /* Imagen de la caja fuerte */
331 | .imagen img {
332 | width: 100%;
333 | height: 100%;
334 | border-radius: 10px;
335 | }
336 |
337 | /* Teclado */
338 | .teclado {
339 | margin-left: 10px;
340 | }
341 |
342 | /* Estilos para el display del teclado */
343 | .display {
344 | width: 80%;
345 | height: 40px;
346 | background-color: #eee;
347 | border: 1px solid #ccc;
348 | border-radius: 10px;
349 | display: flex;
350 | align-items: center;
351 | padding: 0 15px;
352 | font-size: 18px;
353 | margin-bottom: 8px;
354 | position: relative;
355 | }
356 |
357 | .display svg {
358 | width: 20px;
359 | height: 20px;
360 | margin-right: 8px;
361 | color: #d1548f; /* Color del ícono */
362 | }
363 |
364 | /* Botones del teclado */
365 | .botones {
366 | display: grid;
367 | grid-template-columns: repeat(3, 1fr);
368 | gap: 3px;
369 | }
370 |
371 | /*______________________________________*/
372 |
373 | #seccion-contador {
374 | display: none;
375 | text-align: center; /* Centra el contenido dentro de la sección */
376 | padding: 20px;
377 | background-color: #fff;
378 | border-radius: 10px;
379 | box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
380 | max-width: 340px;
381 | width: 100%;
382 | }
383 |
384 | /* Cabecera del contador */
385 | .cabecera {
386 | display: flex;
387 | align-items: center;
388 | margin: 3px;
389 | }
390 |
391 | .imagen-cabecera {
392 | width: 50px;
393 | height: 50px;
394 | padding: 4px;
395 | border-radius: 50%;
396 | border: 4px dashed #e56ab5;
397 | margin-right: 20px;
398 | }
399 |
400 | .titulo-cabecera {
401 | background-color: #d1548f;
402 | padding: 6px 20px;
403 | border-radius: 20px;
404 | color: white;
405 | }
406 |
407 | .titulo-cabecera h1 {
408 | margin: 4px;
409 | font-size: 16px;
410 | font-family: "Rubik Spray Paint", cursive;
411 | }
412 |
413 |
414 | /* Primera línea: Años, Meses, Días */
415 | #linea-superior {
416 | font-size: 26px;
417 | font-weight: bold;
418 | color: #d1548f;
419 | margin-bottom: 20px;
420 | font-family: "Knewave", cursive;
421 | }
422 |
423 | /* Segunda línea: Horas, Minutos, Segundos */
424 | #linea-inferior {
425 | display: flex;
426 | justify-content: center;
427 | align-items: center;
428 | gap: 5px;
429 | }
430 |
431 | .unidad-tiempo {
432 | background-color: #eee;
433 | padding: 12px;
434 | border-radius: 10px;
435 | text-align: center;
436 | }
437 |
438 | .unidad-tiempo span {
439 | font-size: 64px;
440 | font-weight: bold;
441 | color: #d1548f;
442 | display: block;
443 | font-family: "Knewave", cursive;
444 | }
445 |
446 | .unidad-tiempo p {
447 | font-size: 16px;
448 | margin: 4px 0 0;
449 | font-family: "Knewave", cursive;
450 | color: #df4c71;
451 | }
452 |
453 | }
454 |
--------------------------------------------------------------------------------
/flowers.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | HAPPY BIRTHDAY v3 | Aoudumber Bade
14 |
15 |
16 |
1236 |
1237 |
1238 |
1239 |
1240 |
1241 |
1242 |
1243 |
1244 |
1245 |
1246 |
1247 |
1248 |
1249 |
1250 |
1251 |
1252 |
1253 |
1254 |
1255 |
1256 |
1257 |
1258 |
1259 |
1260 |
1261 |
1262 |
1263 |
1264 |
1265 |
1266 |
1267 |
1268 |
1269 |
1270 |
1271 |
1272 |
1273 |
1274 |
1275 |
1276 |
1277 |
1278 |
1279 |
1280 |
1281 |
1282 |
1283 |
1284 |
1285 |
1286 |
1287 |
1288 |
1289 |
1290 |
1291 |
1292 |
1293 |
1294 |
1295 |
1296 |
1297 |
1298 |
1299 |
1300 |
1301 |
1302 |
1303 |
1304 |
1305 |
1306 |
1307 |
1308 |
1309 |
1310 |
1311 |
1312 |
1313 |
1314 |
1315 |
1316 |
1317 |
1318 |
1319 |
1320 |
1321 |
1322 |
1323 |
1329 |
1330 |
1331 |
1332 |
1333 |
1334 |
1335 |
1336 |
1337 |
1338 |
1339 |
1340 |
1341 |
1342 |
1343 |
1344 |
1345 |
1346 |
1347 |
1348 |
1349 |
1350 |
1351 |
1352 |
1353 |
1354 |
1355 |
1356 |
1357 |
1358 |
1359 |
1360 |
1361 |
1362 |
1367 |
1368 |
1373 |
1374 |
1375 |
1376 |
1379 |
1382 |
1385 |
1388 |
1391 |
1394 |
1397 |
1400 |
1401 |
1402 |
1403 |
1404 |
1405 |
1406 |
1407 |
1408 |
1409 |
1410 |
1411 |
1412 |
1413 |
1414 |
1415 |
1416 |
1417 |
1418 |
1419 |
1422 |
1425 |
1428 |
1431 |
1432 |
1433 |
1434 |
1437 |
1440 |
1443 |
1446 |
1447 |
1448 |
1449 |
1452 |
1455 |
1458 |
1461 |
1462 |
1463 |
1464 |
1467 |
1470 |
1473 |
1476 |
1477 |
1478 |
1479 |
1482 |
1485 |
1488 |
1491 |
1492 |
1493 |
1494 |
1497 |
1500 |
1503 |
1506 |
1507 |
1508 |
1509 |
1512 |
1515 |
1518 |
1521 |
1522 |
1523 |
1524 |
1527 |
1530 |
1533 |
1536 |
1537 |
1541 |
1542 |
1543 |
1544 |
1545 |
1546 |
1547 |
1548 |
--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | padding: 0;
5 | margin: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | :root {
10 | --dark-color: #000;
11 | }
12 |
13 | body {
14 | display: flex;
15 | align-items: flex-end;
16 | justify-content: center;
17 | min-height: 100vh;
18 | background-color: var(--dark-color);
19 | overflow: hidden;
20 | perspective: 1000px;
21 | }
22 |
23 | #lyrics {
24 | font-size: 50px;
25 | font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
26 | color: white;
27 | position: absolute;
28 | margin-bottom: 20%;
29 | z-index: 1;
30 | font-weight: bold;
31 | letter-spacing: 4px;
32 | }
33 | @media only screen and (max-width: 600px) {
34 | /* Estilos específicos para dispositivos con un ancho máximo de 600px */
35 | #lyrics {
36 | font-size: 14px; /* Reduce el tamaño del texto para dispositivos más pequeños */
37 | margin-bottom: 530px;
38 | letter-spacing: 3px;
39 | }
40 |
41 | }
42 | .titulo {
43 | margin-bottom: 100px;
44 | font-family: "Arial Narrow", Arial, sans-serif;
45 | color: #ffff0082;
46 | position: absolute;
47 | font-weight: bold;
48 | letter-spacing: 1px;
49 | opacity: 0;
50 | animation: fadeIn 3s ease-in-out forwards;
51 | text-align: center;
52 | z-index: 100;
53 | }
54 | @keyframes fadeIn {
55 | from {
56 | opacity: 0;
57 | }
58 | to {
59 | opacity: 1;
60 | }
61 | }
62 |
63 | .night {
64 | z-index: -1;
65 | position: absolute;
66 | left: 50%;
67 | top: 0;
68 | transform: translateX(-50%);
69 | width: 100%;
70 | height: 100%;
71 | filter: blur(0.1vmin);
72 | background-image: radial-gradient(
73 | ellipse at top,
74 | transparent 0%,
75 | var(--dark-color)
76 | ),
77 | radial-gradient(
78 | ellipse at bottom,
79 | var(--dark-color),
80 | rgba(145, 233, 255, 0.2)
81 | ),
82 | repeating-linear-gradient(
83 | 220deg,
84 | rgb(0, 0, 0) 0px,
85 | rgb(0, 0, 0) 19px,
86 | transparent 19px,
87 | transparent 22px
88 | ),
89 | repeating-linear-gradient(
90 | 189deg,
91 | rgb(0, 0, 0) 0px,
92 | rgb(0, 0, 0) 19px,
93 | transparent 19px,
94 | transparent 22px
95 | ),
96 | repeating-linear-gradient(
97 | 148deg,
98 | rgb(0, 0, 0) 0px,
99 | rgb(0, 0, 0) 19px,
100 | transparent 19px,
101 | transparent 22px
102 | ),
103 | linear-gradient(90deg, rgb(0, 255, 250), rgb(240, 240, 240));
104 | }
105 |
106 | .flowers {
107 | position: relative;
108 | transform: scale(0.9);
109 | /*margin-bottom: 100px;
110 | */
111 | }
112 |
113 | @media only screen and (max-width: 600px) {
114 | /* Estilos específicos para dispositivos con un ancho máximo de 600px */
115 | .flowers {
116 | font-size: 14px;
117 | margin-bottom: 35%;
118 | letter-spacing: 3px;
119 | transform: scale(1.0);
120 | }
121 |
122 | }
123 |
124 | .flower {
125 | position: absolute;
126 | bottom: 10vmin;
127 | transform-origin: bottom center;
128 | z-index: 10;
129 | --fl-speed: 0.8s;
130 | }
131 | .flower--1 {
132 | -webkit-animation: moving-flower-1 4s linear infinite;
133 | animation: moving-flower-1 4s linear infinite;
134 | }
135 | .flower--1 .flower__line {
136 | height: 70vmin;
137 | -webkit-animation-delay: 0.3s;
138 | animation-delay: 0.3s;
139 | }
140 | .flower--1 .flower__line__leaf--1 {
141 | -webkit-animation: blooming-leaf-right var(--fl-speed) 1.6s backwards;
142 | animation: blooming-leaf-right var(--fl-speed) 1.6s backwards;
143 | }
144 | .flower--1 .flower__line__leaf--2 {
145 | -webkit-animation: blooming-leaf-right var(--fl-speed) 1.4s backwards;
146 | animation: blooming-leaf-right var(--fl-speed) 1.4s backwards;
147 | }
148 | .flower--1 .flower__line__leaf--3 {
149 | -webkit-animation: blooming-leaf-left var(--fl-speed) 1.2s backwards;
150 | animation: blooming-leaf-left var(--fl-speed) 1.2s backwards;
151 | }
152 | .flower--1 .flower__line__leaf--4 {
153 | -webkit-animation: blooming-leaf-left var(--fl-speed) 1s backwards;
154 | animation: blooming-leaf-left var(--fl-speed) 1s backwards;
155 | }
156 | .flower--1 .flower__line__leaf--5 {
157 | -webkit-animation: blooming-leaf-right var(--fl-speed) 1.8s backwards;
158 | animation: blooming-leaf-right var(--fl-speed) 1.8s backwards;
159 | }
160 | .flower--1 .flower__line__leaf--6 {
161 | -webkit-animation: blooming-leaf-left var(--fl-speed) 2s backwards;
162 | animation: blooming-leaf-left var(--fl-speed) 2s backwards;
163 | }
164 | .flower--2 {
165 | left: 50%;
166 | transform: rotate(20deg);
167 | -webkit-animation: moving-flower-2 4s linear infinite;
168 | animation: moving-flower-2 4s linear infinite;
169 | }
170 | .flower--2 .flower__line {
171 | height: 60vmin;
172 | -webkit-animation-delay: 0.6s;
173 | animation-delay: 0.6s;
174 | }
175 | .flower--2 .flower__line__leaf--1 {
176 | -webkit-animation: blooming-leaf-right var(--fl-speed) 1.9s backwards;
177 | animation: blooming-leaf-right var(--fl-speed) 1.9s backwards;
178 | }
179 | .flower--2 .flower__line__leaf--2 {
180 | -webkit-animation: blooming-leaf-right var(--fl-speed) 1.7s backwards;
181 | animation: blooming-leaf-right var(--fl-speed) 1.7s backwards;
182 | }
183 | .flower--2 .flower__line__leaf--3 {
184 | -webkit-animation: blooming-leaf-left var(--fl-speed) 1.5s backwards;
185 | animation: blooming-leaf-left var(--fl-speed) 1.5s backwards;
186 | }
187 | .flower--2 .flower__line__leaf--4 {
188 | -webkit-animation: blooming-leaf-left var(--fl-speed) 1.3s backwards;
189 | animation: blooming-leaf-left var(--fl-speed) 1.3s backwards;
190 | }
191 | .flower--3 {
192 | left: 50%;
193 | transform: rotate(-15deg);
194 | -webkit-animation: moving-flower-3 4s linear infinite;
195 | animation: moving-flower-3 4s linear infinite;
196 | }
197 | .flower--3 .flower__line {
198 | -webkit-animation-delay: 0.9s;
199 | animation-delay: 0.9s;
200 | }
201 | .flower--3 .flower__line__leaf--1 {
202 | -webkit-animation: blooming-leaf-right var(--fl-speed) 2.5s backwards;
203 | animation: blooming-leaf-right var(--fl-speed) 2.5s backwards;
204 | }
205 | .flower--3 .flower__line__leaf--2 {
206 | -webkit-animation: blooming-leaf-right var(--fl-speed) 2.3s backwards;
207 | animation: blooming-leaf-right var(--fl-speed) 2.3s backwards;
208 | }
209 | .flower--3 .flower__line__leaf--3 {
210 | -webkit-animation: blooming-leaf-left var(--fl-speed) 2.1s backwards;
211 | animation: blooming-leaf-left var(--fl-speed) 2.1s backwards;
212 | }
213 | .flower--3 .flower__line__leaf--4 {
214 | -webkit-animation: blooming-leaf-left var(--fl-speed) 1.9s backwards;
215 | animation: blooming-leaf-left var(--fl-speed) 1.9s backwards;
216 | }
217 | .flower__leafs {
218 | position: relative;
219 | -webkit-animation: blooming-flower 2s backwards;
220 | animation: blooming-flower 2s backwards;
221 | }
222 | .flower__leafs--1 {
223 | -webkit-animation-delay: 1.1s;
224 | animation-delay: 1.1s;
225 | }
226 | .flower__leafs--2 {
227 | -webkit-animation-delay: 1.4s;
228 | animation-delay: 1.4s;
229 | }
230 | .flower__leafs--3 {
231 | -webkit-animation-delay: 1.7s;
232 | animation-delay: 1.7s;
233 | }
234 | .flower__leafs::after {
235 | content: "";
236 | position: absolute;
237 | left: 0;
238 | top: 0;
239 | transform: translate(-50%, -100%);
240 | width: 8vmin;
241 | height: 8vmin;
242 | background-color: #f9fd25;
243 | /* background-color: #fd2525; */
244 | filter: blur(10vmin);
245 | }
246 | .flower__leaf {
247 | position: absolute;
248 | bottom: 0;
249 | left: 50%;
250 | width: 8vmin;
251 | height: 11vmin;
252 | border-radius: 51% 49% 47% 53%/44% 45% 55% 69%;
253 | background-color: #253bfd;
254 | background-color: #fddd25;
255 | transform-origin: bottom center;
256 | opacity: 0.9;
257 | box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5);
258 | }
259 | .flower__leaf--1 {
260 | transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg);
261 | }
262 | .flower__leaf--2 {
263 | transform: translate(-50%, -4%) rotateX(40deg);
264 | }
265 | .flower__leaf--3 {
266 | transform: translate(-90%, 0%) rotateY(45deg) rotateX(50deg);
267 | }
268 | .flower__leaf--4 {
269 | width: 8vmin;
270 | height: 8vmin;
271 | transform-origin: bottom left;
272 | border-radius: 4vmin 10vmin 4vmin 4vmin;
273 | transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg);
274 | background-color: #7c6901;
275 | z-index: 1;
276 | opacity: 0.8;
277 | }
278 | .flower__white-circle {
279 | position: absolute;
280 | left: -3.5vmin;
281 | top: -3vmin;
282 | width: 9vmin;
283 | height: 4vmin;
284 | border-radius: 50%;
285 | background-color: #fff;
286 | }
287 | .flower__white-circle::after {
288 | content: "";
289 | position: absolute;
290 | left: 50%;
291 | top: 45%;
292 | transform: translate(-50%, -50%);
293 | width: 60%;
294 | height: 60%;
295 | border-radius: inherit;
296 | background-image: repeating-linear-gradient(
297 | 135deg,
298 | rgba(0, 0, 0, 0.03) 0px,
299 | rgba(0, 0, 0, 0.03) 1px,
300 | transparent 1px,
301 | transparent 12px
302 | ),
303 | repeating-linear-gradient(
304 | 45deg,
305 | rgba(0, 0, 0, 0.03) 0px,
306 | rgba(0, 0, 0, 0.03) 1px,
307 | transparent 1px,
308 | transparent 12px
309 | ),
310 | repeating-linear-gradient(
311 | 67.5deg,
312 | rgba(0, 0, 0, 0.03) 0px,
313 | rgba(0, 0, 0, 0.03) 1px,
314 | transparent 1px,
315 | transparent 12px
316 | ),
317 | repeating-linear-gradient(
318 | 135deg,
319 | rgba(0, 0, 0, 0.03) 0px,
320 | rgba(0, 0, 0, 0.03) 1px,
321 | transparent 1px,
322 | transparent 12px
323 | ),
324 | repeating-linear-gradient(
325 | 45deg,
326 | rgba(0, 0, 0, 0.03) 0px,
327 | rgba(0, 0, 0, 0.03) 1px,
328 | transparent 1px,
329 | transparent 12px
330 | ),
331 | repeating-linear-gradient(
332 | 112.5deg,
333 | rgba(0, 0, 0, 0.03) 0px,
334 | rgba(0, 0, 0, 0.03) 1px,
335 | transparent 1px,
336 | transparent 12px
337 | ),
338 | repeating-linear-gradient(
339 | 112.5deg,
340 | rgba(0, 0, 0, 0.03) 0px,
341 | rgba(0, 0, 0, 0.03) 1px,
342 | transparent 1px,
343 | transparent 12px
344 | ),
345 | repeating-linear-gradient(
346 | 45deg,
347 | rgba(0, 0, 0, 0.03) 0px,
348 | rgba(0, 0, 0, 0.03) 1px,
349 | transparent 1px,
350 | transparent 12px
351 | ),
352 | repeating-linear-gradient(
353 | 22.5deg,
354 | rgba(0, 0, 0, 0.03) 0px,
355 | rgba(0, 0, 0, 0.03) 1px,
356 | transparent 1px,
357 | transparent 12px
358 | ),
359 | repeating-linear-gradient(
360 | 45deg,
361 | rgba(0, 0, 0, 0.03) 0px,
362 | rgba(0, 0, 0, 0.03) 1px,
363 | transparent 1px,
364 | transparent 12px
365 | ),
366 | repeating-linear-gradient(
367 | 22.5deg,
368 | rgba(0, 0, 0, 0.03) 0px,
369 | rgba(0, 0, 0, 0.03) 1px,
370 | transparent 1px,
371 | transparent 12px
372 | ),
373 | repeating-linear-gradient(
374 | 135deg,
375 | rgba(0, 0, 0, 0.03) 0px,
376 | rgba(0, 0, 0, 0.03) 1px,
377 | transparent 1px,
378 | transparent 12px
379 | ),
380 | repeating-linear-gradient(
381 | 157.5deg,
382 | rgba(0, 0, 0, 0.03) 0px,
383 | rgba(0, 0, 0, 0.03) 1px,
384 | transparent 1px,
385 | transparent 12px
386 | ),
387 | repeating-linear-gradient(
388 | 67.5deg,
389 | rgba(0, 0, 0, 0.03) 0px,
390 | rgba(0, 0, 0, 0.03) 1px,
391 | transparent 1px,
392 | transparent 12px
393 | ),
394 | repeating-linear-gradient(
395 | 67.5deg,
396 | rgba(0, 0, 0, 0.03) 0px,
397 | rgba(0, 0, 0, 0.03) 1px,
398 | transparent 1px,
399 | transparent 12px
400 | ),
401 | linear-gradient(90deg, rgb(255, 235, 18), rgb(255, 206, 0));
402 | }
403 | .flower__line {
404 | height: 55vmin;
405 | width: 1.5vmin;
406 | background-image: linear-gradient(
407 | to left,
408 | rgba(0, 0, 0, 0.2),
409 | transparent,
410 | rgba(255, 255, 255, 0.2)
411 | ),
412 | linear-gradient(to top, transparent 10%, #14757a, #39c6d6);
413 | box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
414 | -webkit-animation: grow-flower-tree 4s backwards;
415 | animation: grow-flower-tree 4s backwards;
416 | }
417 | .flower__line__leaf {
418 | --w: 7vmin;
419 | --h: calc(var(--w) + 2vmin);
420 | position: absolute;
421 | top: 20%;
422 | left: 90%;
423 | width: var(--w);
424 | height: var(--h);
425 | border-top-right-radius: var(--h);
426 | border-bottom-left-radius: var(--h);
427 | background-image: linear-gradient(to top, rgba(20, 117, 122, 0.4), #5ed639);
428 | }
429 | .flower__line__leaf--1 {
430 | transform: rotate(70deg) rotateY(30deg);
431 | }
432 | .flower__line__leaf--2 {
433 | top: 45%;
434 | transform: rotate(70deg) rotateY(30deg);
435 | }
436 | .flower__line__leaf--3,
437 | .flower__line__leaf--4,
438 | .flower__line__leaf--6 {
439 | border-top-right-radius: 0;
440 | border-bottom-left-radius: 0;
441 | border-top-left-radius: var(--h);
442 | border-bottom-right-radius: var(--h);
443 | left: -460%;
444 | top: 12%;
445 | transform: rotate(-70deg) rotateY(30deg);
446 | }
447 | .flower__line__leaf--4 {
448 | top: 40%;
449 | }
450 | .flower__line__leaf--5 {
451 | top: 0;
452 | transform-origin: left;
453 | transform: rotate(70deg) rotateY(30deg) scale(0.6);
454 | }
455 | .flower__line__leaf--6 {
456 | top: -2%;
457 | left: -450%;
458 | transform-origin: right;
459 | transform: rotate(-70deg) rotateY(30deg) scale(0.6);
460 | }
461 | .flower__light {
462 | position: absolute;
463 | bottom: 0vmin;
464 | width: 1vmin;
465 | height: 1vmin;
466 | background-color: rgb(255, 251, 0);
467 | border-radius: 50%;
468 | filter: blur(0.2vmin);
469 | -webkit-animation: light-ans 4s linear infinite backwards;
470 | animation: light-ans 4s linear infinite backwards;
471 | }
472 | .flower__light:nth-child(odd) {
473 | background-color: #23f0ff;
474 | }
475 | .flower__light--1 {
476 | left: -2vmin;
477 | -webkit-animation-delay: 1s;
478 | animation-delay: 1s;
479 | }
480 | .flower__light--2 {
481 | left: 3vmin;
482 | -webkit-animation-delay: 0.5s;
483 | animation-delay: 0.5s;
484 | }
485 | .flower__light--3 {
486 | left: -6vmin;
487 | -webkit-animation-delay: 0.3s;
488 | animation-delay: 0.3s;
489 | }
490 | .flower__light--4 {
491 | left: 6vmin;
492 | -webkit-animation-delay: 0.9s;
493 | animation-delay: 0.9s;
494 | }
495 | .flower__light--5 {
496 | left: -1vmin;
497 | -webkit-animation-delay: 1.5s;
498 | animation-delay: 1.5s;
499 | }
500 | .flower__light--6 {
501 | left: -4vmin;
502 | -webkit-animation-delay: 3s;
503 | animation-delay: 3s;
504 | }
505 | .flower__light--7 {
506 | left: 3vmin;
507 | -webkit-animation-delay: 2s;
508 | animation-delay: 2s;
509 | }
510 | .flower__light--8 {
511 | left: -6vmin;
512 | -webkit-animation-delay: 3.5s;
513 | animation-delay: 3.5s;
514 | }
515 | .flower__grass {
516 | --c: #159faa;
517 | --line-w: 1.5vmin;
518 | position: absolute;
519 | bottom: 12vmin;
520 | left: -7vmin;
521 | display: flex;
522 | flex-direction: column;
523 | align-items: flex-end;
524 | z-index: 20;
525 | transform-origin: bottom center;
526 | transform: rotate(-48deg) rotateY(40deg);
527 | }
528 | .flower__grass--1 {
529 | -webkit-animation: moving-grass 2s linear infinite;
530 | animation: moving-grass 2s linear infinite;
531 | }
532 | .flower__grass--2 {
533 | left: 2vmin;
534 | bottom: 10vmin;
535 | transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
536 | opacity: 0.8;
537 | z-index: 0;
538 | -webkit-animation: moving-grass--2 1.5s linear infinite;
539 | animation: moving-grass--2 1.5s linear infinite;
540 | }
541 | .flower__grass--top {
542 | width: 7vmin;
543 | height: 10vmin;
544 | border-top-right-radius: 100%;
545 | border-right: var(--line-w) solid var(--c);
546 | transform-origin: bottom center;
547 | transform: rotate(-2deg);
548 | }
549 | .flower__grass--bottom {
550 | margin-top: -2px;
551 | width: var(--line-w);
552 | height: 25vmin;
553 | background-image: linear-gradient(to top, transparent, var(--c));
554 | }
555 | .flower__grass__leaf {
556 | --size: 10vmin;
557 | position: absolute;
558 | width: calc(var(--size) * 2.1);
559 | height: var(--size);
560 | border-top-left-radius: var(--size);
561 | border-top-right-radius: var(--size);
562 | background-image: linear-gradient(
563 | to top,
564 | transparent,
565 | transparent 30%,
566 | var(--c)
567 | );
568 | z-index: 100;
569 | }
570 | .flower__grass__leaf--1 {
571 | top: -6%;
572 | left: 30%;
573 | --size: 6vmin;
574 | transform: rotate(-20deg);
575 | -webkit-animation: growing-grass-ans--1 2s 2.6s backwards;
576 | animation: growing-grass-ans--1 2s 2.6s backwards;
577 | }
578 | @-webkit-keyframes growing-grass-ans--1 {
579 | 0% {
580 | transform-origin: bottom left;
581 | transform: rotate(-20deg) scale(0);
582 | }
583 | }
584 | @keyframes growing-grass-ans--1 {
585 | 0% {
586 | transform-origin: bottom left;
587 | transform: rotate(-20deg) scale(0);
588 | }
589 | }
590 | .flower__grass__leaf--2 {
591 | top: -5%;
592 | left: -110%;
593 | --size: 6vmin;
594 | transform: rotate(10deg);
595 | -webkit-animation: growing-grass-ans--2 2s 2.4s linear backwards;
596 | animation: growing-grass-ans--2 2s 2.4s linear backwards;
597 | }
598 | @-webkit-keyframes growing-grass-ans--2 {
599 | 0% {
600 | transform-origin: bottom right;
601 | transform: rotate(10deg) scale(0);
602 | }
603 | }
604 | @keyframes growing-grass-ans--2 {
605 | 0% {
606 | transform-origin: bottom right;
607 | transform: rotate(10deg) scale(0);
608 | }
609 | }
610 | .flower__grass__leaf--3 {
611 | top: 5%;
612 | left: 60%;
613 | --size: 8vmin;
614 | transform: rotate(-18deg) rotateX(-20deg);
615 | -webkit-animation: growing-grass-ans--3 2s 2.2s linear backwards;
616 | animation: growing-grass-ans--3 2s 2.2s linear backwards;
617 | }
618 | @-webkit-keyframes growing-grass-ans--3 {
619 | 0% {
620 | transform-origin: bottom left;
621 | transform: rotate(-18deg) rotateX(-20deg) scale(0);
622 | }
623 | }
624 | @keyframes growing-grass-ans--3 {
625 | 0% {
626 | transform-origin: bottom left;
627 | transform: rotate(-18deg) rotateX(-20deg) scale(0);
628 | }
629 | }
630 | .flower__grass__leaf--4 {
631 | top: 6%;
632 | left: -135%;
633 | --size: 8vmin;
634 | transform: rotate(2deg);
635 | -webkit-animation: growing-grass-ans--4 2s 2s linear backwards;
636 | animation: growing-grass-ans--4 2s 2s linear backwards;
637 | }
638 | @-webkit-keyframes growing-grass-ans--4 {
639 | 0% {
640 | transform-origin: bottom right;
641 | transform: rotate(2deg) scale(0);
642 | }
643 | }
644 | @keyframes growing-grass-ans--4 {
645 | 0% {
646 | transform-origin: bottom right;
647 | transform: rotate(2deg) scale(0);
648 | }
649 | }
650 | .flower__grass__leaf--5 {
651 | top: 20%;
652 | left: 60%;
653 | --size: 10vmin;
654 | transform: rotate(-24deg) rotateX(-20deg);
655 | -webkit-animation: growing-grass-ans--5 2s 1.8s linear backwards;
656 | animation: growing-grass-ans--5 2s 1.8s linear backwards;
657 | }
658 | @-webkit-keyframes growing-grass-ans--5 {
659 | 0% {
660 | transform-origin: bottom left;
661 | transform: rotate(-24deg) rotateX(-20deg) scale(0);
662 | }
663 | }
664 | @keyframes growing-grass-ans--5 {
665 | 0% {
666 | transform-origin: bottom left;
667 | transform: rotate(-24deg) rotateX(-20deg) scale(0);
668 | }
669 | }
670 | .flower__grass__leaf--6 {
671 | top: 22%;
672 | left: -180%;
673 | --size: 10vmin;
674 | transform: rotate(10deg);
675 | -webkit-animation: growing-grass-ans--6 2s 1.6s linear backwards;
676 | animation: growing-grass-ans--6 2s 1.6s linear backwards;
677 | }
678 | @-webkit-keyframes growing-grass-ans--6 {
679 | 0% {
680 | transform-origin: bottom right;
681 | transform: rotate(10deg) scale(0);
682 | }
683 | }
684 | @keyframes growing-grass-ans--6 {
685 | 0% {
686 | transform-origin: bottom right;
687 | transform: rotate(10deg) scale(0);
688 | }
689 | }
690 | .flower__grass__leaf--7 {
691 | top: 39%;
692 | left: 70%;
693 | --size: 10vmin;
694 | transform: rotate(-10deg);
695 | -webkit-animation: growing-grass-ans--7 2s 1.4s linear backwards;
696 | animation: growing-grass-ans--7 2s 1.4s linear backwards;
697 | }
698 | @-webkit-keyframes growing-grass-ans--7 {
699 | 0% {
700 | transform-origin: bottom left;
701 | transform: rotate(-10deg) scale(0);
702 | }
703 | }
704 | @keyframes growing-grass-ans--7 {
705 | 0% {
706 | transform-origin: bottom left;
707 | transform: rotate(-10deg) scale(0);
708 | }
709 | }
710 | .flower__grass__leaf--8 {
711 | top: 40%;
712 | left: -215%;
713 | --size: 11vmin;
714 | transform: rotate(10deg);
715 | -webkit-animation: growing-grass-ans--8 2s 1.2s linear backwards;
716 | animation: growing-grass-ans--8 2s 1.2s linear backwards;
717 | }
718 | @-webkit-keyframes growing-grass-ans--8 {
719 | 0% {
720 | transform-origin: bottom right;
721 | transform: rotate(10deg) scale(0);
722 | }
723 | }
724 | @keyframes growing-grass-ans--8 {
725 | 0% {
726 | transform-origin: bottom right;
727 | transform: rotate(10deg) scale(0);
728 | }
729 | }
730 | .flower__grass__overlay {
731 | position: absolute;
732 | top: -10%;
733 | right: 0%;
734 | width: 100%;
735 | height: 100%;
736 | background-color: rgba(0, 0, 0, 0.6);
737 | filter: blur(1.5vmin);
738 | z-index: 100;
739 | }
740 | .flower__g-long {
741 | --w: 2vmin;
742 | --h: 6vmin;
743 | --c: #159faa;
744 | position: absolute;
745 | bottom: 10vmin;
746 | left: -3vmin;
747 | transform-origin: bottom center;
748 | transform: rotate(-30deg) rotateY(-20deg);
749 | display: flex;
750 | flex-direction: column;
751 | align-items: flex-end;
752 | -webkit-animation: flower-g-long-ans 3s linear infinite;
753 | animation: flower-g-long-ans 3s linear infinite;
754 | }
755 | @-webkit-keyframes flower-g-long-ans {
756 | 0%,
757 | 100% {
758 | transform: rotate(-30deg) rotateY(-20deg);
759 | }
760 | 50% {
761 | transform: rotate(-32deg) rotateY(-20deg);
762 | }
763 | }
764 | @keyframes flower-g-long-ans {
765 | 0%,
766 | 100% {
767 | transform: rotate(-30deg) rotateY(-20deg);
768 | }
769 | 50% {
770 | transform: rotate(-32deg) rotateY(-20deg);
771 | }
772 | }
773 | .flower__g-long__top {
774 | top: calc(var(--h) * -1);
775 | width: calc(var(--w) + 1vmin);
776 | height: var(--h);
777 | border-top-right-radius: 100%;
778 | border-right: 0.7vmin solid var(--c);
779 | transform: translate(-0.7vmin, 1vmin);
780 | }
781 | .flower__g-long__bottom {
782 | width: var(--w);
783 | height: 50vmin;
784 | transform-origin: bottom center;
785 | background-image: linear-gradient(to top, transparent 30%, var(--c));
786 | box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
787 | -webkit-clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%);
788 | clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%);
789 | }
790 | .flower__g-right {
791 | position: absolute;
792 | bottom: 6vmin;
793 | left: -2vmin;
794 | transform-origin: bottom left;
795 | transform: rotate(20deg);
796 | }
797 | .flower__g-right .leaf {
798 | width: 30vmin;
799 | height: 50vmin;
800 | border-top-left-radius: 100%;
801 | border-left: 2vmin solid #079097;
802 | background-image: linear-gradient(
803 | to bottom,
804 | transparent,
805 | var(--dark-color) 60%
806 | );
807 | -webkit-mask-image: linear-gradient(to top, transparent 30%, #079097 60%);
808 | }
809 | .flower__g-right--1 {
810 | -webkit-animation: flower-g-right-ans 2.5s linear infinite;
811 | animation: flower-g-right-ans 2.5s linear infinite;
812 | }
813 | .flower__g-right--2 {
814 | left: 5vmin;
815 | transform: rotateY(-180deg);
816 | -webkit-animation: flower-g-right-ans--2 3s linear infinite;
817 | animation: flower-g-right-ans--2 3s linear infinite;
818 | }
819 | .flower__g-right--2 .leaf {
820 | height: 75vmin;
821 | filter: blur(0.3vmin);
822 | opacity: 0.8;
823 | }
824 | @-webkit-keyframes flower-g-right-ans {
825 | 0%,
826 | 100% {
827 | transform: rotate(20deg);
828 | }
829 | 50% {
830 | transform: rotate(24deg) rotateX(-20deg);
831 | }
832 | }
833 | @keyframes flower-g-right-ans {
834 | 0%,
835 | 100% {
836 | transform: rotate(20deg);
837 | }
838 | 50% {
839 | transform: rotate(24deg) rotateX(-20deg);
840 | }
841 | }
842 | @-webkit-keyframes flower-g-right-ans--2 {
843 | 0%,
844 | 100% {
845 | transform: rotateY(-180deg) rotate(0deg) rotateX(-20deg);
846 | }
847 | 50% {
848 | transform: rotateY(-180deg) rotate(6deg) rotateX(-20deg);
849 | }
850 | }
851 | @keyframes flower-g-right-ans--2 {
852 | 0%,
853 | 100% {
854 | transform: rotateY(-180deg) rotate(0deg) rotateX(-20deg);
855 | }
856 | 50% {
857 | transform: rotateY(-180deg) rotate(6deg) rotateX(-20deg);
858 | }
859 | }
860 | .flower__g-front {
861 | position: absolute;
862 | bottom: 6vmin;
863 | left: 2.5vmin;
864 | z-index: 100;
865 | transform-origin: bottom center;
866 | transform: rotate(-28deg) rotateY(30deg) scale(1.04);
867 | -webkit-animation: flower__g-front-ans 2s linear infinite;
868 | animation: flower__g-front-ans 2s linear infinite;
869 | }
870 | @-webkit-keyframes flower__g-front-ans {
871 | 0%,
872 | 100% {
873 | transform: rotate(-28deg) rotateY(30deg) scale(1.04);
874 | }
875 | 50% {
876 | transform: rotate(-35deg) rotateY(40deg) scale(1.04);
877 | }
878 | }
879 | @keyframes flower__g-front-ans {
880 | 0%,
881 | 100% {
882 | transform: rotate(-28deg) rotateY(30deg) scale(1.04);
883 | }
884 | 50% {
885 | transform: rotate(-35deg) rotateY(40deg) scale(1.04);
886 | }
887 | }
888 | .flower__g-front__line {
889 | width: 0.3vmin;
890 | height: 20vmin;
891 | background-image: linear-gradient(
892 | to top,
893 | transparent,
894 | #079097,
895 | transparent 100%
896 | );
897 | position: relative;
898 | }
899 | .flower__g-front__leaf-wrapper {
900 | position: absolute;
901 | top: 0;
902 | left: 0;
903 | transform-origin: bottom left;
904 | transform: rotate(10deg);
905 | }
906 | .flower__g-front__leaf-wrapper:nth-child(even) {
907 | left: 0vmin;
908 | transform: rotateY(-180deg) rotate(5deg);
909 | -webkit-animation: flower__g-front__leaf-left-ans 1s ease-in backwards;
910 | animation: flower__g-front__leaf-left-ans 1s ease-in backwards;
911 | }
912 | .flower__g-front__leaf-wrapper:nth-child(odd) {
913 | -webkit-animation: flower__g-front__leaf-ans 1s ease-in backwards;
914 | animation: flower__g-front__leaf-ans 1s ease-in backwards;
915 | }
916 | .flower__g-front__leaf-wrapper--1 {
917 | top: -8vmin;
918 | transform: scale(0.7);
919 | -webkit-animation: flower__g-front__leaf-ans 1s 5.5s ease-in backwards !important;
920 | animation: flower__g-front__leaf-ans 1s 5.5s ease-in backwards !important;
921 | }
922 | .flower__g-front__leaf-wrapper--2 {
923 | top: -8vmin;
924 | transform: rotateY(-180deg) scale(0.7) !important;
925 | -webkit-animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important;
926 | animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important;
927 | }
928 | .flower__g-front__leaf-wrapper--3 {
929 | top: -3vmin;
930 | -webkit-animation: flower__g-front__leaf-ans 1s 4.6s ease-in backwards;
931 | animation: flower__g-front__leaf-ans 1s 4.6s ease-in backwards;
932 | }
933 | .flower__g-front__leaf-wrapper--4 {
934 | top: -3vmin;
935 | transform: rotateY(-180deg) scale(0.9) !important;
936 | -webkit-animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important;
937 | animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important;
938 | }
939 | @-webkit-keyframes flower__g-front__leaf-left-ans-2 {
940 | 0% {
941 | transform: rotateY(-180deg) scale(0);
942 | }
943 | }
944 | @keyframes flower__g-front__leaf-left-ans-2 {
945 | 0% {
946 | transform: rotateY(-180deg) scale(0);
947 | }
948 | }
949 | .flower__g-front__leaf-wrapper--5,
950 | .flower__g-front__leaf-wrapper--6 {
951 | top: 2vmin;
952 | }
953 | .flower__g-front__leaf-wrapper--7,
954 | .flower__g-front__leaf-wrapper--8 {
955 | top: 6.5vmin;
956 | }
957 | .flower__g-front__leaf-wrapper--2 {
958 | -webkit-animation-delay: 5.2s !important;
959 | animation-delay: 5.2s !important;
960 | }
961 | .flower__g-front__leaf-wrapper--3 {
962 | -webkit-animation-delay: 4.9s !important;
963 | animation-delay: 4.9s !important;
964 | }
965 | .flower__g-front__leaf-wrapper--5 {
966 | -webkit-animation-delay: 4.3s !important;
967 | animation-delay: 4.3s !important;
968 | }
969 | .flower__g-front__leaf-wrapper--6 {
970 | -webkit-animation-delay: 4.1s !important;
971 | animation-delay: 4.1s !important;
972 | }
973 | .flower__g-front__leaf-wrapper--7 {
974 | -webkit-animation-delay: 3.8s !important;
975 | animation-delay: 3.8s !important;
976 | }
977 | .flower__g-front__leaf-wrapper--8 {
978 | -webkit-animation-delay: 3.5s !important;
979 | animation-delay: 3.5s !important;
980 | }
981 | @-webkit-keyframes flower__g-front__leaf-ans {
982 | 0% {
983 | transform: rotate(10deg) scale(0);
984 | }
985 | }
986 | @keyframes flower__g-front__leaf-ans {
987 | 0% {
988 | transform: rotate(10deg) scale(0);
989 | }
990 | }
991 | @-webkit-keyframes flower__g-front__leaf-left-ans {
992 | 0% {
993 | transform: rotateY(-180deg) rotate(5deg) scale(0);
994 | }
995 | }
996 | @keyframes flower__g-front__leaf-left-ans {
997 | 0% {
998 | transform: rotateY(-180deg) rotate(5deg) scale(0);
999 | }
1000 | }
1001 | .flower__g-front__leaf {
1002 | width: 10vmin;
1003 | height: 10vmin;
1004 | border-radius: 100% 0% 0% 100%/100% 100% 0% 0%;
1005 | box-shadow: inset 0 2px 1vmin hsla(184deg, 97%, 58%, 0.2);
1006 | background-image: linear-gradient(
1007 | to bottom left,
1008 | transparent,
1009 | var(--dark-color)
1010 | ),
1011 | linear-gradient(to bottom right, #159faa 50%, transparent 50%, transparent);
1012 | -webkit-mask-image: linear-gradient(
1013 | to bottom right,
1014 | #159faa 50%,
1015 | transparent 50%,
1016 | transparent
1017 | );
1018 | mask-image: linear-gradient(
1019 | to bottom right,
1020 | #159faa 50%,
1021 | transparent 50%,
1022 | transparent
1023 | );
1024 | }
1025 | .flower__g-fr {
1026 | position: absolute;
1027 | bottom: -4vmin;
1028 | left: vmin;
1029 | transform-origin: bottom left;
1030 | z-index: 10;
1031 | -webkit-animation: flower__g-fr-ans 2s linear infinite;
1032 | animation: flower__g-fr-ans 2s linear infinite;
1033 | }
1034 | @-webkit-keyframes flower__g-fr-ans {
1035 | 0%,
1036 | 100% {
1037 | transform: rotate(2deg);
1038 | }
1039 | 50% {
1040 | transform: rotate(4deg);
1041 | }
1042 | }
1043 | @keyframes flower__g-fr-ans {
1044 | 0%,
1045 | 100% {
1046 | transform: rotate(2deg);
1047 | }
1048 | 50% {
1049 | transform: rotate(4deg);
1050 | }
1051 | }
1052 | .flower__g-fr .leaf {
1053 | width: 30vmin;
1054 | height: 50vmin;
1055 | border-top-left-radius: 100%;
1056 | border-left: 2vmin solid #079097;
1057 | -webkit-mask-image: linear-gradient(to top, transparent 25%, #079097 50%);
1058 | position: relative;
1059 | z-index: 1;
1060 | }
1061 | .flower__g-fr__leaf {
1062 | position: absolute;
1063 | top: 0;
1064 | left: 0;
1065 | width: 10vmin;
1066 | height: 10vmin;
1067 | border-radius: 100% 0% 0% 100%/100% 100% 0% 0%;
1068 | box-shadow: inset 0 2px 1vmin hsla(184deg, 97%, 58%, 0.2);
1069 | background-image: linear-gradient(
1070 | to bottom left,
1071 | transparent,
1072 | var(--dark-color) 98%
1073 | ),
1074 | linear-gradient(to bottom right, #23f0ff 45%, transparent 50%, transparent);
1075 | -webkit-mask-image: linear-gradient(
1076 | 135deg,
1077 | #159faa 40%,
1078 | transparent 50%,
1079 | transparent
1080 | );
1081 | }
1082 | .flower__g-fr__leaf--1 {
1083 | left: 20vmin;
1084 | transform: rotate(45deg);
1085 | -webkit-animation: flower__g-fr-leaft-ans-1 0.5s 5.2s linear backwards;
1086 | animation: flower__g-fr-leaft-ans-1 0.5s 5.2s linear backwards;
1087 | }
1088 | @-webkit-keyframes flower__g-fr-leaft-ans-1 {
1089 | 0% {
1090 | transform-origin: left;
1091 | transform: rotate(45deg) scale(0);
1092 | }
1093 | }
1094 | @keyframes flower__g-fr-leaft-ans-1 {
1095 | 0% {
1096 | transform-origin: left;
1097 | transform: rotate(45deg) scale(0);
1098 | }
1099 | }
1100 | .flower__g-fr__leaf--2 {
1101 | left: 12vmin;
1102 | top: -7vmin;
1103 | transform: rotate(25deg) rotateY(-180deg);
1104 | -webkit-animation: flower__g-fr-leaft-ans-6 0.5s 5s linear backwards;
1105 | animation: flower__g-fr-leaft-ans-6 0.5s 5s linear backwards;
1106 | }
1107 | .flower__g-fr__leaf--3 {
1108 | left: 15vmin;
1109 | top: 6vmin;
1110 | transform: rotate(55deg);
1111 | -webkit-animation: flower__g-fr-leaft-ans-5 0.5s 4.8s linear backwards;
1112 | animation: flower__g-fr-leaft-ans-5 0.5s 4.8s linear backwards;
1113 | }
1114 | .flower__g-fr__leaf--4 {
1115 | left: 6vmin;
1116 | top: -2vmin;
1117 | transform: rotate(25deg) rotateY(-180deg);
1118 | -webkit-animation: flower__g-fr-leaft-ans-6 0.5s 4.6s linear backwards;
1119 | animation: flower__g-fr-leaft-ans-6 0.5s 4.6s linear backwards;
1120 | }
1121 | .flower__g-fr__leaf--5 {
1122 | left: 10vmin;
1123 | top: 14vmin;
1124 | transform: rotate(55deg);
1125 | -webkit-animation: flower__g-fr-leaft-ans-5 0.5s 4.4s linear backwards;
1126 | animation: flower__g-fr-leaft-ans-5 0.5s 4.4s linear backwards;
1127 | }
1128 | @-webkit-keyframes flower__g-fr-leaft-ans-5 {
1129 | 0% {
1130 | transform-origin: left;
1131 | transform: rotate(55deg) scale(0);
1132 | }
1133 | }
1134 | @keyframes flower__g-fr-leaft-ans-5 {
1135 | 0% {
1136 | transform-origin: left;
1137 | transform: rotate(55deg) scale(0);
1138 | }
1139 | }
1140 | .flower__g-fr__leaf--6 {
1141 | left: 0vmin;
1142 | top: 6vmin;
1143 | transform: rotate(25deg) rotateY(-180deg);
1144 | -webkit-animation: flower__g-fr-leaft-ans-6 0.5s 4.2s linear backwards;
1145 | animation: flower__g-fr-leaft-ans-6 0.5s 4.2s linear backwards;
1146 | }
1147 | @-webkit-keyframes flower__g-fr-leaft-ans-6 {
1148 | 0% {
1149 | transform-origin: right;
1150 | transform: rotate(25deg) rotateY(-180deg) scale(0);
1151 | }
1152 | }
1153 | @keyframes flower__g-fr-leaft-ans-6 {
1154 | 0% {
1155 | transform-origin: right;
1156 | transform: rotate(25deg) rotateY(-180deg) scale(0);
1157 | }
1158 | }
1159 | .flower__g-fr__leaf--7 {
1160 | left: 5vmin;
1161 | top: 22vmin;
1162 | transform: rotate(45deg);
1163 | -webkit-animation: flower__g-fr-leaft-ans-7 0.5s 4s linear backwards;
1164 | animation: flower__g-fr-leaft-ans-7 0.5s 4s linear backwards;
1165 | }
1166 | @-webkit-keyframes flower__g-fr-leaft-ans-7 {
1167 | 0% {
1168 | transform-origin: left;
1169 | transform: rotate(45deg) scale(0);
1170 | }
1171 | }
1172 | @keyframes flower__g-fr-leaft-ans-7 {
1173 | 0% {
1174 | transform-origin: left;
1175 | transform: rotate(45deg) scale(0);
1176 | }
1177 | }
1178 | .flower__g-fr__leaf--8 {
1179 | left: -4vmin;
1180 | top: 15vmin;
1181 | transform: rotate(15deg) rotateY(-180deg);
1182 | -webkit-animation: flower__g-fr-leaft-ans-8 0.5s 3.8s linear backwards;
1183 | animation: flower__g-fr-leaft-ans-8 0.5s 3.8s linear backwards;
1184 | }
1185 | @-webkit-keyframes flower__g-fr-leaft-ans-8 {
1186 | 0% {
1187 | transform-origin: right;
1188 | transform: rotate(15deg) rotateY(-180deg) scale(0);
1189 | }
1190 | }
1191 | @keyframes flower__g-fr-leaft-ans-8 {
1192 | 0% {
1193 | transform-origin: right;
1194 | transform: rotate(15deg) rotateY(-180deg) scale(0);
1195 | }
1196 | }
1197 |
1198 | .long-g {
1199 | position: absolute;
1200 | bottom: 25vmin;
1201 | left: -42vmin;
1202 | transform-origin: bottom left;
1203 | }
1204 | .long-g--1 {
1205 | bottom: 0vmin;
1206 | transform: scale(0.8) rotate(-5deg);
1207 | }
1208 | .long-g--1 .leaf {
1209 | -webkit-mask-image: linear-gradient(
1210 | to top,
1211 | transparent 40%,
1212 | #079097 80%
1213 | ) !important;
1214 | }
1215 | .long-g--1 .leaf--1 {
1216 | --w: 5vmin;
1217 | --h: 60vmin;
1218 | left: -2vmin;
1219 | transform: rotate(3deg) rotateY(-180deg);
1220 | }
1221 | .long-g--2,
1222 | .long-g--3 {
1223 | bottom: -3vmin;
1224 | left: -35vmin;
1225 | transform-origin: center;
1226 | transform: scale(0.6) rotateX(60deg);
1227 | }
1228 | .long-g--2 .leaf,
1229 | .long-g--3 .leaf {
1230 | -webkit-mask-image: linear-gradient(
1231 | to top,
1232 | transparent 50%,
1233 | #079097 80%
1234 | ) !important;
1235 | }
1236 | .long-g--2 .leaf--1,
1237 | .long-g--3 .leaf--1 {
1238 | left: -1vmin;
1239 | transform: rotateY(-180deg);
1240 | }
1241 | .long-g--3 {
1242 | left: -17vmin;
1243 | bottom: 0vmin;
1244 | }
1245 | .long-g--3 .leaf {
1246 | -webkit-mask-image: linear-gradient(
1247 | to top,
1248 | transparent 40%,
1249 | #079097 80%
1250 | ) !important;
1251 | }
1252 | .long-g--4 {
1253 | left: 25vmin;
1254 | bottom: -3vmin;
1255 | transform-origin: center;
1256 | transform: scale(0.6) rotateX(60deg);
1257 | }
1258 | .long-g--4 .leaf {
1259 | -webkit-mask-image: linear-gradient(
1260 | to top,
1261 | transparent 50%,
1262 | #079097 80%
1263 | ) !important;
1264 | }
1265 | .long-g--5 {
1266 | left: 42vmin;
1267 | bottom: 0vmin;
1268 | transform: scale(0.8) rotate(2deg);
1269 | }
1270 | .long-g--6 {
1271 | left: 0vmin;
1272 | bottom: -20vmin;
1273 | z-index: 100;
1274 | filter: blur(0.3vmin);
1275 | transform: scale(0.8) rotate(2deg);
1276 | }
1277 | .long-g--7 {
1278 | left: 35vmin;
1279 | bottom: 20vmin;
1280 | z-index: -1;
1281 | filter: blur(0.3vmin);
1282 | transform: scale(0.6) rotate(2deg);
1283 | opacity: 0.7;
1284 | }
1285 | .long-g .leaf {
1286 | --w: 15vmin;
1287 | --h: 40vmin;
1288 | --c: #1aaa15;
1289 | position: absolute;
1290 | bottom: 0;
1291 | width: var(--w);
1292 | height: var(--h);
1293 | border-top-left-radius: 100%;
1294 | border-left: 2vmin solid var(--c);
1295 | -webkit-mask-image: linear-gradient(
1296 | to top,
1297 | transparent 20%,
1298 | var(--dark-color)
1299 | );
1300 | transform-origin: bottom center;
1301 | }
1302 | .long-g .leaf--0 {
1303 | left: 2vmin;
1304 | -webkit-animation: leaf-ans-1 4s linear infinite;
1305 | animation: leaf-ans-1 4s linear infinite;
1306 | }
1307 | .long-g .leaf--1 {
1308 | --w: 5vmin;
1309 | --h: 60vmin;
1310 | -webkit-animation: leaf-ans-1 4s linear infinite;
1311 | animation: leaf-ans-1 4s linear infinite;
1312 | }
1313 | .long-g .leaf--2 {
1314 | --w: 10vmin;
1315 | --h: 40vmin;
1316 | left: -0.5vmin;
1317 | bottom: 5vmin;
1318 | transform-origin: bottom left;
1319 | transform: rotateY(-180deg);
1320 | -webkit-animation: leaf-ans-2 3s linear infinite;
1321 | animation: leaf-ans-2 3s linear infinite;
1322 | }
1323 | .long-g .leaf--3 {
1324 | --w: 5vmin;
1325 | --h: 30vmin;
1326 | left: -1vmin;
1327 | bottom: 3.2vmin;
1328 | transform-origin: bottom left;
1329 | transform: rotate(-10deg) rotateY(-180deg);
1330 | -webkit-animation: leaf-ans-3 3s linear infinite;
1331 | animation: leaf-ans-3 3s linear infinite;
1332 | }
1333 |
1334 | @-webkit-keyframes leaf-ans-1 {
1335 | 0%,
1336 | 100% {
1337 | transform: rotate(-5deg) scale(1);
1338 | }
1339 | 50% {
1340 | transform: rotate(5deg) scale(1.1);
1341 | }
1342 | }
1343 |
1344 | @keyframes leaf-ans-1 {
1345 | 0%,
1346 | 100% {
1347 | transform: rotate(-5deg) scale(1);
1348 | }
1349 | 50% {
1350 | transform: rotate(5deg) scale(1.1);
1351 | }
1352 | }
1353 | @-webkit-keyframes leaf-ans-2 {
1354 | 0%,
1355 | 100% {
1356 | transform: rotateY(-180deg) rotate(5deg);
1357 | }
1358 | 50% {
1359 | transform: rotateY(-180deg) rotate(0deg) scale(1.1);
1360 | }
1361 | }
1362 | @keyframes leaf-ans-2 {
1363 | 0%,
1364 | 100% {
1365 | transform: rotateY(-180deg) rotate(5deg);
1366 | }
1367 | 50% {
1368 | transform: rotateY(-180deg) rotate(0deg) scale(1.1);
1369 | }
1370 | }
1371 | @-webkit-keyframes leaf-ans-3 {
1372 | 0%,
1373 | 100% {
1374 | transform: rotate(-10deg) rotateY(-180deg);
1375 | }
1376 | 50% {
1377 | transform: rotate(-20deg) rotateY(-180deg);
1378 | }
1379 | }
1380 | @keyframes leaf-ans-3 {
1381 | 0%,
1382 | 100% {
1383 | transform: rotate(-10deg) rotateY(-180deg);
1384 | }
1385 | 50% {
1386 | transform: rotate(-20deg) rotateY(-180deg);
1387 | }
1388 | }
1389 | .grow-ans {
1390 | -webkit-animation: grow-ans 2s var(--d) backwards;
1391 | animation: grow-ans 2s var(--d) backwards;
1392 | }
1393 |
1394 | @-webkit-keyframes grow-ans {
1395 | 0% {
1396 | transform: scale(0);
1397 | opacity: 0;
1398 | }
1399 | }
1400 |
1401 | @keyframes grow-ans {
1402 | 0% {
1403 | transform: scale(0);
1404 | opacity: 0;
1405 | }
1406 | }
1407 | @-webkit-keyframes light-ans {
1408 | 0% {
1409 | opacity: 0;
1410 | transform: translateY(0vmin);
1411 | }
1412 | 25% {
1413 | opacity: 1;
1414 | transform: translateY(-5vmin) translateX(-2vmin);
1415 | }
1416 | 50% {
1417 | opacity: 1;
1418 | transform: translateY(-15vmin) translateX(2vmin);
1419 | filter: blur(0.2vmin);
1420 | }
1421 | 75% {
1422 | transform: translateY(-20vmin) translateX(-2vmin);
1423 | filter: blur(0.2vmin);
1424 | }
1425 | 100% {
1426 | transform: translateY(-30vmin);
1427 | opacity: 0;
1428 | filter: blur(1vmin);
1429 | }
1430 | }
1431 | @keyframes light-ans {
1432 | 0% {
1433 | opacity: 0;
1434 | transform: translateY(0vmin);
1435 | }
1436 | 25% {
1437 | opacity: 1;
1438 | transform: translateY(-5vmin) translateX(-2vmin);
1439 | }
1440 | 50% {
1441 | opacity: 1;
1442 | transform: translateY(-15vmin) translateX(2vmin);
1443 | filter: blur(0.2vmin);
1444 | }
1445 | 75% {
1446 | transform: translateY(-20vmin) translateX(-2vmin);
1447 | filter: blur(0.2vmin);
1448 | }
1449 | 100% {
1450 | transform: translateY(-30vmin);
1451 | opacity: 0;
1452 | filter: blur(1vmin);
1453 | }
1454 | }
1455 | @-webkit-keyframes moving-flower-1 {
1456 | 0%,
1457 | 100% {
1458 | transform: rotate(2deg);
1459 | }
1460 | 50% {
1461 | transform: rotate(-2deg);
1462 | }
1463 | }
1464 | @keyframes moving-flower-1 {
1465 | 0%,
1466 | 100% {
1467 | transform: rotate(2deg);
1468 | }
1469 | 50% {
1470 | transform: rotate(-2deg);
1471 | }
1472 | }
1473 | @-webkit-keyframes moving-flower-2 {
1474 | 0%,
1475 | 100% {
1476 | transform: rotate(18deg);
1477 | }
1478 | 50% {
1479 | transform: rotate(14deg);
1480 | }
1481 | }
1482 | @keyframes moving-flower-2 {
1483 | 0%,
1484 | 100% {
1485 | transform: rotate(18deg);
1486 | }
1487 | 50% {
1488 | transform: rotate(14deg);
1489 | }
1490 | }
1491 | @-webkit-keyframes moving-flower-3 {
1492 | 0%,
1493 | 100% {
1494 | transform: rotate(-18deg);
1495 | }
1496 | 50% {
1497 | transform: rotate(-20deg) rotateY(-10deg);
1498 | }
1499 | }
1500 | @keyframes moving-flower-3 {
1501 | 0%,
1502 | 100% {
1503 | transform: rotate(-18deg);
1504 | }
1505 | 50% {
1506 | transform: rotate(-20deg) rotateY(-10deg);
1507 | }
1508 | }
1509 | @-webkit-keyframes blooming-leaf-right {
1510 | 0% {
1511 | transform-origin: left;
1512 | transform: rotate(70deg) rotateY(30deg) scale(0);
1513 | }
1514 | }
1515 | @keyframes blooming-leaf-right {
1516 | 0% {
1517 | transform-origin: left;
1518 | transform: rotate(70deg) rotateY(30deg) scale(0);
1519 | }
1520 | }
1521 | @-webkit-keyframes blooming-leaf-left {
1522 | 0% {
1523 | transform-origin: right;
1524 | transform: rotate(-70deg) rotateY(30deg) scale(0);
1525 | }
1526 | }
1527 | @keyframes blooming-leaf-left {
1528 | 0% {
1529 | transform-origin: right;
1530 | transform: rotate(-70deg) rotateY(30deg) scale(0);
1531 | }
1532 | }
1533 | @-webkit-keyframes grow-flower-tree {
1534 | 0% {
1535 | height: 0;
1536 | border-radius: 1vmin;
1537 | }
1538 | }
1539 | @keyframes grow-flower-tree {
1540 | 0% {
1541 | height: 0;
1542 | border-radius: 1vmin;
1543 | }
1544 | }
1545 | @-webkit-keyframes blooming-flower {
1546 | 0% {
1547 | transform: scale(0);
1548 | }
1549 | }
1550 | @keyframes blooming-flower {
1551 | 0% {
1552 | transform: scale(0);
1553 | }
1554 | }
1555 | @-webkit-keyframes moving-grass {
1556 | 0%,
1557 | 100% {
1558 | transform: rotate(-48deg) rotateY(40deg);
1559 | }
1560 | 50% {
1561 | transform: rotate(-50deg) rotateY(40deg);
1562 | }
1563 | }
1564 | @keyframes moving-grass {
1565 | 0%,
1566 | 100% {
1567 | transform: rotate(-48deg) rotateY(40deg);
1568 | }
1569 | 50% {
1570 | transform: rotate(-50deg) rotateY(40deg);
1571 | }
1572 | }
1573 | @-webkit-keyframes moving-grass--2 {
1574 | 0%,
1575 | 100% {
1576 | transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
1577 | }
1578 | 50% {
1579 | transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg);
1580 | }
1581 | }
1582 | @keyframes moving-grass--2 {
1583 | 0%,
1584 | 100% {
1585 | transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
1586 | }
1587 | 50% {
1588 | transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg);
1589 | }
1590 | }
1591 | .growing-grass {
1592 | -webkit-animation: growing-grass-ans 1s 2s backwards;
1593 | animation: growing-grass-ans 1s 2s backwards;
1594 | }
1595 |
1596 | @-webkit-keyframes growing-grass-ans {
1597 | 0% {
1598 | transform: scale(0);
1599 | }
1600 | }
1601 |
1602 | @keyframes growing-grass-ans {
1603 | 0% {
1604 | transform: scale(0);
1605 | }
1606 | }
1607 | .container * {
1608 | -webkit-animation-play-state: paused !important;
1609 | animation-play-state: paused !important;
1610 | } /*# sourceMappingURL=main.css.map */
1611 |
1612 |
1613 | /* Reset de estilos básicos */
1614 | body, h1, p {
1615 | margin: 0;
1616 | padding: 0;
1617 | }
1618 |
1619 | /* Estilos generales */
1620 | body {
1621 | font-family: 'Arial', sans-serif;
1622 | background-color: #f7f7f7;
1623 | color: #333;
1624 | }
1625 |
1626 | .container {
1627 | max-width: 1200px;
1628 | margin: 0 auto;
1629 | padding: 20px;
1630 | }
1631 |
1632 | h1 {
1633 | font-size: 2em;
1634 | line-height: 1.5;
1635 | margin-bottom: 20px;
1636 | }
1637 |
1638 | /* Media Queries para tamaños de pantalla diferentes */
1639 | @media screen and (max-width: 600px) {
1640 | /* Estilos para pantallas pequeñas */
1641 | h1 {
1642 | font-size: 1.5em;
1643 | }
1644 | }
1645 |
1646 | @media screen and (min-width: 601px) and (max-width: 1024px) {
1647 | /* Estilos para pantallas medianas */
1648 | h1 {
1649 | font-size: 1.8em;
1650 | }
1651 | }
1652 |
1653 | @media screen and (min-width: 1025px) {
1654 | /* Estilos para pantallas grandes */
1655 | h1 {
1656 | font-size: 2em;
1657 | }
1658 | }
1659 |
1660 | /* Agregar más estilos según sea necesario */
1661 |
--------------------------------------------------------------------------------