API tools faq
paste
Advertisement
VIISeptem

Untitled

VIISeptem
Mar 12th, 2020
148
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.16 KB | None | 0 0
raw download clone embed print report
  1.       <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Name the celebrities</title>
  6.   </head>
  7.   <style>
  8.     h1{
  9.       font-family:;
  10.       font-weight: bold;
  11.       font-size:700%;
  12.       color: white;
  13.       position: absolute;left:32%;top: 40%;
  14.       display:block;
  15.     }
  16.     body{
  17.       background: url(https://roadtovrlive-5ea0.kxcdn.com/wp-content/uploads/2016/08/new-retro-arcade-neon-launch-8.jpg);
  18.       background-size: cover;
  19.       overflow:hidden;
  20.       color:white;
  21.       font-family: monospace;
  22.     }
  23.   #beam{
  24.     width: 50px;
  25.     height: 20px;
  26.     background-color:white;
  27.     animation:  60s;
  28.   }
  29.   #restart{
  30.     display:none;
  31.     color: #DA33FF;
  32.   }
  33.  
  34.   .but{
  35. background-color:inherit;
  36. position: absolute; top:90%;left:87%;
  37. width:17%;
  38. height: 25%;
  39. border-radius:10px;
  40. border: 3px solid white;
  41. font-weight: bolder;
  42. transform: skewX(-15deg);
  43. font-family: 'Poppins', sans-serif;
  44. color:white;
  45. font-size:30px;
  46. opacity: 0.8;
  47. transition: 0.5s;
  48.   }.but:hover{
  49. background-color:black;opacity: 1;text-decoration: underline;
  50.   }
  51.   ul{
  52.     background-color:none;
  53.     position: absolute;left:29%;top:25%;
  54.     width:40%;height:40%;
  55.     display: none;
  56.     border-radius:15px;
  57.  
  58.   }
  59.   img{
  60.     width:483px;
  61.     height:395px;
  62.     border-radius: 40px;
  63.     margin-left:17.55%;
  64.     margin-top:-170px;
  65.   }
  66.  
  67.   h4{
  68.     color:white;
  69.   }
  70.   input{
  71.     color:white;
  72.       width:70%;
  73.       height: 25%;
  74.       background-color: inherit;
  75.       box-shadow: 0px 0px 40px white;
  76.     border:none;
  77.     position: absolute;top:90%;left:15%;
  78.     font-size: 60px;
  79.     font-weight: bolder;
  80.     animation: 2s infinite ;
  81.     animation-name: glow;
  82.     transform: skewX(-15deg);
  83.     border-radius:10px;
  84.   }
  85.   .answer{
  86. font-size: 50px;
  87. position:absolute;left: 40%;top:53%;
  88.  
  89.   }
  90.   .start{
  91.     border:none;
  92.     background-color:innerhit;
  93.     width:0;height:0;
  94.     animation: 2s infinite ;
  95.     animation-name: glow;
  96.  
  97.   }
  98. @keyframes glow {
  99. 0%{text-shadow: 0px 0px 20px #DA33FF;}
  100. 50%{text-shadow: 0px 0px 40px #DA33FF;}
  101. 100%{text-shadow: 0px  0px 20px #DA33FF;}
  102. }
  103. @keyframes glow2 {
  104. 0%{text-shadow: 0px 0px 40px hsla(211, 39%, 85%, 0.589);}
  105. 50%{text-shadow: 0px 0px 60px rgb(63, 119, 223);}
  106. 100%{text-shadow: 0px  0px 40px rgb(63, 119, 223);}
  107. }
  108. .point{
  109.   font-size: 50px;
  110.   position:absolute;left: 50%;top:-70%;
  111. }
  112.   </style>
  113.   <body id="back">
  114.     <div  id='beam'></div>
  115.  
  116.     <button onclick="time()" class="start" id="headline"><h1 id="head">Press to Start</h1></button>
  117.     <button onclick="location.reload()" id="restart"><h1 id="ending">Press to Restart</h1></button>
  118.    <h2 id="end"></h2>
  119.  
  120. <ul id="ab">
  121.  
  122. <h4 id="quest1"></h4>
  123. <p id="points" class="point"></p>
  124. <p id='pic'></p>
  125. <input type="text" id="inp" value="">
  126. <button class="but" onclick="row()" id="sub">Next</button>
  127. <button class="but" style="display: none;" onclick="row2()" id="sub2">Next</button>
  128. <button class="but" style="display: none;" onclick="row3()" id="sub3">Next</button>
  129. <button class="but" style="display: none;" onclick="row4()" id="sub4">Next</button>
  130. <button class="but" style="display: none;" onclick="row5()" id="sub5">Next</button>
  131. <button class="but" style="display: none;" onclick="row6()" id="sub6">Next</button>
  132. <button class="but" style="display: none;" onclick="row7()" id="sub7">Next</button>
  133. <button class="but" style="display: none;" onclick="row8()" id="sub8">Next</button>
  134. <button class="but" style="display: none;" onclick="row9()" id="sub9">Next</button>
  135.  
  136. <p class="answer" id="wor"></p>
  137. </ul>
  138.  
  139.     <script>
  140.      
  141.       function time() {
  142. x = 0;
  143. y = x;
  144.   document.getElementById('points').innerHTML=x;
  145.  
  146.         document.getElementById('headline').style="display:none;";
  147.         document.getElementById('ab').style="display:block;";
  148.         document.getElementById('back').style="background:url(https://wallpaperplay.com/walls/full/1/d/5/168488.jpg);background-size:cover;";
  149.         document.getElementById('pic').innerHTML=quest[0];
  150.               var elem = document.getElementById('beam');
  151.               var width = 0;
  152.               var id = setInterval(frame,70);
  153.               function frame() {
  154.                 if(width == 1920){
  155.                   clearInterval(id);
  156.                    
  157.                   document.getElementById('restart').style="display:block;";
  158.                   document.getElementById('ab').style="display:none;";
  159.                   document.getElementById('back').style="background:url(https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/VGiBmTeaeilt7mgjb/game-over-retro-arcade-digital-blue-basic_4cvh-t7al__F0000.png);background-size:cover;";
  160. document.getElementById('ending').style=" position: absolute;left:35%;top: 60%;font-size:500%;animation: glow2 2s infinite;color:hsla(211, 39%, 85%, 0.589);";
  161.  
  162.                 }else{
  163.                   width++;
  164.                   elem.style.width = width + "px";
  165.                 }
  166.             }
  167.           }
  168.          
  169.             function row() {
  170.  
  171.               var text = document.getElementById('inp').value;
  172.             if (text =="Elvis Presley"){
  173.         document.getElementById('wor').innerHTML="richtig";
  174.         document.getElementById('sub').style="display:none;";
  175.         document.getElementById('sub2').style="display:block";
  176.         document.getElementById('pic').innerHTML=quest[1];
  177.         x = x +1;
  178.         document.getElementById('points').innerHTML=x;
  179.         } else {
  180.         document.getElementById('wor').innerHTML="falsch";
  181.             }
  182.     }
  183.     function row2() {
  184.               var text = document.getElementById('inp').value;
  185.             if (text =="Travis Scott"){
  186.         document.getElementById('wor').innerHTML="richtig";
  187.         document.getElementById('sub2').style="display:none;";
  188.         document.getElementById('sub3').style="display:block";
  189.         document.getElementById('pic').innerHTML=quest[2];
  190.         x = x +1;
  191.         document.getElementById('points').innerHTML=x;
  192.             } else {
  193.         document.getElementById('wor').innerHTML="falsch";
  194.             }
  195.     }
  196.     function row3() {
  197.               var text = document.getElementById('inp').value;
  198.             if (text =="Marshmello"){
  199.         document.getElementById('wor').innerHTML="richtig";
  200.         document.getElementById('sub3').style="display:none;";
  201.         document.getElementById('sub4').style="display:block";
  202.         document.getElementById('pic').innerHTML=quest[3];
  203.         x = x +1;
  204.         document.getElementById('points').innerHTML=x;
  205.             } else {
  206.         document.getElementById('wor').innerHTML="falsch";
  207.             }
  208.     }
  209.     function row4() {
  210.               var text = document.getElementById('inp').value;
  211.             if (text =="Tom Brady"){
  212.         document.getElementById('wor').innerHTML="richtig";
  213.         document.getElementById('sub4').style="display:none;";
  214.         document.getElementById('sub5').style="display:block";
  215.         document.getElementById('pic').innerHTML=quest[4];
  216.         x = x +1;
  217.         document.getElementById('points').innerHTML=x;
  218.             } else {
  219.         document.getElementById('wor').innerHTML="falsch";
  220.             }
  221.     }
  222.     function row5() {
  223.               var text = document.getElementById('inp').value;
  224.             if (text =="Johnny Depp"){
  225.         document.getElementById('wor').innerHTML="richtig";
  226.         document.getElementById('sub5').style="display:none;";
  227.         document.getElementById('sub6').style="display:block";
  228.         document.getElementById('pic').innerHTML=quest[5];
  229.         x = x +1;
  230.         document.getElementById('points').innerHTML=x;
  231.             } else {
  232.         document.getElementById('wor').innerHTML="falsch";
  233.             }
  234.     }
  235.     function row6() {
  236.               var text = document.getElementById('inp').value;
  237.             if (text =="George Clooney"){
  238.         document.getElementById('wor').innerHTML="richtig";
  239.         document.getElementById('sub6').style="display:none;";
  240.         document.getElementById('sub7').style="display:block";
  241.         document.getElementById('pic').innerHTML=quest[6];
  242.         x = x +1;
  243.         document.getElementById('points').innerHTML=x;
  244.             } else {
  245.         document.getElementById('wor').innerHTML="falsch";
  246.             }
  247.     }
  248.     function row7() {
  249.  
  250.               var text = document.getElementById('inp').value;
  251.             if (text =="Zac Efron"){
  252.         document.getElementById('wor').innerHTML="richtig";
  253.         document.getElementById('sub7').style="display:none;";
  254.         document.getElementById('sub8').style="display:block";
  255.         document.getElementById('pic').innerHTML=quest[7];
  256.         x = x +1;
  257.         document.getElementById('points').innerHTML=x;
  258.             } else {
  259.         document.getElementById('wor').innerHTML="falsch";
  260.             }
  261.     }
  262.     function row8() {
  263.  
  264.               var text = document.getElementById('inp').value;
  265.             if (text =="Dwayne Johnson"){
  266.         document.getElementById('wor').innerHTML="richtig";
  267.         document.getElementById('sub8').style="display:none;";
  268.         document.getElementById('sub9').style="display:block";
  269.         document.getElementById('pic').innerHTML=quest[8];
  270.         x = x +1;
  271.         document.getElementById('points').innerHTML=x;
  272.             } else {
  273.         document.getElementById('wor').innerHTML="falsch";
  274.             }
  275.     }
  276.     function row9() {
  277.  
  278. var text = document.getElementById('inp').value;
  279. if (text =="Jimmy Kimmel"){
  280.  
  281.                  
  282.                   document.getElementById('ab').style="display:none;";
  283.                   document.getElementById('back').style="background:url(https://ak7.picdn.net/shutterstock/videos/34233727/thumb/1.jpg);background-size:cover;";
  284.                   document.getElementById('ending').style=" position: absolute;left:35%;top: 60%;font-size:500%;animation: glow2 2s infinite;color:hsla(211, 39%, 85%, 0.589);";
  285. x = x +1;
  286.      
  287. document.getElementById('restart').style="display:block;";
  288. document.getElementById('points').innerHTML=x;
  289. } else {
  290. document.getElementById('wor').innerHTML="falsch";
  291. }
  292. }
  293. var quest =["<img src='http://emmepress.com/wp-content/uploads/2018/04/ELvisPresley_Artista-e1522872529586.jpg'>",
  294.             "<img src='https://www.grammy.com/sites/com/files/styles/image_landscape_hero/public/travisscott-hero.jpg?itok=jY2e8leu'>",
  295.             "<img src='https://wallpapersite.com/images/wallpapers/marshmello-3000x2000-music-producer-dj-hd-3167.jpg'>",
  296.             "<img src='https://cdn-s3.si.com/s3fs-public/2017/02/05/tom-brady-best-super-bowl-performances.jpg'>",
  297.             "<img src='https://www.grazia-magazin.de/sites/default/files/styles/bildstrecke_large/public/media/gallery/2017-06-20/johnnydepp.finanzilleprobleme.jpg'>",
  298.             "<img src='https://fortunedotcom.files.wordpress.com/2018/08/george-clooney-net-worth-tequila.jpg'>",
  299.             "<img src='https://www.miss.at/wp-content/uploads/2018/07/GettyImages-690160138-1024x683.jpg'>",
  300.             "<img src='https://i0.web.de/image/996/32923996,pd=2/dwayne-johnson-the-rock.jpg'>",
  301.             "<img src='https://media.newyorker.com/photos/59c3e4d2c6b56222ba2239ea/master/w_727,c_limit/Crouch-Jimmy-Kimmel-Healthcare-Crusader.jpg'>",
  302.            
  303.             ];
  304.  
  305.  
  306.     </script>
  307.  
  308.   </body>
  309. </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!