menu

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>



Monday 6 October 2014


Fullscreen Image 3D Effect



<html lang="en">
<head>
<title>Fullscreen Image</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<noscript>
<style>
.fd-wrapper > img {
display: block;
margin: 0 auto;
}
</style>
</noscript>
<script id="pageTmpl" type="text/x-jquery-tmpl">
<div class="fd-box-wrapper">
<div class="fd-box fd-box-upper">
<div class="fd-front">
<div class="fd-image">
<a href="#" class="fd-option fd-option-fullscreen">Fullscreen</a>
<div class="fd-option fd-loading"></div>
</div>
<!-- any other content after this -->
                    <div class="header">
                        <a href="http://e-technology.co.in" target="_blank"><strong>Visit For Site</strong></a>
                        <span class="right">
                            <a href="https://dheerendraverma007.blogspot.in" target="_blank">Images by Dheerendra Verma</a>
                         
                        </span>
                        <div class="clr"></div>
                    </div>
                 
                </div>
<div class="fd-back"></div>
<div class="fd-right"></div>
<div class="fd-left"></div>
<div class="fd-top"></div>
<div class="fd-bottom">
<a href="#" class="fd-option fd-option-zoomout">Zoom out</a>
</div>
</div>
</div>
<div class="fd-box-wrapper">
<div class="fd-box fd-box-lower">
<div class="fd-front">
<div class="fd-image">
<h2 class="fd-title"></h2>
</div>
<!-- dot navigation -->
<ul class="fd-nav">
<li><a href="#"><span>Image 1</span></a></li>
<li><a href="#"><span>Image 2</span></a></li>
<li><a href="#"><span>Image 3</span></a></li>
</ul>
<!-- any other content after this -->
</div>
<div class="fd-back"></div>
<div class="fd-right"></div>
<div class="fd-left"></div>
<div class="fd-top"></div>
<div class="fd-bottom"></div>
</div>
</div>
</script>
<script type="text/javascript" src="js/modernizr.custom.40443.js"></script>
</head><body>
<div class="container">
  <div id="fd-wrapper" class="fd-wrapper"> <img src="images/medium/1.jpg" data-bgimg="images/large/1.jpg" alt="image01" title="Love Will Tear Us Apart" /> <img src="images/medium/2.jpg" data-bgimg="images/large/2.jpg" alt="image02" title="Just Can't Get Enough" /> <img src="images/medium/3.jpg" data-bgimg="images/large/3.jpg" alt="image03" title="In a Manner of Speaking" /> </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.slideshow.min.js"></script>
<script type="text/javascript">
            $(function() {

                $('#fd-wrapper').slideshow({
                    width : 600,
                    height : 396,
onLoad : function() {
if( !Modernizr.csstransforms3d )
$('#fd-message').show();
}
                });

            });
        </script>
</body>
</html>



    Download Source Code

loading_effect




<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loadind Effect</title>
<link rel="stylesheet" type="text/css" href="css/style.css"  />
<link rel="stylesheet" type="text/css" href="css/slider.css"  />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/smartMenu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//Menu
jQuery("#menu > li").smartMenu({
inSpeed: 600,
outSpeed: 300,
margin: 8,
easingFxIn: 'easeOutQuint',
easingFxOut: 'easeOutQuint'
});
});

</script>
<script type="text/javascript" src="scripts/queryLoader.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".btn-slide, .hide").click(function(){
jQuery("#panel").slideToggle("slow");
jQuery(this).toggleClass("active"); return true;
});
});
</script>
</head>
<body>



<!--top_wrapper end-->
<p class="slide"><a href="#" class="btn-slide"></a></p>


<script>
$(document).ready(function () {
    $("body").queryLoader2({
        barColor: "#000000",
        backgroundColor: "#FFFFFF",
        percentage:false,
        barHeight: 1,
        completeAnimation: "grow",
        minimumTime: 2000
    });
$('#loaderlogo').css({ width:'177px',  height:'69px', position:'absolute', 'margin-top':'-140px',  'margin-left':'-88px', top:'50%',  left:'50%', background:'url(images/krish_play.gif) no-repeat center'})
});
$('#mailcontdiv a').hover(function(){$(this).find('.hovspan').fadeIn(200)}, function(){$(this).find('.hovspan').fadeOut(200)
});
</script>
</body>
</html>


         Download Source Code

 jQuery Animations and Effects Video




                                           Hiding And Showing Elements

Accordian




<html lang="en">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Accordion</title>
        <link rel="stylesheet" href="css/reset.css" type="text/css" charset="utf-8">
        <link rel="stylesheet" href="css/core.css" type="text/css" charset="utf-8">
        <link rel="stylesheet" href="css/accordion.core.css" type="text/css" charset="utf-8">
       
        </head>
        <body>
<div id="page">
          <h1> Accordion</h1>
          <h2>Example 1</h2>
          <p>This is the default accordion. Toggling is disabled, and the first
    item in the accordion automatically opens during accordion initialisation.</p>
          <ul id="example1" class="accordion">
    <li>
              <h3>Handle 1</h3>
              <div class="panel loading">
        <h4>panel loading 1</h4>
        <p>Plain old heading and paragraph content.</p>
      </div>
            </li>
    <li>
              <h3>Handle 2</h3>
              <ul class="panel loading">
        <li>How about&hellip;</li>
        <li>&hellip; a list &hellip;</li>
        <li>&hellip; of items?</li>
      </ul>
            </li>
    <li>
              <h3>Handle 3</h3>
              <p class="panel loading"> <img src="img/spa.png" alt="" width="220" height="220"> An image in a paragraph. </p>
            </li>
    <li>
              <h3>Handle 4</h3>
              <div class="panel loading">
        <h4>A nested list of items</h4>
        <ul>
                  <li>Item 1</li>
                  <li>Item 2
            <ul>
                      <li>Subitem 1</li>
                      <li>Subitem 2</li>
                      <li>Subitem 3</li>
                    </ul>
          </li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                </ul>
      </div>
            </li>
  </ul>
          <h2>Example 2</h2>
          <p>With toggling enabled, the user is able to close down all items.</p>
          <ul id="example2" class="accordion">
    <li>
              <h3>Handle 1</h3>
              <div class="panel loading">
        <h4>panel loading 1</h4>
        <p>Plain old heading and paragraph content.</p>
      </div>
            </li>
    <li>
              <h3>Handle 2</h3>
              <ul class="panel loading">
        <li>How about&hellip;</li>
        <li>&hellip; a list &hellip;</li>
        <li>&hellip; of items?</li>
      </ul>
            </li>
    <li>
              <h3>Handle 3</h3>
              <p class="panel loading"> <img src="img/spa.png" alt="" width="220" height="220"> An image in a paragraph. </p>
            </li>
    <li>
              <h3>Handle 4</h3>
              <div class="panel loading">
        <h4>A nested list of items</h4>
        <ul>
                  <li>Item 1</li>
                  <li>Item 2
            <ul>
                      <li>Subitem 1</li>
                      <li>Subitem 2</li>
                      <li>Subitem 3</li>
                    </ul>
          </li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                </ul>
      </div>
            </li>
  </ul>
          <h2>Example 3</h2>
          <p>By applying a class of "locked" (or whatever is specified in the
    parameter object that is passed to the accordion plug-in), the corresponding
    item is locked open. The rest of the accordion functions as expected
    around the locked item.</p>
          <ul id="example3" class="accordion">
    <li class="locked">
              <h3>Handle 1</h3>
              <div class="panel loading">
        <h4>panel loading 1 (Locked open)</h4>
        <p>Plain old heading and paragraph content.</p>
      </div>
            </li>
    <li>
              <h3>Handle 2</h3>
              <ul class="panel loading">
        <li>How about&hellip;</li>
        <li>&hellip; a list &hellip;</li>
        <li>&hellip; of items?</li>
      </ul>
            </li>
    <li>
              <h3>Handle 3</h3>
              <p class="panel loading"> <img src="img/spa.png" alt="" width="220" height="220"> An image in a paragraph. </p>
            </li>
    <li>
              <h3>Handle 4</h3>
              <div class="panel loading">
        <h4>A nested list of items</h4>
        <ul>
                  <li>Item 1</li>
                  <li>Item 2
            <ul>
                      <li>Subitem 1</li>
                      <li>Subitem 2</li>
                      <li>Subitem 3</li>
                    </ul>
          </li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                </ul>
      </div>
            </li>
  </ul>
          <h2>Example 4</h2>
          <p>This example isn't an accordion at all, and behaves like a standard
    collapsible menu. It is possible to open more than one item.</p>
          <ul id="example4" class="accordion">
    <li>
              <h3>Handle 1</h3>
              <div class="panel loading">
        <h4>panel loading 1</h4>
        <p>Plain old heading and paragraph content.</p>
      </div>
            </li>
    <li>
              <h3>Handle 2</h3>
              <ul class="panel loading">
        <li>How about&hellip;</li>
        <li>&hellip; a list &hellip;</li>
        <li>&hellip; of items?</li>
      </ul>
            </li>
    <li>
              <h3>Handle 3</h3>
              <p class="panel loading"> <img src="img/spa.png" alt="" width="220" height="220"> An image in a paragraph. </p>
            </li>
    <li>
              <h3>Handle 4</h3>
              <div class="panel loading">
        <h4>A nested list of items</h4>
        <ul>
                  <li>Item 1</li>
                  <li>Item 2
            <ul>
                      <li>Subitem 1</li>
                      <li>Subitem 2</li>
                      <li>Subitem 3</li>
                    </ul>
          </li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                </ul>
      </div>
            </li>
  </ul>
        </div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js" charset="utf-8"></script> 
<script type="text/javascript" src="js/jquery.accordion.2.0.js" charset="utf-8"></script> 
<script type="text/javascript">
            $('#example1, #example3').accordion();
            $('#example2').accordion({
                canToggle: true
            });
            $('#example4').accordion({
                canToggle: true,
                canOpenMultiple: true
            });
            $(".loading").removeClass("loading");
        </script> 
<a href="e-technology.co.in" title="">E-technology</a>
</body>
</html>


Thursday 11 September 2014

Simple Dropdown Menu


<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Friday 29 August 2014

Attractive Menu And Modelest Dropdown



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="#" content="#" name="description" />
    <title>Modelest Menu</title>
    <link href="css/home_new.css" rel="stylesheet" type="text/css" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/nav.css" rel="stylesheet" type="text/css" />
    <link href="css/dddropdownpanel.css" rel="stylesheet" type="text/css" />
   
    <script type="text/javascript" src="js/jquery-nv.js"></script>
    <script type="text/javascript" src="js/dddropdownpanel.js"></script>
    <script type="text/javascript" src="js/dropdowncontent.js"></script>
    <script type="text/javascript" src="js/dropmenu.js"></script>
 
   
    <style type="text/css">

.header{background:url(images/header_image.jpg); background-repeat:no-repeat; background-position:center top; height:236px}

</style>
</head>
<body>
    <table width="100%" border="0" cellspacing="00" cellpadding="0">
        <tr>
            <td align="center" valign="top">
                <table width="963" border="0" cellspacing="00" cellpadding="0">
                    <tr>
                        <td align="right" valign="middle">
                            <table width="250" border="0" cellspacing="00" cellpadding="0">
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" valign="top">
                <table width="963" border="0" cellspacing="00" cellpadding="0">
                    <tr>
                        <td>
                            <div class="mainBg" style="height: auto; width: auto;">
                                <div id="container" style="height: auto; width: auto; background: none">
                                    <div id="header" style="height: auto; width: auto; background: none">
                                        <div class="CL navStyle" id="nav">
                                            <ul>
                                                <li class="hairA"><a href="#" class="first" rel="hairA" style="width: 103px"><strong>
                                                    &bull;</strong> FASHION </a></li>
                                                <li class="fashionA"><a href="#" rel="fashionA" style="width: 103px"><strong>&bull;</strong>
                                                    ENTERTAINMENT</a></li>
                                                <li class="expertA"><a href="#" rel="expertA" style="width: 103px"><strong>&bull;</strong>
                                                    BEAUTY</a></li>
                                                <li class="makeoverA"><a href="#" rel="makeoverA" style="width: 103px"><strong>&bull;</strong>
                                                    LIFE STYLE</a></li>
                                                <li class="showA"><a href="#" rel="showA" style="width: 103px"><strong>&bull;</strong>
                                                    ART </a></li>
                                                <li class="enteA"><a href="#" rel="enteA" style="width: 103px"><strong>&bull;</strong>
                                                    WELLNESS</a></li>
                                                <li class="coCreatA"><a href="#"><strong>&bull;</strong> MODEL MATERIAL</a></li>
                                            </ul>
                                        </div>
                                        <div id="hairA" class="ddMenu">
                                            <table width="270px" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Fashion Buzz</a>
                                                        <p>
                                                            Catch the latest flashbulb
                                                            <br />
                                                            here...
                                                        </p>
                                                    </td>
                                                    <td width="39" align="left">
                                                        <img src="images/arrowmenu.png" alt="Hair Care" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/fbt.jpg" alt="Fashion Buzz" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Collection Unveiled</a>
                                                        <p>
                                                            Preview of latest
                                                            <br />
                                                            designer collection...</p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="Collection Unveiled" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_collection.jpg" alt="Collection Unveiled" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Lets talk</a>
                                                        <p>
                                                            Grab the latest
                                                            <br />
                                                            interactions here...</p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="Hair Care" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_tete.jpg" alt="Let's Talk" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td width="168" class="brdL">
                                                        <a href="stylegully.html">Style gully</a>
                                                        <p>
                                                            From road side fashion<br />
                                                            to high end luxury</p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="Hair Care" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_stg.jpg" alt="Style Gully" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="fashionA" class="ddMenu">
                                            <table width="270px" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">B-Town</a>
                                                        <p>
                                                            Mingled up
                                                            <br />
                                                            with stars here...</p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="B-Town" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_stylenews.jpg" alt="B-Town" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Movie review</a>
                                                        <p>
                                                            Straight sassy reviews from
                                                            <br />
                                                            B-Town...</p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="Movie Review" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_makeuptrends.jpg" alt="Movie Review" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td width="168" class="brdL">
                                                        <a href="#">Interview</a>
                                                        <p>
                                                            Grab the latest interactionss
                                                            <br />
                                                            here...
                                                            <br />
                                                        </p>
                                                    </td>
                                                    <td>
                                                        <img src="images/arrowmenu.png" alt="Tete a Tete" width="11" height="30" />
                                                    </td>
                                                    <td>
                                                        <a href="#" class="img">
                                                            <img src="images/dd_tete.jpg" alt="Tete a Tete" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="expertA" class="ddMenu" style="background: #FF0000">
                                            <table width="270px" border="0" cellspacing="0" cellpadding="0" style="background: #FF0000">
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Hot bod</a>
                                                        <p>
                                                            Treat yourself with
                                                            <br />
                                                            spicy tips...
                                                        </p>
                                                    </td>
                                                    <td width="39" align="left">
                                                        <img src="images/arrowmenu.png" alt="Hot Bod" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_hb.jpg" alt="Hot Bod" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Hot Launches</a>
                                                        <p>
                                                            Discovery Unplugged
                                                        </p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="Hot Launch" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_hotlaunches.jpg" alt="Hot Launch" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="makeoverA" class="ddMenu" style="background-color: #E219E2">
                                            <table width="270px" border="0" cellspacing="0" cellpadding="0" style="background-color: #E219E2">
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Decor</a>
                                                        <p>
                                                            Revamp your furnishing
                                                            <br />
                                                            ideas...
                                                        </p>
                                                    </td>
                                                    <td width="39" align="left">
                                                        <img src="images/arrowmenu.png" alt="Decor" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_forums.jpg" alt="Decor" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Dining</a>
                                                        <p>
                                                            Catch the grub zone
                                                            <br />
                                                            here!</p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="Dining" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_dining.jpg" alt="Dining" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Page 3</a>
                                                        <p>
                                                            Hey! Party Animals
                                                        </p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="NightLife" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_nightlife.jpg" alt="NightLife" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="showA" class="ddMenu">
                                            <table width="270px" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Paintings</a>
                                                        <p>
                                                            Display your creative face
                                                        </p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="Health care" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_art.jpg" alt="Health care" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td width="168" class="brdL">
                                                        <a href="#">Books</a>
                                                        <p>
                                                            For the bookworm
                                                            <br />
                                                            in you...
                                                        </p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="Books" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_books.jpg" alt="Books" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="enteA" class="ddMenu">
                                            <table width="270px" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="168" class="brd">
                                                        <a href="#">Health care</a>
                                                        <p>
                                                            Guide to fitness
                                                        </p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="Health care" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_healthcare.jpg" alt="Health care" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td width="168" class="brdL">
                                                        <a href="#">Gym & Spa</a>
                                                        <p>
                                                            Blissful ways to pamper<br />
                                                            yourself...
                                                        </p>
                                                    </td>
                                                    <td width="39">
                                                        <img src="images/arrowmenu.png" alt="Spa" width="11" height="30" />
                                                    </td>
                                                    <td width="63">
                                                        <a href="#" class="img">
                                                            <img src="images/dd_spa.jpg" alt="Spa" width="63" height="42" /></a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <script type="text/javascript">                                            cssdropdown.startchrome("nav")</script>
                                    </div>
                                    <div class="flashDiv" style="text-align: center">
                                    </div>
                                </div>
                                <div id="footerlinks">
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
        
            </td>
        </tr>
    </table>
    </td>
   
    </tr> </table>
</body>
</html>