Difference between revisions of "Team:ECUST"

 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{:Team:ECUST/Css}}
+
{{:Team:ECUST/nav2}}
 
+
 
+
{{:Team:ECUST/Css}}
+
  
 
<html>
 
<html>
  
 
<head>
 
<head>
 
<script>
 
 
  // This is the jquery part of your template. 
 
  // Try not modify any of this code too much since it makes your menu work.
 
 
  $(document).ready(function() {
 
 
    $("#HQ_page").attr('id','');
 
 
    // call the functions that control the menu
 
    menu_functionality();
 
    hide_show_menu();
 
 
 
 
    //this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 
    function menu_functionality() {
 
 
      //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 
      $(".menu_button").click(function(){
 
 
        // add or remove the class "open" , this class holds the "-"
 
        $(this).children().toggleClass("open");
 
        // show or hide the submenu   
 
        $(this).next('.submenu_wrapper').fadeToggle(400);
 
      });
 
 
      // when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
 
      $("#display_menu_control").click(function(){
 
        $('#menu_content').fadeToggle(400);
 
      });
 
 
      // call the current page highlight function
 
      highlight_current_page();
 
    }
 
 
 
    // call the highlight current page function to show it on the menu with a different background color
 
    function highlight_current_page() {
 
 
      // select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
 
      $("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
 
 
      // now that the current_page class has been added to a menu item, make the submenu fade in
 
      $(".current_page").parents(".submenu_wrapper").fadeIn(400);
 
      // change the +/- symbol of the corresponding menu button
 
      $(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
 
     
 
    }
 
 
 
 
    // allow button on the black menu bar to show/hide the side menu
 
    function hide_show_menu() {
 
 
 
      // in case you preview mode is selected, the menu is hidden for better visibility
 
      if (window.location.href.indexOf("submit") >= 0) {
 
        $(".igem_2017_menu_wrapper").hide();
 
      }
 
 
      // if the black menu bar has been loaded
 
        if (document.getElementById('bars_item')) {
 
 
        // when the "bars_item" has been clicked
 
        $("#bars_item").click(function() {
 
          $("#sideMenu").hide();
 
 
          // show/hide the menu wrapper
 
          $(".igem_2017_menu_wrapper").fadeToggle("100");
 
        }); 
 
        }
 
 
      // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
 
      else {
 
            setTimeout(hide_show_menu, 15);
 
      }
 
    }
 
 
 
  });
 
 
 
</script>
 
 
 
 
<style>
 
<style>
 +
#banner_homepage {
 +
  position: relative;
 +
  z-index: 0;
 +
  background: url('https://static.igem.org/mediawiki/2017/7/7e/Homepage-banner4.0.gif';width:100%;);
 +
  /*background-position: 10px -200px;*/
 +
  background-color: #fff;
 +
  background-size: contain;
 +
  background-repeat: no-repeat;
 +
}
  
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 
 
 
  /* Clear the default wiki settings */
 
 
 
  #home_logo, #sideMenu { display:none; }
 
  #sideMenu, #top_title, .patrollink  {display:none;}
 
  #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 
  body {background-color:white; }
 
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
  
 
/***************************************************** RESPONSIVE STYLING ****************************************************/
 
 
  /* IF THE SCREEN IS LESS THAN 1200PX */
 
  @media only screen and (max-width: 1200px) {
 
 
    #content {width:100%; }
 
    .igem_2017_menu_wrapper {width:15%; right:0;}
 
    .highlight {padding:10px 0px;}
 
    .igem_2017_menu_wrapper #display_menu_control { display:none; }
 
    #menu_content { display:none;}
 
    .menu_button.direct_to_page {padding-left: 17px;}
 
   
 
  }
 
 
  /* IF THE SCREEN IS LESS THAN 800PX */
 
  @media only screen and (max-width: 800px) {
 
 
    .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 
    .igem_2017_content_wrapper {width:100%; margin-left:0px;}
 
    .column.half_size  {width:100%; }
 
    .column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
 
    .highlight {padding:15px 5px;}
 
    .igem_2017_menu_wrapper #display_menu_control { display:block; }
 
    #menu_content { display:none;}
 
    .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 
    .menu_bottom_padding {display:none;}
 
    .menu_button.direct_to_page { padding-left: 36px; }
 
  }
 
 
 
 
 
 
 
  /* special class that the system uses to make sure the team wants a page to be evaluated */
 
  .judges-will-not-evaluate {
 
      width: 96.6%;
 
      margin: 5px 15px;
 
      display: block;
 
    border: 4px solid #3399ff;
 
      font-weight: bold;
 
  }
 
 
 
 
</style>
 
</style>
 
 
</head>
 
</head>
  
<body>
 
<!--
 
<div class="igem_2017_menu_wrapper" style="display: none;">
 
  
  <div class="menu_button" id="display_menu_control">
 
    MENU 
 
  </div>
 
  
  <div id="menu_content" style="display: none;">
 
    <a href="https://2017.igem.org/Team:UCopenhagen">
 
      <div class="menu_button direct_to_page">
 
        HOME
 
      </div>
 
    </a> 
 
    <div class="menu_bottom_padding" >
 
    </div>
 
   
 
  </div>
 
  
</div> -->
+
<body id="page-top">
  
  
  
<div class="navbar navbar-default navbar-fixed-top" >
+
<div class="row">
  <div class="container" >
+
<!-- <div id="banner_homepage">
<!--     <div class="navbar-header">
+
  <div id="bannercontent">
      <div style="margin-top: 60px;">
+
    <center>
      <img src="https://static.igem.org/mediawiki/2017/0/0c/ECUST_icon.jpeg" height="50px">
+
       <specialh1 >Light Harvester</specialh1>
       </div>
+
       <br><br><br>
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
+
       <specialh2 style=" text-transform: lowercase;">
        <span class="icon-bar"></span>
+
        From expanding the absorption spectrum to solving energy crisis.
        <span class="icon-bar"></span>
+
      </specialh2>
        <span class="icon-bar"></span>
+
    </center>
       </button>
+
  </div>
    </div> -->
+
</div> -->
    <div class="navbar-collapse collapse" id="navbar-main">
+
<center>
       <ul class="nav navbar-nav" style="font-size: 17px; ">
+
<img src="https://static.igem.org/mediawiki/2017/7/7e/Homepage-banner4.0.gif" width="100%" style="margin-top: -40px;" />
          <li>
+
<img src="https://static.igem.org/mediawiki/2017/e/e5/Homepage%E6%94%B9.png" width="100%"/>
            <a href="#Homepage">HOMEPAGE</a>
+
</center>
          </li>
+
 
+
          <li class="dropdown">
+
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">PROJECT<span class="caret"></span></a>
+
            <ul class="dropdown-menu" aria-labelledby="themes">
+
              <li><a tabindex="-1" href="#Background">Background</a></li>
+
              <li><a tabindex="-1" href="#Discription">Discription</a></li>
+
              <li><a tabindex="-1" href="#Proof">Proof</a></li>
+
            </ul>
+
          </li>
+
 
+
          <li class="dropdown">
+
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">HARDWARE<span class="caret"></span></a>
+
            <ul class="dropdown-menu" aria-labelledby="themes">
+
              <li><a tabindex="-1" href="#Proof">Design</a></li>
+
              <li class="divider"></li>
+
              <li><a tabindex="-1" href="#Product">Product</a></li>
+
            </ul>
+
          </li>
+
 
+
          <li class="dropdown">
+
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">PART<span class="caret"></span></a>
+
            <ul class="dropdown-menu" aria-labelledby="themes">
+
              <li><a tabindex="-1" href="#TeamParts">Team&nbsp;Parts</a></li>
+
              <li class="divider"></li>
+
              <li><a tabindex="-1" href="#Improvements">Improvements</a></li>
+
            </ul>
+
          </li>
+
 
+
          <li class="dropdown">
+
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">MODELLING<span class="caret"></span></a>
+
            <ul class="dropdown-menu" aria-labelledby="themes">
+
              <li><a tabindex="-1" href="#Introduction">Introduction</a></li>
+
              <li class="divider"></li>
+
              <li><a tabindex="-1" href="#Model">Model&nbsp;Of&nbsp;Reactor</a></li>
+
              <li><a tabindex="-1" href="#Foster">Foster&nbsp;Theory</a></li>
+
              <li><a tabindex="-1" href="#Output">Output</a></li>
+
            </ul>
+
          </li>
+
 
+
          <li class="dropdown">
+
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">HUMON&nbsp;PRACTICE<span class="caret"></span></a>
+
            <ul class="dropdown-menu" aria-labelledby="themes">
+
              <li><a tabindex="-1" href="#Silver">Silver</a></li>
+
              <li class="divider"></li>
+
              <li><a tabindex="-1" href="#Gold">Gold</a></li>
+
              <li><a tabindex="-1" href="#Collaboration">Collaboration</a></li>
+
            </ul>
+
          </li>
+
 
+
          <li class="dropdown">
+
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">LAB<span class="caret"></span></a>
+
            <ul class="dropdown-menu" aria-labelledby="themes">
+
              <li><a tabindex="-1" href="#Team">Team</a></li>
+
              <li class="divider"></li>
+
              <li><a tabindex="-1" href="#Attribution">Attribution</a></li>
+
              <li><a tabindex="-1" href="#Notebook">Notebook</a></li>
+
              <li><a tabindex="-1" href="#Safety">Safety</a></li>
+
            </ul>
+
          </li>
+
 
+
          <li>
+
            <a href="#INTERLAB">INTERLAB</a>
+
          </li>
+
       
+
      </ul>
+
 
+
    </div>
+
  </div>
+
 
</div>
 
</div>
  
  
  
 +
</body>
  
  
<div class="container" id="Homepage" style="width: 80%;">
 
  <div style="size: 10px;"><p></p></div>
 
  <div class="page-header">
 
    <h1 id="tables">Homepage</h1>
 
  </div>
 
  
  <div class="row">
 
    <div style="text-transform:uppercase" align="center">
 
      <br>
 
      <h2 >LIGHT HARVESTER </h2>
 
          <div class="bs-example" align="right" style=" color:#999999; margin-bottom: 21px;font-size: 17px;font-weight: 200;line-height: 1.4;">
 
            <p >expanding the absorption spectrum to energy crisis</p>
 
          </div>
 
    </div>
 
  
  </div>
 
 
 
  <div class="row" align="center">
 
    <img src="https://static.igem.org/mediawiki/2017/1/11/Background_img_1.jpeg" alt="">
 
  </div>
 
 
 
 
 
  <div class="row" id="Background">
 
  <div class="page-header">
 
    <h1 id="tables">BACKGROUND</h1>
 
  </div>
 
  </div>
 
  <div class="row" align="left" >
 
    <div class="col-md-6">
 
      <blockquote>
 
        <p>With the rising of the world population and the higher average lifespan more energy is required to meet people’s growing demand. However, existing mineral resources on the earth, mainly known as coals, oil and gas, are limited and non-renewable.</p>
 
        <small>One</small>
 
      </blockquote>
 
    </div>
 
    <div class="col-md-6" >
 
      <blockquote class="pull-right">
 
        <p>As the basis of all living beings, photosynthesis is an energy transformation process used by plants and other organisms to convert light energy into chemical energy ,and oxygen or hydrogen is produced simultaneously.</p>
 
        <small>Two</small>
 
      </blockquote>
 
    </div>
 
  </div>
 
  <div class="row" align="left" >
 
    <div class="col-md-3"></div>
 
    <div class="col-md-6">
 
      <blockquote >
 
        <p>Biological hydrogen production as an environmentally harmless process carried out under mild operating conditions make the best utilization of the Solar energy.</p>
 
        <small>Three</small>
 
      </blockquote>
 
    </div>
 
    <div class="col-md-3"></div>
 
  </div>
 
 
</div>
 
</div>
  
 
<div class="container" id="OurWork" style="width: 80%;">
 
  <div class="page-header">
 
    <h1 id="tables">Our&nbsp;Work</h1>
 
  </div>
 
  <div class="row" align="left">
 
   
 
    <div class="col-md-12">
 
      <p>Rhodobacter sphaeroide is a favorable candidate, but it can not meet the demand of large scale production. </p>
 
    </div>
 
   
 
    <div class="col-md-6">
 
    <div class="bs-example">
 
      <div class="progress progress-striped active">
 
        <div class="progress-bar" style="width: 50%"></div>
 
      </div>
 
    </div>
 
    <ul>
 
    <li><blockquote>
 
        <p>Relatively high efficiency both in light absorption and photosynthesis.</p>
 
    </blockquote></li>
 
    <li><blockquote>
 
        <p>Proper bioreactor for industrial fermentation.syntheRhodobacter Sphaeroidtic biology give us way to tackle these problems.</p>
 
    </blockquote></li>
 
    </ul>
 
   
 
    </div>
 
 
    <div class="col-md-6">
 
    <div class="bs-example">
 
      <div class="progress progress-striped active">
 
        <div class="progress-bar" style="width: 99%"></div>
 
      </div>
 
    </div>
 
    <br>
 
    <blockquote >
 
        <p>our project aims to improve efficiency of the photoreaction by expanding the absorption spectrum of Rhodobacter sphaeroides and then to design a new bioreactor for the large scale fermentation.</p>
 
    </blockquote>
 
    </div>
 
 
  </div>
 
  </div>
 
  <br><br>
 
</div>
 
 
 
 
 
<div class="container" id="Discription" style="width: 80%;height: 1500px;">
 
  <div class="page-header">
 
    <h1 id="tables">Discription</h1>
 
  </div>
 
  <div class="row">
 
    <p>banner-discription1</p>
 
  </div>
 
  <div class="row">
 
    <p>banner-discription2</p>
 
  </div>
 
</div>
 
 
 
<div class="container" id="Proof" style="width: 80%;height: 1500px;">
 
  <div class="row">
 
    <p>banner-discription1</p>
 
  </div>
 
 
  <div class="bs-docs-section">
 
    <div class="row">
 
      <div class="col-md-12">
 
        <div class="page-header">
 
          <h1 id="tables">Proof</h1>
 
        </div>
 
 
        <div class="bs-example table-responsive">
 
          <table class="table table-striped table-bordered table-hover">
 
            <thead>
 
              <tr>
 
                <th>#</th>
 
                <th>Column heading</th>
 
                <th>Column heading</th>
 
                <th>Column heading</th>
 
              </tr>
 
            </thead>
 
            <tbody>
 
              <tr>
 
                <td>1</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
              </tr>
 
              <tr>
 
                <td>2</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
              </tr>
 
              <tr>
 
                <td>3</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
              </tr>
 
              <tr class="success">
 
                <td>4</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
              </tr>
 
              <tr class="danger">
 
                <td>5</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
              </tr>
 
              <tr class="warning">
 
                <td>6</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
              </tr>
 
              <tr class="active">
 
                <td>7</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
                <td>Column content</td>
 
              </tr>
 
            </tbody>
 
          </table>
 
        </div><!-- /example -->
 
      </div>
 
    </div>
 
  </div>
 
</div>
 
 
 
 
</body>
 
  
  
 
</html>
 
</html>
 +
{{:Team:ECUST/footer}}

Latest revision as of 02:16, 2 November 2017