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>
        <link href='http://fonts.googleapis.com/css?family=Indie+Flower'     rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="50.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
         $(document).ready(function(){
            $("button").click(function(){
                var div = $("#tgemp");
                startAnimation();
                function startAnimation(){
                div.animate({height: "100%", width: "100%"}, 3000, "swing");
                div.css("background-color", "#99FF66");
        }
        document.getElementById("tt").style.opacity = "1";
        });
        });
        </script>
    </head>
    <div id = "tgemp">
        <p id = "tt"> A walk on the beach</p>
    </div>
    <body>
        <h1>50 States Quiz</h1>
        <div id="firstDiv" align="center"> 
            <h2> Can you name all 50 states? </h2>
            <p id = "timer"> 5:00 </p>
            <button type="button" id = "time" onclick="Begin();"> Begin </button><br/><br/><br/><br/>
​
            <input type="text"  id = "tb" onInput="Verify()" enabled></input><br/><br/><br/>
        </div><br/>
    </body>
    <center><img src="us.png" height = '50%' id = "img"></center>
</html>
 
body{
background-color: #ADD8E6;
background: -webkit-linear-gradient(left, rgba(255,90,90,1),rgba(114,188,212,1));
background: -o-linear-gradient(right, rgba(255,90,90,1),rgba(114,188,212,1));
background: -moz-linear-gradient(right, rgba(255,90,90,1),rgba(114,188,212,1));
background: linear-gradient(to right, rgba(255,90,90,1),rgba(114,188,212,1));
}
​
h1,h2,#timer{
font-family: 'Indie Flower',serif;
text-align: center;
color: white;
font-size: 325%;
}
​
h2,#timer{
font-size: 200%;
}
​
#time {
background: #65a9d7;
border: solid 0px #1e90ff;
border-radius: 50px; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
color: #ffffff;
font-size: 130%;
font-family: 'Indie Flower',serif;
padding: 5px 15px;
}
​
#time:hover {
background: #c42f2f;
}
​
#time:active {
background: #FF9200;
​
border: solid 0px #1e90ff;
border-radius: 50px; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px;
}
​
#time:focus{
outline:0 !important;
}
​
#tb {
background-color: #ADD8E6;
background: -webkit-linear-gradient(right, rgba(255,90,90,1),rgba(114,188,212,1));
background: -o-linear-gradient(left, rgba(255,90,90,1),rgba(114,188,212,1));
background: -moz-linear-gradient(left, rgba(255,90,90,1),rgba(114,188,212,1));
background: linear-gradient(to left, rgba(255,90,90,1),rgba(114,188,212,1));
border:3px solid #FF9200;
border-radius:10px;
height: 30px;
width: 200px;
text-align:center;
font-family: 'Indie Flower',serif;
color: white;
font-size: 125%;
outline:0 !important;
}
​
#tgemp{
font-family: 'Indie Flower',serif;
color: #99FF66;
width:0px;
height:0px;
position:absolute;
left:0px;
top:0px;
background-color:red;
​
}
​
#tt{
font-family: 'Indie Flower',serif;
color: white;
opacity:0;
position:absolute;
font-size: 400%;
text-align: center;
width: 100%;
}
​
#tt:after{
  content: "";
  display: inline-block;
  width: 100%;
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers