menu

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

Posted by at No comments:

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


Posted by at No comments:

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


Posted by at No comments:

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
Posted by at No comments:

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
Posted by at No comments:
Subscribe to: Posts (Atom)