├── README.md
├── style.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # salvalentin
2 | 👋 Hola, soy @mabelolivera10 "MABEL QUISPE OLIVERA" 👀 Persona apasionada con su profesión, excelente capacidad de organización y facilidad de trabajo en equipo. Muy adaptable a todo tipo de entornos y clara orientación a objetivos. Con conocimientos en diferentes lenguajes de programación como: Java, Visual.NET, PHP, entre otros; Interés en el área de desarrollo de software y/o Análisis de sistemas. 🌱 Actualmente estoy aprendiendo distintos lenguajes de programación 💞️ Busco colaborar contigo 📫 Cómo contactarme en mis redes sociales: Facebook:@mabelquispeolivera Instagram: @mabelolivera10 TikTok: @encoded o @Mabelolivera10 Youtube: @encoded o @mabelquispeolivera
3 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin:0;
3 | background: rgb(234, 223, 153);
4 | height: 100%;
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: center;
8 | align-items: center;
9 | }
10 | svg.rose {
11 | display: block;
12 | width:600px;
13 | padding-top: 10em;
14 | margin-top: -100px;
15 | }
16 |
17 | h1 {
18 |
19 |
20 |
21 | color: #ff69b4; /* Color del texto */
22 | font-size: 36px;
23 | margin-top: 100px;
24 |
25 |
26 | }
27 |
28 | @keyframes rose-animation {
29 | 50% {
30 | transform: scale(1);
31 | opacity: 1;
32 | }
33 | 100%{
34 | transform: scale(1);
35 | opacity: 1;
36 | }
37 | }
38 |
39 | .cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17{
40 | transform: scale(0);
41 | transform-origin: center center;
42 | opacity: 0;
43 | animation: rose-animation 2s ease infinite 0.1s alternate;
44 | }
45 | .cls-6,.cls-7,.cls-8,.cls-9,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17{
46 | transform: scale(0);
47 | transform-origin: center center;
48 | opacity: 0;
49 | animation: rose-animation 2s ease infinite 0.34s alternate;
50 | }
51 | .cls-9,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17{
52 | transform: scale(0);
53 | transform-origin: center center;
54 | opacity: 0;
55 | animation: rose-animation 2s ease infinite 0.5s alternate;
56 | }
57 | cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17{
58 | transform: scale(0);
59 | transform-origin: center center;
60 | opacity: 0;
61 | animation: rose-animation 2s ease infinite 0.2s alternate;
62 | }
63 | .boingInUp {
64 | -webkit-animation-name: boingInUp;
65 | animation-name: boingInUp;
66 | }
67 | @-webkit-keyframes boingInUp {
68 | 0% {
69 | opacity: 0;
70 | -webkit-transform-origin: 50% 0%;
71 | transform-origin: 50% 0%;
72 | -webkit-transform: perspective(800px) rotateX(-90deg);
73 | transform: perspective(800px) rotateX(-90deg);
74 | }
75 |
76 | 50% {
77 | opacity: 1;
78 | -webkit-transform-origin: 50% 0%;
79 | transform-origin: 50% 0%;
80 | -webkit-transform: perspective(800px) rotateX(50deg);
81 | transform: perspective(800px) rotateX(50deg);
82 | }
83 |
84 | 100% {
85 | opacity: 1;
86 | -webkit-transform-origin: 50% 0%;
87 | transform-origin: 50% 0%;
88 | -webkit-transform: perspective(800px) rotateX(0deg);
89 | transform: perspective(800px) rotateX(0deg);
90 | }
91 | }
92 | #hojas{
93 | animation: boingInUp 2s ease infinite alternate ;
94 | }
95 | @keyframes boingInUp {
96 | 0% {
97 | opacity: 0;
98 | -webkit-transform-origin: 50% 0%;
99 | transform-origin: 50% 0%;
100 | -webkit-transform: perspective(800px) rotateX(-90deg);
101 | transform: perspective(800px) rotateX(-90deg);
102 | }
103 |
104 | 50% {
105 | opacity: 1;
106 | -webkit-transform-origin: 50% 0%;
107 | transform-origin: 50% 0%;
108 | -webkit-transform: perspective(800px) rotateX(50deg);
109 | transform: perspective(800px) rotateX(50deg);
110 | }
111 |
112 | 100% {
113 | opacity: 1;
114 | -webkit-transform-origin: 50% 0%;
115 | transform-origin: 50% 0%;
116 | -webkit-transform: perspective(800px) rotateX(0deg);
117 | transform: perspective(800px) rotateX(0deg);
118 | }
119 | }
120 | .puffIn {
121 | -webkit-animation-name: puffIn;
122 | animation-name: puffIn;
123 | }
124 | @-webkit-keyframes puffIn {
125 | 0% {
126 | opacity: 0;
127 | -webkit-transform-origin: 50% 50%;
128 | transform-origin: 50% 50%;
129 | -webkit-transform: scale(2,2);
130 | transform: scale(2,2);
131 | -webkit-filter: blur(2px);
132 | filter: blur(2px);
133 | }
134 |
135 | 100% {
136 | opacity: 1;
137 | -webkit-transform-origin: 50% 50%;
138 | transform-origin: 50% 50%;
139 | -webkit-transform: scale(1,1);
140 | transform: scale(1,1);
141 | -webkit-filter: blur(0px);
142 | filter: blur(0px);
143 | }
144 | }
145 | @keyframes puffIn {
146 | 0% {
147 | opacity: 0;
148 | -webkit-transform-origin: 50% 50%;
149 | transform-origin: 50% 50%;
150 | -webkit-transform: scale(2,2);
151 | transform: scale(2,2);
152 | -webkit-filter: blur(2px);
153 | filter: blur(2px);
154 | }
155 | 50%{
156 | opacity: 0.3;
157 | }
158 |
159 | 100% {
160 | opacity: 1;
161 | -webkit-transform-origin: 50% 50%;
162 | transform-origin: 50% 50%;
163 | -webkit-transform: scale(1,1);
164 | transform: scale(1,1);
165 | -webkit-filter: blur(0px);
166 | filter: blur(0px);
167 | }
168 | }
169 | #tallos{
170 | animation: puffIn 2s infinite ease alternate;
171 | }
172 | #sombra_1{
173 | visibility:hidden;
174 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | san valentin Encoded
6 |
7 |
8 |
9 |
10 |
11 |
12 | ¡TE REGALO UNA ROSA FELIZ SAN VALENTÍN!
13 |
46 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------