├── README.md ├── background.jpg ├── index.html ├── new.html ├── new.css └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Rose-Day -------------------------------------------------------------------------------- /background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vishaltewatia/Rose-Day/HEAD/background.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 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 |

Your smile is as beautiful as Rose
42 | I have Something For your Smile : Click Here 43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /new.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | untoldcoding 7 | 8 | 9 | 10 |
11 |

For You 💖

12 |
13 |
14 |
15 |

16 | My Love, 17 |
18 | On this Rose Day, each petal symbolizes my admiration
for you. 19 | Your presence colors my world with joy and warmth.Like a rose in full 20 | bloom, your beauty captivates my heart. The red roses reflect the 21 | passion that burns for you, while the white ones signify the purity of 22 | our love. In the garden of life, you're my most cherished blossom. 23 | Thank you for being my source of love and inspiration. Our journey 24 | together is as sweet as the fragrance of roses. Happy Rose Day, my 25 | love. Here's to many more petals of shared laughter and enduring love. 26 |
27 | 28 | Forever Yours, 29 |
30 | Ullu 32 |

33 |
34 | 38 |
39 |
40 |
41 | 42 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /new.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap"); 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | font-family: "Varela Round", "Quicksand", sans-serif; 8 | background: url(background.jpg); 9 | background-size: cover; 10 | background-repeat: no-repeat; 11 | background-color: black; 12 | } 13 | 14 | .postcard { 15 | width: 800px; 16 | height: 500px; 17 | background: rgba(255, 255, 255, 0.101); 18 | 19 | margin: 0 auto; 20 | border-radius: 2%; 21 | display: flex; 22 | justify-content: space-between; 23 | padding: 3em; 24 | box-shadow: 0.8em 0.8em 15px rgba(0, 0, 0, 0.3); 25 | -ms-transform: rotate(2.5deg); /* IE 9 */ 26 | -webkit-transform: rotate(2.5deg); /* Chrome, Safari, Opera */ 27 | transform: rotate(2.5deg); 28 | -moz-transition: all 0.5s ease; 29 | -webkit-transition: all 0.5s ease; 30 | -o-transition: all 0.5s ease; 31 | transition: all 0.5s ease; 32 | } 33 | 34 | .postcard1 { 35 | width: 800px; 36 | height: 500px; 37 | background: #f594b862; 38 | position: absolute; 39 | left: 24%; 40 | -webkit-filter: blur(2px); 41 | z-index: -1; 42 | margin: 0 auto; 43 | border-radius: 2%; 44 | display: flex; 45 | justify-content: space-between; 46 | padding: 3em; 47 | box-shadow: 0.8em 0.8em 15px rgba(0, 0, 0, 0.3); 48 | -ms-transform: rotate(2.5deg); /* IE 9 */ 49 | -webkit-transform: rotate(2.5deg); /* Chrome, Safari, Opera */ 50 | transform: rotate(2.5deg); 51 | -moz-transition: all 0.5s ease; 52 | -webkit-transition: all 0.5s ease; 53 | -o-transition: all 0.5s ease; 54 | transition: all 0.5s ease; 55 | } 56 | 57 | h1 { 58 | text-align: center; 59 | font-size: 4.5em; 60 | color: #fdfdfd; 61 | margin-bottom: 5px; 62 | } 63 | 64 | /*animation*/ 65 | .postcard:hover, 66 | .postcard:active, 67 | .postcard:focus { 68 | -ms-transform: rotate(0deg); /* IE 9 */ 69 | -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ 70 | transform: rotate(0deg); 71 | -moz-transition: all 0.5s ease; 72 | -webkit-transition: all 0.5s ease; 73 | -o-transition: all 0.5s ease; 74 | transition: all 0.5s ease; 75 | } 76 | 77 | .mail_stamp { 78 | width: 100px; 79 | float: right; 80 | } 81 | 82 | .push { 83 | margin-bottom: 1em; 84 | margin-top: 0.5em; 85 | } 86 | 87 | /*footer*/ 88 | footer { 89 | margin: 2em auto; 90 | text-align: center; 91 | font-family: "Varela Round", "Quicksand", sans-serif; 92 | color: white; 93 | } 94 | 95 | footer p { 96 | font-size: 1em; 97 | letter-spacing: 1px; 98 | } 99 | p span { 100 | font-size: 30px; 101 | font-weight: 600; 102 | text-shadow: 0 0 20px rgb(255, 255, 255); 103 | color: #800020; 104 | } 105 | p { 106 | font-size: 22px; 107 | font-family: cursive; 108 | font-weight: 540; 109 | } 110 | .ullu { 111 | font-size: 25px; 112 | 113 | text-shadow: 0 0 20px rgb(255, 255, 255); 114 | } 115 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap"); 2 | body { 3 | height: 100%; 4 | width: 100%; 5 | background: #ea81ae; 6 | overflow: hidden; 7 | text-align: center; 8 | justify-content: center; 9 | } 10 | 11 | .container { 12 | position: absolute; 13 | left: 50%; 14 | top: 50%; 15 | transform: translate(-50%, -50%); 16 | } 17 | 18 | .glass { 19 | height: 350px; 20 | width: 200px; 21 | } 22 | 23 | .petals > div { 24 | position: absolute; 25 | background: #d52d58; 26 | width: 45px; 27 | height: 80px; 28 | top: 55px; 29 | transition: all 0.5s ease-out; 30 | } 31 | .petals > div:nth-child(1) { 32 | border-radius: 15px; 33 | box-shadow: 0px 0px 30px #f594b8; 34 | left: 80px; 35 | top: 60px; 36 | background: #d52d58; 37 | } 38 | .petals > div:nth-child(2), 39 | .petals > div:nth-child(4), 40 | .petals > div:nth-child(6) { 41 | background: #b81b43; 42 | left: 60px; 43 | border-radius: 0px 30px 0px 30px; 44 | transform-origin: bottom right; 45 | } 46 | .petals > div:nth-child(3), 47 | .petals > div:nth-child(5), 48 | .petals > div:nth-child(7) { 49 | background: #b81b43; 50 | left: 100px; 51 | border-radius: 30px 0px 30px 0px; 52 | transform-origin: bottom left; 53 | } 54 | .petals > div:nth-child(2) { 55 | z-index: 5; 56 | background: #ab1a3f; 57 | top: 75px; 58 | height: 70px; 59 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); 60 | animation: bloom2 3s ease-in-out; 61 | animation-fill-mode: forwards; 62 | } 63 | .petals > div:nth-child(3) { 64 | z-index: 4; 65 | background: #ab1a3f; 66 | top: 75px; 67 | height: 70px; 68 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); 69 | animation: bloom3 3s ease-in-out, glowing 2.5s ease-in-out infinite; 70 | animation-fill-mode: forwards; 71 | } 72 | .petals > div:nth-child(4) { 73 | z-index: 3; 74 | background: #b81b43; 75 | top: 70px; 76 | height: 75px; 77 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); 78 | animation: bloom4 3s ease-in-out, glowing 2.5s ease-in-out infinite; 79 | animation-fill-mode: forwards; 80 | } 81 | .petals > div:nth-child(5) { 82 | z-index: 2; 83 | background: #b81b43; 84 | top: 70px; 85 | height: 75px; 86 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); 87 | animation: bloom5 3s ease-in-out, glowing 2.5s ease-in-out infinite; 88 | animation-fill-mode: forwards; 89 | } 90 | .petals > div:nth-child(6) { 91 | z-index: 1; 92 | background: #c9204b; 93 | top: 65px; 94 | height: 70px; 95 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3); 96 | animation: bloom6 3s ease-in-out, glowing 2.5s ease-in-out infinite; 97 | animation-fill-mode: forwards; 98 | } 99 | .petals > div:nth-child(7) { 100 | z-index: 0; 101 | background: #c9204b; 102 | top: 65px; 103 | height: 70px; 104 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3); 105 | animation: bloom7 3s ease-in-out, glowing 2.5s ease-in-out infinite; 106 | animation-fill-mode: forwards; 107 | } 108 | 109 | .deadPetals > div { 110 | position: absolute; 111 | background: #d52d58; 112 | width: 20px; 113 | height: 15px; 114 | top: 120px; 115 | border-radius: 0px 30px 0px 30px; 116 | box-shadow: 0px 0px 30px rgba(245, 148, 184, 0.5); 117 | transition: all 0.5s ease-out; 118 | } 119 | .deadPetals > div:nth-child(1) { 120 | left: 80px; 121 | transform: rotate(-30deg); 122 | animation: falling 10s 4s ease-in-out infinite; 123 | } 124 | .deadPetals > div:nth-child(2) { 125 | left: 101px; 126 | transform: rotate(-30deg); 127 | animation: falling 20s 8s ease-in-out infinite; 128 | } 129 | .deadPetals > div:nth-child(3) { 130 | left: 79px; 131 | transform: rotate(-30deg); 132 | animation: falling 20s 12s ease-in-out infinite; 133 | } 134 | .deadPetals > div:nth-child(4) { 135 | left: 92px; 136 | transform: rotate(-30deg); 137 | animation: falling 20s 16s ease-in-out infinite; 138 | } 139 | 140 | .leaves > div:nth-last-child(1) { 141 | position: absolute; 142 | width: 55px; 143 | height: 30px; 144 | background: #338f37; 145 | top: 120px; 146 | left: 75px; 147 | border-radius: 100px; 148 | } 149 | .leaves > div:nth-child(1) { 150 | position: absolute; 151 | width: 6px; 152 | height: 210px; 153 | background: #054c05; 154 | top: 95px; 155 | left: 100px; 156 | border-radius: 0 0 100px 100px; 157 | } 158 | .leaves > div:nth-child(2) { 159 | position: absolute; 160 | width: 30px; 161 | height: 50px; 162 | top: 53px; 163 | border-radius: 5px 40px 20px 40px; 164 | background: #054c05; 165 | transform-origin: bottom; 166 | transform: rotate(-30deg); 167 | top: 180px; 168 | left: 80px; 169 | box-shadow: inset 5px 5px #066406; 170 | } 171 | .leaves > div:nth-child(3) { 172 | position: absolute; 173 | width: 30px; 174 | height: 50px; 175 | top: 53px; 176 | border-radius: 40px 5px 40px 20px; 177 | background: #054c05; 178 | transform-origin: bottom; 179 | transform: rotate(30deg); 180 | top: 150px; 181 | left: 95px; 182 | box-shadow: inset -5px 5px #066406; 183 | } 184 | 185 | .thorns > div { 186 | position: absolute; 187 | width: 0; 188 | height: 0; 189 | top: 140px; 190 | } 191 | .thorns > div:nth-child(odd) { 192 | border-top: 5px solid transparent; 193 | border-bottom: 5px solid transparent; 194 | border-left: 5px solid #054c05; 195 | left: 105px; 196 | } 197 | .thorns > div:nth-child(even) { 198 | border-top: 5px solid transparent; 199 | border-bottom: 5px solid transparent; 200 | border-right: 5px solid #054c05; 201 | left: 95px; 202 | } 203 | .thorns > div:nth-child(1) { 204 | top: 200px; 205 | } 206 | .thorns > div:nth-child(2) { 207 | top: 170px; 208 | } 209 | .thorns > div:nth-child(4) { 210 | top: 230px; 211 | } 212 | 213 | @keyframes bloom2 { 214 | 50% { 215 | transform: rotate(-90deg); 216 | top: 200px; 217 | left: 100px; 218 | } 219 | 100% { 220 | transform: rotate(-60deg); 221 | top: 252px; 222 | left: 50px; 223 | background: #71122a; 224 | box-shadow: 0px 0px 0px rgba(245, 148, 184, 0); 225 | } 226 | } 227 | @keyframes bloom3 { 228 | 100% { 229 | transform: rotate(45deg); 230 | } 231 | } 232 | @keyframes bloom4 { 233 | 100% { 234 | transform: rotate(-20deg); 235 | } 236 | } 237 | @keyframes bloom5 { 238 | 100% { 239 | transform: rotate(20deg); 240 | } 241 | } 242 | @keyframes bloom6 { 243 | 100% { 244 | transform: rotate(-5deg); 245 | } 246 | } 247 | @keyframes bloom7 { 248 | 100% { 249 | transform: rotate(5deg); 250 | } 251 | } 252 | @keyframes glowing { 253 | 50% { 254 | background: #d7365f; 255 | box-shadow: 0px 0px 60px #f594b8; 256 | } 257 | } 258 | @keyframes falling { 259 | 20% { 260 | top: 335px; 261 | background: #9d193b; 262 | box-shadow: 0px 0px 0px rgba(245, 148, 184, 0); 263 | } 264 | 100% { 265 | top: 335px; 266 | opacity: 0; 267 | } 268 | } 269 | .text { 270 | font-family: cursive; 271 | font-weight: 800; 272 | font-size: 25px; 273 | text-align: center; 274 | justify-content: center; 275 | color: rgb(245, 20, 84); 276 | text-shadow: 0 0 20px rgb(241, 94, 106); 277 | margin-left: -100px; 278 | } 279 | .text a { 280 | color: rgb(245, 20, 84); 281 | } 282 | .text a:hover { 283 | color: white; 284 | text-shadow: 0 0 20px rgb(235, 25, 42); 285 | } 286 | --------------------------------------------------------------------------------