Team:OUC-China/Team

From 2014.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
-
 
-
 
<html>
<html>
 +
<script src="https://2014.igem.org/Team:OUC-China/js/jquery.js?action=raw&ctype=text/javascript"></script>
 +
<style>
 +
@charset "utf-8";
 +
/* CSS Document */
 +
body, div, p, ul, li, h1, h2, h3, h4, h5, h6 {
 +
margin: 0px;
 +
padding: 0px;
 +
font-family: "微软雅黑";
 +
}
 +
body{
 +
    min-width:1350px;
 +
}
 +
ul, ol {
 +
list-style: none;
 +
}
 +
img {
 +
display: block;
 +
position: absolute;
 +
}
 +
a {
 +
color: inherit;
 +
text-decoration: none;
 +
}
-
<!--main content -->
+
.header {
-
<table width="70%" align="center">
+
height: 240px;
-
 
+
width: 100%;
-
 
+
background: rgb(210,233,253);
-
<!--welcome box -->
+
position: relative;
-
<tr>
+
}
-
<td style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor=#FF404B>
+
.header .igemLogo {
-
<h1 >WELCOME TO iGEM 2014! </h1>
+
top: 27px;
-
<p>Your team has been approved and you are ready to start the iGEM season!
+
left: 66px;
-
<br>On this page you can document your project, introduce your team members, document your progress <br> and share your iGEM experience with the rest of the world! </p>
+
transition: 0.3s;
-
<br>
+
-moz-transition: 0.3s;
-
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:OUC-China/Team&action=edit"style="color:#FFFFFF"> Click here  to edit this page!</a> </p>
+
-o-transition: 0.3s;
-
</td>
+
-webkit-transition: 0.3s;
-
</tr>
+
}
-
 
+
.header .igemLogo:hover {
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
transform: rotate(360deg);
-
<!-- end welcome box -->
+
-moz-transform: rotate(360deg);
-
<tr>
+
-ms-transform: rotate(360deg);
-
 
+
-o-transform: rotate(360deg);
-
<!--navigation menu -->
+
-webkit-transform: rotate(360deg);
-
<td align="center" colspan="3">
+
}
-
 
+
.header .waveUp {
-
<table  width="100%">
+
position: absolute;
-
<tr heigth="15px"></tr>
+
bottom: 0px;
-
<tr heigth="75px">
+
width: 100%;
-
 
+
height: 110px;
-
 
+
background: url(https://static.igem.org/mediawiki/2014/f/f0/WaveUp.png) repeat-x;
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
}
-
<a href="https://2014.igem.org/Team:OUC-China"style="color:#000000">Home </a> </td>
+
.header .waveDown {
-
 
+
position: absolute;
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
bottom: 0px;
-
<a href="https://2014.igem.org/Team:OUC-China/Team"style="color:#000000"> Team </a> </td>
+
width: 100%;
-
 
+
height: 70px;
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
background: url(https://static.igem.org/mediawiki/2014/d/d0/WaveDown2.png) repeat-x;
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=OUC-China"style="color:#000000"> Official Team Profile </a></td>
+
z-index: 1;
-
 
+
}
-
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
.header .objLeft {
-
<a href="https://2014.igem.org/Team:OUC-China/Project"style="color:#000000"> Project</a></td>
+
left: 211px;
-
 
+
top: 26px;
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
z-index: 0;
-
<a href="https://2014.igem.org/Team:OUC-China/Parts"style="color:#000000"> Parts</a></td>
+
}
-
 
+
.header .objRight {
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
right: 230px;
-
<a href="https://2014.igem.org/Team:OUC-China/Modeling"style="color:#000000"> Modeling</a></td>
+
top: 28px;
-
 
+
transition: 0.5s;
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
-webkit-transition: 0.5s;
-
<a href="https://2014.igem.org/Team:OUC-China/Notebook"style="color:#000000"> Notebook</a></td>
+
z-index: 0;
-
 
+
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
.header .objRight:hover {
-
<a href="https://2014.igem.org/Team:OUC-China/Safety"style=" color:#000000"> Safety </a></td>
+
margin-top: 10px;
-
 
+
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
.header .nav {
-
<a href="https://2014.igem.org/Team:OUC-China/Attributions"style="color:#000000"> Attributions </a></td>
+
top: 200px;
-
 
+
z-index: 2;
-
 
+
}
-
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
+
.header .nav ul{ width:800px; margin:auto;}
-
</tr>
+
.main {
-
</table>
+
width: 100%;
-
 
+
background-image: url(https://static.igem.org/mediawiki/2014/1/19/OUC-China_Content_Background.png);
-
<!--end navigation menu -->
+
background-color: rgb(96,159,210);
-
</tr>
+
position:relative;
-
</tr>
+
}
-
</td>
+
.main .mainBox {
-
 
+
width: 800px;
-
<tr> <td colspan="3"  height="15px"> </td></tr>
+
height: 1000px;
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
background: rgb(114,187,227);
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
margin: 0 auto;
-
 
+
}
-
<tr><td > <h3> Team Information</h3></td>
+
.main .menu{
-
<td ></td >
+
position: absolute;
-
<td > <h3> Upload pictures of your team!</h3></td>
+
top: 0px;
-
</tr>
+
}
-
 
+
.main dt,.main dd{
-
<tr>
+
    border:1px dashed #000;
-
<td width="45%" valign="top">
+
color:#006CD9;
-
<p>
+
background:#FAFAFA;
-
You can write a background of your team here. Give us a background of your team, the members, etc. Or tell us more about something of your choosing.</p>
+
height:30px;
-
<p>
+
line-height:30px;
-
You can look at what other teams did to get some inspiration! Here are a few examples:</p>
+
text-align:center;
-
<ul>
+
}
-
<li><a href="https://2013.igem.org/Team:Evry/Team">2013 Evry</a></li>
+
.footer {
-
<li><a href="https://2013.igem.org/Team:Cornell/team">2013 Cornell</a></li>
+
width: 100%;
-
<li><a href="https://2013.igem.org/Team:UANL_Mty-Mexico/Team">2013 UANL Mty-Mexico</a></li>
+
height: 100px;
-
<li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Team/Korea_University">2013 Korea U Seoul</a></li>
+
background: rgb(39,119,183);
-
 
+
}
-
</ul>
+
.footer #top {
-
 
+
height: 150px;
-
 
+
position: fixed;
-
 
+
bottom: 30px;
-
</td>
+
right: 30px;
-
<td></td>
+
z-index: 1000;
-
<td width="45%"  valign="top">  
+
transition: 0.5s;
-
<p> We provide a server where you can upload images for your wiki!</p>
+
}
-
<p> Add pictures of your team members, advisors, instructors, lab, institution and everything you wish to show! </p>
+
.footer #top:hover {
-
<a href="https://2014.igem.org/Special:Upload"><img src="" width="100px" height="100px">  </a> <a href="https://2014.igem.org/Special:Upload"><img src="" width="100px" height="100px">  </a>
+
transform: rotate(180deg);
-
</a> <a href="https://2014.igem.org/Special:Upload"><img src="" width="100px" height="100px">  </a>
+
-moz-transform: rotate(180deg);
-
<br>
+
-ms-transform: rotate(180deg);
-
<a href="https://2014.igem.org/Special:Upload">Click here to upload! </a>
+
-o-transform: rotate(180deg);
-
</td>
+
-webkit-transform: rotate(180deg);
-
 
+
}
-
 
+
@charset "utf-8";
-
</tr>
+
/* CSS Document */
-
 
+
.nav {
-
<tr><td > <h3> Tips for the Team Page </h3></td>
+
position:relative;
-
<td ></td >
+
}
-
<td > </td>
+
.nav li {
-
</tr>
+
padding: 0 8px;
-
 
+
float: left;
-
 
+
position: relative;
-
<tr>
+
min-width: 80px;
-
<td width="45%" valign="top">
+
height: 40px;
-
<p>What should this page contain?</p>
+
color: rgb(60,60,60);
-
<ul>
+
font-size: 24px;
-
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
line-height: 40px;
-
<li> You can add a small biography or a few words from each team member, tell us what you like, and what motivates to participate in iGEM. </li>
+
text-align: center;
-
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
transition: 0.3s;
-
<li>Remember that image galleries can help you showcase many pictures while saving space </li>
+
-moz-transition: 0.3s;
-
</ul>
+
-o-transition: 0.3s;
-
 
+
-webkit-transition: 0.3s;
-
</td>
+
}
-
 
+
.nav li:hover {
-
<td></td>
+
background: rgb(146,205,253);
-
<td width="45%"  valign="top"> </td>
+
color: #fff;
-
 
+
}
-
</tr>
+
.nav .pMenu ul {
-
 
+
display: none;
 +
position: absolute;
 +
top: 100%;
 +
left: 0px;
 +
overflow: hidden;
 +
border-bottom-left-radius: 6px;
 +
border-bottom-right-radius: 6px;
 +
}
 +
.nav .pMenu ul li {
 +
min-width: 220px;
 +
background: rgb(146,205,253);
 +
color: #fff;
 +
transition: 0.4s;
 +
-moz-transition: 0.4s;
 +
-o-transition: 0.4s;
 +
-webkit-transition: 0.4s;
 +
}
 +
.nav .pMenu ul li:hover {
 +
background: rgb(98,175,243);
 +
}
 +
#stt{ width:230px; font-size:12px;}
 +
dl{ line-height:25px;border-bottom:#999 1px dashed;}
 +
</style>
 +
<script>
 +
        if ($('.firstHeading')) $('.firstHeading').remove();
 +
        $('#top-section').css({ 'position': 'relative' });
 +
    </script>
 +
<div class = "header"> <img class = "igemLogo" src="https://static.igem.org/mediawiki/2014/c/c6/OUC-China_Content_IGEM.png">
 +
  <div class = "waveUp"></div>
 +
  <div class = "waveDown"></div>
 +
  <div style="margin:auto; width:500px;"><img src="https://static.igem.org/mediawiki/2014/a/a1/OUC_China_Content_Title.png" ></div> <img id = "objLeft" class = "objLeft" src="https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png"><img class = "objRight" src="https://static.igem.org/mediawiki/2014/e/e6/OUC-China_Index_Plasmid2.png">
 +
  <div class = "nav">
 +
    <ul>
-
</table>
+
      <li>HOME</li>
 +
      <li class = "pMenu">TEAM
 +
        <ul>
 +
          <li><a href="#">team members</a></li>
 +
          <li><a href="#">instructor</a></li>
 +
          <li><a href="#">Acknowledgement</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>PROJECT</li>
 +
      <li>JUDING</li>
 +
      <li>SAFETY</li>
 +
      <li>NOTEBOOK</li>
 +
    </ul>
 +
    <script>
 +
  var originalLeft = $("#objLeft").offset().left;
 +
  $("#objLeft").hover(function(){
 +
if($("#objLeft").offset().left == originalLeft) $(this).animate({marginTop:'10px'});
 +
  },function(){
 +
    $(this).animate({marginTop:'0px'});
 +
  });
 +
  $(".nav>ul li").mouseover(function(){
 +
if($(this).offset().left < $("#objLeft").offset().left) document.getElementById("objLeft").src = "https://static.igem.org/mediawiki/2014/8/8c/ObjLeft2.png";
 +
else document.getElementById("objLeft").src = "https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png";
 +
$("#objLeft").stop(false).animate({left:$(this).offset().left-50},800);
 +
  });
 +
  $(".nav>ul").mouseout(function(){
 +
document.getElementById("objLeft").src = "https://static.igem.org/mediawiki/2014/8/8c/ObjLeft2.png";
 +
$("#objLeft").stop(false).animate({left:originalLeft},800,function(){
 +
  document.getElementById("objLeft").src = "https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png";
 +
});
 +
  });
 +
    </script>
 +
  </div>
 +
  <script>
 +
  // JavaScript Document
 +
$(".pMenu").mouseover(function(){
 +
  $(this).find("ul").slideDown();
 +
});
 +
$(".pMenu").mouseleave(function(){
 +
  $(this).find("ul").slideUp(function(){
 +
    $(this).clearQueue();
 +
  });
 +
});
 +
  </script>
 +
</div>
 +
<div class = "main">
 +
  <div class = "mainBox"></div>
 +
  <!--<ul class = "menu">
 +
    <li><a href="#">team introduction</a></li>
 +
    <li><a href="#">member</a></li>
 +
  </ul>
 +
  更改-->
 +
<div style="width:1300px; margin:auto;">
 +
  <div id="stt" class="menu">
 +
  <dl>
 +
    <dt>
 +
        <span>team introduction</span>
 +
    </dt>
 +
  </dl>
 +
    <dl>
 +
    <dt>       
 +
        <span>member</span>
 +
    </dt>
 +
  </dl>
 +
</div>
 +
</div>
 +
</div>
 +
<div class = "footer"> <img id = "top" src="https://static.igem.org/mediawiki/2014/b/b6/ToTop.png"/>
 +
  <script>
 +
  $("#top").click(function(){
 +
    $(document).scrollTop(0);
 +
  });
 +
  </script>
 +
</div>
</html>
</html>

Revision as of 12:59, 16 October 2014

Retrieved from "http://2014.igem.org/Team:OUC-China/Team"