Difference between revisions of "Team:NPU-China"

Line 1: Line 1:
 
{{NPU-China/mmp}}
 
{{NPU-China/mmp}}
<html lang="en" >
+
<html lang="en">
 +
 
 
<head>
 
<head>
<!-- Bootstrap Core CSS -->
+
    <!-- Bootstrap Core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  
<!-- Custom CSS -->
+
    <!-- Custom CSS -->
<link href="https://2017.igem.org/Template:NPU-China/css?action=raw&ctype=text/css" rel="stylesheet">
+
    <link href="https://2017.igem.org/Template:NPU-China/css?action=raw&ctype=text/css" rel="stylesheet">
  
<!-- Custom Fonts -->
+
    <!-- Custom Fonts -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
<!-- jQuery -->  
+
    <!-- jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  
+
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  
<!-- Bootstrap Core JavaScript -->  
+
    <!-- Bootstrap Core JavaScript -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
+
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
    <!-- 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:// -->
+
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
+
    <!--[if lt IE 9]>
 
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 
         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 
         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 
     <![endif]-->
 
     <![endif]-->
<style>
+
    <style>
  
</style>
+
    </style>
 
</head>
 
</head>
  
Line 31: Line 32:
 
<body>
 
<body>
  
<!-- Navigation -->
+
    <!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
+
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
+
        <div class="container">
    <div class="navbar-header">
+
            <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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" 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>
      <a class="navbar-brand" href="index.html">NPU-China</a>
+
                <a class="navbar-brand" href="index.html">NPU-China</a>
    </div>
+
            </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
+
                <ul class="nav navbar-nav navbar-right">
        <li class="active"> <a href="index.html">Home</a> </li>
+
                    <li class="active"> <a href="index.html">Home</a> </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team<b class="caret"></b></a>
+
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team<b class="caret"></b></a>
          <ul class="dropdown-menu">
+
                        <ul class="dropdown-menu">
            <li> <a href="aboutus.html">About us</a> </li>
+
                            <li> <a href="aboutus.html">About us</a> </li>
            <li> <a href="portfolio-2-col.html">Attribution</a> </li>
+
                            <li> <a href="portfolio-2-col.html">Attribution</a> </li>
          </ul>
+
                        </ul>
        </li>
+
                    </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project<b class="caret"></b></a>
+
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project<b class="caret"></b></a>
          <ul class="dropdown-menu">
+
                        <ul class="dropdown-menu">
            <li> <a href="blog-home-1.html">Description</a> </li>
+
                            <li> <a href="blog-home-1.html">Description</a> </li>
            <li> <a href="blog-home-2.html">Experiments</a> </li>
+
                            <li> <a href="blog-home-2.html">Experiments</a> </li>
            <li> <a href="blog-post.html">Model</a> </li>
+
                            <li> <a href="blog-post.html">Model</a> </li>
            <li> <a href="blog-home-1.html">Proof of concept</a> </li>
+
                            <li> <a href="blog-home-1.html">Proof of concept</a> </li>
            <li> <a href="blog-home-2.html">Demonstrate</a> </li>
+
                            <li> <a href="blog-home-2.html">Demonstrate</a> </li>
          </ul>
+
                        </ul>
        </li>
+
                    </li>
        <li> <a href="about.html">Hardware</a> </li>
+
                    <li> <a href="about.html">Hardware</a> </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">HP<b class="caret"></b></a>
+
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">HP<b class="caret"></b></a>
          <ul class="dropdown-menu">
+
                        <ul class="dropdown-menu">
            <li> <a href="full-width.html">Silver</a> </li>
+
                            <li> <a href="full-width.html">Silver</a> </li>
            <li> <a href="sidebar.html">Gold</a> </li>
+
                            <li> <a href="sidebar.html">Gold</a> </li>
          </ul>
+
                        </ul>
        </li>
+
                    </li>
        <li> <a href="about.html">Collaboration</a> </li>
+
                    <li> <a href="about.html">Collaboration</a> </li>
        <li> <a href="about.html">Achievements</a> </li>
+
                    <li> <a href="about.html">Achievements</a> </li>
        <li> <a href="about.html">Interlab</a> </li>
+
                    <li> <a href="about.html">Interlab</a> </li>
       
+
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Notebook<b class="caret"></b></a>
+
          <ul class="dropdown-menu">
+
            <li> <a href="portfolio-1-col.html">Labnotes</a> </li>
+
            <li> <a href="portfolio-2-col.html">Protocols</a> </li>
+
          </ul>
+
        </li>
+
      </ul>
+
    </div>
+
  </div>
+
</nav>
+
  
<!-- Header Carousel -->
+
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Notebook<b class="caret"></b></a>
<header id="myCarousel" class="carousel slide" >  
+
                        <ul class="dropdown-menu">
  <!-- Indicators -->
+
                            <li> <a href="portfolio-1-col.html">Labnotes</a> </li>
  <div class="carousel-indicators">
+
                            <li> <a href="portfolio-2-col.html">Protocols</a> </li>
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
                        </ul>
    <li data-target="#myCarousel" data-slide-to="1"></li>
+
                    </li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
+
                </ul>
  </div>
+
            </div>
 
+
        </div>
  <!-- Wrapper for slides -->
+
    </nav>
<div class="carousel-inner">
+
<div class="item active">
+
<img src="https://static.igem.org/mediawiki/2017/e/e0/%E6%B2%A1%E6%9C%89%E5%85%B1%E4%BA%A7%E5%85%9A%E5%B0%B1%E6%B2%A1%E6%9C%89%E6%96%B0%E4%B8%AD%E5%9B%BD.jpg" >
+
</div>
+
<div class="item">
+
<img src="https://static.igem.org/mediawiki/2017/1/1f/Npu-banner1.jpg" >
+
  
</div>
+
    <!-- Header Carousel -->
<div class="item">
+
    <header id="myCarousel" class="carousel slide">
<img src="http://placehold.it/1920x910" >
+
        <!-- Indicators -->
</div>
+
        <div class="carousel-indicators">
</div>
+
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+
            <li data-target="#myCarousel" data-slide-to="1"></li>
 +
            <li data-target="#myCarousel" data-slide-to="2"></li>
 +
        </div>
 +
 
 +
        <!-- Wrapper for slides -->
 +
        <div class="carousel-inner">
 +
            <div class="item active">
 +
                <img src="https://static.igem.org/mediawiki/2017/e/e0/%E6%B2%A1%E6%9C%89%E5%85%B1%E4%BA%A7%E5%85%9A%E5%B0%B1%E6%B2%A1%E6%9C%89%E6%96%B0%E4%B8%AD%E5%9B%BD.jpg">
 +
            </div>
 +
            <div class="item">
 +
                <img src="https://static.igem.org/mediawiki/2017/1/1f/Npu-banner1.jpg">
 +
 
 +
            </div>
 +
            <div class="item">
 +
                <img src="http://placehold.it/1920x910">
 +
            </div>
 +
        </div>
 +
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
 
             <span class="icon-prev"></span>
 
             <span class="icon-prev"></span>
 
         </a>
 
         </a>
Line 106: Line 107:
 
             <span class="icon-next"></span>
 
             <span class="icon-next"></span>
 
         </a>
 
         </a>
  <!-- Controls -->  
+
        <!-- Controls -->
</header>
+
    </header>
<div class="batu" style="background: url('https://static.igem.org/mediawiki/2017/f/fe/Npu-background.png') no-repeat fixed;">
+
    <div class="batu" style="background: url('https://static.igem.org/mediawiki/2017/f/fe/Npu-background.png') no-repeat fixed;">
<!-- Page Content -->
+
        <!-- Page Content -->
<div class="container"   >
+
        <div class="container">
 
+
  <div class="row">
+
      <div class="col-md-12">
+
          <h2 class="page-header">Some ddddddddddddd</h2>
+
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+
      </div>
+
  </div>
+
  <!-- Marketing Icons Section -->
+
  <div class="row">
+
    <div class="col-md-12">
+
        <h2 class="page-header">Some fangkuai</h2>
+
    </div>
+
    <div class="col-md-6 img-portfolio">
+
        <a href="portfolio-item.html">
+
            <img class="img-responsive img-hover" src="http://placehold.it/700x400" alt="">
+
        </a>
+
        <h3>
+
            <a href="portfolio-item.html">Project One</a>
+
        </h3>
+
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+
    </div>
+
    <div class="col-md-6 img-portfolio">
+
        <a href="portfolio-item.html">
+
            <img class="img-responsive img-hover" src="http://placehold.it/700x400" alt="">
+
        </a>
+
        <h3>
+
            <a href="portfolio-item.html">Project Two</a>
+
        </h3>
+
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+
    </div>
+
</div>
+
  
<div class="row">
+
            <div class="row">
  <div class="col-md-6 img-portfolio">
+
                <div class="col-md-12">
      <a href="portfolio-item.html">
+
                    <h2 class="page-header">Some ddddddddddddd</h2>
          <img class="img-responsive img-hover" src="http://placehold.it/700x400" alt="">
+
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque
      </a>
+
                        urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio,
      <h3>
+
                        gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
          <a href="portfolio-item.html">Project Three</a>
+
                        viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur
      </h3>
+
                        adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+
                        sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius
  </div>
+
                        vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida
  <div class="col-md-6 img-portfolio">
+
                        pellentesque urna varius vitae.</p>
      <a href="portfolio-item.html">
+
                </div>
          <img class="img-responsive img-hover" src="http://placehold.it/700x400" alt="">
+
            </div>
      </a>
+
      <h3>
+
          <a href="portfolio-item.html">Project Four</a>
+
      </h3>
+
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+
  </div>
+
</div>
+
 
+
  <hr>
+
 
+
  
        <!-- Footer -->
+
            <!-- Marketing Icons Section -->
        <footer>
+
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-md-12">
 
                 <div class="col-md-12">
                     <p>Copyright &copy; NPU-CHINA 2017</p>
+
                     <h2 class="page-header">Some fk</h2>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
        </footer>
 
  
  </div>
+
 
  </div>
+
 
 +
 
 +
            <div class="row">
 +
                <div class="col-md-6 img-portfolio">
 +
                    <a href="portfolio-item.html">
 +
                        <img class="img-responsive img-hover" src="http://placehold.it/700x400" alt="">
 +
                    </a>
 +
                    <h3>
 +
                        <a href="portfolio-item.html">Project One</a>
 +
                    </h3>
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque
 +
                        urna varius vitae.</p>
 +
                </div>
 +
                <div class="col-md-6 img-portfolio">
 +
                    <a href="portfolio-item.html">
 +
                        <img class="img-responsive img-hover" src="http://placehold.it/700x400" alt="">
 +
                    </a>
 +
                    <h3>
 +
                        <a href="portfolio-item.html">Project Two</a>
 +
                    </h3>
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque
 +
                        urna varius vitae.</p>
 +
                </div>
 +
            </div>
 +
            <!-- /.row -->
 +
 
 +
            <!-- Projects Row -->
 +
            <div class="row">
 +
                <div class="col-md-6 img-portfolio">
 +
                    <a href="portfolio-item.html">
 +
                        <img class="img-responsive img-hover" src="http://placehold.it/700x400" alt="">
 +
                    </a>
 +
                    <h3>
 +
                        <a href="portfolio-item.html">Project Three</a>
 +
                    </h3>
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque
 +
                        urna varius vitae.</p>
 +
                </div>
 +
                <div class="col-md-6 img-portfolio">
 +
                    <a href="portfolio-item.html">
 +
                        <img class="img-responsive img-hover" src="http://placehold.it/700x400" alt="">
 +
                    </a>
 +
                    <h3>
 +
                        <a href="portfolio-item.html">Project Four</a>
 +
                    </h3>
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque
 +
                        urna varius vitae.</p>
 +
                </div>
 +
            </div>
 +
 
 +
 
 +
            <hr>
 +
 
 +
 
 +
            <!-- Footer -->
 +
            <footer>
 +
                <div class="row">
 +
                    <div class="col-md-12">
 +
                        <p>Copyright &copy; NPU-CHINA 2017</p>
 +
                    </div>
 +
                </div>
 +
            </footer>
 +
 
 +
        </div>
 +
    </div>
 
     <!-- /.container -->
 
     <!-- /.container -->
  
Line 184: Line 206:
  
  
<!-- Script to Activate the Carousel -->  
+
    <!-- Script to Activate the Carousel -->
<script>
+
    <script>
    $('.carousel').carousel({
+
        $('.carousel').carousel({
        interval: 5000 //changes the speed
+
            interval: 5000 //changes the speed
    })
+
        })
</script>
+
    </script>
 
</body>
 
</body>
 +
 
</html>
 
</html>

Revision as of 11:31, 18 October 2017

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.


Copyright © NPU-CHINA 2017