Team:SUSTC-Shenzhen-B/team.html

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" /> <style> * { ...")
Line 2: Line 2:
<head>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 +
<script src="js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
-
<style>
+
<link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.min.css" />
 +
<style type="text/css">
* {
* {
-
margin: 0;
+
margin: 0px;
-
padding: 0;
+
padding: 0px;
}
}
-
html, body {
+
html, body{
height: 100%;
height: 100%;
 +
width: 100%;
}
}
-
#top_section {
+
            body {
-
background: black no-repeat 50% 0;  
+
                background: black;
-
height: 100%;  
+
            }
-
overflow: hidden;
+
            #iGEM_nav {
-
}
+
                padding:0;  
-
ul li {
+
                padding-left:15px;  
-
display: inline-block;
+
                padding-right: 15px;
-
padding: 15px;
+
            }
-
}
+
            #iGEM_nav img {
-
ul li a {
+
                height: 40px;
-
text-decoration: none;
+
            }
-
color: white;
+
            .item {
-
font-size: big;
+
                height: 100%;
-
}
+
                width: 100%;
 +
            }
 +
            .item p {
 +
                font-size: 1.2em;  
 +
                text-indent: 2em;  
 +
                padding-top: 2%;
 +
            }
</style>
</style>
-
<script>
+
<script type="text/javascript">
 +
$(document).ready(function() {     
 +
  $('.carousel').carousel('pause');
 +
});
 +
</script>
 +
<script>
$(document).ready(function(){
$(document).ready(function(){
                         $("head style").remove();
                         $("head style").remove();
Line 60: Line 74:
</script>
</script>
</head>
</head>
-
<body style="background: black;">
+
<body>
-
<div id="top_section" style="color: white; margin:0px">
+
<div class="navbar navbar-inverse navbar-fixed-top">
-
<div class="text-center" style="width:50%; line-height: 1; position: relative; left: 25%; top: 10%; padding: 20px">
+
  <div class="navbar-inner">
-
<img src="img/logo.png" style="width: 35%; padding-bottom: 5%;" />
+
    <div class="container">
-
<h1 style="font-size: 80px; margin-bottom: 5%;">Biomiao</h1>
+
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-
<p>Welcome to the wiki of SUSTC-Shenzhen B! This is the second year that SUSTC takes part in the iGEM. In our wiki, you can learn every aspect of our project: the software itself, team menbers, human pracrice, and notebook is also included.</p>
+
        <span class="icon-bar"></span>
-
<a href="" class="btn btn-success">Go To Biomiao</a>
+
        <span class="icon-bar"></span>
-
<p>Or</p>
+
        <span class="icon-bar"></span>
-
<h2>Move down to see more...</h2>
+
      </a>
-
</div>
+
      <ul class="nav">
-
</div>
+
  <li class="dropdown"><a id="iGEM_nav" href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="img/iGEM-white.gif"><b class="caret"></b></a>
-
<div id="menu" style="width:100%; background: rgba(0,0,0,1); position: relative; top: -60px; height:50px; z-index: 1000;";>
+
    <ul class="dropdown-menu">
-
<ul style="list-style-type: none; float: right;">
+
      <form class="navbar-search pull-left">
-
<li><a href="#project">Project</a></li>
+
  <input type="text" class="search-query" placeholder="Search">
-
<li><a href="#team">Team</a></li>
+
</form>
-
<li><a href="#human">Human Practice</a></li>
+
    </ul>
-
<li><a href="#notebook">Notebook</a></li>
+
  </li>
-
</ul>
+
</ul>
-
</div>
+
      <div class="nav-collapse collapse">
-
<div id="project" style="background: url(img/2.jpg); height: 800px;">
+
      <ul class="nav">
-
<div style="position: relative; top: 20%; left: 50%; color: #888; margin: 5%; width: 40%;">
+
  <li><a href="project.html">Project</a></li>
-
<h1>Biomiao.org</h1>
+
  <li class="active"><a href="#">Team</a></li>
-
<p>A repositry of gene citcuits in Synthetic Biology</p>
+
  <li><a href="human.html">Human Practice</a></li>
-
<p>A platform that holds light-weight Apps to re-utility the circuits information. LGD, TTEC are  provided.</p>
+
  <li><a href="notebook.html">Notebook</a></li>
-
<p>In the future, you can say hello to other scientits to work collaboratly.</p>
+
</ul>
-
<h3>Project Abstract</h3>
+
      </div>
-
<p style="text-indent: 2em;">Our project, 3 Miao synthetic biology platform, is different from all the iGem software projects in the past, for we have an ambition to create a community for the whole synthetic biology. In this community, we offer a platform for the collection of handy tools provided by either the iGem teams or the company to facilitate users to study synthetic biology more conveniently. Among these handy tools, Mind Road, LGD and TTEC are uploaded by us. Mind Road is for projects review and divergent thinking. LGD is a genetic circuit designer which can present the logical relationship of related parts. On the other hand, the community allows users to learn the basic knowledge of synthetic biology, go through the break news of synthetic biology, post their own ideas, comment on others’ work, discuss with other people and so on, just like the Facebook and Twitter. In this way, our community will greatly popularize synthetic biology.</p>
+
    </div>
-
<a href="project.html" class="btn btn-primary">See More</a>
+
  </div>
-
</div>
+
-
</div>
+
-
<div id="team" style="background: url(img/3.png) #66c000 no-repeat 50% 100%; background-position: right bottom;height: 800px;">
+
-
<div style="padding-top: 80px; width: 280px; margin-left: 40px;">
+
-
<h1>Team</h1>
+
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
-
<a href="team.html" class="btn btn-primary">See More</a>
+
-
</div>
+
</div>
</div>
-
<div id="human" style="background: red no-repeat 50% 100%; height: 800px;">
+
 
-
<div style="margin-top:0px; padding-top: 80px">
+
<div style="height:100%;width:100%;">
-
<h1>Project Description</h1>
+
<div id="myCarousel" class="carousel slide" style="height: 100%; width: 100%;">
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
+
<ol class="carousel-indicators" style="top: 95%; right: 50%;">
-
<a href="" class="btn btn-primary">See More</a>
+
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-
</div>
+
    <li data-target="#myCarousel" data-slide-to="1"></li>
 +
    <li data-target="#myCarousel" data-slide-to="2"></li>
 +
    <li data-target="#myCarousel" data-slide-to="3"></li>
 +
    <li data-target="#myCarousel" data-slide-to="4"></li>
 +
  </ol>
 +
  <!-- Carousel items -->
 +
  <div class="carousel-inner" style="height: 100%; width: 100%;">
 +
    <div class="active item" style="background: url(img/team.jpg) 50% 70%; height: 100%; width: 100%;"></div>
 +
    <div class="item">
 +
    <div class="container" style="margin-top: 14%; color: white;">
 +
    <div class="span4" style="text-align: center;">
 +
    <img src="img/hejiankui.jpg">
 +
    </div>
 +
    <div class="span7" style="padding-top: 4%;">
 +
    <h3>Huiyu He</h3>
 +
    <p style="font-size: 1.2em; text-indent: 2em; padding-top: 3%">I'm Huiyu He. To get a better understand of Synthetic Biology and exchange ideas with students from other countries, I joined this iGEM team. I coded for a whole summer with other people in the team to develop 3miaobio website. I am also in charge of the wiki. I acquired many skills during the whole game and got some thoughts about team working. But the whole summer's sitting against the computer made me a little over weight (TAT), and semms that I have to exercise a lot...</p>
 +
    </div>
 +
    </div>
 +
    </div>
 +
    <div class="item" style="height: 100%; width: 100%;">
 +
    <div class="container" style="margin-top: 14%; color: white;">
 +
    <div class="span4" style="text-align: center;">
 +
    <img src="img/zhuxiaodan.jpg">
 +
    </div>
 +
    <div class="span7" style="padding-top: 4%">
 +
    <h3>Xiaodan Zhu</h3>
 +
    <p style="font-size: 1.2em; text-indent: 2em; padding-top: 3%">I'm Xiaodan Zhu. I like to sit on the road, so I named one function of our software Mind Road!</p>
 +
    </div>
 +
    </div>
 +
    </div>
 +
    <div class="item" style="height: 100%; width: 100%;">
 +
    <div class="container" style="margin-top: 14%; color: white;">
 +
    <div class="span4" style="text-align: center;">
 +
    <img src="img/wanglingjue.jpg">
 +
    </div>
 +
    <div class="span7" style="padding-top: 4%">
 +
    <h3>Lingjue Wang</h3>
 +
    <p style="font-size: 1.2em; text-indent: 2em; padding-top: 3%">I'm Mike Wong. I like to play with a cat named miaomiao, so I named one our software 3miao! I like to sleep. You can call me sleepy girl.</p>
 +
    </div>
 +
    </div>
 +
    </div>
 +
    <div class="item" style="background: url(img/test.jpg);">
 +
    <div class="container" style="padding-top: 14%; color: white;">
 +
    <div class="span6" style="padding: 1.2%; background: rgba(0,0,0,.75); border-radius: 5px;">
 +
    <h3>Lingjue Wang</h3>
 +
    <p>I'm Huiyu He. To get a better understand of Synthetic Biology and exchange ideas with students from other countries, I joined this iGEM team. I coded for a whole summer with other people in the team to develop 3miaobio website. I am also in charge of the wiki. I acquired many skills during the whole game and got some thoughts about team working. But the whole summer's sitting against the computer made me a little over weight (TAT), and semms that I have to exercise a lot...</p>
 +
    </div>
 +
    </div>
 +
    </div>
 +
  </div>
 +
  <!-- Carousel nav -->
 +
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 +
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
-
<div id="notebook" style="background: yellow no-repeat 50% 100%; height: 800px;">
 
-
<div style="margin-top:0px; padding-top: 80px">
 
-
<h1>Project Description</h1>
 
-
<p>We want to establish a user-friendly web2.0 platform which can function as both a handy tool kit and a community. There are mainly 3 reasons that we choose a webpage instead of a native application. First, current software need to users don’t need to download our software. Second, a webpage is not limited with the system, which means users can log in our webpage wherever they can reach the internet. And the last, all the information can be stored by the cloud, so users don’t have to worry about their information being lost.</p>
 
-
<a href="notebook.html" class="btn btn-primary">See More</a>
 
-
</div>
 
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 18:31, 25 September 2013

Retrieved from "http://2013.igem.org/Team:SUSTC-Shenzhen-B/team.html"