Neema Header Short
by Koubenec
HTML
<script src="http://www.neemainternational.org/wp-content/uploads/scripts/jQuery1.7.2.min.js" type="text/javascript"></script>
<div id="logostrip"><img src="http://neemainternational.org/wp-content/uploads/2012/10/Hdr_strip_small.png"></div>
<div id="headr"><div id="buttons"><div id="aboutthekids" class="item">ABOUT THE KIDS</div><div class="item">WHAT'S GOING ON</div><div class="item">NEEMA BLOG</div><div class="item">SUPPORT THE KIDS</div><div class="item">BUTTON NO 5</div></div></div>
CSS
#logostrip {
width: 407px;
height: 35px;
margin-bottom: 10px;
margin-top: 10px;
}
#headr {
background-color: transparent;
background-position: middle top;
width: 1000px;
height: 120px;
border: 10px solid #824c24;
}
#buttons {
position: absolute;
top: 80px;
width: 1000px;
height: 500px;
}
#aboutthekids {
}
#aboutthekids:hover {
color: #fff;
}
.item {
width: 237px;
height: 40px;
opacity: 1;
float: left;
background-color: transparent;
/* background-image: url('http://neemainternational.org/wp-content/uploads/2012/10/Diag_pattern_1.png');
background-repeat: repeat-x repeat-y;
background-position: top left; */
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
font-size: 23px;
color: #824c24;
font-family: 'jump_startregular', cursive;
}
.item:hover {
background-color: #DC6969;
}
.icon {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 10px;
}
@font-face {
font-family: 'jump_startregular';
src: url('http://www.neemainternational.org/wp-content/uploads/fonts/jstart-webfont.eot');
src: url('http://www.neemainternational.org/wp-content/uploads/fonts/jstart-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.neemainternational.org/wp-content/uploads/fonts/jstart-webfont.woff') format('woff'),
url('http://www.neemainternational.org/wp-content/uploads/fonts/jstart-webfont.ttf') format('truetype'),
url('http://www.neemainternational.org/wp-content/uploads/fonts/jstart-webfont.svg#jump_startregular') format('svg');
font-weight: normal;
font-style: normal;
JavaScript
//$(document).ready(function() {
// $("#buttons").hover(function() {
// $("#menubase").stop().animate({
// "opacity": "0"
// }, 'fast');
// }, function() {
// $("#menubase").stop().animate({
// "opacity": "0.8"
// }, 'fast');
// });
// $("#buttons").hover(function() {
// $("#menubase").stop().animate({
// "opacity": "0.8"
// }, 'fast');
// }, function() {
// $("#menubase").stop().animate({
// "opacity": "0"
// }, 'fast');
// });
// $("#buttons").hover(function() {
// $(".item").stop().animate({
// "opacity": "1"
// }, 'fast');
// }, function() {
// $(".item").stop().animate({
// "opacity": "0"
// }, 'fast');
// });
//});