(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | + | <!DOCTYPE html> | |
− | <html> | + | <html lang="en"> |
+ | <head> | ||
+ | <meta charset="utf-8" /> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
+ | <meta name="description" content="Free Responsive Html5 Templates"> | ||
+ | |||
+ | |||
+ | <title>zCreative | Free Bootstrap Templates</title> | ||
+ | |||
+ | <!-- Bootstrap Core CSS --> | ||
+ | <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> | ||
+ | |||
+ | <!-- Custom CSS --> | ||
+ | <link href="css/style.css" rel="stylesheet"> | ||
+ | |||
+ | <!-- Animate.css --> | ||
+ | <link href="css/animate.css" rel="stylesheet" media="all" type="text/css"> | ||
+ | |||
+ | <!-- Lightbox.css --> | ||
+ | <link href="css/lightbox.min.css" rel="stylesheet" media="all" type="text/css"> | ||
+ | |||
+ | <!-- Custom Fonts --> | ||
+ | <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> | ||
+ | |||
+ | |||
+ | <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | ||
+ | <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | ||
+ | <!--[if lt IE 9]> | ||
+ | <script src="js/html5shiv.js"></script> | ||
+ | <script src="js/respond.min.js"></script> | ||
+ | <![endif]--> | ||
+ | </head> | ||
+ | <body id="page-top" class="index-page"> | ||
+ | <div class="wrap-body"> | ||
+ | <!--////////////////////////////////////Header--> | ||
+ | <header> | ||
+ | <!---Main Header---> | ||
+ | <div class="main-header"> | ||
+ | <div class="logo"> | ||
+ | <img src="images/logo.png" class="img-responsive"> | ||
+ | </div> | ||
+ | <!--Navigation--> | ||
+ | <nav id="menu" class="navbar"> | ||
+ | <div class="container-fluid"> | ||
+ | <div class="navbar-header"> | ||
+ | <span id="heading" class="visible-xs">Categories</span> | ||
+ | <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button> | ||
+ | |||
+ | </div> | ||
+ | <div class="collapse navbar-collapse navbar-ex1-collapse"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="active"><a href="index.html">Home</a></li> | ||
+ | <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Team <i class="fa fa-chevron-down"></i></a> | ||
+ | <div class="dropdown-menu" style="margin-left: -0px;"> | ||
+ | <div class="dropdown-inner"> | ||
+ | <ul class="list-unstyled"> | ||
+ | <li><a href="member.html">Member</a></li> | ||
+ | <li><a href="collaboration.html">Collaboration</a></li> | ||
+ | <li><a href="attribution.html">Attribution</a></li> | ||
+ | <li><a href="sponsors.html">Sponsors</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Project <i class="fa fa-chevron-down"></i></a> | ||
+ | <div class="dropdown-menu" style="margin-left: -0px;"> | ||
+ | <div class="dropdown-inner"> | ||
+ | <ul class="list-unstyled"> | ||
+ | <li><a href="description.html">Description</a></li> | ||
+ | <li><a href="results.html">Results</a></li> | ||
+ | <li><a href="design.html">Design</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Parts <i class="fa fa-chevron-down"></i></a> | ||
+ | <div class="dropdown-menu" style="margin-left: -0px;"> | ||
+ | <div class="dropdown-inner"> | ||
+ | <ul class="list-unstyled"> | ||
+ | <li><a href="basic.html">Basic</a></li> | ||
+ | <li><a href="composite.html">Composite</a></li> | ||
+ | <li><a href="collection.html">Collection</a></li> | ||
+ | <li><a href="improve.html">Improve</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li><a href="contact.html">HP</a></li> | ||
+ | <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Lab <i class="fa fa-chevron-down"></i></a> | ||
+ | <div class="dropdown-menu" style="margin-left: -0px;"> | ||
+ | <div class="dropdown-inner"> | ||
+ | <ul class="list-unstyled"> | ||
+ | <li><a href="experiment.html">Experiment</a></li> | ||
+ | <li><a href="notebook.html">Notebook</a></li> | ||
+ | <li><a href="interlab.html">Interlab</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li><a href="contact.html">Safety</a></li> | ||
+ | <li><a href="contact.html">Model</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
+ | <div class="hero-background"> | ||
+ | <!-- Static Header --> | ||
+ | <div class="header-text"> | ||
+ | <div class="header-text-inner"> | ||
+ | <h1>Be Creative</h1> | ||
+ | </div> | ||
+ | </div><!-- /header-text --> | ||
+ | </div> | ||
+ | </div> | ||
+ | </header> | ||
+ | <!-- /Section: intro --> | ||
− | <div class=" | + | <!--////////////////////////////////////Container--> |
− | < | + | <section id="page-content" class="index-page"> |
− | <p> | + | |
+ | <!-- ////////////Content Box 01 --> | ||
+ | <section class="box-content box-1"> | ||
+ | <div class="container"> | ||
+ | <div class="heading wow fadeInUp" data-wow-delay=".1s" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.1s; animation-name: fadeInUp;"> | ||
+ | <h2>Summary</h2> | ||
+ | <hr class="line"> | ||
+ | </div> | ||
+ | <div class="filter-container isotopeFilters"> | ||
+ | <ul class="list-inline filter"> | ||
+ | <li class=""><button class="btn btn-isoFilter active" data-filter="*">All </button></li> | ||
+ | <li><button class="btn btn-isoFilter" data-filter=".illustrations">Mechanism</button></li> | ||
+ | <li><button class="btn btn-isoFilter" data-filter=".photography">Lab</button></li> | ||
+ | <li><button class="btn btn-isoFilter" data-filter=".websites">HP</button></li> | ||
+ | <li><button class="btn btn-isoFilter" data-filter=".art">Model</button></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="isotopeContainer" style="position: relative; height: 598.819px;"> | ||
+ | <div class="col-lg-4 col-sm-4 col-md-6 isotopeSelector art" style="position: absolute; left: 0px; top: 0px;"> | ||
+ | <div class="portfolio-box zoom-effect"> | ||
+ | <img src="images/1-thumb.jpg" class="img-responsive" alt=""> | ||
+ | <div class="portfolio-box-caption"> | ||
+ | <div class="portfolio-box-caption-content"> | ||
+ | <div class="project-name">polyP model</div> | ||
+ | <div class="project-category">model</div> | ||
+ | <div class="project-social"> | ||
+ | <ul class="list-inline"> | ||
+ | <li><a href="single.html"><i class="fa fa-link"></i></a></li> | ||
+ | <li><a href="images/1.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><i class="fa fa-search"></i></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="col-lg-4 col-sm-4 col-md-6 isotopeSelector art" style="position: absolute; left: 240px; top: 0px;"> | ||
+ | <div class="portfolio-box zoom-effect"> | ||
+ | <img src="images/2-thumb.jpg" class="img-responsive" alt=""> | ||
+ | <div class="portfolio-box-caption"> | ||
+ | <div class="portfolio-box-caption-content"> | ||
+ | <div class="project-name"> | ||
+ | Absent now | ||
+ | </div> | ||
+ | <div class="project-category">model</div> | ||
+ | <div class="project-social"> | ||
+ | <ul class="list-inline"> | ||
+ | <li><a href="single.html"><i class="fa fa-link"></i></a></li> | ||
+ | <li><a href="images/2.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><i class="fa fa-search"></i></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-lg-4 col-sm-4 col-md-6 isotopeSelector illustrations" style="position: absolute; left: 480px; top: 0px;"> | ||
+ | <div class="portfolio-box zoom-effect"> | ||
+ | <img src="images/3-thumb.jpg" class="img-responsive" alt=""> | ||
+ | <div class="portfolio-box-caption"> | ||
+ | <div class="portfolio-box-caption-content"> | ||
+ | <div class="project-name">Phosphorus capture</div> | ||
+ | <div class="project-category">Mechanism</div> | ||
+ | <div class="project-social"> | ||
+ | <ul class="list-inline"> | ||
+ | <li><a href="single.html"><i class="fa fa-link"></i></a></li> | ||
+ | <li><a href="images/3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><i class="fa fa-search"></i></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-lg-4 col-sm-4 col-md-6 isotopeSelector photography" style="position: absolute; left: 480px; top: 254px;"> | ||
+ | <div class="portfolio-box zoom-effect"> | ||
+ | <img src="images/4-thumb.jpg" class="img-responsive" alt=""> | ||
+ | <div class="portfolio-box-caption"> | ||
+ | <div class="portfolio-box-caption-content"> | ||
+ | <div class="project-name">Plants</div> | ||
+ | <div class="project-category">Lab</div> | ||
+ | <div class="project-social"> | ||
+ | <ul class="list-inline"> | ||
+ | <li><a href="single.html"><i class="fa fa-link"></i></a></li> | ||
+ | <li><a href="images/4.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><i class="fa fa-search"></i></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-lg-4 col-sm-4 col-md-6 isotopeSelector websites" style="position: absolute; left: 0px; top: 305px;"> | ||
+ | <div class="portfolio-box zoom-effect"> | ||
+ | <img src="images/5-thumb.jpg" class="img-responsive" alt=""> | ||
+ | <div class="portfolio-box-caption"> | ||
+ | <div class="portfolio-box-caption-content"> | ||
+ | <div class="project-name">Human Practice 1</div> | ||
+ | <div class="project-category">HP</div> | ||
+ | <div class="project-social"> | ||
+ | <ul class="list-inline"> | ||
+ | <li><a href="single.html"><i class="fa fa-link"></i></a></li> | ||
+ | <li><a href="images/5.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><i class="fa fa-search"></i></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-lg-4 col-sm-4 col-md-6 isotopeSelector websites visible-xs" style="position: absolute; left: 240px; top: 0px; opacity: 1; transform: translate3d(0px, 408px, 0px); transition-property: opacity, transform; transition-duration: 0.4s; transition-delay: 0ms;"> | ||
+ | <div class="portfolio-box zoom-effect"> | ||
+ | <img src="images/6-thumb.jpg" class="img-responsive" alt=""> | ||
+ | <div class="portfolio-box-caption"> | ||
+ | <div class="portfolio-box-caption-content"> | ||
+ | <div class="project-name">Human Practice 2</div> | ||
+ | <div class="project-category">HP</div> | ||
+ | <div class="project-social"> | ||
+ | <ul class="list-inline"> | ||
+ | <li><a href="single.html"><i class="fa fa-link"></i></a></li> | ||
+ | <li><a href="images/6.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><i class="fa fa-search"></i></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <div class="text-center"><button class="btn btn-skin" id="isotopeShowMore" style="">Show More</button></div> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <!-- ////////////Content Box 02 --> | ||
+ | <section class="box-content box-2 box-style-1"> | ||
+ | <div class="container"> | ||
+ | <div class="heading wow fadeInUp" data-wow-delay=".1s" data-wow-duration="1s"> | ||
+ | <h2>What We Are Doing</h2> | ||
+ | <hr class="line"> | ||
+ | </div> | ||
+ | <div class="content"> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-8 col-sm-offset-2"> | ||
+ | <p>Our team is trying to figure out an innovative way to process the sewage and therefore generate energy for the growth of crops. Our bacteria will be engineered to make the Phosphorus in the sewage concentrated rapidly. In the inorganic experiments, we will find the suitable concentration of phosphate radical for the formation of struvite. Our bacteria can process the sewage and make it a new source of energy which can be used in the plantation of most crops.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <!-- ////////////Content Box 03 | ||
+ | <section class="box-content box-3 box-style-2"> | ||
+ | <div class="container"> | ||
+ | <div class="content"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6 col-sm-6 wow fadeInLeft" data-wow-delay=".1.15s" data-wow-duration="1.3s"> | ||
+ | <img src="images/11.jpg" alt=""> | ||
+ | </div> | ||
+ | <div class="col-md-4 col-sm-6 wow fadeInRight" data-wow-delay=".1s" data-wow-duration="1s"> | ||
+ | <a href="single.html" class="btn btn-skin">Read The Blog</a> | ||
+ | <img src="images/9.jpg" alt="" class="hidden-xs" style="margin: 0 0 0 -100px;"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> --> | ||
+ | |||
+ | <!-- ////////////Content Box 06 --> | ||
+ | <section class="box-content box-6"> | ||
+ | <div class="container"> | ||
+ | <div class="heading wow fadeInUp" data-wow-delay=".1s" data-wow-duration="1s"> | ||
+ | <h2>Leave Us A Message</h2> | ||
+ | <hr class="line"> | ||
+ | </div> | ||
+ | <div class="content"> | ||
+ | <div class="col-sm-10 col-sm-offset-1"> | ||
+ | <form id="contact_form" class="wow fadeInUp" data-wow-delay=".1s" data-wow-duration="1s"> | ||
+ | <div class="row"> | ||
+ | <!-- Name --> | ||
+ | <div class="col-md-4"> | ||
+ | <div class="form-group"> | ||
+ | <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Email --> | ||
+ | <div class="col-md-4"> | ||
+ | <div class="form-group"> | ||
+ | <input type="email" name="email" id="email" class="form-control" placeholder="Enter your email" required> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Subject --> | ||
+ | <div class="col-md-4"> | ||
+ | <div class="form-group"> | ||
+ | <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required /> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Message --> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-12"> | ||
+ | <div class="form-group"> | ||
+ | <textarea style="height: 200px" class="form-control" name="message" id="message" rows="5" placeholder="Your Message" required></textarea> | ||
+ | </div> | ||
+ | <button type="submit" id="form-submit" class="btn btn-skin btn-block" id="submit_btn">Submit (not available now)</button> | ||
+ | </div> | ||
+ | </div> | ||
+ | </form> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | </section> | ||
− | + | <!--////////////////////////////////////Footer--> | |
− | < | + | <footer id="footer"> |
+ | <div class="container"> | ||
+ | <div class="wrap-footer"> | ||
+ | <div class="copyright"> | ||
+ | <span>For a better life and world.</span> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </footer> | ||
+ | <!-- Footer --> | ||
+ | <div id="page-top"><a href="#page-top" class="btn btn-toTop"><i class="fa fa-angle-double-up"></i></a></div> | ||
+ | |||
+ | <!-- ========== Scripts ========== --> | ||
+ | <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> | ||
+ | <script type="text/javascript" src="js/bootstrap.min.js"></script> | ||
+ | <script type="text/javascript" src="js/jquery.localScroll.min.js"></script> | ||
+ | <script type="text/javascript" src="js/jquery.scrollTo.min.js"></script> | ||
+ | <script type="text/javascript" src="js/SmoothScroll.js"></script> | ||
+ | <script type="text/javascript" src="js/wow.min.js"></script> | ||
+ | <script type="text/javascript" src="js/isotope.pkgd.min.js"></script> | ||
+ | <script type="text/javascript" src="js/lightbox.min.js"></script> | ||
+ | |||
+ | <!-- Definity JS --> | ||
+ | <script type="text/javascript" src="js/main.js"></script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | + | </body> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</html> | </html> |
Revision as of 11:32, 27 June 2019
<!DOCTYPE html>
![](images/logo.png)
Be Creative
Summary
![](images/1-thumb.jpg)
polyP model
model
![](images/2-thumb.jpg)
Absent now
model
![](images/3-thumb.jpg)
Phosphorus capture
Mechanism
![](images/4-thumb.jpg)
Plants
Lab
![](images/5-thumb.jpg)
Human Practice 1
HP
![](images/6-thumb.jpg)
Human Practice 2
HP
What We Are Doing
Our team is trying to figure out an innovative way to process the sewage and therefore generate energy for the growth of crops. Our bacteria will be engineered to make the Phosphorus in the sewage concentrated rapidly. In the inorganic experiments, we will find the suitable concentration of phosphate radical for the formation of struvite. Our bacteria can process the sewage and make it a new source of energy which can be used in the plantation of most crops.