Bind Solution WebSite
HTML
<script src="http://gsgd.co.uk/js/jquery.easing.1.1.js"></script>
<script src="http://www.dreamweavertutorial.co.uk/dreamweaver/examples/lava/js/jquery.lavalamp.min.js"></script>
<div id="header">
<a class="bind-font float-left" href="/">bind solution</a>
<ul id="header-menu">
<li><a href="/">home</a></li>
<li><a href="/Portfolio">portfolio</a></li>
<li><a href="/Services">services</a></li>
<li><a href="/About">about</a></li>
</ul>
<div id="header-login">
<a href="/Home/Login">Log in</a>
</div>
</div>
<div id="content">
<h1>Home</h1>
<p><a href="/Home/Error">Sample</a> of Link</p>
</div>
<div id="footer">
<a href="#">Language</a>
</div>
CSS
body
{
font-size: 12px;
font-family: Arial, "Helvetica Neue" , Sans-Serif, Tahoma, Verdana, Helvetica;
color: #0E2D09;
padding: 0px;
margin: 0px;
}
a
{
color: #267B17;
text-decoration: none;
}
a:hover
{
text-decoration:underline;
}
h1
{
color: #133F0C;
margin: 10px 0px;
}
/* Helpers
-----------------------------------------------------------*/
.clear
{
clear: both;
}
.float-left
{
float: left;
}
.float-right
{
float: right;
}
/* Header
-----------------------------------------------------------*/
div#header
{
font-size: 11px;
background-color: #F2FFF2;
border-bottom: 1px solid #D0FDC6 /* min-height:1%; Float clearing for IE7 */ /* height:1%; Float clearing for IE6 */;
clear: both;
}
div#header a:hover
{
text-decoration:none;
}
div#header:after
{
content:'.';
display:block;
height:0;
clear:both;
visibility:hidden;
}
div#header-login
{
float:right;
padding: 10px;
font-weight:bold;
}
.bind-font
{
font-family: bauhaus;
font-size: 22px;
color: #236F15;
padding: 5px 15px;
margin: 0px;
}
a.bind-font:hover
{
text-decoration:none;
}
/* Menu
-----------------------------------------------------------*/
ul#header-menu
{
margin:0px;
padding:0px;
float:left;
}
ul#header-menu li
{
float: left;
list-style: none;
padding:10px 0px 0;;
}
/* LavaLamp */
ul#header-menu li.back
{
border-top: 3px solid #2E951C;
position: absolute;
}
ul#header-menu li a
{
font-weight: bold;
padding:0px 15px;
vertical-align:middle;
}
/* Content
-----------------------------------------------------------*/
div#content
{
width: 1024px;
margin: 10px auto;
}
/* Footer
-----------------------------------------------------------*/
div#footer
{
font-size:10px;
width:1024px;
margin: 10px auto;
text-align:center;
border-top:1px solid #D0FDC6;
padding:10px;
}
/* Styles for basic...
JavaScript
$(function () {
$('ul#header-menu').lavaLamp({ fx: "backout", speed: 700 });
});