Team:St Pauls London

From 2013hs.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 *** -->
 
-
 
<html>
<html>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #fe2b33; /*background-color: #fe2b33;*/">
 
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; /*color: #f6f6f6*/; padding: 5px;">
 
-
This is a template page. READ THESE INSTRUCTIONS.
 
-
</div>
 
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; /*color: #f6f6f6*/; padding: 5px;">
 
-
You are provided with this team page template with which to start the iGEM season.  You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki.  You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
 
-
</div>
 
-
<div id="warning" style="/*text-align: center;*/ font-weight: bold; font-size: small; /*color: #f6f6f6*/; padding: 5px;">
 
-
You <strong>MUST</strong> have the following information on your wiki:
 
-
<ul style="font-weight:normal;">
 
-
<li>a team description</li>
 
-
<li>project description</li>
 
-
<li>safety information (did your team take a safety training course? were you supervised in the lab?)</li>
 
-
<li>team attribution (who did what part of your project?)</li>
 
-
</ul>
 
-
You may also wish to add other page such as:
 
-
<ul style="font-weight:normal;">
 
-
<li>lab notebook</li>
 
-
<li>sponsor information</li>
 
-
<li>other information</li>
 
-
</ul>
 
-
REMEMBER, keep all of your pages within your teams namespace. <br><span style="font-weight:normal; font-style:italic;">Example: 2013hs.igem.org/Team:St_Pauls_London/Our_Pets</span>
 
-
</div>
 
-
</div>
 
-
</html>
 
-
<!-- *********************** End of the alert box *********************** -->
+
<head>
 +
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
 +
    body {
 +
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
background-color: white;
 +
margin: 0 auto;
 +
padding-top:20px;
 +
font-size: 16px;
 +
}
 +
 +
#internet-explorer {
 +
margin-top: 0px;
 +
text-align: center;
 +
color: #C30;
 +
font-family: monospace;
 +
font-weight: bold;
 +
}
 +
 +
/*----- HEADER -----*/
 +
#header {
 +
width: 900px;
 +
height: 200px;
 +
position: absolute;
 +
left: 50%;
 +
margin-left: -450px;
 +
background-color: ;
 +
padding-bottom: 20px;
 +
}
 +
 +
#headerTitle {
 +
text-align: center;
 +
padding-left: 10px;
 +
font-weight: bold;
 +
font-size: 36px;
 +
}
 +
 +
#headerBackground {
 +
position: absolute;
 +
z-index: -1;
 +
width: 100%;
 +
height: 100px;
 +
bottom: 0px;
 +
}
 +
 +
#headerSubTitle {
 +
text-align: center;
 +
font-size: 14px;
 +
letter-spacing: 2px;
 +
color: #666;
 +
}
 +
 +
a#igem, a#igem:visited {
 +
color: inherit;
 +
text-decoration: none;
 +
}
 +
 +
a#igem:hover, a#igem:active {
 +
color: #F93;
 +
text-decoration: underline;
 +
}
-
{|align="justify"
+
/*----- HEADER BUTTONS -----*/
-
|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.
+
.nav_button {
-
|[[Image:St_Pauls_London_logo.png|200px|right|frame]]
+
width: 100px;
-
|-
+
height: 50px;
-
|
+
position: absolute;
-
''Tell us more about your project. Give us background. Use this as the abstract of your project.  Be descriptive but concise (1-2 paragraphs)''
+
bottom: 20%;
-
|[[Image:St_Pauls_London_team.png|right|frame|Your team picture]]
+
margin-left: -50px;
-
|-
+
display: table;
-
|
+
}
-
|align="center"|[[Team:St_Pauls_London | Team St_Pauls_London]]
+
-
|}
+
.nav_buttonText {
 +
color: #222;
 +
text-align: center;
 +
vertical-align: middle;
 +
display: table-cell;
 +
}
 +
 +
a.nav_buttonLink, a.nav_buttonLink:visited {
 +
text-decoration: none;
 +
}
 +
a.nav_buttonLink:hover, a.nav_buttonLink:active {
 +
color: #F93;
 +
text-decoration: underline;
 +
}
-
<!--- Team Information Link --->
+
#first {
 +
left: 20%;
 +
}
 +
 +
#second {
 +
left: 40%;
 +
}
 +
 +
#third {
 +
left: 60%;
 +
}
 +
 +
#fourth {
 +
left: 80%;
 +
}
 +
/*----- END OF BUTTONS -----*/
 +
 +
/*----- END OF HEADER -----*/
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
/*----- MAIN CONTENT -----*/
-
!align="center"|[https://igem.org/Team.cgi?year=2013&division=high_school&team_name=St_Pauls_London Official Team Profile]
+
#wrapper {
-
|}
+
clear: both;
 +
position: absolute;
 +
width: 900px;
 +
height: 90%;
 +
margin-top: 250px; /* stops overlap with header */
 +
left: 50%;
 +
margin-left: -450px;
 +
border: medium 2px black;
 +
background-color: ;
 +
}
 +
 +
.title-link {
 +
text-decoration: none;
 +
color: inherit;
 +
}
 +
 +
#first-panel {
 +
display: ;
 +
background: white;
 +
border:1px solid white;
 +
padding-left: 15px;
 +
-moz-border-radius-topright: 20px;
 +
-webkit-border-top-right-radius: 20px;
 +
-moz-border-radius-bottomright: 20px;
 +
-webkit-border-bottom-right-radius: 20px;
 +
width: 100%;
 +
height: auto;
 +
}
 +
 +
#second-panel {
 +
display: none;
 +
background: white;
 +
border:1px solid white;
 +
padding-left: 15px;
 +
-moz-border-radius-topright: 20px;
 +
-webkit-border-top-right-radius: 20px;
 +
-moz-border-radius-bottomright: 20px;
 +
-webkit-border-bottom-right-radius: 20px;
 +
width: 100%;
 +
height: auto;
 +
}
 +
 +
#third-panel {
 +
display: none;
 +
background: white;
 +
border:1px solid white;
 +
padding-left: 15px;
 +
-moz-border-radius-topright: 20px;
 +
-webkit-border-top-right-radius: 20px;
 +
-moz-border-radius-bottomright: 20px;
 +
-webkit-border-bottom-right-radius: 20px;
 +
width: 100%;
 +
height: auto;
 +
}
 +
 +
#fourth-panel {
 +
display: none;
 +
background: white;
 +
border:1px solid white;
 +
padding-left: 15px;
 +
-moz-border-radius-topright: 20px;
 +
-webkit-border-top-right-radius: 20px;
 +
-moz-border-radius-bottomright: 20px;
 +
-webkit-border-bottom-right-radius: 20px;
 +
width: 100%;
 +
height: auto;
 +
}
 +
 +
/*----- FIRST CONTENT -----*/
 +
 +
/*----- SECOND CONTENT -----*/
 +
 +
/*----- THIRD CONTENT -----*/
 +
 +
/*----- FOURTH CONTENT -----*/
 +
 +
/*----- FOOTER -----*/
-
===Team===
+
#footer {
-
Tell us about your team, your school!
+
position: absolute;
 +
bottom: 0;
 +
}
 +
   
 +
    <!-- FIRST BUTTON -->
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
    $("#nav-button-link-first").click(function(){
 +
        $("#first-panel").toggle("fast");
 +
$("#second-panel").hide("fast");
 +
$("#third-panel").hide("fast");
 +
$("#fourth-panel").hide("fast");
 +
        $(this).toggleClass("active");
 +
        return false;
 +
    });
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript">
 +
$(document).ready(function(){
 +
    $("#first-title-link").click(function(){
 +
        $("#first-panel").toggle("fast");
 +
$("#second-panel").hide("fast");
 +
$("#third-panel").hide("fast");
 +
$("#fourth-panel").hide("fast");
 +
        $(this).toggleClass("active");
 +
        return false;
 +
    });
 +
});
 +
</script>
 +
   
 +
    <!-- SECOND BUTTON -->
 +
   
 +
    <script type="text/javascript">
 +
$(document).ready(function(){
 +
    $("#nav-button-link-second").click(function(){
 +
        $("#second-panel").toggle("fast");
 +
$("#first-panel").hide("fast");
 +
$("#third-panel").hide("fast");
 +
$("#fourth-panel").hide("fast");
 +
        $(this).toggleClass("active");
 +
        return false;
 +
    });
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript">
 +
$(document).ready(function(){
 +
    $("#second-title-link").click(function(){
 +
        $("#second-panel").toggle("fast");
 +
$("#first-panel").hide("fast");
 +
$("#third-panel").hide("fast");
 +
$("#fourth-panel").hide("fast");
 +
        $(this).toggleClass("active");
 +
        return false;
 +
    });
 +
});
 +
</script>
 +
   
 +
    <!-- THIRD BUTTON -->
 +
   
 +
    <script type="text/javascript">
 +
$(document).ready(function(){
 +
    $("#nav-button-link-third").click(function(){
 +
        $("#third-panel").toggle("fast");
 +
$("#first-panel").hide("fast");
 +
$("#second-panel").hide("fast");
 +
$("#fourth-panel").hide("fast");
 +
        $(this).toggleClass("active");
 +
        return false;
 +
    });
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript">
 +
$(document).ready(function(){
 +
    $("#third-title-link").click(function(){
 +
        $("#third-panel").toggle("fast");
 +
$("#first-panel").hide("fast");
 +
$("#second-panel").hide("fast");
 +
$("#fourth-panel").hide("fast");
 +
        $(this).toggleClass("active");
 +
        return false;
 +
    });
 +
});
 +
</script>
 +
   
 +
    <!-- FOURTH BUTTON -->
 +
   
 +
    <script type="text/javascript">
 +
$(document).ready(function(){
 +
    $("#nav-button-link-fourth").click(function(){
 +
        $("#fourth-panel").toggle("fast");
 +
$("#first-panel").hide("fast");
 +
$("#second-panel").hide("fast");
 +
$("#third-panel").hide("fast");
 +
        $(this).toggleClass("active");
 +
        return false;
 +
    });
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript">
 +
$(document).ready(function(){
 +
    $("#fourth-title-link").click(function(){
 +
        $("#fourth-panel").toggle("fast");
 +
$("#first-panel").hide("fast");
 +
$("#second-panel").hide("fast");
 +
$("#third-panel").hide("fast");
 +
        $(this).toggleClass("active");
 +
        return false;
 +
    });
 +
});
 +
</script>
 +
   
 +
</head>
-
 
+
<body>
-
===Project===
+
<div id="header">
-
What are you working on this semester?  
+
<div id="headerTitle">SPS_London</div>
-
 
+
    <div id="headerSubTitle">An <a id="igem" href="https://igem.org">iGEM</a> Team</div>
-
 
+
    <div id="headerBackground"></div> <!--put image in here-->
-
===Notebook===
+
    <!--[if gte IE 2 ]>
-
Show us how you spent your days.
+
<p id="internet-explorer">This Wiki is designed for best use on <a href="https://www.google.com/intl/en_uk/chrome/browser/?hl=en-GB">Google Chrome</a> and <a href="https://www.mozilla.org/en-US/firefox/fx/#desktop">Mozilla Firefox</a>. Some key features are not available to your browser, please use a different browser or click <a href="">here</a>.</p>
-
 
+
    <![endif]-->
-
 
+
    <a class="nav_buttonLink" id="nav-button-link-first" href="#first"><div class="nav_button" id="first"><p class="nav_buttonText">HOME</p></div></a>
-
===Results/Conclusions===
+
    <a class="nav_buttonLink" id="nav-button-link-second" href="#second"><div class="nav_button" id="second"><p class="nav_buttonText">PROJECT</p></div></a>
-
What did you achieve over the course of your semester?
+
    <a class="nav_buttonLink" id="nav-button-link-third" href="#third"><div class="nav_button" id="third"><p class="nav_buttonText">THE TEAM</p></div></a>
-
 
+
<a class="nav_buttonLink" id="nav-button-link-fourth" href="#fourth"><div class="nav_button" id="fourth"><p class="nav_buttonText">NOTEBOOK</p></div></a>
-
 
+
   
-
===Safety===
+
</div> <!--of header-->
-
What safety precautions did your team take? Did you take a safety training course? Were you supervised at all times in the lab?
+
   
-
 
+
   
-
 
+
    <div id="wrapper">
-
===Attributions===
+
    <a class="title-link" id="first-title-link" id="#first"><h3>first</h3></a>
-
Who worked on what?
+
    <div id="first-panel">
-
 
+
      <p>this is all inside the first panel</p>
-
 
+
       
-
===Human Practices===
+
    </div>
-
What impact does/will your project have on the public? 
+
       
-
 
+
    <a class="title-link" id="second-title-link" id="#second"><h3>second</h3></a>
-
 
+
    <div id="second-panel">
-
===Fun!===
+
      <p>this is all inside the second panel</p>
-
What was your favorite team snack?? Have a picture of your team mascot?
+
       
-
 
+
    </div>
-
 
+
       
-
 
+
        <a class="title-link" id="third-title-link" id="#third"><h3>third</h3></a>
-
<forum_subtle />
+
        <div id="third-panel">
 +
            <p>this is all inside the third panel</p>
 +
   
 +
        </div>
 +
       
 +
        <a class="title-link" id="fourth-title-link" id="#fourth"><h3>fourth</h3></a>
 +
        <div id="fourth-panel">
 +
            <p>this is all inside the fourth panel</p>
 +
   
 +
        </div>
 +
       
 +
       
 +
    </div> <!-- of wrapper -->
 +
  <div id="footer">footer</div>
 +
   
 +
   
 +
</body>
 +
</html>

Revision as of 22:16, 7 March 2013

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: white; margin: 0 auto; padding-top:20px; font-size: 16px; } #internet-explorer { margin-top: 0px; text-align: center; color: #C30; font-family: monospace; font-weight: bold; } /*----- HEADER -----*/ #header { width: 900px; height: 200px; position: absolute; left: 50%; margin-left: -450px; background-color: ; padding-bottom: 20px; } #headerTitle { text-align: center; padding-left: 10px; font-weight: bold; font-size: 36px; } #headerBackground { position: absolute; z-index: -1; width: 100%; height: 100px; bottom: 0px; } #headerSubTitle { text-align: center; font-size: 14px; letter-spacing: 2px; color: #666; } a#igem, a#igem:visited { color: inherit; text-decoration: none; } a#igem:hover, a#igem:active { color: #F93; text-decoration: underline; } /*----- HEADER BUTTONS -----*/ .nav_button { width: 100px; height: 50px; position: absolute; bottom: 20%; margin-left: -50px; display: table; } .nav_buttonText { color: #222; text-align: center; vertical-align: middle; display: table-cell; } a.nav_buttonLink, a.nav_buttonLink:visited { text-decoration: none; } a.nav_buttonLink:hover, a.nav_buttonLink:active { color: #F93; text-decoration: underline; } #first { left: 20%; } #second { left: 40%; } #third { left: 60%; } #fourth { left: 80%; } /*----- END OF BUTTONS -----*/ /*----- END OF HEADER -----*/ /*----- MAIN CONTENT -----*/ #wrapper { clear: both; position: absolute; width: 900px; height: 90%; margin-top: 250px; /* stops overlap with header */ left: 50%; margin-left: -450px; border: medium 2px black; background-color: ; } .title-link { text-decoration: none; color: inherit; } #first-panel { display: ; background: white; border:1px solid white; padding-left: 15px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; width: 100%; height: auto; } #second-panel { display: none; background: white; border:1px solid white; padding-left: 15px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; width: 100%; height: auto; } #third-panel { display: none; background: white; border:1px solid white; padding-left: 15px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; width: 100%; height: auto; } #fourth-panel { display: none; background: white; border:1px solid white; padding-left: 15px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; width: 100%; height: auto; } /*----- FIRST CONTENT -----*/ /*----- SECOND CONTENT -----*/ /*----- THIRD CONTENT -----*/ /*----- FOURTH CONTENT -----*/ /*----- FOOTER -----*/ #footer { position: absolute; bottom: 0; }

first

this is all inside the first panel

second

this is all inside the second panel

third

this is all inside the third panel

fourth

this is all inside the fourth panel

Retrieved from "http://2013hs.igem.org/Team:St_Pauls_London"