tabsFoundation


<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Web Design Tutorial - Sample Site</title>


  <link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
  <script src="js/vendor/custom.modernizr.js"></script>
   <script src="https://code.jquery.com/jquery-1.11.2.js"></script>


</head>
<body  style=" margin: 20px;">
      <div class="row">
        <div class="large-3 columns">
          <h1><img src="http://placehold.it/400x100&text=Logo"/></h1>
        </div>
        <div class="large-9 columns">
          <ul class="right button-group">
          <li><a href="index.html" class="button">Home</a></li>
          <li><a href="services.html" class="button">Service</a></li>
          <li><a href="aboutus.html" class="button">About Us</a></li>
          <li><a href="faq.html" class="button">FAQ </a></li>
		  <li><a href="contact.html" class="button">Contact Us</a></li>
          </ul>
         </div>
       </div>


	   <div class="row">
<!-- Contact Details -->
<div class="large-9 columns">
<h3>Get in Touch!</h3>
	<p>We'd love to hear from you. You can either reach out to us as a whole and	one of our awesome team members will get back to you, or if you have a 	specific question reach out to one of our staff. We love getting email all 	day <em>all day</em>.</p>

<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel1">Contact Our Company</a></dd>
  <dd><a href="#panel2">Specific Person</a></dd>
</dl>
<div class="tabs-content">
  <div class="content active" id"panel1">
    <form>
	<div class="row collapse">
	 <div class="large-2 columns">
	   <label class="inline">Your Name</label>
	 </div>
	 <div class="large-10 columns">
	   <input type="text" id="yourName" placeholder="name">
	 </div>
	</div>
	<div class="row collapse">
          <div class="large-2 columns">
	     <label class="inline"> Your Email</label>
	  </div>
	  <div class="large-10 columns">
	     <input type="text" id="yourEmail" placeholder="email@domain-name.com">
	  </div>
	</div>
	<label>What's up?</label>
	<textarea rows="4"></textarea>
	<button type="submit" class="radius button">Submit</button>
    </form>
  </div>

  <div class="content" id="panel2">
     <ul class="large-block-grid-5">
	<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 1</a></li>
        <li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 2</a></li>
	<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 3</a></li>
	<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 4</a></li>
	<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 5</a></li>
	<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 6</a></li>
	<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 7</a></li>
	<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 8</a></li>
	<li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 9</a></li>
    </ul>
  </div>
</div>

</div>
</div>
	<!-- End Contact Details -->


      <footer class="row">
        <div class="large-12 columns">
          <hr/>
          <div class="row">
            <div class="large-6 columns">
              <p>© Copyright - Tourist Site.</p>
            </div>
            <div class="large-6 columns">
              <ul class="inline-list right">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">FAQ</a></li>
				<li><a href="#">Contact Us</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>


  <script src="http://cdn.foundation5.zurb.com/foundation.js"></script>

  <script>
    $(document).foundation();
  </script>
</body>
</html>