<!DOCTYPE html>
<html>
<head>
<style>
/*This is for the font of the website */
<style type="text/css">
<!--
@font-face {
font-family: Damn Noisy Kids;
src: url('Damn Noisy Kids.ttf');}
.customfont {
font-family: Damn Noisy Kids; /* no .ttf */
font-size: 40px;
color: white;
}
/*End of Font Code*/
/*Backround Image Code*/
body
{
background:url(backround.png);
background-size:80px 60px;
-moz-background-size:80px 60px; /* Old Firefox */
background-repeat:repeat;
padding-top:20px;
}
/*End backround image code*/
/*This is Shadow Text Code*/
h1
{
text-shadow: 2px 2px 2px #FF0000;
}
/*End of Shadow Text*/
/*This code is for word wrap*/
p {word-wrap:break-word;}
/*End Word Wrap*/
#youtube
{
position:relative;
left:0px;
top:25px;
height:315px;
width:575px;
padding:10px;
border:5px solid gray;
margin:0px;
}
/*Beginning of box thread*/
#box1
{
position:relative;
left:-300px;
top:25px;
height:250px;
width:250px;
padding:10px;
border:5px solid gray;
margin:0px;
}
#box2
{
position:relative;
left:0px;
top:-275px;
height:250px;
width:250px;
padding:10px;
border:5px solid gray;
margin:0px;
}
#box3
{
position:relative;
left:300px;
top:-575px;
height:250px;
width:250px;
padding:10px;
border:5px solid gray;
margin:0px;
}
/*End of Box Thread*/
/*Social Bar For FB Twit YouT*/
#leftcontainerBox {
float: left;
z-index: 1000;
}
#leftcontainerBox .buttons {
clear: both;
float: left;
height: 75px;
margin: 4px;
padding-bottom: 2px;
padding-left: 3px;
width: 85px;
}
/*End Social Bar Code*/
/*Right Side Menu Bar*/
/*Menu Code for the Right Side*/
#menu
{
display: block;
width: 150px;
height: 45px;
}
/*End Menu Code*/
/*Button Hover Code*/
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
/*End Button Hover Code*/
/*Jquery Scroller Code*/
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<style type="text/css">
.pics { height: 382px; width: 557px; padding:0; margin:0; overflow: hidden }
.pics img { height: 350px; width: 525px; padding: 15px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }
.pics img {
-moz-border-radius: 10px; -webkit-border-radius: 10px;
</style>
/*End JQuery Scroller Code*/
<style>
/*Javascript for Youtube Scroller*/
<script type="text/javascript">
$('#slideshow').cycle({
fx: 'fade',
timeout: 2000,
speed: 2000,
autostop: 1,
});
</script>
</style>
/*End Javascript for Youtube Scroller*/
</head>
<body>
<br>
<center><img src="logo.png" width="303" height="286" alt="" border="0"></center>
<br>
<div id="slideshow" class="pics">
<a href="http://www.youtube.com/watch?v=e5b6fyFsW0M"><img src="js/jqueryslideshow/sc1.PNG" width="641" height="390" alt="" border="0"></a>
<a href="http://www.youtube.com/watch?v=cx4FptzIhDI"><img src="js/jqueryslideshow/sc2.PNG" width="641" height="391" alt="" border="0"></a>
<a href="http://www.youtube.com/watch?v=pQuHs9rEqvo"><img src="js/jqueryslideshow/sc3.PNG" width="640" height="391" alt="" border="0"></a>
</div>
<br>
<div id="box1"><font color="#FF8000"><b><img src="images/eng_01.jpg" width="199" height="186" alt="" border="0"></b></font></div>
<br>
<div id="box2"><font color="#808080"><b><img src="images/outl_01.jpg" width="200" height="190" alt="" border="0"></b></font></div>
<br>
<div id="box3"><font color="#C0C0C0"><b><img src="images/embr_01.jpg" width="188" height="199" alt="" border="0"></b></font></div>
<br>
<br>
<div class="customfont">This is my font.</div>
<br>
<br>
<div style="border:1px solid #808080;position:fixed; top:40%; left:0px;" id="leftcontainerBox">
<div class="buttons">
<img src="social/faceb.png" width="80" height="80" alt="" border="0">
</div>
<div class="buttons">
<img src="social/twitter.png" width="80" height="80" alt="" border="0">
</div>
<div class="buttons">
<img src="social/yout.png" width="80" height="80" alt="" border="0">
</div>
<br>
<br>
<div style="border:1px solid #808080;position:fixed; top:40%; right:0px;" id="rightcontainerBox">
<a id="menu" href="http://www.kingfizz.com" title="menu"><span><img src="buttons/button_reg_home.png" width="150" height="40" alt="" border="0"></span></a>
<a id="menu" href="http://www.kingfizz.com" title="menu"><span><img src="buttons/button_reg_about.png" width="150" height="40" alt="" border="0"></span></a>
<a id="menu" href="http://www.kingfizz.com" title="menu"><span><img src="buttons/button_reg_pic.png" width="150" height="40" alt="" border="0"></span></a>
<a id="menu" href="http://www.kingfizz.com" title="menu"><span><img src="buttons/button_reg_cont.png" width="150" height="40" alt="" border="0"></span></a>
<a id="menu" href="http://www.kingfizz.com" title="menu"><span><img src="buttons/button_reg_shop.png" width="150" height="40" alt="" border="0"></span></a>
</body>
</html>
* Please notice the jquery area where I use js/jscroller for my images, it's not working
, I have the files installed on my PC for the jquery, but it's just showing three big boxes with images, and completely removes one of my #box divisions from the page. I don't know what's wrong.
