{{{
#!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 API 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 from web applications.</p>
       </div>


    </div>
  </div>

  <div class="ablock">
    <h1 class="section-heading-w">Get started</h1>
    <div class="container">
      <div class="col-xs-12 col-sm-4 col-lg-4 text-center">
          <a href="#"><span class="zoo-title-s"><i class="fa fa-download bfs bfsd"></i></span>
          <h2 class="stl">Download</h2>
         </a>
      </div>
      <div class="col-xs-12 col-sm-4 col-lg-4 text-center">
          <a href="#"><span class="zoo-title-s"><i class="fa fa-wrench bfs bfsd"></i></span>
          <h2 class="stl">Install</h2></a>
      </div>
      <div class="col-xs-12 col-sm-4 col-lg-4 text-center">
	 <a href="#"><span class="zoo-title-s"><i class="fa fa-code bfs bfsd"></i></span>
          <h2 class="stl">Extend</h2></a>
      </div>
    </div>
  </div>

  <div class="dblockp">
   <div class="capecloud">
    <div class="container">
     <div class="col-xs-8 col-sm-4 col-md-4 col-lg-4 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>

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

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

  </div>



   <div class="paper">

    <div class="container mtp mbp">

<h1 class="section-footing">Resources</h1>

      <div class="col-xs-12 col-sm-4 col-lg-4 text-center">
          <h2 class="stl"><i class="fa fa-info-circle"></i> Info</h2>

    <dl class="dl-horizontal">
        <dt>User Agent</dt>
        <dd>An HTML user agent is any device that interprets HTML documents.</dd>
        <dt>Client-side Scripting</dt>
        <dd>Client-side scripting generally refers to the category of computer programs on the web that are executed client-side i.e. by the user's web browser.</dd>
        <dt>Document Tree</dt>
        <dd>The tree of elements encoded in the source document.</dd>
    </dl>
      </div>
      <div class="col-xs-12 col-sm-4 col-lg-4 text-center">

           <h2 class="stl"><i class="fa fa-book "></i> Docs</h2>

      </div>
      <div class="col-xs-12 col-sm-4 col-lg-4 text-center">

         <h2 class="stl"><i class="fa fa-globe "></i> Demos </h2>


      </div>

    </div>
  </div>

}}}