Wednesday, 1 June 2022
Monday, 1 May 2017
Wednesday, 15 March 2017
Tuesday, 2 August 2016
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/
<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
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">×</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>
<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">×</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>
<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>
<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>
<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">✖</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>
<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">✖</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
<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>
Download Source Code
<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> </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>
<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>
Subscribe to:
Posts (Atom)