index.html

---                                                                                                 
  layout: default
  title: ThoughtSauce Hong Kong
---
<!-- Primary Page Layout
================================================== -->

<div id="intro">

  <div class="bg1"></div>

  <div class="title">
    <div class="intro-line"></div>
    <h1>We Are</h1>
    <h1 class="small">Thought<span>Sauce</span></h1>
    <div class="intro-line"></div>
    <p>Specialists in Ruby, Rails and Agile.</p>
  </div> <!-- end title -->
</div> <!-- end intro -->


<nav>
  <ul>
    <li><a href="#intro" title="ThoughtSauce Home"><img src="images/logo_thoughtsauce.jpg" alt="ThoughtSauce logo" width="35px"/></a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>

  <select name="dropdpown" size="1" onChange="scrollTo(this.value)">
    <option value="" selected="selected">Menu</option>
    <option value="#intro">Top</option>
    <option value="#work">Work</option>
    <option value="#services">Services</option> 
    <option value="#about">About</option> 
    <option value="#contact">Contact</option> 
  </select>
</nav>


<div id="work">
  <div class="container">

    <div class="sixteen columns">
      <h2><span class="lines">Work</span></h2>
    </div> <!-- end sixteen columns -->

    <div class="eight columns">
      <p>I have traced the Rebel spies to her. Now she is my only link to finding their secret base. You don't believe in the Force, do you? All right. Well, take care of yourself, Han. Hokey religions and ancient weapons are no match for a good blaster at your side, kid.</p>
    </div> 

    <div class="eight columns">
      <p>Send a distress signal, and inform the Senate that all on board were killed. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. She must have hidden the plans in the escape pod.</p>
    </div>

    <div class="clear"></div>

    <div class="sixteen columns">
      <div class="flexslider">
        <ul class="slides">
          <li><a href="http://www.google.com"><img src="images/slide1.jpg" alt="" /></a></li>
          <li><img src="images/slide2.jpg" alt="" /></li>
          <li><img src="images/slide3.jpg" alt="" /></li>
        </ul>
      </div><!-- end flexslider -->
    </div> <!-- end sixteen columns -->


    <div class="eight columns">
      <p class="mid-text">I have traced the Rebel spies to her. Now she is my only link to finding their secret base. You don't believe in the Force, do you? All right. Well, take care of yourself, Han. Hokey religions and ancient weapons are no match for a good blaster at your side, kid.</p>
    </div> 

    <div class="eight columns">
      <p class="mid-text">Send a distress signal, and inform the Senate that all on board were killed. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. She must have hidden the plans in the escape pod.</p>
    </div>

    <div class="clear"></div>

    <div class="portfolio">

      <div class="one-third column">
        <!-- begin example gallery -->
        <a href="images/example-img.png" rel="prettyPhoto[gallery1]" title="Your text here"><img src="images/thumb1.jpg" class="scale-with-grid" alt="" /></a>
        <div class="hidden"><a href="images/example-img.png" rel="prettyPhoto[gallery1]" title="your text here again"><img src="images/thumb4.jpg" class="scale-with-grid" style="display:hidden;" /></a></div>
        <div class="hidden"><a href="images/example-img.png" rel="prettyPhoto[gallery1]" title="your text here again"><img src="images/thumb4.jpg" class="scale-with-grid" style="display:hidden;" /></a></div>
        <div class="hidden"><a href="images/example-img.png" rel="prettyPhoto[gallery1]" title="your text here again"><img src="images/thumb4.jpg" class="scale-with-grid" style="display:hidden;" /></a></div>
        <!-- end gallery -->
        <p class="proj-title">Project title</p>
        <p class="proj-desc">Project description</p>
      </div> <!-- end one-third column -->

      <div class="one-third column">
        <a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf?width=792&amp;height=294" rel="prettyPhoto" title="Your text here"><img src="images/thumb2.jpg" class="scale-with-grid" alt="" /></a>
        <p class="proj-title">Project title</p>
        <p class="proj-desc">Project description</p>
      </div> <!-- end one-third column -->

      <div class="one-third column">
        <a href="images/example-img.png" rel="prettyPhoto" title="&lt;a href=&quot;yourLink.html&quot;&gt;Your text&lt;/a&gt;"><img src="images/thumb3.jpg" class="scale-with-grid" alt="" /></a>
        <p class="proj-title">Project title</p>
        <p class="proj-desc">Project description</p>
      </div> <!-- end one-third column -->

      <div class="clear"></div>

      <div class="one-third column">
        <a href="http://vimeo.com/26413257" rel="prettyPhoto" title="Your text here"><img src="images/thumb4.jpg" class="scale-with-grid" alt="" /></a>
        <p class="proj-title">Project title</p>
        <p class="proj-desc">Project description</p>
      </div> <!-- end one-third column -->

      <div class="one-third column">
        <a href="images/example-img.png" rel="prettyPhoto" title="Your text here"><img src="images/thumb5.jpg" class="scale-with-grid" alt="" /></a>
        <p class="proj-title">Project title</p>
        <p class="proj-desc">Project description</p>
      </div> <!-- end one-third column -->

      <div class="one-third column">
        <a href="http://youtu.be/mEcFTpbRiJs" rel="prettyPhoto" title="Your text here"><img src="images/thumb6.jpg" class="scale-with-grid" alt="" /></a>
        <p class="proj-title">Project title</p>
        <p class="proj-desc">Project description</p>
      </div> <!-- end one-third column -->

    </div> <!-- end portfolio -->

    <div class="clear"></div>

    <div class="sixteen columns">
      <div class="action">
        <p>You don't believe in the force do you?</p>
        <a href="#contact" ><div class="button1">Say hey</div></a>
      </div> <!-- end action -->
    </div> <!-- end sixteen columns --> 

  </div> <!-- end container -->
</div> <!-- work -->


<div id="separator1">
  <div class="bg2"></div>
  <p class="separator">A tremor in the Force. The last time I felt it was in the <br />presence of my old master</p>
</div>


<div id="services">
  <div class="container">

    <div class="sixteen columns">
      <h2 class="white"><span class="lines">Services</span></h2>
    </div> <!-- end sixteen columns -->

    <div class="clear"></div>

    <div class="eight columns">
      <p class="white">I have traced the Rebel spies to her. Now she is my only link to finding their secret base. You don't believe in the Force, do you? All right. Well, take care of yourself, Han. Hokey religions and ancient weapons are no match for a good blaster at your side, kid.</p>
    </div> 

    <div class="eight columns">
      <p class="white">Send a distress signal, and inform the Senate that all on board were killed. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. She must have hidden the plans in the escape pod.</p>
    </div>

    <div class="clear"></div>

    <div class="serv-list">
      <div class="one-third column">
        <h4>Design</h4>
        <img src="images/serv-icon1.png" alt="" />
        <p class="white">He is here. A tremor in the Force. The last time I felt it was in the presence of my old master. Hey, Luke! May the Force be with you. The plans you refer to will soon be back in our hands.</p>
      </div>

      <div class="one-third column">
        <h4>Development</h4>
        <img src="images/serv-icon2.png" alt="" />
        <p class="white">He is here. A tremor in the Force. The last time I felt it was in the presence of my old master. Hey, Luke! May the Force be with you. The plans you refer to will soon be back in our hands.</p>
      </div>

      <div class="one-third column">
        <h4>Wordpress</h4>
        <img src="images/serv-icon3.png" alt="" />
        <p class="white">He is here. A tremor in the Force. The last time I felt it was in the presence of my old master. Hey, Luke! May the Force be with you. The plans you refer to will soon be back in our hands.</p>
      </div>
    </div> <!-- end serv-list -->

    <div class="clear"></div>

    <div class="pricing">

      <div class="sixteen columns">
        <h3 class="white"><span class="lines">Pricing Tables</span></h3>
      </div> <!-- end sixteen columns -->

      <div class="four columns">
        <p class="p-name">Basic</p>
        <p class="p-price">$5.99 <span class="p-small">/ mo</span></p>
        <ul>
          <li>3 Projects</li>
          <li>2 Users</li>
          <li>1 GB Space</li>
          <li>1 Calendar</li>
        </ul>
        <div class="signup"><div class="button2">Sign Up</div></div>
      </div> <!-- end four columns -->

      <div class="four columns">
        <p class="p-name">Standard</p>
        <p class="p-price">$15.99 <span class="p-small">/ mo</span></p>
        <ul>
          <li>20 Projects</li>
          <li>20 Users</li>
          <li>10 GB Space</li>
          <li>7 Calendars</li>
        </ul>
        <div class="signup"><div class="button2">Sign Up</div> </div>
      </div> <!-- end four columns -->

      <div class="four columns">
        <p class="p-name">Professional</p>
        <p class="p-price">$25.99 <span class="p-small">/ mo</span></p>
        <ul>
          <li>Unlimited Projects</li>
          <li>Unlimited Users</li>
          <li>50 GB Space</li>
          <li>15 Calendars</li>
        </ul>
        <div class="signup"><div class="button2">Sign Up</div></div>
      </div> <!-- end four columns -->

      <div class="four columns">
        <p class="p-name">Premium</p>
        <p class="p-price">$35.99 <span class="p-small">/ mo</span></p>
        <ul>
          <li>Unlimited Projects</li>
          <li>Unlimited Users</li>
          <li>100 GB Space</li>
          <li>Unlimited Calendars</li>
        </ul>
        <div class="signup"><div class="button2">Sign Up</div></div>
      </div> <!-- end four columns -->
      <div class="clear"></div>	
    </div> <!-- end pricing -->

    <div class="sixteen columns">
      <div class="action">
        <p class="white">You don't believe in the force do you?</p>
        <a href="#contact"><div class="button2">Say hey</div></a>
      </div> <!-- end action -->
    </div> <!-- end sixteen columns --> 

  </div> <!-- end container -->
</div> <!-- end services -->


<div id="separator2">
  <div class="bg3"></div>
  <p class="separator">A tremor in the Force. The last time I felt it was in the <br />presence of my old master</p>
</div>


<div id="about">
  <div class="container">

    <div class="sixteen columns">
      <h2><span class="lines">About</span></h2>
    </div> <!-- end sixteen columns -->

    <div class="eight columns">
      <p>I have traced the Rebel spies to her. Now she is my only link to finding their secret base. You don't believe in the Force, do you? All right. Well, take care of yourself, Han. Hokey religions and ancient weapons are no match for a good blaster at your side, kid.</p>
    </div> 

    <div class="eight columns">
      <p>Send a distress signal, and inform the Senate that all on board were killed. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. She must have hidden the plans in the escape pod.</p>
    </div>

    <div class="clear"></div>

    <div class="skills">

      <div class="sixteen columns">
        <h3><span class="lines">Skills</span></h3>
      </div> <!-- end sixteen columns -->

      <div class="sixteen columns">
        <p>PHP</p>
        <div class="skill-bg"><div class="skill1"></div></div>
        <p>Javascript</p>
        <div class="skill-bg"><div class="skill2"></div></div>
        <p>Illustrator</p>
        <div class="skill-bg"><div class="skill3"></div></div>
        <p>HTML/CSS</p>
        <div class="skill-bg"><div class="skill4"></div></div>
        <p>Photoshop</p>
        <div class="skill-bg"><div class="skill5"></div></div>
      </div> <!-- end sixteen columns -->
    </div> <!-- end skills -->

    <div class="clear"></div>

    <div class="team">

      <div class="sixteen columns">
        <h3><span class="lines">The Team</span></h3>
      </div> <!-- end sixteen columns -->

      <div class="one-third column">
        <img src="images/about-pic.png" alt="" />
        <p class="t-name">Cali Doe</p>
        <p class="t-type">Web Designer</p>
        <ul>
          <li><a href="#"><img src="images/icn-twitter.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-facebook.png" alt="" /></a></li>
        </ul>
        <p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. You're all clear, kid. Let's blow this thing and go home!</p>
        <p>Kid, I've flown from one side of this galaxy to the other. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense.</p>
      </div> <!-- end one-third column -->

      <div class="one-third column">
        <img src="images/about-pic.png" alt="" />
        <p class="t-name">Cali Doe</p>
        <p class="t-type">Web Designer</p>
        <ul>
          <li><a href="#"><img src="images/icn-twitter.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-facebook.png" alt="" /></a></li>
        </ul>
        <p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. You're all clear, kid. Let's blow this thing and go home!</p>
        <p>Kid, I've flown from one side of this galaxy to the other. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense.</p>
      </div> <!-- end one-third column -->

      <div class="one-third column">
        <img src="images/about-pic.png" alt="" />
        <p class="t-name">Cali Doe</p>
        <p class="t-type">Web Designer</p>
        <ul>
          <li><a href="#"><img src="images/icn-twitter.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-facebook.png" alt="" /></a></li>
        </ul>
        <p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. You're all clear, kid. Let's blow this thing and go home!</p>
        <p>Kid, I've flown from one side of this galaxy to the other. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense.</p>
      </div> <!-- end one-third column -->

    </div> <!-- end team -->

    <div class="clear"></div>

    <div class="sixteen columns">
      <div class="action">
        <p>You don't believe in the force do you?</p>
        <a href="#contact"><div class="button1">Say hey</div></a>
      </div> <!-- end action -->
    </div> <!-- end sixteen columns -->

  </div> <!-- end container -->
</div> <!-- end about -->


<div id="separator3">
  <div class="bg4"></div>
  <p class="separator">A tremor in the Force. The last time I felt it was in the <br />presence of my old master</p>
</div>


<div id="contact">
  <div class="container">

    <div class="sixteen columns">
      <h2 class="white"><span class="lines">Contact</span></h2>
    </div> <!-- end sixteen columns -->

    <div class="eight columns">
      <p class="white">I have traced the Rebel spies to her. Now she is my only link to finding their secret base. You don't believe in the Force, do you? All right. Well, take care of yourself, Han. Hokey religions and ancient weapons are no match for a good blaster at your side, kid.</p>
    </div> 

    <div class="eight columns">
      <p class="white">Send a distress signal, and inform the Senate that all on board were killed. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. She must have hidden the plans in the escape pod.</p>
    </div>

    <div class="clear"></div>

    <!-- begin contact form -->
    <div class="eight columns contact-form">

      <div class="cfg-contactform" id="cfg-contactform-4">
        <div class="cfg-contactform-content">

          <div class="cfg-element-container">
            <label class="cfg-label" id="cfg-element-4-37-label" ><span class="cfg-label-value"><p>Name</p></span></label>
            <div class="cfg-element-set" id="cfg-element-4-37-set" >
              <div class="cfg-element-content">
                <input type="text" class="cfg-type-text cfg-form-value " name="cfg-element-4-37" id="cfg-element-4-37"  />
              </div>
            </div>
            <div class="cfg-clear"></div>
          </div>

          <div class="cfg-element-container">
            <label class="cfg-label" id="cfg-element-4-34-label" ><span class="cfg-label-value"><p>Email address</p> </span></label>
            <div class="cfg-element-set" id="cfg-element-4-34-set" >
              <div class="cfg-element-content">
                <input type="text" class="cfg-type-text cfg-form-value " name="cfg-element-4-34" id="cfg-element-4-34"  />
              </div>
            </div>
            <div class="cfg-clear"></div>
          </div>

          <div class="cfg-element-container">
            <label class="cfg-label" id="cfg-element-4-35-label" ><span class="cfg-label-value"><p>Your message</p></span></label>
            <div class="cfg-element-set" id="cfg-element-4-35-set" >
              <div class="cfg-element-content">
                <textarea class="cfg-type-textarea cfg-form-value " name="cfg-element-4-35" id="cfg-element-4-35" rows="6" ></textarea>
              </div>
            </div>
            <div class="cfg-clear"></div>
          </div>

          <div class="cfg-element-container">
            <div class="cfg-element-set" id="cfg-element-4-36-set" >
              <div class="cfg-element-content">
                <input type="submit" class="cfg-submit " name="cfg-element-4-36" id="cfg-element-4-36" value="Send"   />
              </div>
            </div>
          </div>

          <div class="cfg-loading">&nbsp;</div>

        </div><!-- cfg-contactform-content -->
      </div><!-- cfg-contactform -->

    </div> <!-- end eight columns -->
    <!-- end contact form -->

    <div class="eight columns">

      <div class="contact-info">

        <h5>Contact Info</h5>

        <p class="white"><img src="images/icn-phone.png" alt="" /> +123 456 789</p>
        <p class="white"><img src="images/icn-email.png" alt="" /> youremail@here.com</p>
        <p class="white"><img src="images/icn-address.png" alt="" /> 767 Fifth Ave. <br />
          New York, NY 10153</p>
      </div> <!-- end contact-info -->

      <div class="social">
        <ul>
          <li><a href="#"><img src="images/icn-twitter2.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-facebook2.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-gplus.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-linkedin.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-forrst.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-skype.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-dribbble.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-pinterest.png" alt="" /></a></li>
          <li><a href="#"><img src="images/icn-vimeo.png" alt="" /></a></li>
        </ul>
      </div> <!-- end social -->

    </div> <!-- end eight columns -->

    <div class="clear"></div>

    <div class="sixteen columns">
      <div class="copyright">
        <p>&copy; 2012 All Rights Reserved</p>
      </div>
    </div>


  </div> <!-- end container -->

</div> <!-- end contact -->





<!-- JS
================================================== -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="javascripts/jquery.sticky.js" type="text/javascript"></script>
<script src="javascripts/nbw-parallax.js" type="text/javascript"></script>
<script src="javascripts/jquery.inview.js" type="text/javascript"></script>
<script src="javascripts/smooth-scroll.js" type="text/javascript"></script>
<script src="javascripts/jquery.flexslider.js" type="text/javascript"></script>
<script src="javascripts/jquery.prettyPhoto.js" type="text/javascript"></script>


<!-- Sticky nav -->
<script>
  $(document).ready(function(){
      $("nav").sticky({topSpacing:0});
      });
</script>


<!-- dropdown menu -->
<script type="text/javascript">
  function scrollTo(target){
    var targetPosition = $(target).offset().top;
    $('html,body').animate({ scrollTop: targetPosition}, 'slow');
  }
</script>



<!-- slider -->
<script>
  $(window).load(function() {
      $('.flexslider').flexslider({
animation: "slide",
slideshow: false,
slideshowSpeed: 4500,
animationSpeed: 1000
});
      });
</script>

<!-- pretty photo 
<script>
  $(document).ready(function(){
      $("a[class^='prettyPhoto']").prettyPhoto({
social_tools: false,
theme: 'light_square'
});
      });
</script>
-->

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
      $("a[rel^='prettyPhoto']").prettyPhoto({
social_tools: false,
theme: 'light_square'
});
      });
</script>


<!-- End Document
================================================== -->