I have a problem with a static page am using.
i have a HTML,CSS,JavaScript files. I saw this on a website and i copied from `<http://codepen.io/eode9/pen/wyaDr>`
I copied each of the files into one HTML page. and when i execute it on my page,javascript is not Executing .
Sorry for posting the whole page here. I am new to programming and in basic state.
My problem is , i want a text to be shown when i click on textbox just like in the page .But in my page, it is not showing.I downloaded the Jquery.js file and stored it in my computer.`enter code here`

here is the code 

```
<html>
    <head>
        <style type="text/css">
            @import "compass";
            /*dark background to support form theme*/
            body {
                background: url("http://imd.edumedia.ca/mars0277/Codepen/dark-grey.jpg");
            }

            /*sass variables used*/
            $full:100%; $auto:0 auto; $align:center; @mixin disable {
                outline: none;
                border: none;
            }

            @mixin easeme {
                -webkit-transition: 1s ease;
                -moz-transition: 1s ease;
                -o-transition: 1s ease;
                -ms-transition: 1s ease;
                transition: 1s ease;
            }

            /*site container*/
            .wrapper {
                width: 420px;
                margin: $auto;
            }

            h1 {
                text-align: $align;
                padding: 30px 0px 0px 0px;
                font: 25px Oswald;
                color: #FFF;
                text-transform: uppercase;
                text-shadow: #000 0px 1px 5px;
                margin: 0px;
            }

            p {
                font: 13px Open Sans;
                color: #6E6E6E;
                text-shadow: #000 0px 1px 5px;
                margin-bottom: 30px;
            }

            .form {
                width: $full;
            }

            input[type="text"], input[type="email"], input[type="password"], input[type="password"] {
                width: 98%;
                padding: 15px 0px 15px 8px;
                border-radius: 5px;
                box-shadow: inset 4px 6px 10px -4px rgba(0,0,0,0.3), 0 1px 1px -1px rgba(255,255,255,0.3);
                background: rgba(0,0,0,0.2);
                @include disable;
                border: 1px solid rgba(0,0,0,1);
                margin-bottom: 10px;
                color: #6E6E6E;
                text-shadow: #000 0px 1px 5px;
            }

            input[type="submit"] {
                width: 100%;
                padding: 15px;
                border-radius: 5px;
                @include disable;
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#28D2DE), to(#1A878F));
                background-image: -webkit-linear-gradient(#28D2DE 0%, #1A878F 100%);
                background-image: -moz-linear-gradient(#28D2DE 0%, #1A878F 100%);
                background-image: -o-linear-gradient(#28D2DE 0%, #1A878F 100%);
                background-image: linear-gradient(#28D2DE 0%, #1A878F 100%);
                font: 14px Oswald;
                color: #FFF;
                text-transform: uppercase;
                text-shadow: #000 0px 1px 5px;
                border: 1px solid #000;
                opacity: 0.7;
                -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
                -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
                box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
                border-top: 1px solid rgba(255,255,255,0.8) !important;
                -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
            }

            input:focus {
                box-shadow: inset 4px 6px 10px -4px rgba(0,0,0,0.7), 0 1px 1px -1px rgba(255,255,255,0.3);
                background: rgba(0,0,0,0.3);
                @include easeme;
            }

            input[type="submit"]:hover {
                opacity: 1;
                cursor: pointer;
            }

            .name-help, .email-help, .password-help, .passwordc-help {
                display: none;
                padding: 0px;
                margin: 0px 0px 15px 0px;
            }
        </style>

    </head>
    <body>
        <center>
            <div class="wrapper">
                <h1>Register For An Account</h1>
                <p>
                    To sign-up for a free basic account please provide us with some basic information using
                    the contact form below. Please use valid credentials.
                </p>
                <form class="form" method="post" action="yourpage.html">
                    <input type="text" class="name" placeholder="Name">
                    <div>
                        <p class="name-help">Please enter your first and last name.</p>
                    </div>
                    <input type="text" class="email" placeholder="Email">
                    <div>
                        <p class="email-help">Please enter your current email address.</p>
                    </div>
                    <input type="password" class="password" placeholder="Password">
                    <div>
                        <p class="password-help">Please enter your a Password more than 8 letters.Try the combination of A-Z,a-z,0-9,Special characters like !,@,#,$,%,^,&,*,(,),-,_.Don't use spaces </p>
                    </div>
                    <input type="password" class="passwordc" placeholder="Password">
                    <div>
                        <p class="passwordc-help">Confirm password.</p>
                    </div>

                    <input type="submit" class="submit" value="Register">
                </form>
            </div>
        </center>

    </body>
    <script type="text/javascript" src="file:\\\C:\lol\jquery-1.11.1.js"></script>
    <script>
        $(document).ready(function() {
            $(".name").click(function(){
                $(".name-help").slideDown(500);
            }).blur(function(){
                $(".name-help").slideUp(500);
            });
            $(".email").click(function(){
                $(".email-help").slideDown(500);
            }).blur(function(){
                $(".email-help").slideUp(500);
            });
            $(".password").click(function(){
                $(".password-help").slideDown(500);
            }).blur(function(){
                $(".password-help").slideUp(500);
            });
            $(".passwordc").click(function(){
                $(".passwordc-help").slideDown(500);
            }).blur(function(){
                $(".passwordc-help").slideUp(500);
            });
            $(".submit").click(function(event){
                event.preventDefault();
            });
        }
    </script>

</html>

```