Difference between revisions of "Team:Tianjin/Templates/MaterialTheme"

Line 7: Line 7:
 
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/bootstrap}}
 
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/bootstrap}}
 
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/jquery}}
 
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/jquery}}
 +
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/nouislider}}
 +
{{:Team:Tianjin/Templates/AddJS|:Team:Tianjin/js/material/datapicker}}
  
 +
<!doctype html>
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
 
<meta charset="utf-8" />
 
<meta charset="utf-8" />
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 +
 +
<title>Material Kit by Creative Tim</title>
 +
 
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 +
 +
<!--    Fonts and icons    -->
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 +
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
 +
<!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /--!>
 +
 +
<!-- CSS Files -->
 +
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
 +
    <link href="assets/css/material-kit.css" rel="stylesheet"/>
 
</head>
 
</head>
−
<nav class="navbar navbar-info navbar-static-top" role="navigation">
+
 
 +
<body>
 +
 
 +
<!-- Navbar will come here -->
 +
 
 +
<nav class="navbar navbar-info" role="navigation">
 
<div class="container-fluid">
 
<div class="container-fluid">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
−
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+
                <div class="nameTeamTianjin">TEAM TIANJIN</div>
 +
     <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="sr-only">Toggle navigation</span>
 
                 <span class="icon-bar"></span>
 
                 <span class="icon-bar"></span>
Line 23: Line 44:
 
                 <span class="icon-bar"></span>
 
                 <span class="icon-bar"></span>
 
     </button>
 
     </button>
−
     <a class="navbar-brand" href="#">Team Tianjin</a>
+
     <img class="img-responsive logoBG" src="https://static.igem.org/mediawiki/2016/5/51/TestLOGOofTeamTianjin.png" alt="Logo on left" href="http://127.0.0.1">
−
    </div>
+
  
−
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
     </div>
 +
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
     <ul class="nav navbar-nav">
 
     <ul class="nav navbar-nav">
−
<li class="active"><a href="2016.igem.org/Team:Tianjin">Home</a></li>
+
<li class="active"><a href="#">OVERVIEW</a></li>
−
         <li><a href="http://www.tju.edu.cn/english/">TJU</a></li>
+
         <li><a href="#">ACHIEVEMENTS</a></li>
 
         <li class="dropdown">
 
         <li class="dropdown">
−
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Introduction <b class="caret"></b></a>
+
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">PROJECTS</a>
 
         <ul class="dropdown-menu">
 
         <ul class="dropdown-menu">
−
  <li class="divider"></li>
+
  <li><a href="#">VISION</a></li>
−
  <li><a href="#Background">Background</a></li>
+
  <li><a href="#">EXPERIMENT</a></li>
−
  <li class="divider"></li>
+
  <li><a href="#">MODELING</a></li>
−
  <li><a href="#CurrentSituation">Current Situation</a></li>
+
  <li><a href="#">RESULTS</a></li>
−
  <li class="divider"></li>
+
                      <li class="divider"></li>
−
  <li><a href="#Vision">Vision</a></li>
+
      <li><a href="#">PARTS</a></li>
−
  <li class="divider"></li>
+
                      <li><a href="#">LABORATORY NOTES</a></li>
 +
        </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">PEOPLE</a>
 +
        <ul class="dropdown-menu">
 +
  <li><a href="#">TEAM</a></li>
 +
  <li><a href="#">COLLABORATION</a></li>
 +
  <li><a href="#">SOCIAL MEDIA</a></li>
 +
        </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">PRATICE</a>
 +
        <ul class="dropdown-menu">
 +
  <li><a href="#">COMUNITY</a></li>
 +
  <li><a href="#">BUSINESS PLAN</a></li>
 
         </ul>
 
         </ul>
 
         </li>
 
         </li>
Line 45: Line 81:
 
     </div>
 
     </div>
 
</div>
 
</div>
−
</nav>
+
</nav>
 +
<div class="navbarRightPic"><img class="img-responsive" src="https://static.igem.org/mediawiki/2016/5/51/TestLOGOofTeamTianjin.png" alt="LOGO" width="128"></div>
 +
<!-- end navbar -->
 +
<div class="wrapper">
 +
<div class="header">
 +
 
 +
</div>
 +
<!-- you can use the class main-raised if you want the main area to be as a page with shadows -->
 +
<div class="main">
 +
<div class="container">
 +
 
 +
<!-- here you can add your content -->
 +
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
</body>
 +
 
 +
<!--  Core JS Files  -->
 +
<script src="assets/js/jquery.min.js" type="text/javascript"></script>
 +
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
 +
<script src="assets/js/material.min.js"></script>
 +
 
 +
<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
 +
<script src="assets/js/nouislider.min.js" type="text/javascript"></script>
 +
 
 +
<!--  Plugin for the Datepicker, full documentation here: http://www.eyecon.ro/bootstrap-datepicker/ -->
 +
<script src="assets/js/bootstrap-datepicker.js" type="text/javascript"></script>
 +
 
 +
<!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc -->
 +
<script src="assets/js/material-kit.js" type="text/javascript"></script>
 +
 
 +
</html>
 +
 
  
 
<style>
 
<style>

Revision as of 09:33, 6 July 2016

<!doctype html> Material Kit by Creative Tim

LOGO


<style> /* OVERRIDE IGEM SETTINGS ---------------------------------------------- */


#sideMenu, #top_title {display:none;} #content {width: auto; width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0} body {background-color:white; } #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }


</style> </html>