<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Urban Spoon Restaurant </title>
  <META NAME="Author" CONTENT="PUT YOUR COMPANY INFO HERE">
  <meta name="keywords" content="PUT, YOUR, CLIENT'S, COMPANY, INFO, HERE">
  <meta name="description" content="PUT YOUR CLIENT'S COMPANY INFO HERE">
  <meta name="HandheldFriendly" content="true">
  <meta name="MobileOptimized" content="220">

  <meta name="viewport" content="width=320">

  <link rel="stylesheet" type="text/css" href="css/global_style.css">
  <link rel="stylesheet" type="text/css" href="css/fontsheet.css">
 </head>

<body  class="home">
	
	<div id="header"><a href="index.html" class="logo"><img src="images/logo.png" alt=""  /></a>
    </div>
    <div class="car-01">
    	 <p>We love to pass on it...!</p>
         <span>Exclusive, Spectacular Dining in london.</span>				
    </div>
    <p class="clear"></p>
<div class="videoBox">
<iframe width="100%" height="120" frameborder="0" src="http://www.youtube.com/embed/bciJbkGETuI" allowfullscreen=""></iframe>
</div>
        <div class="dealBox">
        	<p>Royal</p>
            <span class="tag-line">Not Afternoon Tea</span>
            <strong>SHAKA ZULU</strong>
            <span class="p1">ONLY $27.50</span>
        
        </div>
<!-- image slider background -->


<!--<style type="text/css">
	/* rotator in-page placement */
	div.rotator {
		/*position:relative;*/
		height: 120px;
		width: 320px%;
		margin-right: auto;
	    margin-left: auto;
	}

	/* rotator css */
	div.rotator ul li {
		/*float:left; */
		position:absolute;
		list-style: none;
		width: 320px;
	}

	 div.rotator ul li.show {
		z-index:500;
	}
</style>-->
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
	function theRotator() {
		//Set the opacity of all images to 0
		$('div.rotator ul li').css({opacity: 0.0});

		//Get the first image and display it (gets set to full opacity)
		$('div.rotator ul li:first').css({opacity: 1.0});

		//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

		setInterval('rotate()',6000);

	}

	function rotate() {
		//Get the first image
		var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

	    if ( current.length == 0 ) current = $('div.rotator ul li:first');

		//Get next image, when it reaches the end, rotate it back to the first image
		var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

		//Un-comment the 3 lines below to get the images in random order

		//var sibs = current.siblings();
	        //var rndNum = Math.floor(Math.random() * sibs.length );
	        //var next = $( sibs[ rndNum ] );


		//Set the fade in effect for the next image, the show class has higher z-index
		next.css({opacity: 0.0})
		.addClass('show')
		.animate({opacity: 1.0}, 1000);

		//Hide the current image
		current.animate({opacity: 0.0}, 1000)
		.removeClass('show');

	};



	$(document).ready(function() {
		//Load the slideshow
		theRotator();
		$('div.rotator').fadeIn(1000);
	    $('div.rotator ul li').fadeIn(1000); // tweek for IE
	});
</script>



		<div id="content">
	  <a data-role="button" data-transition="fade" href="#" class="btn"><span></span>LIKE US ON FACEBOOK!</a>
    <div id="home-nav">

			  <div class="container">
  <div class="thomas-center">
    <input type="text" name="username" class="thomas-text" placeholder="Username">
    <br/>
    <br/>
    <input type="text" name="email" class="thomas-text" placeholder="E-mail Address">
    <br/>
    <br/>
    <input type="submit" name="submit" value="Get Instant Access" class="thomas-button">
  </div>
</div>
</div>
<div id="footer">
<div id="footer-links">
				<div id="social">
                <a title="Facebook" href="#"><img src="images/fb.png" alt="Facebook" style="margin-top:20px;"/></a>
                 <a title="Linkedin" href="#"><img src="images/in.png" alt="Linkedin" /></a>
                <a title="Twitter" href="#"><img src="images/tweet.png" alt="Twitter" /></a>
                <a title="Youtube" href="#"><img src="images/youtube.png" alt="YouTube"/></a>
                </div>
			
		</div>
</body>
</html>

</html>
