how can i intigrate this code in wordpress?

here java scrip,css,and htmp code bellow. how can i integrate these code in wordpress please help me guy's.

i had integrated all file but it could be show error in java script file and i think i could not integrate java script code in wordpress please help me.

thanks

// leanModal v1.1 by Ray Stone - http://ift.tt/1sAk65g
// Dual licensed under the MIT and GPL

(function($){$.fn.extend({leanModal:function(options){var defaults={top:100,overlay:0.5,closeButton:null};var overlay=$("<div id='lean_overlay'></div>");$("body").append(overlay);options=$.extend(defaults,options);return this.each(function(){var o=options;$(this).click(function(e){var modal_id=$(this).attr("href");$("#lean_overlay").click(function(){close_modal(modal_id)});$(o.closeButton).click(function(){close_modal(modal_id)});var modal_height=$(modal_id).outerHeight();var modal_width=$(modal_id).outerWidth();
$("#lean_overlay").css({"display":"block",opacity:0});$("#lean_overlay").fadeTo(200,o.overlay);$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"});$(modal_id).fadeTo(200,1);e.preventDefault()})});function close_modal(modal_id){$("#lean_overlay").fadeOut(200);$(modal_id).css({"display":"none"})}}})})(jQuery);

@charset "utf-8";
@import url(http://ift.tt/1STssh0);

body {font-family: 'Source Sans Pro', sans-serif; font-size: 14px; color: #666;}

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

.popupContainer{
        position:absolute;
        width:330px;
        height: auto;
        left:45%;
        top:80px;
        background: #FFF;
}

#modal_trigger {margin:100px auto; width:100px; display:block;}

.btn {padding:10px 20px; background: #F4F4F2;}
.btn_red {background: #ED6347; color: #FFF;}

.btn:hover {background: #E4E4E2;}
.btn_red:hover {background: #C12B05;}

a.btn {color:#666; text-align: center; text-decoration: none;}
a.btn_red {color: #FFF;}

.one_half {width:50%; display: block; float:left;}
.one_half.last {width:45%; margin-left:5%;}

/* Popup Styles*/
.popupHeader {font-size:16px; text-transform: uppercase;}
.popupHeader {background:#F4F4F2; position:relative; padding:10px 20px; border-bottom:1px solid #DDD; font-weight:bold;}
.popupHeader .modal_close {position: absolute; right: 0; top:0; padding:10px 15px; background:#E4E4E2; cursor: pointer; color:#aaa; font-size:16px;}

.popupBody {padding:20px;}


/* Social Login Form */
.social_login {}
.social_login .social_box {display:block; clear:both; padding:10px; margin-bottom: 10px; background: #F4F4F2; overflow: hidden;}
.social_login .icon {display:block; width:10px; padding:5px 10px; margin-right: 10px; float:left; color:#FFF; font-size:16px; text-align: center;} 
.social_login .fb .icon {background:#3B5998;}
.social_login .google .icon {background:#DD4B39;}
.social_login .icon_title {display:block; padding:5px 0; float:left; font-weight: bold; font-size: 16px; color:#777;}
.social_login .social_box:hover {background: #E4E4E2;}

.centeredText {text-align: center; margin: 20px 0; clear: both; overflow: hidden; text-transform: uppercase;}

.action_btns {clear:both; overflow: hidden;}
.action_btns a {display: block;}

/* User Login Form */
.user_login {display: none;}
.user_login label {display: block; margin-bottom:5px;}
.user_login input[type="text"], .user_login input[type="email"], .user_login input[type="password"] {display: block; width:90%; padding: 10px; border:1px solid #DDD; color:#666;}
.user_login input[type="checkbox"] {float:left; margin-right:5px;}
.user_login input[type="checkbox"]+label {float:left;}

.user_login .checkbox {margin-bottom: 10px; clear: both; overflow: hidden;}
.forgot_password {display:block; margin: 20px 0 10px; clear: both; overflow: hidden; text-decoration: none; color:#ED6347;}

/* User Register Form */
.user_register {display: none;}
.user_register label {display: block; margin-bottom:5px;}
.user_register input[type="text"], .user_register input[type="email"], .user_register input[type="password"] {display: block; width:90%; padding: 10px; border:1px solid #DDD; color:#666;}
.user_register input[type="checkbox"] {float:left; margin-right:5px;}
.user_register input[type="checkbox"]+label {float:left;}

.user_register .checkbox {margin-bottom: 10px; clear: both; overflow: hidden;}
/* CSS Document */

.decorative-input {
    background-image: url(../text-field-icons-9c18e4e23864cb33a8f0f7c32c0b86ee.png);
    background-repeat: no-repeat;
    background-position: right 11px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    font-size: 14px;
    height: 40px;
    padding: 10px;
    width: 100% !important;
}
.pass {
    background-image: url(../text-field-icons-9c18e4e23864cb33a8f0f7c32c0b86ee.png);
    background-repeat: no-repeat;
    background-position: right 11px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    font-size: 14px;
    height: 40px;
    padding: 10px;
    width: 100% !important;
}

<script src="http://ift.tt/1nK28b0"></script>
<!DOCTYPE html>
<html lang="en">
<title>Popup Login and Register</title>
<script type="text/javascript" src="http://ift.tt/1LdO4RA"></script>
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<link rel="stylesheet" href="http://ift.tt/QzbObT" />
<link type="text/css" rel="stylesheet" href="css/stylepopup.css" />

<body>
<div class="container">
        <a id="modal_trigger" href="#modal" class="btn">Click here to Login or register</a>

        <div id="modal" class="popupContainer" style="display:none;">
                <header class="popupHeader">
                        <span class="header_title">Login</span>
                        <span class="modal_close"><i class="fa fa-times"></i></span>
                </header>
                
                <section class="popupBody">
                        <!-- Social Login -->
                        <div class="social_login">
                                <div class="">
                                        <a href="#" class="social_box fb">
                                                <span class="icon"><i class="fa fa-facebook"></i></span>
                                                <span class="icon_title">Connect with Facebook</span>
                                                
                                        </a>

                                        <a href="#" class="social_box google">
                                                <span class="icon"><i class="fa fa-google-plus"></i></span>
                                                <span class="icon_title">Connect with Google</span>
                                        </a>
                                </div>

                                <div class="centeredText">
                                        <span>Or use your Email address</span>
                                </div>

                                <div class="action_btns">
                                        <div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
                                        <div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
                                </div>
                        </div>

                        <!-- Username & Password Login form -->
                        <div class="user_login">
                                <form>
                                        <label>Email / Username</label>
                                        <input type="text"  class="decorative-input" />
                                        <br />

                                        <label>Password</label>
                                        <input type="password" class="decorative-input pass" />
                                        <br />

                                        <div class="checkbox">
                                                <input id="remember" type="checkbox" />
                                                <label for="remember">Remember me on this computer</label>
                                        </div>
                  


                                        <div class="action_btns">
                                                <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                                                <div class="one_half last"><a href="#" class="btn btn_red">Login</a></div>
                                        </div>
                                </form>

                                <a href="#" class="forgot_password">Forgot password?</a>
                        </div>

                        <!-- Register Form -->
                        <div class="user_register">
                                <form>
                                        <label>Full Name</label>
                                        <input type="text" />
                                        <br />

                                        <label>Email Address</label>
                                        <input type="email" />
                                        <br />

                                        <label>Password</label>
                                        <input type="password" />
                                        <br />

                                        <div class="checkbox">
                                                <input id="send_updates" type="checkbox" />
                                                <label for="send_updates">Send me occasional email updates</label>
                                        </div>

                                        <div class="action_btns">
                                                <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                                                <div class="one_half last"><a href="#" class="btn btn_red">Register</a></div>
                                        </div>
                                </form>
                        </div>
                </section>
        </div>
</div>

<script type="text/javascript">
        $("#modal_trigger").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
        $(function(){
                // Calling Login Form
                $("#login_form").click(function(){
                        $(".social_login").hide();
                        $(".user_login").show();
                        return false;
                });
                // Calling Register Form
                $("#register_form").click(function(){
                        $(".social_login").hide();
                        $(".user_register").show();
                        $(".header_title").text('Register');
                        return false;
                });
                // Going back to Social Forms
                $(".back_btn").click(function(){
                        $(".user_login").hide();
                        $(".user_register").hide();
                        $(".social_login").show();
                        $(".header_title").text('Login');
                        return false;
                });
        })
</script>

</body>
</html>

via Chebli Mohamed