menu

Monday, 1 May 2017

Simple Slider






                                                              Download Source

                                         







Wednesday, 15 March 2017

Website Designing and SEO Services

Website Designing and SEO Services in Lucknow

Saturday, 7 May 2016

Tool Tip By Dheerendra Verma

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tool Tip By Dheerendra Verma</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
  <h3>Tool Tip By Dheerendra Verma</h3>
  <ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
  </ul>
</div>
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();  
});
</script>
</body>
</html>


Before


After




       Bootstrap css and js download for  http://getbootstrap.com/

Bootstrap Pop by Dheerendra Verma

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
  <h2>Pop Created by Dheerendra Verma</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
   
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>


Before




Bootstrap css and js download for  http://getbootstrap.com/






Bootstrap Responsive Table

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
</head>

<body>
<div class="container">
  <h2>Responsive Table for Bootstrap (Dheerendra Verma)</h2>
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="danger">
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="info">
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>




Bootstrap css and js download for  http://getbootstrap.com/


Bootstrap Slider

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
 
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active"> <img src="images/2.jpg" alt="Chania"> </div>
      <div class="item"> <img src="images/1.jpg" alt="Chania"> </div>
      <div class="item"> <img src="images/3.jpg" alt="Flower"> </div>
      <div class="item"> <img src="images/2.jpg" alt="Flower"> </div>
    </div>
 
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>
<div class="container"> <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
 
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active"> <img src="images/3.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>
      <div class="item"> <img src="images/2.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>
      <div class="item"> <img src="images/1.jpg" alt="Flower">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>
      <div class="item"> <img src="images/3.jpg" alt="Flower">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>
    </div>
 
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>
</body>
</html>


Bootstrap css and js download for  http://getbootstrap.com/


Tuesday, 21 April 2015

Blink Text

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dheerendra</title>
</head>

<body>
<div id="blinkText"></div>
<script>
    // Takes text to blink and id of element to blink text in
    function blinkText(text, id) {
        // Blink interval
        setInterval(blinker, 250);
       
        // Flag to see what state text is in (true or false)
        var flag = true;
       
        // Number of times to blink text
        var blinkNum = 100000;
        var i = 1;
        var divID = document.getElementById(id);
       
        function blinker() {
            if (i < blinkNum) {
                if (flag) {
                    divID.innerHTML = text;
                    flag = false;
                } else {
                    divID.innerHTML = "";
                    flag = true;
                }
               
                i++;
            } else {
                // Delete if it's still showing
                divID.innerHTML = "";
               
                // Stop blinking
                clearInterval(blinker);
            }
        }
    }
   
    blinkText("<strong class='green'>25<sup><strong>th</strong></sup>Anniversary Georgian 90 batch</strong>", "blinkText");
    </script>
</body>
</html>


Download source

Tuesday, 14 April 2015

CSS POPUP without using js

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="popup.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="modal">
  <input id="modal" type="checkbox" name="modal" tabindex="1"  style="display:none">
  <label for="modal" >For Admission Query</label>
  <div class="modal__overlay">
    <div class="modal__box">
      <label for="modal">&#10006;</label>
      <div class="form-layout" style="width: 485px;">
        <div  class="title3" style="font-size:27px;">Website Design & Developent</div>
        <p class="p" style="margin-bottom: 8px;">Contact for - 7398623742</p>
        <p class="p"> <a href="http://e-technology.co.in/" target="_new" style="color:#fff">E-Technology</a> </p>
        <form action="#" method="post" name="myform" class="form" style="width:70%; margin-left: 70px;  ">
          <input type="text" name="name" id="name" placeholder="Name"  >
          <input type="varchar" name="phone" id="phone" placeholder="Mobile No.") {this.placeholder= 'Mobile No.';}" >
          <input type="email" name="email" id="email" placeholder="Email" ) {this.placeholder= 'Email';}" >
          <select name="course" id="course" style="width:104%;">
            <option value="B.Tech" selected >B.Tech</option>
            <option value="MBA" selected >MBA</option>
            <option value="PGDM" selected >PGDM</option>
            <option value="BBA" selected >BBA</option>
            <option value="BCA" selected >BCA</option>
          </select>
          <input name="page" value="index"  type="hidden">
          <input type="submit"  name="submit" value="submit" class="submit_btn5" style="bottom: 35px;">
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Download Source


popup


<html>
<head>
<title>Dheerendra Popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/stylep.css" />
</head>
<body>

        <ul>
          <li><a id="modal_trigger" href="#modal" >Login</a></li>
        </ul>
   
      <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="https://www.facebook.com/dheerendra.verma.756" class="social_box fb" target="_new"> <span class="icon"><i class="fa fa-facebook"></i></span> <span class="icon_title">Connect with Facebook</span> </a> <a href="https://plus.google.com/u/0/111660188473602572063" 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" />
              <br />
              <label>Password</label>
              <input type="password" />
              <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="http://dheerendraverma007.blogspot.in/" 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="http://dheerendraverma007.blogspot.in/" class="btn btn_red" target="_new">Register</a></div>
              </div>
            </form>
          </div>
        </section>
      </div>

      <script type="text/javascript">
$(function(){
  $('#loginform').submit(function(e){
    return false;
  });
  
  $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script> 
      <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>


           Download Source


Wednesday, 4 February 2015

Responsive Menu

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Responsive Horizontal and Vertical Menu</title>

<link href="css/flexy-menu.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/flexy-menu.js">
</script><script type="text/javascript">$(document).ready(function(){$(".flexy-menu").flexymenu({speed: 400,type: "vertical", indicator: true});});</script>

</head>
<body>
<div class="content">
  <ul class="flexy-menu orange">
    <li class="active"><a href="#"><i class="icon-heart"></i>Home</a></li>
    <li><a href="#"><i class="icon-cogs"></i>Services</a></li>
    <li><a href="#"><i class="icon-th"></i>Portfolio</a>
      <ul>
        <li><a href="#">Dropdown item</a></li>
        <li><a href="#">Dropdown item</a></li>
        <li><a href="#">Dropdown item</a></li>
        <li><a href="#">Dropdown item</a>
          <ul>
            <li><a href="#">Dropdown item</a></li>
            <li><a href="#">Dropdown item</a></li>
            <li><a href="#">Dropdown item</a></li>
            <li><a href="#">Dropdown item</a></li>
          </ul>
        </li>
        <li><a href="#">Dropdown item</a></li>
        <li><a href="#">Dropdown item</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="icon-comments"></i>Blog</a></li>
    <li><a href="#"><i class="icon-bullhorn"></i>About</a></li>
    <li><a href="#"><i class="icon-group"></i>Social</a></li>
    <li><a href="#"><i class="icon-picture"></i>Gallery</a></li>
    <li><a href="#"><i class="icon-copy"></i>Info</a></li>
    <li><a href="#"><i class="icon-envelope"></i>Contact</a></li>
  </ul>
</div>
</body>

</html>
 

Download Source Code

Full Width Responsive Slider

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Full Width Responsive Slider</title>



<link href="css/bootstrap.min.css" rel="stylesheet" />

<script src="css/jquery.min.js"></script>

<script src="css/bootstrap.min.js"></script>


</head>

<body>

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active"> <img src="images/d2.jpg" style="width:100%" alt="First slide"> </div>
    <div class="item"> <img src="images/d3.jpg" style="width:100%" data-src="" alt="Second    slide"> </div>
    <div class="item"> <img src="images/d4.png" style="width:100%" data-src="" alt="Third slide"> </div>
  </div>
</div>

</body>
</html>

Desktop View










Mobile View


     





   Download Source Code

Wednesday, 15 October 2014

Contact Us Form


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Us Form</title>
<link rel="stylesheet" type="text/css" href="css/main-css.css"  />
<link href="css/visual-form-builder.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
margin: 0px;
background-color:#d9d9d9;
}
-->
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
<div id="mainContainer-center">
  <div class="visual-form-builder vfb-form-1">
    <fieldset id="item-vfb-1" class="vfb-fieldset vfb-fieldset-1 enquiry-now ">
      <div class="vfb-legend">
        <h3>Contact Us</h3>
      </div>
      <ul class="vfb-section vfb-section-1">
        <li id="item-vfb-5" class="vfb-item vfb-item-text  ">
          <label class="vfb-desc" for="vfb-5">Full Name <span class="vfb-required-asterisk">*</span></label>
          <input name="ctl00$MainContent$txtFullName" type="text" id="MainContent_txtFullName" class="vfb-text  vfb-medium  required" required="">
        </li>
        <li id="item-vfb-7" class="vfb-item vfb-item-phone  ">
          <label class="vfb-desc" for="vfb-7">Phone/Mobile Number <span class="vfb-required-asterisk">*</span></label>
          <input name="ctl00$MainContent$txtMobileNumber" type="text" id="MainContent_txtMobileNumber" class="vfb-text  vfb-medium  required" required="">
        </li>
        <li id="item-vfb-8" class="vfb-item vfb-item-email  ">
          <label class="vfb-desc" for="vfb-8">Email <span class="vfb-required-asterisk">*</span></label>
          <input name="ctl00$MainContent$txtEmail" type="text" id="MainContent_txtEmail" class="vfb-text  vfb-medium  required" required="">
        </li>
        <li id="item-vfb-10" class="vfb-item vfb-item-textarea  ">
          <label class="vfb-desc" for="vfb-10">Message <span class="vfb-required-asterisk">*</span></label>
          <div>
            <textarea name="ctl00$MainContent$txtMessage" rows="2" cols="20" id="MainContent_txtMessage" class="vfb-textarea  vfb-medium  required"></textarea>
          </div>
        </li>
        <li id="item-vfb-4" class="vfb-item vfb-item-submit">
          <input type="submit" name="ctl00$MainContent$btnSubmit" value="Submit" id="MainContent_btnSubmit" class="vfb-submit">
        </li>
      </ul>
      <p>&nbsp;</p>
    </fieldset>
  </div>
</div>
</body>
</html>

Zoom Effect

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Outer_Zoom</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/cloud-zoom.1.0.2.min.js"></script>
</head>

<body>
<div class="clr"></div>
<div class="left_container">
  <div class="zoom-section">
    <div class="zoom-small-image"><a href="images/bigimage00.jpg" class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4"><img src="images/smallimage.jpg" alt=""></a></div>
    <div class="zoom-desc">
      <p><a href='images/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: 'images/smallimage.jpg' "><img class="zoom-tiny-image" src="images/tinyimage.jpg" alt = "Thumbnail 1"></a> <a href='images/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' images/smallimage-1.jpg'"><img class="zoom-tiny-image" src="images/tinyimage-1.jpg" alt = "Thumbnail 2"></a> <a href='images/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/smallimage-2.jpg' "><img class="zoom-tiny-image" src="images/tinyimage-2.jpg" alt = "Thumbnail 3"></a> <a href='images/bigimage03.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/smallimage-3.jpg' "><img class="zoom-tiny-image" src="images/tinyimage-3.jpg" alt = "Thumbnail 4"></a> <a href='images/bigimage04.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/smallimage-4.jpg' "><img class="zoom-tiny-image" src="images/tinyimage-4.jpg" alt = "Thumbnail 5"></a> </p>
    </div>
  </div>
</div>
</body>
</html>

Popup

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Popup</title>
<style type="text/css">
.btn-sign {
width:460px;
margin-bottom:20px;
margin:0 auto;
padding:20px;
border-radius:5px;
background: -moz-linear-gradient(center top, #00c6ff, #018eb6);
background: -webkit-gradient(linear, left top, left bottom, from(#00c6ff), to(#018eb6));
background:  -o-linear-gradient(top, #00c6ff, #018eb6);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00c6ff', EndColorStr='#018eb6');
text-align:center;
font-size:36px;
color:#fff;
text-transform:uppercase;
}
.btn-sign a {
color:#fff;
text-shadow:0 1px 2px #161616;
}
#mask {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
opacity: 0.8;
z-index: 999;
}
.login-popup {
display:none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999;
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
img.btn_close {
float: right;
margin: -28px -28px 0 0;
}
fieldset {
border:none;
}
form.signin .textbox label {
display:block;
padding-bottom:7px;
}
form.signin .textbox span {
display:block;
}
form.signin p, form.signin span {
color:#999;
font-size:11px;
line-height:18px;
}
form.signin .textbox input {
background:#666666;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
color:#fff;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font:13px Arial, Helvetica, sans-serif;
padding:6px 6px 4px;
width:200px;
}
 form.signin input:-moz-placeholder {
color:#bbb;
text-shadow:0 0 2px #000;
}
form.signin input::-webkit-input-placeholder {
color:#bbb;
text-shadow:0 0 2px #000;
}
.button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color:#000;
border-width:1px;
border-radius:4px 4px 4px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color:#333;
cursor:pointer;
display:inline-block;
padding:6px 6px 4px;
margin-top:10px;
font:12px;
width:214px;
}
.button:hover {
background:#ddd;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.login-window').click(function() {

// Getting the variable's value from a link
var loginBox = $(this).attr('href');

//Fade in the Popup and add close button
$(loginBox).fadeIn(300);

//Set the center alignment padding + border
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;

$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);

return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
 $('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
</head>
<body>
<a href="#login-box" class="login-window">Login / Sign In</a>
<div id="login-box" class="login-popup"> <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
  <form method="post" class="signin" action="#">
    <fieldset class="textbox">
      <label class="username"> <span>Username or email</span>
        <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
      </label>
      <label class="password"> <span>Password</span>
        <input id="password" name="password" value="" type="password" placeholder="Password">
      </label>
      <button class="submit button" type="button">Sign in</button>
      <p> <a class="forgot" href="#">Forgot your password?</a> </p>
    </fieldset>
  </form>
</div>
</body>
</html>

Download Source Code