{{{
#!html
<div class="zoo-home">
  <div class="container">
    <a id="birdc" class="bird" href="https://twitter.com/ZOO_Project" target="_blank">
      <audio id="birdsound" preload="auto">
  	<source src="/audio/bird.mp3">
  	<source src="/audio/bird.ogg">
      </audio>
      <audio id="africasound" preload="auto" autoplay>
 	<source src="/audio/africa.ogg" type="audio/ogg">
 	<source src="/audio/africa.mp3" type="audio/mpeg">
      </audio>
    </a>
    <div class="logo-wrapper">
      <img class="img-responsive ct" src="/img/zoo-landscape.png" />
    </div>
  </div>
</div>
<div class="ground">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 frt">
	<h1 class="home-heading">Open WPS platform</h1>
      </div>
    </div>
    <div class="row btm">
      <div class="col-xs-12 col-sm-3 col-lg-3 text-center">
      	<ul class="ch-grid">
      	  <li>
      	    <a href="./Code/ZOO-Kernel" class="ch-item ch-img-1">
      	      <div class="ch-info-wrap ch-info-wrap-1">
      		<div class="ch-info">
      		  <div class="ch-info-front ch-img-1"></div>
      		  <div class="ch-info-back ch-info-back-1">
      		    <h3>ZOO</h3>
      		    <p>KERNEL</p>
      		  </div>
      		</div>
      	      </div>
      	    </a>
      	  </li>
      	</ul>
      	<h2 class="sub">WPS Server</h2>
      	<p class="int"><a href="./Code/ZOO-Kernel">ZOO-Kernel</a> is a powerful server-side C Kernel able to manage and chain WPS services</p>
      </div>
      <div class="col-xs-12 col-sm-3 col-lg-3 text-center">
      	<ul class="ch-grid">
      	  <li>
      	    <a href="./Code/ZOO-Services" class="ch-item ch-img-2">
      	      <div class="ch-info-wrap ch-info-wrap-2">
      		<div class="ch-info">
      		  <div class="ch-info-front ch-img-2"></div>
      		  <div class="ch-info-back">
      		    <h3>ZOO</h3>
      		    <p>SERVICES</p>
      		  </div>
      		</div>
      	      </div>
      	    </a>
      	  </li>
      	</ul>
      	<h2 class="sub">WPS Services</h2>
      	<p class="int"><a href="./Code/ZOO-Services">ZOO-Services</a> is a collection of ready to use WPS services based on open source libraries.  </p>
      </div>
       <div class="col-xs-12 col-sm-3 col-lg-3 text-center">
       	 <ul class="ch-grid">
       	   <li>
       	     <a href="./Code/ZOO-API" class="ch-item ch-img-3">
       	       <div class="ch-info-wrap ch-info-wrap-3">
       		 <div class="ch-info">
       		   <div class="ch-info-front ch-img-3"></div>
       		   <div class="ch-info-back">
       		     <h3>ZOO</h3>
       		     <p>API</p>
		   </div>
		 </div>
	       </div>
	     </a>
	   </li>
	 </ul>
	 <h2 class="sub">WPS API</h2>
         <p class="int"><a href="./Code/ZOO-API">ZOO-API</a> is a server side Javascript library for creating and chaining WPS Services. </p>
       </div>

  <div class="col-xs-12 col-sm-3 col-lg-3 text-center">
       	 <ul class="ch-grid">
       	   <li>
       	     <a href="./Code/ZOO-Client" class="ch-item ch-img-4">
       	       <div class="ch-info-wrap ch-info-wrap-4">
       		 <div class="ch-info">
       		   <div class="ch-info-front ch-img-4"></div>
       		   <div class="ch-info-back">
       		     <h3>ZOO</h3>
       		     <p>Client</p>
		   </div>
		 </div>
	       </div>
	     </a>
	   </li>
	 </ul>
	 <h2 class="sub">WPS Client</h2>
         <p class="int"><a href="./Code/ZOO-Client">ZOO-Client</a> is a JavaScript library for interacting with WPS Services.</p>
       </div>


    </div>
  </div>

  <div class="bblock">
    <h1 class="section-heading-w">Get started</h1>
    <div class="container">
      <div class="col-xs-12 col-sm-4 col-lg-4 text-center">
	<h2><i class="fa fa-wrench fa-1x"></i> Installation</h2>
	<ul class="list-group">
	  <li class="list-group-item list-group-item2"><a href="">Download ZOO-Project</a></li>
	  <li class="list-group-item list-group-item2"><a href="">Configuration options</a></li>
	  <li class="list-group-item list-group-item2"><a href="">Install ZOO-Kernel</a></li>
	  <li class="list-group-item list-group-item2"><a href="">Test WPS requests</a></li>
	</ul>
      </div>
      <div class="col-xs-12 col-sm-4 col-lg-4 text-center">
	<h2><i class="fa fa-book fa-1x"></i> Documentation</h2>
	<ul class="list-group">
	  <li class="list-group-item list-group-item2"><a href="">Introduction</a></li>
	  <li class="list-group-item list-group-item2"><a href="">Hello worlds</a></li>
	  <li class="list-group-item list-group-item2"><a href="">ZCFG reference</a></li>
	  <li class="list-group-item list-group-item2"><a href="">...</a></li>
	</ul>
      </div>
      <div class="col-xs-12 col-sm-4 col-lg-4 text-center">
	<h2><i class="fa fa-map-marker fa-1x"></i> Examples</h2>
	<ul class="list-group">
	  <li class="list-group-item list-group-item2"><a href="">Cras justo odio</a></li>
	  <li class="list-group-item list-group-item2"><a href="">Dapibus ac facilisis in</a></li>
	  <li class="list-group-item list-group-item2"><a href="">Morbi leo risus</a></li>
	  <li class="list-group-item list-group-item2"><a href="">Porta ac consectetur ac</a></li>
	</ul>
      </div>
    </div>
  </div>

  <div class="dblockp">
    <div class="container">
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-centered mtpp">
            <div class="box">
                <div class="box-icon">
                    <img src="/img/zoo-sun-logo-big.png" class="img-responsive sunb" />
                </div>
		<h1 class="zoot">ZOO</h1>

                    <p class="text-center"> <a href="guidedtour.html" class="btn btn-warning btn-lg
                   btnfc">Guided tour</a></p>
		       
 

            </div>
        </div>
    </div>
  </div>

  <div class="cblock">
    <div class="container">
      <div class="col-lg-12 text-center">
	<h1 class="section-heading"></h1>
      </div>
      <div class="col-xs-12 col-sm-4 col-lg-4 text-center">
	<a href="#" class="tx"><img src="/img/zoo-tshirt.png" class="img-responsive img-center" /></a>
      </div>
      <div class="col-xs-12 col-sm-8 col-lg-8 text-center">
        <h1 class="bt">Wear a cool tshirt and support <span>ZOO-Project </span></h1>
        <a href="#" class="btn btn-warning btn-lg a-btn-2">Shop now</a>
      </div>
    </div>
  </div>
}}}