<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" href="animated-menu.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=3.2.1" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="animated-menu.js" type="text/javascript"></script>
<script src="js/jquery.roundabout.js"></script>
<script>
$(document).ready(function() {
$(".ul2").roundabout({
autoplay: true,
autoplayDuration: 5000,
autoplayPauseOnHover: true
});
});
</script>
</head>
<body style="background-image:url('images/dark_wood.png'); background-repeat:repeat-all;">
<ul class="menus" style="width: 800px; margin-left: auto; margin-right: auto; margin-top:10px;">
<li class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>
<center><div><ul class="ul2" >
<li><img width="100%" height="100%"src="images/1.png"/></li>
<li><img width="100%" height="100%"src="images/2.png"/></li>
<li><img width="100%" height="100%"src="images/3.png"/></li>
<li><img width="100%" height="100%"src="images/4.png"/></li>
<li><img width="100%" height="100%"src="images/5.png"/></li>
<li><img width="100%" height="100%"src="images/6.png"/></li>
</ul></div>
</center>