Team:NJAU China

From 2014.igem.org

(Difference between revisions)
Line 39: Line 39:
h1, h2, h3, h4, h5 {
h1, h2, h3, h4, h5 {
font-family: Georgia, Times, "Times New Roman", serif;
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;
 
}
}
Line 77: Line 57:
background-color: transparent;
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;
+
-
}
+
.container {
.container {
font-size:14px
font-size:14px
Line 96: Line 66:
</style>
</style>
<style>
<style>
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/
+
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {
 +
display: none;
 +
} /*-- hides default wiki settings --*/
</style>
</style>
</head>
</head>
Line 103: Line 75:
<body>
<body>
-
<div class="navbar-wrapper">
+
  <nav class="navbar navbar-default" role="navigation">
-
  <div class="container">
+
    <div class="container-fluid">  
-
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+
      <!-- Brand and toggle get grouped for better mobile display -->
-
      <div class="container">
+
      <div class="navbar-header">
-
        <div class="navbar-header">
+
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
-
          <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="#">Brand</a> </div>
-
          <a class="navbar-brand" href="#">iGem 2014 NJAU_China</a> </div>
+
      <div class="navbar-wrapper">
-
        <div class="collapse navbar-collapse">
+
        <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
-
          <ul class="nav navbar-nav">
+
          <div class="container">
-
            <li class="active"><a href="https://2014.igem.org/Team:NJAU_China" class="unselect">Home</a></li>
+
            <div class="navbar-header">
-
            <li><a href="https://2014.igem.org/Team:NJAU_China/Team"  class="unselect">Team</a></li>
+
              <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>
-
            <li><a href="https://igem.org/Team.cgi?year=2014" class="unselect">Official Team Profile </a></li>
+
              <a class="navbar-brand" href="#">iGem 2014 NJAU_China</a> </div>
-
            <li><a href="https://2014.igem.org/Team:NJAU_China/Project">Project</a></li>
+
            <div class="collapse navbar-collapse">
-
            <li><a href="https://2014.igem.org/Team:NJAU_China/Parts" class="unselect">Parts</a></li>
+
              <ul class="nav navbar-nav">
-
            <li><a href="https://2014.igem.org/Team:NJAU_China/Modeling" class="unselect">Modeling</a></li>
+
                <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/Notebook" class="unselect">Notebook</a></li>
+
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Introduction <span class="caret"></span></a>
-
            <li><a href="https://2014.igem.org/Team:NJAU_China/Safety" class="unselect">Safety</a></li>
+
                  <ul class="dropdown-menu" role="menu">
-
            <li><a href="https://2014.igem.org/Team:NJAU_China/Attributions" class="unselect">Attributions</a></li>
+
                    <li><a href="#">Background</a></li>
-
          </ul>
+
                    <li><a href="#">Challenge</a></li>
 +
                    <li><a href="#">Our Idea</a></li>
 +
                  </ul>
 +
                </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>
         </div>
-
         <!-- /.nav-collapse -->  
+
         <!-- /.navbar -->  
 +
       
       </div>
       </div>
-
      <!-- /.container -->
 
     </div>
     </div>
-
    <!-- /.navbar -->  
+
  </nav>
-
   
+
   <!-- Carousel
-
   </div>
+
-
</div>
+
-
 
+
-
<!-- Carousel
+
     ================================================== -->
     ================================================== -->
-
<div id="myCarousel" class="carousel slide" data-ride="carousel">  
+
  <div id="myCarousel" class="carousel slide" data-ride="carousel">  
-
  <!-- Indicators -->
+
    <!-- Indicators -->
-
  <ol class="carousel-indicators">
+
    <ol class="carousel-indicators">
-
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
      <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="1"></li>
-
    <li data-target="#myCarousel" data-slide-to="2"></li>
+
      <li data-target="#myCarousel" data-slide-to="2"></li>
-
  </ol>
+
    </ol>
-
  <div class="carousel-inner" role="listbox">
+
    <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="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="container">
-
        <div class="carousel-caption">
+
          <div class="carousel-caption">
-
          <h1>Example headline.</h1>
+
            <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>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" style="color:#FFF" href="#" role="button">Sign up today</a></p>
+
            <p><a class="btn btn-lg btn-primary" style="color:#FFF" href="#" role="button">Sign up today</a></p>
 +
          </div>
         </div>
         </div>
       </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="item text-center"> <img src="https://static.igem.org/mediawiki/2014/2/24/Njau_slide2.jpg" alt="Second slide">
+
        <div class="container">
-
      <div class="container">
+
          <div class="carousel-caption">
-
        <div class="carousel-caption">
+
            <h1>Another example headline.</h1>
-
          <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>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" style="color:#FFF" href="#" role="button">Learn more</a></p>
-
          <p><a class="btn btn-lg btn-primary" style="color:#FFF" href="#" role="button">Learn more</a></p>
+
          </div>
         </div>
         </div>
       </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="item text-center"> <img src="https://static.igem.org/mediawiki/2014/6/62/Njau_slide3.jpg" alt="Third slide">
+
        <div class="container">
-
      <div class="container">
+
          <div class="carousel-caption">
-
        <div class="carousel-caption">
+
            <h1>One more for good measure.</h1>
-
          <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>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" style="color:#FFF" href="#" role="button">Browse gallery</a></p>
-
          <p><a class="btn btn-lg btn-primary" style="color:#FFF" href="#" role="button">Browse gallery</a></p>
+
          </div>
         </div>
         </div>
       </div>
       </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>
-
  <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 -->  
-
<!-- /.carousel -->  
+
  <br/>
-
<br/>
+
  <!-- Marketing messaging and featurettes
-
<!-- Marketing messaging and featurettes
+
     ================================================== -->  
     ================================================== -->  
-
<!-- Wrap the rest of the page in another container to center all the content. -->
+
  <!-- 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  text-center"> <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>
+
-
    </div>
+
-
    <!-- /.col-lg-4 -->
+
-
    <div class="col-lg-4  text-center"> <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>
+
-
    </div>
+
-
    <!-- /.col-lg-4 -->
+
-
    <div class="col-lg-4  text-center"> <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>
+
-
    </div>
+
-
    <!-- /.col-lg-4 -->
+
-
  </div>
+
-
  <!-- /.row -->  
+
    
    
   <!-- START THE FEATURETTES -->
   <!-- START THE FEATURETTES -->
-
    
+
   <div class="container">
   <hr class="featurette-divider">
   <hr class="featurette-divider">
   <div class="row featurette">
   <div class="row featurette">
Line 223: Line 188:
   </div>
   </div>
   <hr class="featurette-divider">
   <hr class="featurette-divider">
-
    
+
   </div>
   <!-- /END THE FEATURETTES -->  
   <!-- /END THE FEATURETTES -->  
    
    
Line 231: Line 196:
     <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
     <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
   </footer>
   </footer>
-
</div>
 
<!-- /.container -->  
<!-- /.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>
</body>
</html>
</html>

Revision as of 12:35, 22 July 2014

Carousel Template for Bootstrap


First featurette heading. It'll blow your mind.

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.

Generic placeholder image
Generic placeholder image

Oh yeah, it's that good. See for yourself.

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.

And lastly, this one. Checkmate.

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.

Generic placeholder image

Retrieved from "http://2014.igem.org/Team:NJAU_China"