├── file.jpg ├── css ├── bg.jpg └── style.css ├── favicon.ico ├── js └── index.js ├── README.md └── index.html /file.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smilegupta/HappyBirthdayTanayPratap/HEAD/file.jpg -------------------------------------------------------------------------------- /css/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smilegupta/HappyBirthdayTanayPratap/HEAD/css/bg.jpg -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smilegupta/HappyBirthdayTanayPratap/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 | # e-BirthdayCard! - [Coder's way of wishing](https://smilegupta.github.io/HappyBirthdayTanayPratap) 2 | [![Happy Birthday](https://img.shields.io/badge/Happy-Birthday-dodgerblue.svg?style=for-the-badge)](https://github.com/smilegupta/HappyBirthdayTanayPratap/) [![View Demo](https://img.shields.io/badge/View-Demo-teal.svg?style=for-the-badge)]( https://smilegupta.github.io/HappyBirthdayTanayPratap/) 3 | > **99.9% of people just say "Happy Birthday" to each other over Social Networking Sites like [Facebook](https://www.facebook.com/smileguptaaa) and [Twitter](https://twitter.com/smileguptaaa) with the same 14 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/HappyBirthdayTanayPratap/) 6 | 7 | ### Designing a [website](https://smilegupta.github.io/HappyBirthdayTanayPratap/) to celebrate your loved one's day is always a great idea! 8 | 9 | > #### Click [here](https://smilegupta.github.io/HappyBirthdayTanayPratap/) 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=@smileguptaaa&color=9cf&logo=facebook&style=flat&logoColor=white&colorA=informational)](https://www.facebook.com/smileguptaaa) [![Instagram](https://img.shields.io/static/v1.svg?label=follow&message=@smileguptaaa&color=grey&logo=instagram&style=flat&logoColor=white&colorA=critical)](https://www.instagram.com/smileguptaaa/) [![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=@smileguptaaa&color=grey&logo=twitter&style=flat&logoColor=white&colorA=critical)](https://twitter.com/smileguptaaa) 32 | 33 | ***Glad to see you here! Show some love by [starring](https://github.com/smilegupta/HappyBirthdayTanayPratap/) 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 | Happy Birthday Tanay 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |

Wishing you a very Happy Birthday Tanay! May god bless you.

30 |

You might be wondering, who is this girl who had sent me this virtual card! Let me take a moment to introduce myself. I am a techie just like you! I am one of the regular readers of your posts you add on LinkedIn or twitter. 31 |

Though, i never got a chance to meet you in person. But because of GS India Summit 2019. I know you! Being an emminent part of GS I was last year an organiser in the same event. You are my prime source of motivation to do good in tech. Thankyou 😊😊 32 |

33 |
34 |

With Best Wishes 35 |
Smile Gupta 36 |

37 | 38 |
39 |
40 |
41 |
42 |

Happy Birthday

43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | 52 |
53 |
54 | 55 | 56 |
57 |


58 |
59 |
60 |
61 |
62 |
63 |
64 | 65 | 66 | 67 | --------------------------------------------------------------------------------