<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
	<title>Quickr - Portfolio and business template - Contact</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=News+Cycle|PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css' />
    <!--[if lt IE 9]>   <link rel="stylesheet" type="text/css" href="css/ie.css" /> <![endif]-->
    <meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
    <script type="text/javascript" src="js/validate.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
	<script type="text/javascript" src="js/gmap3.min.js"></script>
    <script type="text/javascript" src="js/jquery.tools.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <script type="text/javascript">
    
      jQuery(function(){
  
        jQuery('#googlemap').gmap3(
          {
            action: 'addMarker',
            address: "1319 Stanley avenue, Glendale, Los Angeles, USA",
            map:{
              center: true,
              zoom: 14
            },
			
          },
          {action: 'setOptions', args:[{scrollwheel:true}]}
        );
          
      });
    </script>  
	<!--[if lt IE 9]>
    	<script src="js/html5.js"></script>
    <![endif]-->
</head>
<body>
<div id="header-top"></div>
<!-- BEGIN Header -->
<header class="container">	
    <div id="logo" class="seven columns">
        <div class="three columns alpha">
        	<a href="index.html"><img src="images/logo.png" width="138" height="46" alt="Quickr" /></a>
        </div>
        <div class="four columns alpha last">
        	<p id="slogan">For business and portfolio</p>
        </div>
        <div class="clear"></div>
    </div>
    <nav class="nine columns last">
        <ul class="sf-menu">
            <li><a href="index.html">Home</a>
            <ul class="sub-menu">
 					<li><a href="index.html">Quickr Slider (Default)</a></li>
					<li><a href="index6.html">FlexiSlider</a></li>
                    <li><a href="index2.html">Full Width Slider</a></li>
                    <li><a href="index3.html">Circle Navigation Slider</a></li>
                    <li><a href="index4.html">Piecemaker - 3D Slider</a></li>
                    <li><a href="index5.html">Kenburns Slider</a></li>
            </ul>
            </li>
            <li><a href="work.html">Work</a>
			<ul class="sub-menu">
                    <li><a href="work-inner.html">Portfolio Inner</a></li>
					<li><a href="work-video.html">Portfolio Video</a></li>
					<li><a href="work-audio.html">Portfolio Audio</a></li>
			</ul>
			</li>
            <li><a href="about.html">Pages</a>
             <ul class="sub-menu">
                    <li><a href="shortcodes.html">Shortcodes</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="services.html">Services</a></li>
					<li><a href="sitemap.html">Sitemap</a></li>
                    <li><a href="404.html">404 Page</a></li>
                    <li><a href="under-construction.html">Under Construction</a></li>
                    <li><a href="#">Third level sample</a>
                        <ul class="sub-menu">
                            <li><a href="#">First element</a></li>
                            <li><a href="#">Some element</a></li>
                            <li><a href="#">Another element</a></li>                          
                        </ul>    
                    </li>
                </ul>
            </li>
            <li><a href="blog.html">Blog</a>
			<ul class="sub-menu">
                    <li><a href="blog_sidebar_left.html">Sidebar Left</a></li>
                    <li><a href="blog.html">Sidebar Right</a></li>
                    <li><a href="blog-inner.html">Inner page</a></li>
            </ul>
            </li>
            <li><a href="contact.html"  class="active-item">Contact</a></li>
        </ul>
    </nav>
    <div class="clear"></div>
</header>
<!-- END Header -->
<!-- BEGIN Content -->
<div class="inner-bg"></div>
<div id="content-wrapper">
    <div id="content" class="container">
    	<div class="sixteen columns">
            <div id="content-top">
                <ul id="breadcrumb" class="twelve columns alpha">
                    <li class="home"><a href="index.html">Home</a></li>
                    <li>About</li>
                </ul>
                <div class="four columns last" id="search-global">
                    <form id="search-global-form" method="post">
                        <div>
                            <input type="text" name="searchterm" value="" title="Search terms" />
                            <input type="submit" value="" name="search" />
                            <div class="clear"></div>
                        </div>
                    </form>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="sixteen columns">
            <div id="googlemap" class="gmap3"></div>
            <div class="central-divider bottom20"></div>
            <h2 class="uppercase">Contact <span>Us</span> </h2>
            <div class="colorbox"></div>
            <div class="eight columns alpha">
                <h4>Send us a message</h4>
                <p>
                    Donec tempus nisi sit amet velit congue faucibus. Pellentesque fermentum porttitor sem, nec gravida neque fringilla ut. 
                    Morbi et nisi arcu, nec blandit sapien.  
                </p>
                <form id="contact-form" class="contactForm">
                    <div id="status"></div>
                    <div class="four columns alpha">
                        <label for="name">Name</label>
                        <?php if(isset($nameError) && $nameError != ''): ?><span class="errorarr"><?php echo $nameError;?></span><?php endif;?>					
                        <input type="text" id="name" value="" name="name" />
                        
                    </div>
                    <div class="four columns last">
                        <label for="email">Email</label>
                        <?php if(isset($emailError) && $emailError != ''): ?><span class="errorarr"><?php echo $emailError;?></span><?php endif;?>	
                        <input type="text" id="email" name="email" value="" />
                    </div>
                    <div class="clear"></div>
                    <div>
                        <label for="message">Message</label>
                        <?php if(isset($messageError) && $messageError != ''): ?><span class="errorarr"><?php echo $messageError;?></span><?php endif;?>	
                        <textarea name="message" id="message" rows="50" cols="10"></textarea>
                    </div>
                    <div class="right">
                        <input type="submit" name="send" value="Submit" />
                        <input type="reset" name="resent" value="Reset" />
                    </div>
                </form>
            </div>
            <div class="eight columns last">
                <div class="four columns alpha">
                    <h4>Office</h4>
                    <p>Use the map above to get more information about our main office.</p>
                    <div class="contact-details">
                        <span>Address:</span><p>008 Quickers Street, <br />Cupertino, CA, 12345</p>
                        <span>Phone:</span><p>(123) 456-7890</p>
                        <span>Fax:</span><p>(123) 456-7890</p>
                        <span>E-mail:</span><p>office@quickr.com</p>
                    	<div class="clear"></div>
                    </div>
                </div>
                <div class="four columns last">
                    <h4>We are social</h4>
                    <p>Become a friend or follow us on the most popular social networks</p>
                    <div id="social-icons">
                        <a href="#" title="Become a Friend on Facebook" class="tooltip"><img src="images/demo/social-icons/facebook.png" alt="Facebook" /></a>
                        <a href="#" title="Follow us on Twitter" class="tooltip"><img src="images/demo/social-icons/twitter.png" alt="Twitter" /></a>
                        <a href="#" title="Who we are"  class="tooltip"><img src="images/demo/social-icons/linkedin.png" alt="LinkedIn" /></a>
                        <a href="#" title="Subscribe to RSS" class="tooltip"><img src="images/demo/social-icons/rss.png" alt="RSS" /></a>
                        <div class="clear"></div>
                    </div>
                    <p>
                        Aliquam sagittis ipsum eu est pretium sed blandit nunc scelerisque. Quisque luctus elementum risus id adipiscing. 
                        Ut eu rhoncus mauris.
                    </p>
                </div>
                <div class="clear"></div>
            
            </div>
            <div class="clear"></div>
             <div class="central-divider top20 bottom20"></div>
    	</div>
       
    </div>
</div>
<!-- END Content -->
<!-- BEGIN Footer -->
<div id="footer-wrapper">
	<footer class="container">
    	<div class="four columns footer-block">
        	<h3>Latest News</h3>
            <div class="colorbox"></div>
            <ul class="news">
            	<li><a href="#">Create a Multi-Layout Portfolio with WordPress</a></li>
                <li><a href="#">Quick Tip: Create Cross-Browser Datepickers in Minutes</a></li>
                <li><a href="#">Top 15+ Best Practices for Writing Super Readable Code</a></li>
           </ul>
        </div>
        <div class="four columns footer-block">
        	<h3>Twitter Widget</h3>
            <div class="colorbox"></div>
            <ul id="twitter_update_list" class="twitter">
            	<li>@4grafx  20+ Enhancing CSS3 tools and generators <a href="#">goo.gl/1HQER</a><a class="twit-date">28 minutes ago</a></li>
            	<li>@4grafx  20+ Enhancing CSS3 tools and generators <a href="#">goo.gl/1HQER</a><a class="twit-date">2 days ago</a></li>                
            </ul>
        </div>
        <div class="four columns footer-block">
        	<h3>Popular Posts</h3>
            <div class="colorbox"></div>
            <ul class="list-posts">
            	<li>
                	<div class="list-post-thumb">
                    	<img src="images/demo/footer1.png" alt="" />
                    </div>
                    <div class="list-post-desc">
                    	<a href="#">Quick Tip: What The Heck Is A Hex Value Anyway? </a>
                    </div>
                    <div class="clear"></div>
                </li>
                <li>
                	<div class="list-post-thumb">
                    	<img src="images/demo/footer2.png" alt="" />
                    </div>
                    <div class="list-post-desc">
                    	<a href="#">Automated Optimization with HTML5 Boilerplate Build </a>
                    </div>
                    <div class="clear"></div>
                </li>
                <li>
                	<div class="list-post-thumb">
                    	<img src="images/demo/footer3.png" alt="" />
                    </div>
                    <div class="list-post-desc">
                    	<a href="#">The Top 8 Placeholder Services for Web Designers</a>
                    </div>
                    <div class="clear"></div>
                </li>
            </ul>
        </div>
        <div class="four columns last footer-block">
        	<h3>Contact Us</h3>
            <div class="colorbox"></div>
            <p>Suspendisse euismod, nunc eget pellentesque pellentesque, odio lectus tempor antea tristique sem. </p>
            <div class="contact-details">
            	<span>Address:</span><p>012 Circle Street New York, NY, 12345</p>
                <span>Phone:</span><p>(123) 456-7890</p>
                <span>Fax:</span><p>(123) 456-7890</p>
                <span>E-mail:</span><p>office@quickr.com</p>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div id="footer-bottom-divider"><a href="#" id="toTop"><img src="images/back-top.png" width="22" height="22" alt="Back to top" /></a></div>
        <div id="footer-bottom">
             <div id="copyright">
                Copyright © 2011 QuickR — Template design by 4Grafx
             </div>
             <div id="footer-menu">
                <ul>
 	              	<li><a href="index.html">home</a></li>
		            <li><a href="sitemap.html">sitemap</a></li>
					<li><a href="about.html">about us</a></li>
					<li><a href="contact.html">contact us</a></li>
               </ul>
             </div>
             <div class="clear"></div>
         </div>
    </footer>
</div>
<!-- END Footer -->
<script type="text/javascript">
<!-- Contact form validation
jQuery(document).ready(function(){
  jQuery(".contactForm").validate({
	submitHandler: function() {
	
		var postvalues =  jQuery(".contactForm").serialize();
		
		
		jQuery.ajax
		 ({
		   type: "POST",
		   url: "contact/process-form.php",
		   data: postvalues,
		   success: function(response)
		   {
		 	 jQuery("#status").html(response).show('normal');
		     jQuery('.contactForm :input.not("#send"), #message').val("");
		   }
		 });
		return false;
		
    },
	focusInvalid: true,
	focusCleanup: false,
	errorLabelContainer: jQuery("#registerErrors"),
  	rules: 
	{
		name: {required: true},
		email: {required: true, minlength: 6,maxlength: 50, email:true},
		message: {required: true}
	},
	
	messages: 
	{
		contactName: {required: "Name is required"},
		email: {required: "E-mail is required", email: "Please provide a valid e-mail"},
		message: {required: "Message is required"}
	},
	
	errorPlacement: function(error, element) 
	{
		error.insertBefore(element);
		jQuery('<span class="errorarr"></span>').insertBefore(element);
	},
	invalidHandler: function()
	{
		//jQuery("body").animate({ scrollTop: 0 }, "slow");
	}
	
});
});
-->
</script>
</body>
</html>