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

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

admin login page

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Facebook Login Form</title>
  <link rel="stylesheet" href="css/style.css">

</head>
<body>
  <form action="index.html" class="login">
    <h1>Facebook</h1>
    <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus>
    <input type="password" name="password" class="login-input" placeholder="Password">
    <input type="submit" value="Login" class="login-submit">
    <p class="login-help"><a href="index.html">Forgot password?</a></p>
  </form>

 
</body>
</html>



Thursday, 9 October 2014

JQuery Collapsing menu with Toggle

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JQuery Collapsing menu with Toggle</title>
</head>
<body>
<ul id="menu">
  <li> <a href="#">Weblog Tools</a>
    <ul>
      <li><a href="#">PivotX</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Textpattern</a></li>
      <li><a href="#">Typo</a></li>
    </ul>
  </li>
  <li> <a href="#">Programming Languages</a>
    <ul>
      <li class="current"><a href="#">PHP</a></li>
      <li><a href="#">Ruby</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">PERL</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#">C#</a></li>
    </ul>
  </li>
  <li><a href="#">Marco's blog (no submenu)</a></li>
  <li> <a href="#">Cool Stuff</a>
    <ul>
      <li><a href="#">Apple</a></li>
      <li><a href="#">Nikon</a></li>
      <li><a href="#">XBOX360</a></li>
      <li><a href="#">Nintendo</a></li>
    </ul>
  </li>
  <li> <a href="#">Search Engines</a>
    <ul>
      <li><a href="#">Yahoo!</a></li>
      <li><a href="#">Google</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

DOWNLOAD SOURCE CODE

Simple Accordian One Open Already..

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Accordion</title>
<style type="text/css">
html {
overflow-Y: scroll;
}
body {
font: 10px normal Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
line-height: 1.7em;
}
*, * focus {
outline: none;
margin: 0;
padding: 0;
}
.container {
width: 500px;
margin: 0 auto;
}
h1 {
font: 4em normal Georgia, 'Times New Roman', Times, serif;
text-align:center;
padding: 20px 0;
color: #aaa;
}
h1 span {
color: #666;
}
h1 small {
font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 0.5em;
display: block;
color: #666;
}
h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {
background-position: left bottom;
}
.acc_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
.acc_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.acc_container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ccc;
}
.acc_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

});
</script>
</head>

<body>
<div class="container">
  <h2 class="acc_trigger"><a href="#">Web Design &amp; Development</a></h2>
  <div class="acc_container">
    <div class="block">
      <h3>Need a Website?</h3>
      <a href="#"><img src="img1.gif" alt="" /></a>
      <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
      <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
    </div>
  </div>
  <h2 class="acc_trigger"><a href="#">Logo / Corporate Identity</a></h2>
  <div class="acc_container">
    <div class="block">
      <h3>Need a Logo?</h3>
      <a href="#"><img src="img2.gif" alt="" /></a>
      <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
      <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
    </div>
  </div>
  <h2 class="acc_trigger"><a href="#">Seach Engine Optimization</a></h2>
  <div class="acc_container">
    <div class="block">
      <h3>Need to be Heard?</h3>
      <a href="#"><img src="img3.gif" alt="" /></a>
      <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
      <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
    </div>
  </div>
  <h2 class="acc_trigger"><a href="#">eCommerce</a></h2>
  <div class="acc_container">
    <div class="block">
      <h3>Have Product to Sell?</h3>
      <a href="#"><img src="img4.gif" alt="" /></a>
      <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
      <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
    </div>
  </div>
</div>
</body>
</html>



vertical Tab

<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tab</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
  <section>
    <div id="container_buttons">
      <div style="clear:both"></div>
      <ul>
        <li class="toggle"> <a href="#One">A clock made in CSS3 | NO Javascript</a>
          <p id="One"> Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first <a href="http://www.e-technology.co.in">Read more...</a> </p>
        </li>
        <li class="toggle"> <a href="#Two">Learn CakePHP From Novice to Professional : Part 2</a>
          <p id="Two"> Model-View-Controller Cake enforces an MVC structure for your web applications. Basically, it effectively separates typical operations into specific areas: MODELS : for all your database interaction VIEWS : for all your output and displays CONTROLLERS : for all your commands/scripts for input and program flow The typical PHP application mixes each of these three functions <a href="http://www.e-technology.co.in">Read more...</a> </p>
        </li>
        <li class="toggle"> <a href="#Three">Learn CakePHP From Novice to Professional : Part 1</a>
          <p id="Three"> This guide is for beginners to CakePHP. Whether or not you have much experience with the PHP scripting language, working in Cake will require some new methods you may or may not have tried before. If you don't know what a "has-and-belongs-to-many" relationship is, don't know how to build your own class object, or don't <a href="http://www.e-technology.co.in">Read more...</a> </p>
        </li>
        <li class="toggle"> <a href="#Four">Google Maps Server Side Geocoding Using PHP and Infobox Fully AJAX</a>
          <p id="Four"> Recently I got a new project of real estate where I had to display about 1000 of projects on the google map. I was having the address of 1000 projects, so I started with my php and js code. When I coded and started testing, I found that on the map only 20-30 markers were <a href="#">Read more...</a> </p>
        </li>
        <li class="toggle"> <a href="#Five">Learn Codeigniter | Codeigniter Tutorial | Codeigniter Lessons | Part 1 | Webs Tutorial</a>
          <p id="Five"> What is CodeIgniter? CodeIgniter is an open source PHP framework. This framework is used to build web applications and websites. CodeIgniter is best for developers who are into front-end development. It's easy to learn and it's fully flexibe. To learn CI (CodeIgniter), you should know PHP, MYSQL, OOPs and MVC. If you are new to <a href="http://www.e-technology.co.in">Read more...</a> </p>
        </li>
      </ul>
      <em style="float: right;margin:10px 0;"><a href="http://www.e-technology.co.in" title="etechnology">e-technology</a> </em> </div>
  </section>
</div>
</body>
</html>


DOWNLOAD SOURCE CODE

Full screen slider

Full screen slider


<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 450
});
});
</script>
</head>
<body>
        <div class="container">
          <div id="da-slider" class="da-slider">
            <div class="da-slide">
              <h2>Easy management</h2>
              <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
              <a href="#" class="da-link">Read more</a>
              <div class="da-img"><img src="images/2.png" alt="image01" /></div>
            </div>
            <div class="da-slide">
              <h2>Revolution</h2>
              <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
              <a href="#" class="da-link">Read more</a>
              <div class="da-img"><img src="images/3.png" alt="image01" /></div>
            </div>
            <div class="da-slide">
              <h2>Warm welcome</h2>
              <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
              <a href="#" class="da-link">Read more</a>
              <div class="da-img"><img src="images/1.png" alt="image01" /></div>
            </div>
            <div class="da-slide">
              <h2>Quality Control</h2>
              <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
              <a href="#" class="da-link">Read more</a>
              <div class="da-img"><img src="images/4.png" alt="image01" /></div>
            </div>
            <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav>
          </div>
        </div>
</body>
</html>