Team:NJAU China

<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="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Carousel Template for Bootstrap</title>


<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">


<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>


<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
<style type="text/css">
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
	display: none;
} /*-- hides default wiki settings --*/
.firstHeading {
	width: 975px;
	margin: 0px auto;
	padding-top: 100px;
	margin-bottom: 20px;
	font-family: Georgia, Times, "Times New Roman", serif;
}
h1, h2, h3, h4, h5 {
	font-family: Georgia, Times, "Times New Roman", serif;
}
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
	background-color: #383838;
	border: 0 none;
	height: 14px;
	z-index: 100;
	top: 0;
	position: fixed;
	width: 975px;
	left: 50%;
	margin-left: -487px;
}
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
	background-color: #383838;
	height: 14px;
	display: block;
	z-index: 10;
	position: fixed;
	width: 100%;
	top: 0;
}
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
	color: #727272;
	text-decoration: none;
	background-color: transparent;
}
body {
	background-color: #fff;
}
#globalWrapper, #content { /*-- changes default wiki settings --*/
	width: 100%;
	height: 100%;
	border: 0px;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
}
html, body, .wrapper { /*-- changes default wiki settings --*/
	width: 100%;
	height: 100%;
	background-color: transparent;
}
#container { /*-- creates container for all content on page --*/
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 14px;
	color: #414141;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	background-color: #transparent;
	margin-top: 0px;
}
.sidemenu, .sidemenu li {
	list-style-type: none;
	list-style-image: none;
	font-family: verdana;
	text-decoration: none;
	color:#000;
	font-size: 14px;
}
.sidemenu li {
	display: block;
}
.sidemenu a {
	text-decoration:none;
	color: #000;
	display: block;
	width: 180px;
	height: 100%;
	padding: 3px 5px;
 transition: .25s ease-in-out;
 -moz-transition: .25s ease-in-out;
 -webkit-transition: .25s ease-in-out;
}
.sidemenu a.greyout {
	color: #909090;
}
.sidemenu a:hover {
	color:#666;
	background-color: #d9f5aa;
}
.sub-sidemenu {
	font-size: 10px;
	margin-bottom: 20px;
	color: #666;
	display: none;
}
.sub-sidemenu a {
	color: #666;
}
div.underconst {
	padding:10px;
	border-radius:5px;
	background-color:pink;
	text-align:center;
}
a.anchor {
	display: block;
	position: relative;
	top: -80px;
	visibility: hidden;
}
.contentpara {
	margin-bottom: 30px;
}
span.email {
	font-family: monospace;
	font-weight: normal;
}
fieldset {
	border: 1px solid #337f53;
}
.greyout {
	color: #A0A0A0;
}
.highlightme {
	background-color: #FFFF00;
}
#alertContainer {
	border: 2px solid red;
	margin-bottom: 10px;
	width: 936px;
}
#annContainer {
	margin-left: 8px;
}
#newsContainer {
	border: 1px solid #ccc;
}
.newsTitle {
	display: block;
	color: #414141;
	font-size: 25px;
	font-family: Georgia, Times, "Times New Roman", serif;
	padding: 10px 15px 5px 10px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 0px;
}
.newsItem {
	border-bottom: 1px solid #ccc;
	display: block;
	padding: 5px 15px 0px 10px;
	margin-bottom: 0px;
}
.newsItem h3 {
	width: auto;
	display: inline;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
}
.newsItem img {
	float: right;
	clear: right;
	width: 80px;
	padding-left: 15px;
	display: inline-block;
}
.newsItem .newsDate {
	font-style: italic;
	font-size: 14px;
	display: inline-block;
	color: #999;
	float: right;
	padding: 0px 0px 10px 15px;
}
.newsItem p, .newsItem ul, .newsItem li {
	padding: 0px;
	margin-left: 20px;
	font-size: 12px;
	line-height: 1.2;
}
.newsItem p {
	margin-top: 10px;
}
.annItem {
	border: 2px solid #49b677;
	display: block;
	padding: 0px 15px 10px 10px;
	margin-bottom: 18px;
	position: relative;
	height: 160px;
	vertical-align: middle;
}
.annItem .annCentered {
	display: table-cell;
	vertical-align: middle;
	height: 160px;
}
.annCentered h3 {
	padding: 0px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.annItem ul, .annItem li {
	padding: 0px;
	margin: 0px;
}
.annItem li {
	list-style: none;
	margin: 5px
}

.container {
	font-size:14px
}
</style>
<style>
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/
</style>
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
  <div class="container">
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a class="navbar-brand" href="#">Project name</a> </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="https://2014.igem.org/Team:NJAU_China" class="unselect">Home</a></li>
            <li><a href="https://2014.igem.org/Team:NJAU_China/Team"  class="unselect">Team</a></li>
            <li><a href="https://igem.org/Team.cgi?year=2014" class="unselect">Official Team Profile </a></li>
            <li><a href="https://2014.igem.org/Team:NJAU_China/Project">Project</a></li>
            <li><a href="https://2014.igem.org/Team:NJAU_China/Parts" class="unselect">Parts</a></li>
            <li><a href="https://2014.igem.org/Team:NJAU_China/Modeling" class="unselect">Modeling</a></li>
            <li><a href="https://2014.igem.org/Team:NJAU_China/Notebook" class="unselect">Notebook</a></li>
            <li><a href="https://2014.igem.org/Team:NJAU_China/Safety" class="unselect">Safety</a></li>
            <li><a href="https://2014.igem.org/Team:NJAU_China/Attributions" class="unselect">Attributions</a></li>
          </ul>
        </div>
        <!-- /.nav-collapse --> 
      </div>
      <!-- /.container --> 
    </div>
    <!-- /.navbar --> 
    
  </div>
</div>

<!-- Carousel
    ================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active text-center"> <img src="https://static.igem.org/mediawiki/2014/d/d3/Njau_slide1.jpg" alt="First slide" class="text-center">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="item text-center"> <img src="https://static.igem.org/mediawiki/2014/2/24/Njau_slide2.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item text-center"> <img src="https://static.igem.org/mediawiki/2014/6/62/Njau_slide3.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
<!-- /.carousel --> 
<br/>
<!-- Marketing messaging and featurettes
    ================================================== --> 
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing"> 
  
  <!-- Three columns of text below the carousel -->
  <div class="row">
    <div class="col-lg-4"> <img class="img-circle" src="https://static.igem.org/mediawiki/2014/c/c3/Avatar1.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
      <h2>Huiyu Li</h2>
      <p>I love cat</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    <!-- /.col-lg-4 -->
    <div class="col-lg-4"> <img class="img-circle" src="https://static.igem.org/mediawiki/2014/e/e8/Avatar2.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
      <h2>Heng Xu</h2>
      <p>I love cat</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    <!-- /.col-lg-4 -->
    <div class="col-lg-4"> <img class="img-circle" src="https://static.igem.org/mediawiki/2014/4/46/Avatar3.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
      <h2>Zhenxiong Jiang</h2>
      <p>I love cat</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    <!-- /.col-lg-4 --> 
  </div>
  <!-- /.row --> 
  
  <!-- START THE FEATURETTES -->
  
  <hr class="featurette-divider">
  <div class="row featurette">
    <div class="col-md-7">
      <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
      <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5"> <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div>
  </div>
  <hr class="featurette-divider">
  <div class="row featurette">
    <div class="col-md-5"> <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div>
    <div class="col-md-7">
      <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
      <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
  </div>
  <hr class="featurette-divider">
  <div class="row featurette">
    <div class="col-md-7">
      <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
      <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5"> <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div>
  </div>
  <hr class="featurette-divider">
  
  <!-- /END THE FEATURETTES --> 
  
  <!-- FOOTER -->
  <footer>
    <p class="pull-right"><a href="#">Back to top</a></p>
    <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
  </footer>
</div>
<!-- /.container --> 

<!-- Bootstrap core JavaScript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<!-- ?? Bootstrap ???? CSS ??? -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">



<!-- jQuery??????????bootstrap.min.js ?????? --> 
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 

<!-- ???��? Bootstrap ???? JavaScript ??? --> 
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>