Image Tilt Effect in ASP.NET using Jquery and Bootstrap

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Image Tilt Effect</title>
        <meta name="description" content="A script for creating a tilt effect on an image that follows mouse movement" />
        <meta name="keywords" content="tilt, image, effect, web design, mouse, movement" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/tilteffect.css" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link href="bootstrap/css1/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="bootstrap/js1/bootstrap.min.js" type="text/javascript"></script>
    <style type="text/css">

    #hel
    {
        background-color:#C0C0C0;
     }

     #man
     {
         margin-bottom:30px;

     }
    </style>

</head>
<body id="hel">
    <form id="form1" runat="server">
    <div>
            <div class="container">
            <header class="codrops-header">
                <div class="codrops-links">

                </div>
                <div class="hero">
                    <div class="hero__imgwrap">
                        <img class="hero__img tilt-effect" data-tilt-options='{ "opacity" : 0.6, "movement": { "perspective" : 1500, "translateX" : 10, "translateY" : 10, "translateZ" : 2, "rotateX" : 3, "rotateY" : 3 } }' src="img/34.jpg" alt="Hero image" />
                    </div>
                    <h1><span>Welcome to My New Page of</span> Image Tilt Effect</h1>

                </div>
            </header><!-- /codrops-header -->

        <script type="text/javascript" src="js/tiltfx.js"></script>
        </div>

        </div>


 <div class="container">
  <h2  id="man" align="center">WELCOME TO ASP.NET WITH BOOTSTRAP</h2>


  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#services">Services</a></li>
    <li><a data-toggle="tab" href="#aboutus">AboutUs</a></li>
    <li><a data-toggle="tab" href="#contactus">ContactUs</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Welcome to the Home Page of asp.net with Bootstrap</p>
    </div>
    <div id="services" class="tab-pane fade">
      <h3>Services</h3>
      <p>This are the services we are providing:</p>
      <ul>
      <li>Web Designing</li>
      <li>Game Development</li>
      <li> Web Development</li>
      <li>Android Develpment</li>
      </ul>
    </div>
    <div id="aboutus" class="tab-pane fade">
      <h3>AboutUs</h3>
      <p>This is your About us page. Well content is not ready at present.</p>
    </div>
    <div id="contactus" class="tab-pane fade">
      <h3>ContactUs</h3>
      <p>You can contact me via mail:
      <a href="mailto: [email protected]">Send Mail</a>
      </p>
    </div>
  </div>
</div>
    </form>
</body>
</html>