Untitled

<!doctype html>
<html>
<head>
<title>Weather-Scraper App</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<style>

    html, body{
        height: 100%;
    }

    .container{
        width: 100%;
        height: 100%;
        background-image:url("imgs/bg_002.gif");
        background-position: center;
        background-size: cover;
        border: 2px solid gray;
    }


    .ext-1{
        width: 100%;
        height: 100%;
        position: absolute;
        top: -1px;
        background-color: rgba(0, 0, 0, .4);
        display: none;
    }

    .form-element{
        padding-top: 20px;
        padding-bottom: 20px;
        color: whitesmoke;
    }

</style>

</head>

<body>

    <div class="container">

        <div class="row">
            <div class="col-md-6 col-md-offset-3" id="head-cont">

                <h1 class="form-element text-center">Check ur local weather</h1>
                <p class="form-element lead text-center">Enter the name of a city and get the weather for it...</p>

                <form>

                    <div class=form-group>
                        <input type="text" class="form-control" name="inputcity" id="userinput" placeholder="e.g. London, Amsterdam, San Francisco...." />
                    </div>

                    <button class="button btn btn-success btn-lg center-block" id="submitBtn" >Check it out!!!</button>

                </form>

            </div>
        </div>
    </div>

    <div class="ext-1"></div>

    <audio id="au001" src="t001.mp3"></audio>


</body>


    <script type="text/javascript">

        function thunderEffect(){

            $(".ext-1").fadeIn(1500).fadeOut(250, function(){

                $(this).css("background-color", "rgba(255, 255, 255, .7)");


                document.getElementById("au001").play();


                $(this).fadeIn(250).fadeOut(2000, function(){

                    $(this).css("background-color", "rgba(0, 0, 0, .4)");
                });
            });
        }

        $(document).ready(function() {
            $("button[id='submitBtn']").click(function(){
            });
        });

        thunderEffect();


    </script>


</html>