(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | |||
− | |||
<html> | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | #sideMenu, #top_title{ | ||
+ | display: none; | ||
+ | } | ||
+ | #content{ | ||
+ | width:100%; margin:0px; padding:0px; | ||
+ | background:#FFF; | ||
+ | } | ||
+ | |||
+ | </style> | ||
− | < | + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
+ | <title>TEAM PAGE</title> | ||
− | < | + | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:SZU-China/main/CSS?action=raw&ctype=text/css"> |
− | + | ||
− | + | ||
− | < | + | <script type="text/javascript" src="https://2017.igem.org/Template:SZU-China/jquery/Javascript?action=raw&ctype=text/javascript"></script> |
− | < | + | <script type="text/javascript"> |
− | + | $(document).ready(function(){ | |
− | + | $("#nav-list-ul li").hover(function(){ | |
− | + | $(this).find('ul.sub-nav').show(); | |
− | + | }, function(){ | |
− | + | $(this).find('ul.sub-nav').hide(); | |
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
+ | $("div.navbar").hover(function(){ | ||
+ | $(this).css("box-shadow", "1px 1px 7px #000") | ||
+ | }, function(){ | ||
+ | $(this).css("box-shadow", "0px 0px 0px #000") | ||
+ | }); | ||
+ | |||
+ | $(".navbar").hover(function(){ | ||
+ | $(this).css("background", "rgba(75, 151, 165, 1.0)"); | ||
+ | $(this).find(".caret").css("color", "rgba(0, 0, 0, 1.0)"); | ||
+ | }, function(){ | ||
+ | $(this).css("background", "rgba(75, 151, 165, 0.5)"); | ||
+ | $(this).find(".caret").css("color", "rgba(0, 0, 0, 0.5)"); | ||
+ | }); | ||
+ | |||
+ | $("#top").click(function () { | ||
+ | $('body,html').animate({ scrollTop: 0 }, 200); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | </head> | ||
+ | |||
+ | <body style="background:#F8F8F8;"> | ||
+ | |||
+ | <div class="navbar"> | ||
+ | <div class="navbar-nav"> | ||
+ | <ul id="nav-list-ul" class="nav-list"> | ||
+ | <li><a href="#">TEAM</a> | ||
+ | <span class="caret"></span> | ||
+ | <ul class="sub-nav"> | ||
+ | <li><a href="#">PEOPLE</a></li> | ||
+ | <li><a href="#">COLLABARATIONS</a></li> | ||
+ | <li><a href="#">ATTRIBUTION</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">PRACTICE</a> | ||
+ | <span class="caret"></span> | ||
+ | <ul class="sub-nav"> | ||
+ | <li><a href="#">GOLD HP</a></li> | ||
+ | <li><a href="#">SILVER HP</a></li> | ||
+ | <li><a href="#">INTEGRATED HP</a></li> | ||
+ | <li><a href="#">ENGAGEMENT</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">OUTEACH</a></li> | ||
+ | <li><a href="#">EXPERIMENT</a> | ||
+ | <span class="caret"></span> | ||
+ | <ul class="sub-nav"> | ||
+ | <li><a href="#">PROCEDURE</a></li> | ||
+ | <li><a href="#">RESULTS</a></li> | ||
+ | <li><a href="#">NOTEBOOK</a></li> | ||
+ | <li><a href="#">PROTOCOL</a></li> | ||
+ | <li><a href="#">PARTS</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">PROJECT</a> | ||
+ | <span class="caret"></span> | ||
+ | <ul class="sub-nav"> | ||
+ | <li><a href="#">DESCRIPTION</a></li> | ||
+ | <li><a href="#">DESIGN</a></li> | ||
+ | <li><a href="#">PROOF</a></li> | ||
+ | <li><a href="#">SAFTY</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">ACHIEVEMENT</a> | ||
+ | <span class="caret"></span> | ||
+ | <ul class="sub-nav"> | ||
+ | <li><a href="#">AWARD</a></li> | ||
+ | <li><a href="#">MEDAL</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="banner-div"> |
− | < | + | <img width="100%" src="img/team_all.jpg" class="banner-img"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
+ | <div class="team-box"> | ||
+ | <br><br> | ||
+ | <h1 style="color: #007ac5">Team members</h1> | ||
+ | <div class="box-column" style="margin-top: 5%;"> | ||
+ | <img src="img/gefei.jpg" class="person"> | ||
+ | <img src="img/wenkai.jpg" class="person" style="margin-left: 10%;"> | ||
+ | </div> | ||
+ | |||
+ | <div class="box-column" style="margin-top: 5%;"> | ||
+ | <img src="img/jiantao.jpg" class="person"> | ||
+ | <img src="img/mingyue.jpg" class="person" style="margin-left: 10%;"> | ||
+ | </div> | ||
+ | |||
+ | <div class="box-column" style="margin-top: 5%;"> | ||
+ | <img src="img/yamin.jpg" class="person"> | ||
+ | <img src="img/ziyu.jpg" class="person" style="margin-left: 10%;"> | ||
+ | </div> | ||
+ | |||
+ | <div class="box-column" style="margin-top: 5%;"> | ||
+ | <img src="img/zhicheng.jpg" class="person"> | ||
+ | <img src="img/hanxing.jpg" class="person" style="margin-left: 10%;"> | ||
+ | </div> | ||
+ | |||
+ | <br><br> | ||
+ | <h1 style="color: #007ac5">PI</h1> | ||
+ | <div class="box-column" style="margin-top: 5%;"> | ||
+ | <img src="img/weizhao.jpg" class="person"> | ||
+ | <img src="img/dengxu.jpg" class="person" style="margin-left: 10%;"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <br><br> | ||
+ | <h1 style="color: #007ac5">Instructors & Advisors</h1> | ||
+ | <div class="box-column" style="margin-top: 5%;"> | ||
+ | <img src="img/jinlong.jpg" class="person" style="width: 22%;height: auto;"> | ||
+ | <img src="img/yuxia.jpg" class="person" style="margin-left: 1.5%; width: 22%;height: auto;"> | ||
+ | <img src="img/chuangxing.jpg" class="person" style="margin-left: 1.5%;width: 22%;height: auto;"> | ||
+ | <img src="img/decheng.jpg" class="person" style="margin-left: 1.5%;width: 22%;height: auto;"> | ||
+ | </div> | ||
</div> | </div> | ||
+ | |||
+ | <div class="footer"> | ||
+ | <div class="sponsor"> | ||
+ | <img src="img/sponsor1.jpg" class="sponsor-img"> | ||
+ | <img src="img/sponsor2.jpg" class="sponsor-img"> | ||
+ | <img src="img/sponsor3.jpg" class="sponsor-img"> | ||
+ | <img src="img/sponsor4.jpg" class="sponsor-img"> | ||
+ | <img src="img/sponsor5.jpg" class="sponsor-img"> | ||
+ | </div> | ||
+ | <div class="footer-info"> | ||
+ | <address style="color:#888">3688 Nanhai Ave, ShenZhen, GuangDong Province, China</address> | ||
+ | <span class="copyright">Copyright © 2017.<a href="https://2017.igem.org/Team:SZU-China" class="mainpage">SZU-China</a> iGEM</span> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="arrow-div"> | ||
+ | <a id="top" href="#" title="Back to top"> | ||
+ | <img src="img/arrow.png" class="arrow-img"> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | </body> | ||
+ | |||
+ | |||
+ | |||
+ | |||
</html> | </html> |
Revision as of 12:25, 16 October 2017