├── file.jpg ├── css ├── bg.jpg └── style.css ├── favicon.ico ├── js └── index.js ├── README.md └── index.html /file.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smilegupta/AnniversaryCard/HEAD/file.jpg -------------------------------------------------------------------------------- /css/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smilegupta/AnniversaryCard/HEAD/css/bg.jpg -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smilegupta/AnniversaryCard/HEAD/favicon.ico -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | function $(id) { 3 | return document.getElementById(id); 4 | } 5 | 6 | var card = $('card'), 7 | openB = $('open'), 8 | closeB = $('close'), 9 | timer = null; 10 | console.log('wat', card); 11 | openB.addEventListener('click', function () { 12 | card.setAttribute('class', 'open-half'); 13 | if (timer) clearTimeout(timer); 14 | timer = setTimeout(function () { 15 | card.setAttribute('class', 'open-fully'); 16 | timer = null; 17 | }, 1000); 18 | }); 19 | 20 | closeB.addEventListener('click', function () { 21 | card.setAttribute('class', 'close-half'); 22 | if (timer) clearTimerout(timer); 23 | timer = setTimeout(function () { 24 | card.setAttribute('class', ''); 25 | timer = null; 26 | }, 1000); 27 | }); 28 | 29 | }()); 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AnniversaryCard! - [Coder's way of wishing](https://smilegupta.github.io/AnniversaryCard) 2 | [![Happy WedLocks Day](https://img.shields.io/badge/Happy-WedLocksDay-dodgerblue.svg?style=for-the-badge)](https://smilegupta.github.io/AnniversaryCard/) [![View Demo](https://img.shields.io/badge/View-Demo-teal.svg?style=for-the-badge)](https://smilegupta.github.io/AnniversaryCard/) 3 | > **99.9% of people just say "Happy Anniversary" to each other over Social Networking Sites like [Facebook](https://www.facebook.com/smilegupta.1998) and [Twitter](https://twitter.com/gupta_smile_) with the same 15 predictable letters. Why not say it with `code`? If you're a developer you already understand it!** 4 | 5 | [![check demo](https://forthebadge.com/images/badges/its-not-a-lie-if-you-believe-it.svg)](https://smilegupta.github.io/AnniversaryCard/) 6 | 7 | ### Designing a [website](https://smilegupta.github.io/AnniversaryCard/) to Wish Somebody on Their WedLocks day is a amazing Idea! 8 | 9 | > #### Click [here](https://smilegupta.github.io/AnniversaryCard/) to view live demo! 10 | 11 | ## Technology Stack Used 12 | 13 | ![HTML](https://img.shields.io/badge/frontend-html-orange.svg?logo=html5&style=flat-square) 14 | ![CSS](https://img.shields.io/badge/frontend-css-yellowgreen.svg?logo=css3&style=flat-square) 15 | ![JavaScript](https://img.shields.io/badge/frontend-javascript-yellow.svg?logo=javascript&style=flat-square) 16 | 17 | - Front End - **HTML**, **CSS**, **JavaScript** 18 | 19 | ### Need help? 20 | 21 | ``` 22 | 23 | if (needHelp === true) { 24 | var emailId = "guptamiley3012@gmail.com"; 25 | // email is the best way to reach out to me. 26 | sendEmail(emailId); 27 | } 28 | 29 | ``` 30 | 31 | [![Facebook](https://img.shields.io/static/v1.svg?label=follow&message=@smilegupta.1998&color=9cf&logo=facebook&style=flat&logoColor=white&colorA=informational)](https://www.facebook.com/smilegupta.1998) [![Instagram](https://img.shields.io/static/v1.svg?label=follow&message=@gupta_smile_&color=grey&logo=instagram&style=flat&logoColor=white&colorA=critical)](https://www.instagram.com/gupta_smile_/) [![LinkedIn](https://img.shields.io/static/v1.svg?label=connect&message=@smilegupta&color=9cf&logo=linkedin&style=flat&logoColor=white&colorA=blue)](https://www.linkedin.com/in/smilegupta/) [![Twitter](https://img.shields.io/static/v1.svg?label=connect&message=@gupta_smile_&color=grey&logo=twitter&style=flat&logoColor=white&colorA=critical)](https://twitter.com/gupta_smile_) 32 | 33 | ***Glad to see you here! Show some love by [starring](https://github.com/smilegupta/AnniversaryCard/) this repo.*** 34 | 35 | ----- 36 | 37 | ``` 38 | 39 | if (isAwesome) { 40 | // thanks in advance :p xoxo 41 | starThisRepository(); 42 | } 43 | 44 | ``` 45 | 46 | ****** 47 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lobster'); 2 | @import url('https://fonts.googleapis.com/css?family=Indie+Flower'); 3 | * { 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background: #E5E5E5; 10 | background-image: url("bg.jpg"); 11 | } 12 | 13 | #card-front { 14 | color: #FFDFDF; 15 | z-index: 10; 16 | } 17 | 18 | #card, #card-front, #card-inside { 19 | height: 580px; 20 | } 21 | 22 | .wrap { 23 | padding: 1.5em 2.5em; 24 | height: 100%; 25 | } 26 | 27 | #card-front, #card-inside { 28 | width: 50%; 29 | -webkit-box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.5); 30 | box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.5); 31 | position: absolute; 32 | left: 50%; 33 | } 34 | 35 | #card-inside .wrap { 36 | background: #FFEFEF; 37 | -webkit-box-shadow: inset 2px 0 1px rgba(0, 0, 0, 0.05); 38 | box-shadow: inset 2px 0 1px rgba(0, 0, 0, 0.05); 39 | } 40 | 41 | #card { 42 | width: 960px; 43 | margin: auto; 44 | -webkit-transform-style: preserve-3d; 45 | transform-style: preserve-3d; 46 | -webkit-perspective: 5000px; 47 | perspective: 5000px; 48 | -webkit-transform: translateX(-25%); 49 | transform: translateX(-25%); 50 | -webkit-transition: -webkit-transform 1s ease-in-out; 51 | transition: -webkit-transform 1s ease-in-out; 52 | transition: transform 1s ease-in-out; 53 | transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out; 54 | position: absolute; 55 | top: 0; 56 | bottom: 0; 57 | right: 0; 58 | left: 0; 59 | } 60 | 61 | #card h1 { 62 | text-align: center; 63 | font-family: 'Lobster', cursive; 64 | font-style: italic; 65 | font-size: 70px; 66 | text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15), 1px 1px 0 #ffc8c8, 2px 2px 0 #ff9696, 3px 3px 0 #ff7d7d; 67 | color: #FFF; 68 | } 69 | 70 | #card-inside { 71 | font-size: 1.3em; 72 | line-height: 1.4; 73 | font-family: 'Lobster'; 74 | color: #331717; 75 | font-style: italic; 76 | } 77 | 78 | p { 79 | margin-top: 1em; 80 | } 81 | 82 | p:first-child { 83 | margin-top: 0; 84 | } 85 | 86 | p.signed { 87 | margin-top: 1em; 88 | text-align: center; 89 | font-family: 'Indie Flower', cursive; 90 | font-weight: bold; 91 | font-size: 0.75em; 92 | } 93 | 94 | #card-front { 95 | background-color: #ee9ca7; 96 | background-image: -webkit-gradient(linear, left top, left bottom, from(#FF5555), to(#FF7777)); 97 | background-image: linear-gradient(top, #FF5555 0%, #FF7777 100%); 98 | -webkit-transform-origin: left; 99 | transform-origin: left; 100 | -webkit-transition: -webkit-transform 1s linear; 101 | transition: -webkit-transform 1s linear; 102 | transition: transform 1s linear; 103 | transition: transform 1s linear, -webkit-transform 1s linear; 104 | position: relative; 105 | -webkit-transform-style: preserve-3d; 106 | transform-style: preserve-3d; 107 | -webkit-perspective: 5000px; 108 | perspective: 5000px; 109 | } 110 | 111 | #card-front:before { 112 | position: absolute; 113 | top: 0; 114 | bottom: 0; 115 | left: 0; 116 | right: 0; 117 | display: block; 118 | background-color: #444; 119 | -webkit-transform: translateZ(-1px); 120 | transform: translateZ(-1px); 121 | } 122 | 123 | #card-front .wrap { 124 | -webkit-transition: background 1s linear; 125 | transition: background 1s linear; 126 | -webkit-backface-visibility: hidden; 127 | backface-visibility: hidden; 128 | } 129 | 130 | #card-front button { 131 | position: absolute; 132 | bottom: 1em; 133 | right: -12px; 134 | background: #F44; 135 | color: #FFF; 136 | font-family: 'Lobster', cursive; 137 | font-style: italic; 138 | font-weight: bold; 139 | font-size: 1.5em; 140 | padding: .5em; 141 | border: none; 142 | cursor: pointer; 143 | -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.4); 144 | box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.4); 145 | } 146 | 147 | #card-front button:hover, 148 | #card-front button:focus { 149 | background: #F22; 150 | } 151 | 152 | #close { 153 | display: none; 154 | } 155 | 156 | #card.open-fully { 157 | -webkit-transform: translateX(0%); 158 | transform: translateX(0%); 159 | } 160 | 161 | #card.open-fully #close, 162 | #card-open-half #close { 163 | display: inline; 164 | } 165 | 166 | #card.open-fully #open { 167 | display: none; 168 | } 169 | 170 | #card.open-half #card-front, 171 | #card.close-half #card-front { 172 | -webkit-transform: rotateY(-90deg); 173 | transform: rotateY(-90deg); 174 | } 175 | 176 | #card.open-half .shadow { 177 | background-color: rgba(0, 0, 0, 0.5); 178 | } 179 | 180 | #card.open-fully #card-front, 181 | #card.close-half #card-front { 182 | background: #FFEFEF; 183 | } 184 | 185 | #card.open-fully #card-front { 186 | -webkit-transform: rotateY(-180deg); 187 | transform: rotateY(-180deg); 188 | } 189 | 190 | #card.open-fully .shadow { 191 | background-color: rgba(0, 0, 0, 0); 192 | } 193 | 194 | footer { 195 | max-width: 500px; 196 | margin: 40px auto; 197 | font-family: 'Lobster', cursive; 198 | font-size: 14px; 199 | line-height: 1.6; 200 | color: #888; 201 | text-align: center; 202 | } 203 | 204 | .cake_and_velas { 205 | position: absolute; 206 | bottom: 25%; 207 | left: 0; 208 | right: 0; 209 | overflow: hidden; 210 | } 211 | 212 | #cake { 213 | display: block; 214 | position: relative; 215 | margin: -10em auto 0 auto; 216 | } 217 | 218 | .velas { 219 | background: #ffffff; 220 | border-radius: 10px; 221 | position: absolute; 222 | top: 228px; 223 | left: 50%; 224 | margin-left: -2.4px; 225 | margin-top: -8.33333333px; 226 | width: 5px; 227 | height: 35px; 228 | -webkit-transform: translateY(-300px); 229 | transform: translateY(-300px); 230 | -webkit-backface-visibility: hidden; 231 | backface-visibility: hidden; 232 | -webkit-animation: in 500ms 5s ease-out forwards; 233 | animation: in 500ms 5s ease-out forwards; 234 | } 235 | 236 | .velas:after, 237 | .velas:before { 238 | background: rgba(255, 0, 0, 0.4); 239 | content: ""; 240 | position: absolute; 241 | width: 100%; 242 | height: 2.22222222px; 243 | } 244 | 245 | .velas:after { 246 | top: 25%; 247 | left: 0; 248 | } 249 | 250 | .velas:before { 251 | top: 45%; 252 | left: 0; 253 | } 254 | 255 | /* ============================================== Fire 256 | */ 257 | .fuego { 258 | border-radius: 100%; 259 | position: absolute; 260 | top: -20px; 261 | left: 50%; 262 | margin-left: -2.6px; 263 | width: 6.66666667px; 264 | height: 18px; 265 | } 266 | 267 | .fuego:nth-child(1) { 268 | -webkit-animation: fuego 2s 5.5s infinite; 269 | animation: fuego 2s 5.5s infinite; 270 | } 271 | 272 | .fuego:nth-child(2) { 273 | -webkit-animation: fuego 1.5s 5.5s infinite; 274 | animation: fuego 1.5s 5.5s infinite; 275 | } 276 | 277 | .fuego:nth-child(3) { 278 | -webkit-animation: fuego 1s 5.5s infinite; 279 | animation: fuego 1s 5.5s infinite; 280 | } 281 | 282 | .fuego:nth-child(4) { 283 | -webkit-animation: fuego 0.5s 5.5s infinite; 284 | animation: fuego 0.5s 5.5s infinite; 285 | } 286 | 287 | .fuego:nth-child(5) { 288 | -webkit-animation: fuego 0.2s 5.5s infinite; 289 | animation: fuego 0.2s 5.5s infinite; 290 | } 291 | 292 | /* ============================================== Animation Fire 293 | */ 294 | @-webkit-keyframes fuego { 295 | 0%, 100% { 296 | background: rgba(254, 248, 97, 0.5); 297 | -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); 298 | box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); 299 | -webkit-transform: translateY(0) scale(1); 300 | transform: translateY(0) scale(1); 301 | } 302 | 50% { 303 | background: rgba(255, 50, 0, 0.1); 304 | -webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); 305 | box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); 306 | -webkit-transform: translateY(-20px) scale(0); 307 | transform: translateY(-20px) scale(0); 308 | } 309 | } 310 | @keyframes fuego { 311 | 0%, 100% { 312 | background: rgba(254, 248, 97, 0.5); 313 | -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); 314 | box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); 315 | -webkit-transform: translateY(0) scale(1); 316 | transform: translateY(0) scale(1); 317 | } 318 | 50% { 319 | background: rgba(255, 50, 0, 0.1); 320 | -webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); 321 | box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); 322 | -webkit-transform: translateY(-20px) scale(0); 323 | transform: translateY(-20px) scale(0); 324 | } 325 | } 326 | @-webkit-keyframes in { 327 | to { 328 | -webkit-transform: translateY(0); 329 | transform: translateY(0); 330 | } 331 | } 332 | @keyframes in { 333 | to { 334 | -webkit-transform: translateY(0); 335 | transform: translateY(0); 336 | } 337 | } 338 | .text { 339 | color: #8b6a60; 340 | font-family: 'Lobster', cursive; 341 | font-weight: 300; 342 | font-style: italic; 343 | text-align: center; 344 | } 345 | .text h1 { 346 | font-size: 1.4em; 347 | } 348 | 349 | .card-front_inside { 350 | position: absolute; 351 | top: 0; 352 | bottom: 0; 353 | left: 0; 354 | right: 0; 355 | height: 70%; 356 | width: 80%; 357 | margin: auto; 358 | -webkit-backface-visibility: hidden; 359 | backface-visibility: hidden; 360 | -webkit-transform: translateZ(-1px) rotateY(180deg); 361 | transform: translateZ(-1px) rotateY(180deg); 362 | background-color: #ffefef; 363 | } 364 | 365 | .shadow { 366 | position: absolute; 367 | top: 0; 368 | bottom: 0; 369 | left: 0; 370 | right: 0; 371 | -webkit-backface-visibility: hidden; 372 | backface-visibility: hidden; 373 | -webkit-transform: translateZ(-2px) rotateY(180deg); 374 | transform: translateZ(-2px) rotateY(180deg); 375 | pointer-events: none; 376 | -webkit-transition: background 1s linear; 377 | transition: background 1s linear; 378 | } 379 | 380 | .polaroid { 381 | width: 240x; 382 | height: 220px; 383 | position: absolute; 384 | float: left; 385 | background: #1e1c18; 386 | border: 7px solid #f5f5f5; 387 | border-bottom: 50px solid #f5f5f5; 388 | -webkit-box-shadow: 0 0 6px -1px #000; 389 | box-shadow: 0 0 6px -1px #000; 390 | overflow: hidden; 391 | left: 0; 392 | right: 0; 393 | margin: auto; 394 | -webkit-transform: rotate(-5deg); 395 | transform: rotate(-5deg); 396 | clear: both; 397 | -webkit-backface-visibility: hidden; 398 | backface-visibility: hidden; 399 | } 400 | .polaroid img, 401 | .polaroid .img { 402 | width: 100%; 403 | height: 100%; 404 | -webkit-backface-visibility: hidden; 405 | backface-visibility: hidden; 406 | background-position: center; 407 | background-size: cover; 408 | -webkit-animation: fade-in 20s ease-in; 409 | animation: fade-in 20s ease-in; 410 | -webkit-animation-iteration-count: 1; 411 | animation-iteration-count: 1; 412 | } 413 | 414 | .wishesFont{ 415 | font-family: 'Indie Flower', cursive; 416 | font-weight: 800; 417 | } 418 | 419 | @-webkit-keyframes fade-in { 420 | from { 421 | opacity: 0; 422 | } 423 | to { 424 | opacity: 1; 425 | } 426 | } 427 | 428 | @keyframes fade-in { 429 | from { 430 | opacity: 0; 431 | } 432 | to { 433 | opacity: 1; 434 | } 435 | } 436 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Happy WedLocks Day 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |

A smart child, a lovely house, two lucky vocations and an amazing family – life appears to have given you both the ideal anniversary blessing. Happy WedLocks Day!  

31 |

It’s time to celebrate this wonderful milestone in your life. Another year of challenges overcome, and a new year to make new memories together. 32 |
33 |

Just wanna say you Something

34 | Aap dono ki jodi kabhi na tute. Khuda kare aap ek dusre se kabhi na ruthe Yuni ek hokar aap ye zindagi bitayein, ki Aap dono se khushyion ke ek pal bhi na chute. 35 |

36 |
37 |

With Best Wishes 38 |
Smile Gupta 39 |

40 | 41 |
42 |
43 |
44 |
45 |

Happy Anniversary

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 | --------------------------------------------------------------------------------