Team:OUC-China/Project

From 2014.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
 
-
 
{{CSS/Main}}
{{CSS/Main}}
-
 
-
 
<html>
<html>
-
 
+
    <link href="https://2014.igem.org/Team:OUC-China/css/bootstrap.css?action=raw&amp;ctype=text/css" rel="stylesheet" />
-
<!--main content -->
+
    <link href="https://2014.igem.org/Team:OUC-China/css/topsection.css?action=raw&ctype=text/css" rel="stylesheet" />
-
<table width="70%" align="center">
+
    <script src="https://2014.igem.org/Team:OUC-China/js/jquery.js?action=raw&ctype=text/javascript"></script>
-
 
+
    <script src="https://2014.igem.org/Team:OUC-China/js/bootstrap.js?action=raw&ctype=text/javascript"></script>
-
 
+
    <style>
-
<!--welcome box -->
+
        body {
-
<tr>
+
            background-color: #609fd2;
-
<td style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor=#FF404B>
+
            background-repeat: repeat;
-
<h1 >WELCOME TO iGEM 2014! </h1>
+
            background-image: url(https://static.igem.org/mediawiki/2014/1/19/OUC-China_Content_Background.png);
-
<p>Your team has been approved and you are ready to start the iGEM season!
+
            position: relative;
-
<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>
+
        }
-
<br>
+
        header {
-
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:OUC-China/Project&action=edit"style="color:#FFFFFF"> Click here  to edit this page!</a> </p>
+
            background-color: #609fd2;
-
</td>
+
        }
-
</tr>
+
        header > div {
-
 
+
            margin: 0 auto;
-
<tr> <td colspan="3" height="5px"> </td></tr>
+
            margin-bottom: 0 !important;
-
<!-- end welcome box -->
+
            width: 778px;
-
<tr>  
+
        }
-
 
+
        .member > img {
-
<!--navigation menu -->
+
            width: 250px;
-
<td align="center" colspan="3">
+
            height: 250px;
-
 
+
            border: 5px solid #ffffff;
-
<table  width="100%">
+
            border-radius: 50%;
-
<tr heigth="15px"></tr>
+
            display: inline-block;
-
<tr heigth="75px">  
+
            margin: 20px;
-
 
+
            position: inherit;
-
 
+
        }
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
        .member > div {
-
<a href="https://2014.igem.org/Team:OUC-China"style="color:#000000">Home </a> </td>
+
            display: inline-block;
-
 
+
            position: relative;
-
<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/Team"style="color:#000000"> Team </a> </td>
+
        .memberight {
-
 
+
            text-align: right;
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
        }
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=OUC-China"style="color:#000000"> Official Team Profile </a></td>
+
        .nav > li > a,.nav > li.dropdown > a,.navbar .dropdown-menu>li>a, .navbar .dropdown-menu>li>a:focus {
-
 
+
            color: #ffffff !important;
-
<td style="border:1px solid black" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
            font-size: 20px;
-
<a href="https://2014.igem.org/Team:OUC-China/Project"style="color:#000000"> Project</a></td>
+
        }
-
 
+
        .popover {
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
            z-index: 1 !important;
-
<a href="https://2014.igem.org/Team:OUC-China/Parts"style="color:#000000"> Parts</a></td>
+
        }
-
 
+
        .affix{
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
            position: fixed;
-
<a href="https://2014.igem.org/Team:OUC-China/Modeling"style="color:#000000"> Modeling</a></td>
+
            top: 0;
-
 
+
        }
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
        .affix-top{
-
<a href="https://2014.igem.org/Team:OUC-China/Notebook"style="color:#000000"> Notebook</a></td>
+
            position: absolute;
-
 
+
            top: 286px;
-
<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/Safety"style=" color:#000000"> Safety </a></td>
+
        .affix a:hover, .affix-top a:hover, .affix li.active, .affix-top li.active, .affix li.active a, .affix-top li.active a {
-
 
+
            background-color: #d2e9fd !important;
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
            color: #000000 !important;
-
<a href="https://2014.igem.org/Team:OUC-China/Attributions"style="color:#000000"> Attributions </a></td>
+
        }
-
 
+
        #childNavigator .nav {
-
 
+
            margin-left: 0!important;
-
<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>
+
        }
-
</tr>
+
        #childNavigator > .nav > li > a {
-
</table>
+
            font-size: 16px;
-
 
+
        }
-
</tr>
+
        #childNavigator > .nav > li > .nav > li > a {
-
</tr>
+
            padding-left: 20%;
-
</td>
+
            font-size: 14px;
-
 
+
        }
-
<tr> <td colspan="3" height="15px"> </td></tr>
+
        .topSection {
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
            height: 240px;
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
            padding-top: 10px;
-
 
+
            background-color: rgb(210,233,253);
-
 
+
            margin-top: -11px;
-
 
+
        }
-
<!--Project content  -->
+
        .topSection .igemLogo {
-
<tr><td > <h3> Project Description </h3></td>
+
            position:absolute;
-
<td ></td >
+
            top: 10px;
-
<td > <h3> Content</h3></td>
+
            left: 10px;
-
</tr>
+
        }
-
 
+
        .topSection .waveUp {
-
<tr>
+
            margin-top: -10px;
-
<td width="45%"  valign="top">
+
            width: 100%;
-
<p>Tell us more about your project. Give us background. Use this as the abstract of your project.  Be descriptive but concise (1-2 paragraphs) </p>
+
            height: 110px;
-
<br>
+
            background: url(https://static.igem.org/mediawiki/2014/f/f0/WaveUp.png) repeat-x;
-
<h3>References </h3>
+
            z-index: 0;
-
<p>
+
        }
-
iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you though about your project and what works inspired you. </p>  
+
        .topSection .waveDown {
-
</td>
+
            margin-top: -70px;
-
 
+
            width: 100%;
-
<td></td>
+
            height: 70px;
-
<td  width="45%" valign="top">
+
            background: url(https://static.igem.org/mediawiki/2014/d/d0/WaveDown2.png) repeat-x;
-
<p> You can use these subtopics to further explain your project</p>
+
            z-index: 2;
-
 
+
            position: relative;
-
<ol>
+
        }
-
<li>Overall project summary</li>
+
        .topSection .leftPlas {
-
<li>Project Details</li>
+
            display: block;
-
<li>Materials and Methods</li>
+
            position: absolute;
-
<li>The Experiments</li>
+
            top: 26px;
-
<li>Results</li>
+
            z-index: 1;
-
<li>Data analysis</li>
+
            left: 211px;
-
<li>Conclusions</li>
+
            -webkit-transition: all ease 0.5s;
-
</ol>
+
            -moz-transition: all ease 0.5s;
-
 
+
            -ms-transition: all ease 0.5s;
-
<p>
+
            transition: all ease 0.5s;
-
It's important for teams to describe all the creativity that goes into an iGEM project, along with all the great ideas your team will come up with over the course of your work.  
+
        }
-
</p>
+
        .topSection .leftPlas:hover {
-
 
+
            margin-top: -5px;
-
<p>
+
        }
-
It's also important to clearly describe your achievements so that judges will know what you tried to do and where you succeeded. Please write your project page such that what you achieved is easy to distinguish from what you attempted.  
+
        .topSection .rightPlas {
-
</p>
+
            display: block;
-
 
+
            position: absolute;
-
</td>
+
            top: 26px;
-
 
+
            z-index: 1;
-
</tr>
+
            right: 211px;
-
 
+
        }
-
 
+
    </style>
-
</table>
+
    <script>
 +
        if ($('.firstHeading')) $('.firstHeading').remove();
 +
    </script>
 +
<div class="topSection">
 +
        <img class="igemLogo" src="https://static.igem.org/mediawiki/2014/c/c6/OUC-China_Content_IGEM.png">
 +
        <img src="https://static.igem.org/mediawiki/2014/a/a1/OUC_China_Content_Title.png" style="display:block;margin:0 auto">
 +
        <div class="waveUp"></div>
 +
        <div class="waveDown"></div>
 +
        <img class="leftPlas" src="https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png" />
 +
        <img class="rightPlas" src="https://static.igem.org/mediawiki/2014/e/e6/OUC-China_Index_Plasmid2.png" />
 +
    </div>
 +
    <header>
 +
        <div class="navbar navbar-inverse">
 +
            <div class="navbar-collapse collapse navbar-inverse-collapse">
 +
                <ul class="nav navbar-nav">
 +
                    <li><a href="https://2014.igem.org/Team:OUC-China">HOME</a></li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">TEAM <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Team">Team members</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Team_Instructor">Instructor</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Team_Acknowledgment">Acknowledgment</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Team_Lab">Lab</a></li>
 +
                            <li><a href="https://igem.org/Team.cgi?year=2014&team_name=OUC-China">Official team profile</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown  active">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">PROJECT <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li  class="active"><a href="https://2014.igem.org/Team:OUC-China/Project">Overview</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Project_Background">Background</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Project_Design">Design</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Project_Result">Result</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Project_Future">Future</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Project_Modeling">Modeling</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">JUDGING <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Judging">Biobrick</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Judging_Achievment">Achievment</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">SAFETY <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Safety">Boi safety</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Safety_Lab_safety">Lab safety</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Safety_Policy_Practise">Policy&Practise</a></li>
 +
                        </ul>
 +
                    </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="https://2014.igem.org/Team:OUC-China/Notebook">Lab note</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Notebook_Modeling_Note">Modeling note</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Notebook_Protocols">Protocols</a></li
 +
                        </ul>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
        <script>
 +
            var leftPlas = $(".topSection .leftPlas");
 +
            var originalLeft = leftPlas.offset().left;
 +
            $("header .nav > li").mouseover(function () {
 +
                if ($(this).offset().left < leftPlas.offset().left) leftPlas[0].src = "https://static.igem.org/mediawiki/2014/8/8c/ObjLeft2.png";
 +
                else leftPlas[0].src = "https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png";
 +
                leftPlas.css({ left: $(this).offset().left - 50 });
 +
            }).mouseout(function () {
 +
                leftPlas[0].src = "https://static.igem.org/mediawiki/2014/8/8c/ObjLeft2.png";
 +
                leftPlas.css({ left: originalLeft });
 +
                setTimeout(function () { leftPlas[0].src = "https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png"; }, 500);
 +
            });
 +
        </script>
 +
    </header>
 +
    <div id="mainContent" style="width:1024px;background-color:#d2e9fd;padding:10px;margin:0 auto">
 +
        <!--在这里插入内容-->
 +
    </div>
 +
    <script>
 +
        $(document.body).scrollspy({ target: '#childNavigator' });
 +
        $('#childNavigator').affix({ offset: { top: 285 } });
 +
    </script>
 +
<img class="anchor" onclick="document.documentElement.scrollTop = document.body.scrollTop = 0;" src="https://static.igem.org/mediawiki/2014/b/b6/ToTop.png">
</html>
</html>

Revision as of 03:39, 17 October 2014