Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
   
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
​
  <meta charset="utf-8">
  <title>Letter Mania</title>
</head>
<body>
  <img id="background" src="http://www.unibia.com/unibia/download/wallpapers/clouds.bmp"/>
  <div id="letterA"> <span id="expand">A </span> </div>
  <div id="letterB"> <span id="expand1"> B</span> </div>
  <div id="letterC"> <span id="expand2">C </span></div>
  <div id="letterD"> <span id="expand3"> D </span> </div>
  <div id="letterE"> <span id="expand4"> E </span> </div>
  <div id="letterF"> <span id="expand5"> F </span> </div>
  <div id="letterG"> <span id="expand6"> G </span> </div>
  <div id="letterH"> <span id="expand7"> H</span> </div>
  <div id="letterI"> <span id="expand8"> I</span> </div>
  <div id="letterJ"> <span id="expand9"> J</span> </div>
  <div id="letterK"> <span id="expand10"> K</span> </div>
  <div id="letterL"> <span id="expand11"> L </span> </div>
  <div id="letterM"> <span id="expand12"> M </span> </div>
  <div id="letterN"><span id="expand13"> N</span> </div>
  <div id="letterO"> <span id="expand14"> O </span> </div>
  <div id="letterP"> <span id="expand15"> P </span> </div>
  <div id="letterQ"> <span id="expand16"> Q </span> </div>
  <div id="letterR"> <span id="expand17">R </span> </div>
  <div id="letterS"> <span id="expand18"> S </span> </div>
  <div id="letterT"><span id="expand19"> T </span> </div>
  <div id="letterU"> <span id="expand20"> U </span> </div>
  <div id="letterV"> <span id="expand21"> V </span> </div>
  <div id="letterW"> <span id="expand22"> W </span> </div>
  <div id="letterX"> <span id="expand23"> X </span> </div>
   <div id="letterY"> <span id="expand24"> Y </span> </div>
  <div id="letterZ"> <span id="expand25"> Z </span> </div>
  <div id="name"> Created by <span style="color: red;">Yazid</span>/<span style="color: blue;">Alabaster456</span> </div>
​
    <a id="assign" href="https://github.com/Alabaster456/LetterMania"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"/></a>
</body>
</html>
 
#background {
   width:100%;
    height:100%;
 
  top:0px;
    left:0px;
  position:fixed;
}
#letterA {
  color:red;
  font-family:cursive;
  font-size:120px;
  position:fixed;
}
#letterB {
  color: blue;
  font-family:cursive;
  font-size:120px;
  position:fixed;
  margin-left:100px;
}
#letterC {
  color:green;
  font-family:cursive;
  font-size:120px;
  margin-left:200px;
  position:fixed;
}
#letterD {
  color:purple;
  font-family:cursive;
  font-size:120px;
  margin-left:300px;
  position:fixed;
}
#letterE {
  color:black;
  font-family:cursive;
  font-size:120px;
  margin-left:400px;
  position:fixed;
}
#letterF {
  color:maroon;
  font-family:cursive;
  font-size:120px;
  margin-left:500px;
  position:fixed;
}
#letterG {
  color: yellow;
  font-family:cursive;
  font-size:120px;
  margin-left:600px;
  position:fixed;
}
#letterH {
  color:darkblue;
  font-family:cursive;
  font-size:120px;
  margin-left:700px;
  position:fixed;
}
#letterI {
  color:darkgreen;
  font-family:cursive;
  font-size:120px;
  margin-top:180px;
  position:fixed;
}
#letterJ {
  color:darkyellow;
  font-family:cursive;
  font-size:120px;
  margin-top: 180px;
  margin-left:100px;
  position:fixed;
}
#letterK {
  color:lightgreen;
  font-family:cursive;
  font-size:120px;
  margin-top:180px;
  margin-left:200px;
  position:fixed;
}
#letterL {
  color:darkred;
  font-family:cursive;
  font-size:120px;
  margin-top:180px;
  margin-left:300px;
  position:fixed;
}
#letterM {
  color:darkcyan;
  font-family:cursive;
  font-size:120px;
  margin-top:180px;
  margin-left:400px;
  position:fixed;
}
#letterN {
  color:gray;
  font-family:cursive;
  font-size:120px;
  margin-top:180px;
  margin-left:520px;
  position:fixed;
}
#letterO {
  color:lightgray;
  font-family:cursive;
  font-size:120px;
  margin-top:180px;
  margin-left:620px;
  position:fixed;
}
#letterP {
  color:pink;
  font-family:cursive;
  font-size:120px;
  margin-top:180px;
  margin-left:720px;
  position:fixed;
}
#letterQ {
  color:red;
  font-family:cursive;
  font-size:120px;
  margin-top:180px;
  margin-left:800px;
  position:fixed;
}
#letterR {
  color:blue;
  font-family:cursive;
  font-size:120px;
  margin-top:330px;
  position:fixed;
}
#letterS {
  color: darkgreen;
  font-family:cursive;
  font-size:120px;
  margin-top:330px;
  margin-left:100px;
  position:fixed;
}
#letterT {
  color:pink;
  font-family:cursive;
  font-size:120px;
  margin-top:330px;
  margin-left:200px;
  position:fixed;
}
#letterU {
  color:darkred;
  font-family:cursive;
  font-size:120px;
  margin-top:330px;
  margin-left:300px;
  position:fixed;
}
#letterV {
  color:darkgray;
  font-family:cursive;
    font-size:120px;
  margin-top:330px;
  margin-left:400px;
  position:fixed;
}
#letterW {
  color: darkcyan;
    font-family:cursive;
  font-size:120px;
  margin-top:330px;
  margin-left:500px;
  position:fixed;
}
#letterX {
  color: yellow;
    font-family:cursive;
  font-size:120px;
  margin-top:330px;
  margin-left:650px;
  position:fixed;
}
#letterY {
  color:red;
  font-family:cursive;
  font-size:120px;
  margin-top:330px;
  margin-left:780px;
  position:fixed;
}
#letterZ {
  color:blue;
  font-family:cursive;
  font-size:120px;
  margin-top:330px;
  margin-left:870px;
  position:fixed;
}
#name {
  color:black;
  font-family:cursive;
  margin-top:540px;
  margin-left:600px;
  position:fixed;
}
#press {
  position:absolute;
  margin-top:540px;
  
}
#assign {
  position:fixed;
  margin-left:870px;
  margin-top:-20px;
}
​
 
$(document).ready(function(){
$("#expand").mouseenter(function(){
$("#expand").css("font-size", "150px");
  var letterA = new Audio("http://soundfxcenter.com/human/speech/90a978_Letter_A_Sound_Effect.mp3");
  letterA.play();
​
});
  $("#expand").mouseleave(function(){
$("#expand").css("font-size", "120px");
  });
  $("#expand1").mouseenter(function(){
    $("#expand1").css("font-size", "150px");
 var letterB = new Audio("http://soundfxcenter.com/human/speech/d75dd5_Letter_B_Sound_Effect.mp3");
    letterB.play();
  });
   $("#expand1").mouseleave(function(){
$("#expand1").css("font-size", "120px");
  });
  $("#expand2").mouseenter(function(){
    $("#expand2").css("font-size", "150px");
  
  var letterC = new Audio("http://soundfxcenter.com/human/speech/018b48_Letter_C_Sound_Effect.mp3");
  letterC.play();
  });
   $("#expand2").mouseleave(function(){
$("#expand2").css("font-size", "120px");
  });
  $("#expand3").mouseenter(function(){
  $("#expand3").css("font-size", "150px");
    var letterD = new Audio("http://soundfxcenter.com/human/speech/b5b6fe_Letter_D_Sound_Effect.mp3");
  letterD.play();
  });
    $("#expand3").mouseleave(function(){
$("#expand3").css("font-size", "120px");
  });
  $("#expand4").mouseenter(function(){
 $("#expand4").css("font-size", "150px");
    var letterE = new Audio("http://soundfxcenter.com/human/speech/7f373d_Letter_E_Sound_Effect.mp3");
  letterE.play();
  });
    $("#expand4").mouseleave(function(){
$("#expand4").css("font-size", "120px");
  });
   $("#expand5").mouseenter(function(){
  $("#expand5").css("font-size", "150px");
  var letterF = new Audio("http://soundfxcenter.com/human/speech/93d6ce_Letter_F_Sound_Effect.mp3");
  letterF.play();
   });
     $("#expand5").mouseleave(function(){
$("#expand5").css("font-size", "120px");
  });
  $("#expand6").mouseenter(function(){
     $("#expand6").css("font-size", "150px");
​
  var letterG = new Audio("http://soundfxcenter.com/human/speech/cc32a4_Letter_G_Sound_Effect.mp3");
  letterG.play();
  });
  $("#expand6").mouseleave(function(){
$("#expand6").css("font-size", "120px");
  });
   $("#expand7").mouseenter(function(){
     $("#expand7").css("font-size", "150px");
  var letterH = new Audio("http://soundfxcenter.com/human/speech/f5252c_Letter_H_Sound_Effect.mp3");
  letterH.play();
   });
  $("#expand7").mouseleave(function(){
$("#expand7").css("font-size", "120px");
  });
   $("#expand8").mouseenter(function(){
     $("#expand8").css("font-size", "150px");
  var letterI = new Audio("http://soundfxcenter.com/human/speech/f7b4f6_Letter_I_Sound_Effect.mp3");
  letterI.play();
   });
    $("#expand8").mouseleave(function(){
$("#expand8").css("font-size", "120px");
  });
   $("#expand9").mouseenter(function(){
     $("#expand9").css("font-size", "150px");
  var letterJ = new Audio("http://soundfxcenter.com/video-games/mortal-kombat-4/e7c4b0_Mortal_Kombat_4_Letter_J_Sound_Effect.mp3");
  letterJ.play();
   });
    $("#expand9").mouseleave(function(){
$("#expand9").css("font-size", "120px");
  });
       $("#expand10").mouseenter(function(){
     $("#expand10").css("font-size", "150px");
  var letterK = new Audio("http://soundfxcenter.com/human/speech/d7ec8a_Letter_K_Sound_Effect.mp3");
  letterK.play();
   }); $("#expand10").mouseleave(function(){
$("#expand10").css("font-size", "120px");
  });
  $("#expand11").mouseenter(function(){
     $("#expand11").css("font-size", "150px");
  var letterL = new Audio("http://soundfxcenter.com/video-games/mortal-kombat-4/3c72e0_Mortal_Kombat_4_Letter_L_Sound_Effect.mp3");
  letterL.play();
   }); $("#expand11").mouseleave(function(){
$("#expand11").css("font-size", "120px");
  });
    $("#expand12").mouseenter(function(){
     $("#expand12").css("font-size", "150px");
  var letterM = new Audio("http://soundfxcenter.com/human/speech/7bb1db_Letter_M_Sound_Effect.mp3");
  letterM.play();
   }); $("#expand12").mouseleave(function(){
$("#expand12").css("font-size", "120px");
  });
  $("#expand13").mouseenter(function(){
     $("#expand13").css("font-size", "150px");
  var letterN = new Audio("http://soundfxcenter.com/human/speech/617411_Letter_N_Sound_Effect.mp3");
  letterN.play();
   }); $("#expand13").mouseleave(function(){
$("#expand13").css("font-size", "120px");
  });
    $("#expand14").mouseenter(function(){
     $("#expand14").css("font-size", "150px");
  var letterO = new Audio("http://soundfxcenter.com/human/speech/a72487_Letter_O_Sound_Effect.mp3");
​
  letterO.play();
   }); $("#expand14").mouseleave(function(){
$("#expand14").css("font-size", "120px");
  });
  $("#expand15").mouseenter(function(){
     $("#expand15").css("font-size", "150px");
  var letterP = new Audio("http://soundfxcenter.com/human/speech/b35e61_Letter_P_Sound_Effect.mp3");
​
  letterP.play();
   }); $("#expand15").mouseleave(function(){
$("#expand15").css("font-size", "120px");
  });
   $("#expand16").mouseenter(function(){
     $("#expand16").css("font-size", "150px");
  var letterQ = new Audio("http://soundfxcenter.com/video-games/mortal-kombat-4/57a1cd_Mortal_Kombat_4_Letter_Q_Sound_Effect.mp3");
​
  letterQ.play();
   }); $("#expand16").mouseleave(function(){
$("#expand16").css("font-size", "120px");
  });
     $("#expand17").mouseenter(function(){
     $("#expand17").css("font-size", "150px");
  var letterR = new Audio("http://soundfxcenter.com/human/speech/ba5e2c_Letter_R_Sound_Effect.mp3");
​
  letterR.play();
   }); $("#expand17").mouseleave(function(){
$("#expand17").css("font-size", "120px");
  });
  $("#expand18").mouseenter(function(){
     $("#expand18").css("font-size", "150px");
  var letterS = new Audio("http://soundfxcenter.com/video-games/mortal-kombat-4/748979_Mortal_Kombat_4_Letter_S_Sound_Effect.mp3");
​
  letterS.play();
   }); $("#expand18").mouseleave(function(){
$("#expand18").css("font-size", "120px");
  });
   $("#expand19").mouseenter(function(){
     $("#expand19").css("font-size", "150px");
  var letterT = new Audio("http://soundfxcenter.com/human/speech/6592a9_Letter_T_Sound_Effect.mp3");
​
  letterT.play();
   }); $("#expand19").mouseleave(function(){
$("#expand19").css("font-size", "120px");
  });
    $("#expand20").mouseenter(function(){
     $("#expand20").css("font-size", "150px");
  var letterU = new Audio("http://soundfxcenter.com/video-games/mortal-kombat-4/dd3c23_Mortal_Kombat_4_Letter_U_Sound_Effect.mp3");
​
  letterU.play();
   }); $("#expand20").mouseleave(function(){
$("#expand20").css("font-size", "120px");
  });
  $("#expand21").mouseenter(function(){
     $("#expand21").css("font-size", "150px");
  var letterV = new Audio("http://soundfxcenter.com/video-games/mortal-kombat-4/eaa475_Mortal_Kombat_4_Letter_V_Sound_Effect.mp3");
​
  letterV.play();
   }); $("#expand21").mouseleave(function(){
$("#expand21").css("font-size", "120px");
  });
   $("#expand22").mouseenter(function(){
     $("#expand22").css("font-size", "150px");
  var letterW = new Audio("http://soundfxcenter.com/human/speech/53e5c5_Letter_W_Sound_Effect.mp3");
​
  letterW.play();
   }); $("#expand22").mouseleave(function(){
$("#expand22").css("font-size", "120px");
  });
     $("#expand23").mouseenter(function(){
     $("#expand23").css("font-size", "150px");
  var letterX = new Audio("http://soundfxcenter.com/human/speech/776858_Letter_X_Sound_Effect.mp3");
​
  letterX.play();
   }); $("#expand23").mouseleave(function(){
$("#expand23").css("font-size", "120px");
  });
  $("#expand24").mouseenter(function(){
     $("#expand24").css("font-size", "150px");
  var letterY = new Audio("http://soundfxcenter.com/video-games/mortal-kombat-4/da3ef2_Mortal_Kombat_4_Letter_Y_Sound_Effect.mp3");
​
  letterY.play();
   }); $("#expand24").mouseleave(function(){
$("#expand24").css("font-size", "120px");
  });
   $("#expand25").mouseenter(function(){
     $("#expand25").css("font-size", "150px");
  var letterZ = new Audio("http://soundfxcenter.com/human/speech/152314_Letter_Z_Sound_Effect.mp3");
​
  letterZ.play();
   }); $("#expand25").mouseleave(function(){
$("#expand25").css("font-size", "120px");
  });
  });
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Alabaster456pro
0viewers