API tools faq
paste
Advertisement
Guest User

Happy Birthday

a guest
Apr 6th, 2020
3,306
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.69 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Happy Birthday</title>
  5.         <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  6.     </head>
  7.     <body id="clk">
  8.    <audio class="song" loops controls>
  9.    <source src="https://www.8notes.com/school/mp32/piano/happy_birthday.mp3"></audio>
  10.    <script>
  11.    alert("Click Anywhere to enjoy Music");
  12.    $('#clk').click(function(){
  13.         var audio = $('.song')[0];
  14.         try{
  15.         window.navigator.vibrate([200,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); // Vibrate 'SOS' in Morse.
  16.             console.log('vibrate')
  17.         }
  18.         catch(Exception){
  19.             console.log("Vibrate mode is not supported")
  20.         }
  21.         audio.play();        
  22. });
  23.    </script>
  24.    
  25.         <div class="candle">
  26.     <div class="light"></div>
  27.     <div class="light"></div>
  28.     <div class="light"></div>
  29.     <div class="light"></div>
  30.     <div class="light"></div>
  31. </div>
  32. <!--An Open Source Code, but Effects and musics are by @Sami Khan-->
  33. <svg id="cake" version="1.1" x="0px" y="0px" width="200px" height="500px" viewBox="0 0 200 500" enable-background="new 0 0 200 500" xml:space="preserve">
  34.     <path fill="#a88679" d="M173.667-13.94c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
  35.        c44.697,0,96.586,0,147.334,0C177.667-29.942,177.668-13.94,173.667-13.94z">
  36.         <animate id="bizcocho_3" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1" begin="relleno_2.end" dur="1.6s" fill="freeze" values="
  37.                          M173.667-13.94c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
  38.        c44.697,0,96.586,0,147.334,0C177.667-29.942,177.668-13.94,173.667-13.94z
  39.                          ;
  40.                          M173.667,411.567c-47.995,12.408-102.955,12.561-147.334,0
  41.        c-3.848-1.089-0.189-16.089,3.661-15.002c44.836,12.66,90.519,12.753,139.427,0.07
  42.        C173.293,395.631,177.541,410.566,173.667,411.567z
  43.                          ;
  44.                          M173.667,427.569c-49.795,0-101.101,0-147.334,0c-3.999,0-4-16.002,0-16.002
  45.        c46.385,0,97.539,0,147.334,0C177.668,411.567,177.667,427.569,173.667,427.569z
  46.                          " /></path>
  47.         <path fill="#8b6a60" d="M100-178.521c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
  48.        c0,19.144,0,57.431,0,76.574c0,10.152,0,40.607,0,40.607c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364c0,0,0-30.455,0-40.607c0-19.144,0-57.432,0-76.575c0-11.057,0-44.226,0-44.226C96.636-177.015,98.142-178.521,100-178.521
  49.        L100-178.521z">
  50.         <animate id="relleno_2" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 0.58 1" begin="bizcocho_2.end" dur="1s" fill="freeze" values="
  51.                          M100-178.521c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
  52.        c0,19.144,0,57.431,0,76.574c0,10.152,0,40.607,0,40.607c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364c0,0,0-30.455,0-40.607c0-19.144,0-57.432,0-76.575c0-11.057,0-44.226,0-44.226C96.636-177.015,98.142-178.521,100-178.521
  53.        L100-178.521z
  54.                          ;
  55.                          M100,267.257c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
  56.        c0,19.143,0,57.43,0,76.574c0,10.151,0,40.606,0,40.606c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364
  57.        c0,0,0-30.455,0-40.606c0-19.145,0-57.432,0-76.576c0-11.057,0-44.225,0-44.225C96.636,268.763,98.142,267.257,100,267.257
  58.        L100,267.257z
  59.                          ;
  60.                          M93.928,405.433c-0.655,6.444-0.102,9.067,2.957,11.798c0,0,8.083,5.571,16.828,3.503
  61.        c18.629-4.406,43.813,6.194,50.792,7.791c14.75,3.375,9.162,6.867,9.162,6.867c-2.412,2.258-58.328,0-73.667,0l0,0
  62.        c-1.858,0-69.995,2.133-73.667,0c0,0-3.337-2.439,6.172-5.992c11.375-4.25,52.875,8.822,47.139-9.442
  63.        c-6.333-20.167,5.226-21.514,5.226-21.514c3.435-0.915,12.78-6.663,10.923-0.546L93.928,405.433z
  64.                          ;
  65.                          M102.242,427.569c5.348,0,14.079,0,17.462,0c0,0,17.026,0,27.504,0
  66.        c19.143,0,20.39-3.797,26.459,0c3,1.877,0,7.823,0,7.823c-2.412,2.258-58.328,0-73.667,0l0,0c-1.858,0-67.187,0-73.667,0
  67.        c0,0-4.125-4.983,0-7.823c5.201-3.58,16.085,0,23.725,0c8.841,0,20.762,0,20.762,0c3.686,0,8.597,0,19.511,0H102.242z
  68.                          " />
  69.     </path>
  70.                      
  71.       <path fill="#a88679" d="M173.667-15.929c-46.512,0-105.486,0-147.334,0c-3.999,0-4-16.002,0-16.002
  72.        c43.566,0,97.96,0,147.334,0C177.667-31.931,177.666-15.929,173.667-15.929z">
  73.         <animate id="bizcocho_2" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0.25 0 0.58 1" begin="relleno_1.end" dur="1.6s" fill="freeze" values="
  74.                          M173.667-15.929c-46.512,0-105.486,0-147.334,0c-3.999,0-4-16.002,0-16.002
  75.        c43.566,0,97.96,0,147.334,0C177.667-31.931,177.666-15.929,173.667-15.929z
  76.                          ;
  77.                          M173.434,445.393c-47.269,8.001-105.245,8.001-147.334,0c-3.929-0.747-0.692-16.543,3.243-15.824
  78.        c43.828,8.001,92.165,8.001,140.739,0C174.029,428.918,177.377,444.726,173.434,445.393z
  79.                          ;
  80.                          M173.667,449.514c-47.576-5.454-102.799-5.744-147.333,0c-3.966,0.512-3.938-15.297,0-16.002
  81.        c43.683-7.823,97.646-8.026,147.333,0C177.616,434.15,177.642,449.969,173.667,449.514z
  82.                          ;
  83.                          M173.667,451.394c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
  84.        c44.697,0,96.586,0,147.334,0C177.667,435.392,177.668,451.394,173.667,451.394z
  85.                          " />
  86.     </path>
  87.     <path fill="#8b6a60" d="M101.368-73.685c0,12.164,0,15.18,0,28.519c0,22.702,0-13.661,0,8.304c0,14.48,0,18.233,0,30.512
  88.        c0,1.753-2.958,1.847-2.958,0c0-12.68,0-16.277,0-30.401c0-21.983,0,11.66,0-8.305c0-13.027,0-15.992,0-28.628
  89.        C98.411-75.883,101.368-75.592,101.368-73.685z">
  90.  
  91.          <animate id="relleno_1" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 0.6 1" begin="bizcocho_1.end" dur="1.6s" fill="freeze" values="
  92.                          M101.368-73.685c0,12.164,0,15.18,0,28.519c0,22.702,0-13.661,0,8.304c0,14.48,0,18.233,0,30.512
  93.        c0,1.753-2.958,1.847-2.958,0c0-12.68,0-16.277,0-30.401c0-21.983,0,11.66,0-8.305c0-13.027,0-15.992,0-28.628
  94.        C98.411-75.883,101.368-75.592,101.368-73.685z
  95.                          ;
  96.                          M101.368,350.885c0,12.164,0,65.18,0,78.518c0,22.703,0-33.66,0-11.695c0,14.48,0,28.232,0,40.512
  97.        c0,1.753-2.958,1.847-2.958,0c0-12.68,0-26.277,0-40.402c0-21.982,0,31.66,0,11.695c0-13.027,0-65.992,0-78.627
  98.        C98.411,348.686,101.368,348.977,101.368,350.885z
  99.                          ;
  100.                          M128.38,447.567c37.626,6.312,39.303,13.658,26.833,12.833c-22.653-1.499-13.636-0.831-23.302-0.831
  101.        c-14.48,0-17.884,0-30.163,0c-2.087,0-2.068,0-3.915,0c-13.333,0-8.963,0-23.088,0c-11.668,0-14.062,5.995-27.532,1.164
  102.        c-12.629-4.529,38.667-3.167,46.833-17.333C100.077,432.94,105.546,443.736,128.38,447.567z
  103.                          ;
  104.                          M173.667,451.394c2.875,0,2.997,9.257,0,9.131c-22.662-0.956-32.09-0.956-41.756-0.956
  105.        c-14.48,0-17.884,0-30.163,0c-2.087,0-2.068,0-3.915,0c-13.333,0-8.963,0-23.088,0c-11.668,0-34.99-0.294-48.412,1.831
  106.        c-4.109,0.65-3.01-10.006,0-10.006C37.129,451.394,149.379,451.394,173.667,451.394z
  107.                          " />
  108.     </path>
  109.       <path fill="#a88679" d="M173.667,21.571c-33.174,0-111.467,0-147.334,0c-4,0-4-16.002,0-16.002c39.836,0,105.982,0,147.334,0
  110.        C177.668,5.569,177.667,21.571,173.667,21.571z">
  111.         <animate id="bizcocho_1" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 1 1; 0.25 0 1 1; 0 0 1 1; 0.25 0 0.6 1" begin="0.2s" dur="1.6s" fill="freeze" values="
  112.                          M173.667,21.571c-33.174,0-111.467,0-147.334,0c-4,0-4-16.002,0-16.002c39.836,0,105.982,0,147.334,0
  113.        C177.668,5.569,177.667,21.571,173.667,21.571z
  114.                          ;
  115.                          M173.667,459.569c-33.197,16.002-110.782,16.002-147.334,0c-3.664-1.604,1.614-15.617,5.337-14.153
  116.        c40.702,16.002,94.289,16.104,136.505,0.103C171.917,444.1,177.271,457.832,173.667,459.569z
  117.                          ;
  118.                          M171.817,475.571c-39.361-3.001-105.438-2.571-143.556,0c-3.991,0.27-7.377-14.736-3.387-15.014
  119.        c41.553-2.888,104.421-3.121,150.51-0.233C179.378,460.574,175.806,475.875,171.817,475.571z
  120.                          ;
  121.                          M171.817,459.564c-38.8-12.188-104.504-13.762-143.556,0c-3.772,1.329-7.961-12.604-4.178-13.905
  122.        c40.864-14.064,105.114-15.52,151.918-0.973C179.822,445.874,175.634,460.762,171.817,459.564z
  123.                          ;
  124.                          M173.667,475.571c-46.376-5.005-105.924-4.003-147.334,0c-3.981,0.385-3.479-15.421,0.479-16.002
  125.        c43.087-6.327,97.705-7.083,146.855,0.438C177.621,460.613,177.644,476,173.667,475.571z
  126.                          ;
  127.                          M173.667,474.117c-46.376,1.866-105.638,2.01-147.334,0c-3.995-0.192-3.52-16.144,0.479-16.002
  128.        c43.794,1.55,96.341,1.541,145.723,0C176.532,457.99,177.663,473.956,173.667,474.117z
  129.                          ;
  130.                          M173.667,475.571c-46.512,0-105.486,0-147.334,0c-3.999,0-4-16.002,0-16.002c43.566,0,97.96,0,147.334,0
  131.        C177.667,459.569,177.666,475.571,173.667,475.571z
  132.                          " />
  133.     </path>
  134.        <path fill="#fefae9" d="M104.812,113.216c0,3.119-2.164,5.67-4.812,5.67c-2.646,0-4.812-2.551-4.812-5.67c0-5.594,0-16.782,0-22.375
  135.    c0-5.143,0-15.427,0-20.568c0-7.333,0-21.998,0-29.33c0-5.523,0-16.569,0-22.092c0-3.295,0-9.885,0-13.181
  136.    C95.188,2.551,97.353,0,100,0c2.648,0,4.812,2.551,4.812,5.669c0,3.248,0,9.743,0,12.991c0,5.428,0,16.284,0,21.711
  137.    c0,7.618,0,22.854,0,30.472c0,4.952,0,14.854,0,19.807C104.812,96.292,104.812,107.576,104.812,113.216z">
  138.         <animate id="crema" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 1 1; 0.25 0 1 1; 0 0 1 1; 0 0 0.58 1" begin="bizcocho_3.end" dur="3s" fill="freeze" values="
  139.                          M104.812,113.216c0,3.119-2.164,5.67-4.812,5.67c-2.646,0-4.812-2.551-4.812-5.67c0-5.594,0-16.782,0-22.375
  140.    c0-5.143,0-15.427,0-20.568c0-7.333,0-21.998,0-29.33c0-5.523,0-16.569,0-22.092c0-3.295,0-9.885,0-13.181
  141.    C95.188,2.551,97.353,0,100,0c2.648,0,4.812,2.551,4.812,5.669c0,3.248,0,9.743,0,12.991c0,5.428,0,16.284,0,21.711
  142.    c0,7.618,0,22.854,0,30.472c0,4.952,0,14.854,0,19.807C104.812,96.292,104.812,107.576,104.812,113.216z
  143.                          ;
  144.                          M104.812,405.897c0,3.119-2.164,5.67-4.812,5.67c-2.646,0-4.812-2.551-4.812-5.67c0-5.594,0-16.782,0-22.376
  145.    c0-5.143,0-15.426,0-20.568c0-7.332,0-21.997,0-29.33c0-5.522,0-16.568,0-22.092c0-3.295,0-9.885,0-13.181
  146.    c0-3.118,2.165-5.669,4.812-5.669c2.648,0,4.812,2.551,4.812,5.669c0,3.247,0,9.743,0,12.991c0,5.428,0,16.283,0,21.711
  147.    c0,7.618,0,22.854,0,30.473c0,4.951,0,14.854,0,19.807C104.812,388.972,104.812,400.256,104.812,405.897z
  148.                          ;
  149.                          M111.873,411.567c-3.119,0-9.226,0-11.874,0c-2.646,0-7.748,0-10.867,0c-7.086,0-12.698,0-18.292,0
  150.    c-6.592,0-12.871,7.371-19.166,3.008c-10.043-6.961-7.776-10.169,2.991-17.745c12.61-8.873,27.713,1.994,25.919-7.531
  151.    c-2.589-13.742,11.008-14.513,11.365-17.789c0.441-4.051,4.235-11.107,8.051-8.175c3.113,2.393,1.007,8.008,0,13.159
  152.    c-1.871,9.569,8.058,2.113,9.494,14.155c2.592,21.732,21.184-0.675,29.309,7.976c5.216,5.553,18.413,5.552,15.426,12.942
  153.    c-3.131,7.745-15.825-4.369-23.8,2.903C126.261,418.271,118.301,411.567,111.873,411.567z
  154.                          ;
  155.                          M111.873,411.567c-3.119,0-9.226,0-11.874,0c-2.646,0-9.734,4.069-12.853,4.069
  156.    c-7.086,0-10.712-4.069-16.306-4.069c-6.592,0-12.12,6.013-19.166,3.008c-7.053-3.008-7.458,2.026-18.659,1.165
  157.    c-6.832-0.525-7.522-3.034-7.533-6.265c-0.037-10.336,22.073-2.452,36.613-2.628c10.234-0.124,19.856-1.439,37.905-2.102
  158.    c16.642-0.61,32.699,1.552,46.009,1.927c12.438,0.351,29.663-8.99,31.532,3.315c0.773,5.093-5.605,3.342-11.211,9.579
  159.    c-5.093,5.667-7.59-4.605-12.965-3.832c-8.269,1.189-14.962-8.537-22.937-1.265C126.261,418.271,118.301,411.567,111.873,411.567z
  160.                          ;
  161.                          M110.946,413.652c-2.904-1.137-8.405-2.748-12.446-0.97c-6.099,2.685-7.273,10.358-13.253,8.242
  162.    c-7.843-2.775-8.953-5.008-14.546-5.01c-24.653-0.011-4.849,26.507-18.264,26.507c-12.377,0,5.791-33.537-19.422-26.682
  163.    c-7.703,2.095-9.806-0.942-9.817-4.173c-0.037-10.336,24.357-4.544,38.897-4.72c10.234-0.124,19.856-1.439,37.905-2.102
  164.    c16.642-0.61,32.699,1.552,46.009,1.927c12.438,0.351,28.973-8.865,31.532,3.315c1.449,6.896,0.318,15.624-3.874,15.624
  165.    c-7.619,0-1.788-15.192-19.243-7.111c-7.581,3.51-15.963-9.738-26.669,1.066C120.644,426.744,118.381,416.561,110.946,413.652z
  166.                          ;
  167.    M111.547,413.9c-2.969-0.956-8.775-0.949-13.167-0.5c-14.667,1.5-8.325,16.508-14.667,16.666
  168.    c-6.667,0.166-0.167-13.5-13.013-14.151c-30.471-1.545-5.572,46.651-18.987,46.651c-12.377,0,10.333-50.166-18.667-44.5
  169.    c-7.835,1.531-9.537-1.417-9.548-4.647c-0.037-10.336,23.675-5.177,38.215-5.353c10.234-0.124,20.618-1.671,38.667-2.333
  170.    c16.642-0.61,32.023,1.458,45.333,1.833c12.438,0.351,33.819-8.431,33.199,4.001c-0.532,10.666,0.414,26.166-5.245,25.833
  171.    c-7.606-0.447-2.954-31.5-19.243-18.899c-7.985,6.177-17.658-5.969-27.377,5.732C118.88,434.066,121.38,417.067,111.547,413.9z
  172.                          ;
  173.                          M111.547,415.233c-6.667-0.834-9.667,4.667-13.833,3.333c-19.649-6.291-8.158,22.176-14.5,22.334
  174.    c-6.667,0.166,2.833-18-13.333-22.167c-29.544-7.615-9.667,43.833-20.167,43.833c-10.333,0,8.004-55.006-16.833-39
  175.    c-7.5,4.833-9.508-3.78-9.299-7.004c0.799-12.329,23.592-7.153,38.132-7.329c10.234-0.124,20.238-1.505,38.287-2.167
  176.    c16.642-0.61,32.903,1.125,46.213,1.5c12.438,0.351,35.058-5.579,31.863,6.451c-5.532,20.833,1.25,28.216-4.409,27.883
  177.    c-7.606-0.447-6.058-37.895-20.62-23.333c-10.167,10.166-15.972-0.747-25,12C119.547,443.568,121.798,416.515,111.547,415.233z
  178.                          " />
  179.     </path>
  180.     <rect x="10" y="475.571" fill="#fefae9" width="180" height="5" />
  181. </svg>
  182. <div class="text">
  183.   <h1>Happy Birthday!</h1>
  184.  <p><a href="https://www.sololearn.com/Profile/10764542/?ref=app">🔔 Noor ❤  🎉</a>
  185. </p>
  186. </div>  
  187.  
  188.  
  189. <style>
  190.  @import url(https://fonts.googleapis.com/css?family=Lato:300italic);
  191.  
  192. html,
  193. body {
  194.   width: 100%;
  195.   height: 100%;
  196. }
  197.  
  198. body {
  199.    background: -webkit-radial-gradient(#42f4b0, #1fbedd);
  200.    -moz-radial-gradient:(#42f4b0, #1fbedd);
  201.   /*background: ; #ee9ca7*/
  202. }
  203.  
  204. #cake {
  205.   display: block;
  206.   position: relative;
  207.   margin: -10em auto 0 auto;
  208. }
  209.  
  210. audio{
  211.    display:none;
  212. }
  213. /* ============================================== Candle
  214. */
  215.  
  216. .candle {
  217.   background: #ffffff;
  218.   border-radius: 10px;
  219.   position: absolute;
  220.   top: 180px;
  221.   left: 52%;
  222.   margin-left: -2.4px;
  223.   margin-top: -8.33333333px;
  224.   width: 5px;
  225.   height: 35px;
  226.   transform: translateY(-300px);
  227.   backface-visibility: hidden;
  228.   animation: in 800ms 11s ease-out forwards;
  229. }
  230.  
  231. .candle:after,
  232. .candle:before {
  233.   background: rgba(255, 0, 0, 0.4);
  234.   content: "";
  235.   position: absolute;
  236.   width: 100%;
  237.   height: 2.22222222px;
  238. }
  239. .candle:after {
  240.  top: 25%;
  241.   left: 0;
  242. }
  243. .candle:before {
  244.   top: 49%;
  245.   left: 0;
  246. }
  247.  
  248. /* ============================================== Light
  249. */
  250.  
  251. .light {
  252.   border-radius: 100%;
  253.   position: absolute;
  254.   top: -20px;
  255.   left: 50%;
  256.   margin-left: -2.6px;
  257.   width: 6.66666667px;
  258.   height: 18px;
  259. }
  260. .light:nth-child(1) {
  261.   animation: lightGlow 2s 6.5s infinite;
  262. }
  263. .light:nth-child(2) {
  264.   animation: lightGlow 1.5s 6.5s infinite;
  265. }
  266. .light:nth-child(3) {
  267.   animation: lightGlow 1s 6.5s infinite;
  268. }
  269. .light:nth-child(4) {
  270.   animation: lightGlow 0.5s 6.5s infinite;
  271. }
  272. .light:nth-child(5) {
  273.   animation: lightGlow 0.2s 6.5s infinite;
  274. }
  275.  
  276. /* ============================================== Animation Light
  277. */
  278.  
  279. @keyframes lightGlow {
  280.   0%, 100% {
  281.     background: rgba(254, 248, 97, 0.5);
  282.     box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
  283.     transform: translateY(0) scale(1);
  284.   }
  285.   50% {
  286.     background: rgba(255, 50, 0, 0.1);
  287.     box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
  288.     transform: translateY(-20px) scale(0);
  289.   }
  290. }
  291.  
  292. @keyframes in {
  293.   to {
  294.     transform: translateY(0);
  295.   }
  296. }
  297.  
  298. .text {
  299.   color: #fff;
  300.   font-family: 'Lato', sans-serif;
  301.   font-weight: 300;
  302.   font-style:italic;
  303.   text-align: center;
  304.   h1{  font-size: 1.4em;}    
  305.   }
  306.  
  307. a{
  308.     outline:none;
  309.    text-decoration:none;
  310.    color:#ffd;
  311.    animation: blinker 1.4s linear infinite;
  312. }
  313.  
  314. @keyframes blinker {  
  315.   50% { opacity: 0; }
  316. }
  317. </style>
  318. </body>
  319. </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!