Team:Waterloo/Test

From 2013.igem.org

(Difference between revisions)
 
(46 intermediate revisions not shown)
Line 1: Line 1:
-
<html>  
+
<html>
-
<head>
+
<style type="text/css">
-
 
+
//remove header
-
<style media="screen" type="text/css">
+
-
 
+
#catlinks { display:none;}
#catlinks { display:none;}
#search-controls {display: none}
#search-controls {display: none}
Line 15: Line 13:
.firstHeading {display:none;}
.firstHeading {display:none;}
#p-logo{display: none};
#p-logo{display: none};
 +
 +
 +
/* bg colour change */
 +
body {
 +
margin: 0;
 +
padding: 0;
 +
 +
font-family: Georgia, "Times New Roman", Times, serif;
 +
font-size: 12px;
 +
color: #000000;
 +
        background: #585858;
 +
}
 +
 +
a:link, a:visited { color: #000000; text-decoration: none; font-weight: normal; }
 +
a:active, a:hover { color: #000000; text-decoration: underline; }
 +
 +
img { margin: 0px; padding: 0px; border: none; }
 +
 +
#header_wrapper {
 +
width: 100%;
 +
height: 265px;
 +
background: url(https://static.igem.org/mediawiki/igem.org/2/29/UW_IGEM_header_final.jpeg) no-repeat top center;
 +
}
 +
 +
#header {
 +
position: relative;
 +
width: 980px;
 +
height: 265px;
 +
padding: 0 10px;
 +
margin: 0 auto;
 +
background: url(https://static.igem.org/mediawiki/igem.org/2/29/UW_IGEM_header_final.jpeg) no-repeat top center;
 +
}
 +
 +
 +
 +
/* navigation */
 +
 +
ul  {
 +
      list-style-image: none;
 +
}
 +
 +
#nav {
 +
float: right;
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-weight: bold;
 +
font-size: 12px;
 +
padding-top: 70px;
 +
height: 43px;
 +
}
 +
 +
#nav .last {
 +
padding-right: 2px;
 +
background-image:url(https://static.igem.org/mediawiki/2013/6/67/UW_IGEM_nav_butn.png);
 +
background-repeat:no-repeat;
 +
background-position:right;
 +
}
 +
 +
#nav, #nav ul{
 +
margin:0;
 +
padding:0;
 +
list-style-type:none;
 +
list-style-position:outside;
 +
position:relative;
 +
line-height:1.5em;
 +
}
 +
 +
#nav .on {
 +
color:#fff !important;
 +
background-image: url(https://static.igem.org/mediawiki/2013/1/13/UW_search.png) !important;
 +
background-position: bottom left !important;
 +
}
 +
 +
#nav a:link, #nav a:active, #nav a:visited{
 +
    display:block;
 +
    padding: 14px 35px;
 +
    color:#a5a5a5;
 +
    text-decoration:none;
 +
    background-image: url(https://static.igem.org/mediawiki/2013/4/4a/UW_nav_butn_bg.jpg);
 +
    background-position: top left;;
 +
}
 +
 +
#nav a:hover {
 +
    color:#fff;
 +
    background-image: url(https://static.igem.org/mediawiki/2013/4/4a/UW_nav_butn_bg.jpg);
 +
    background-position: bottom left;
 +
}
 +
 +
#nav li{
 +
    float:left;
 +
    position:relative;
 +
}
 +
 +
#nav ul {
 +
    position:absolute;
 +
    width:13em;
 +
    top:3.8em;
 +
    display:none;
 +
    z-index: 1;
 +
}
 +
 +
#nav li ul a {
 +
    width:9em;
 +
    float:left;
 +
    background-color: #2e2e2e;
 +
    background-image: none !important;
 +
}
 +
 +
#nav li ul a:hover {
 +
background-color: #292929;
 +
}
 +
 +
#nav ul ul{
 +
top:auto;
 +
}
 +
 +
#nav li ul ul {
 +
    left:12em;
 +
    margin:0px 0 0 10px;
 +
}
 +
 +
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
 +
    display:none;
 +
}
 +
 +
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
 +
    display:block;
 +
}
 +
 +
/*end of navigation*/
 +
 +
/* search */
 +
#header #search_box {
 +
        position:absolute;
 +
width: 333px;
 +
height: 53px;
 +
bottom: 54px;
 +
right:  16px;
 +
background: url(https://static.igem.org/mediawiki/2013/1/13/UW_search.png) !important;
 +
}
 +
 +
#search_box form {
 +
width: 280px;
 +
height: 27px;
 +
margin-bottom: o;
 +
padding: 25px 0 0 0;
 +
}
 +
 +
#searchfield {
 +
height: 17px;
 +
width: 270px;
 +
padding: 4px 5px 6px 5px;
 +
color: #fff;
 +
font-size: 12px;
 +
font-variant: normal;
 +
line-height: normal;
 +
background: none;
 +
border: none;
 +
}
 +
 +
/* end of search */
 +
 +
 +
/* content_wrapper */
 +
/* change bg colour */
 +
#content {
 +
background-color: #585858;
 +
width: auto;
 +
}
 +
 +
#content_wrapper {
 +
width: 920px;
 +
margin: 0 auto;
 +
padding: 30px 40px;
 +
background: url(https://static.igem.org/mediawiki/2013/6/6f/UW_content_side.jpg) repeat-y;
 +
}
 +
 +
#content_wrapper h1 {
 +
color: #ffffff;
 +
font-size:24px;
 +
 +
        padding: 0 0 60px 20px;
 +
 +
 +
}
 +
 +
#content_wrapper p {
 +
font-family: Verdana, Arial;
 +
font-size:14px;
 +
}
 +
 +
#content_wrapper_bottom {
 +
width: 1000px;
 +
height: 15px;
 +
margin: 0 auto;
 +
color: white;
 +
background: url(https://static.igem.org/mediawiki/2013/e/ea/UW_content_bottom.jpg) no-repeat;
 +
        background-color: #585858;
 +
}
 +
 +
/* end of content_wrapper */
 +
 +
/* footer */
 +
 +
#mfooter {
 +
width: 980px;
 +
margin: 0 auto;
 +
padding: 30px 10px;
 +
text-align: center;
 +
color: #ffffff;
 +
        background-color: #585858;
 +
}
 +
 +
#mfooter a {
 +
color:#ffffff;
 +
}
 +
 +
#mfooter .mfooter_menu {
 +
margin: 0 0 10px 0;
 +
padding: 0px;
 +
list-style: none;
 +
}
 +
 +
.mfooter_menu li {
 +
margin: 0px;
 +
padding: 0 20px;
 +
display: inline;
 +
border-right: 1px solid #000000;
 +
}
 +
 +
.mfooter_menu .last_menu {
 +
border: none;
 +
}
 +
 +
#footer-box { background-color: transparent; border:none;} /*This is important!*/
 +
/* end of footer*/
 +
 +
/* content */
 +
 +
.content_section {
 +
clear: both;
 +
width: 100%;
 +
}
 +
 +
.intro_box {
 +
float: left;
 +
width: 282px;
 +
padding-bottom: 10px;
 +
border-bottom: 1px dotted #666;
 +
margin-bottom: 20px;
 +
}
 +
 +
.fl_image {
 +
float: left;
 +
margin: 3px 15px 5px 0;
 +
}
 +
 +
#content .product_box p {
 +
padding: 0;
 +
margin: 0 0 5px 0;
 +
}
 +
 +
#content .product_box a {
 +
color: #000000;
 +
font-weight: bold;
 +
}
 +
 +
#content .em_text {
 +
color: #537c11;
 +
}
 +
 +
.inro {
 +
color: #C30;
 +
font-size: 14px;
 +
font-weight: bold;
 +
}
 +
 +
.intro_box h3 {
 +
background: #000000;
 +
padding: 3px 10px;
 +
margin: 0 0 10px 0;
 +
color: #ffffff;
 +
font-size: 12px;
 +
}
 +
 +
.intro_box img {
 +
width: 272px;
 +
height: 168px;
 +
border: 5px solid #e6e0ce;
 +
        margin-bottom: 10px;
 +
}
 +
 +
.button_01 a {
 +
display: block;
 +
width: 102px;
 +
height: 23px;
 +
padding: 7px 0 0 0;
 +
background: none;
 +
color: #333;
 +
font-size: 12px;
 +
font-weight: bold;
 +
text-align: center;
 +
text-decoration: none;
 +
}
 +
 +
.button_01 a:hover {
 +
color: #fff;
 +
        background:url(./images/USTC_Software_button_hover.png) no-repeat;
 +
}
 +
/* Detail buttons */
 +
.button_01 a {
 +
display: block;
 +
width: 102px;
 +
height: 23px;
 +
padding: 7px 0 0 0;
 +
background: url(https://static.igem.org/mediawiki/2013/6/69/UW_linked_butn.png)  no-repeat;
 +
color: #333;
 +
font-size: 12px;
 +
font-weight: bold;
 +
text-align: center;
 +
text-decoration: none;
 +
}
 +
 +
.button_01 a:hover {
 +
color: #fff;
 +
        background:url(https://static.igem.org/mediawiki/2013/6/61/UW_linked_butn_blue.png) no-repeat;
 +
}
 +
 +
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  } /**/  /*This is important!*/
 +
.cleaner_h30 { clear: both; width:100%; height: 30px; }/**/
 +
.cleaner_h40 { clear: both; width:100%; height: 40px; }/**/
 +
.margin_r10 { margin-right: 24px; }/**/
 +
 +
.float_l { float: left; }/**/
 +
.float_r { float:  right; }/**/
 +
 +
/*--Window & Text Table--*/
 +
table#rotator_news {
 +
pading-bottom: 10px;
 +
}
 +
 +
/*--Main Image Rotator Container--*/
 +
.main_view {
 +
float: left;
 +
position: relative;
 +
/*border: 0px solid #fff;*/
 +
width: 650px;
 +
}
 +
/*--Image Rotator Window/Masking Styles--*/
 +
.window {
 +
height:400px;
 +
width: 650px;
 +
overflow: hidden; /*--Hides anything outside of the set width/height--*/
 +
position: relative;
 +
}
 +
.image_reel {
 +
position: absolute;
 +
top: 0; left: 0;
 +
}
 +
.image_reel img {float: left;}
 +
 +
/*--Paging Styles--*/
 +
.paging {
 +
position: absolute;
 +
bottom: 0px; right: -15px;
 +
width: 400px; height:47px; /*--Increase this width when adding more numbers in paging--*/
 +
z-index: 100; /*--Assures the paging stays on the top layer--*/
 +
text-align: center;
 +
line-height: 110px;
 +
 +
display: none; /*--Hidden by default, will be later shown with jQuery--*/
 +
}
 +
.paging a {
 +
padding: 5px;
 +
text-decoration: none;
 +
color: #000;
 +
}
 +
.paging a.active {
 +
font-weight: bold;
 +
/*background: #ffffff;*/
 +
border: 1px solid #ffffff;
 +
-moz-border-radius: 3px;
 +
-khtml-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
}
 +
.paging a:hover {font-weight: bold;}
 +
/*end of Window & Text Table*/
</style>
</style>
 +
<!-- Javascript-->
 +
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
//Set Default State of each portfolio piece
 +
$(".paging").show();
 +
$(".paging a:first").addClass("active");
 +
 +
//Get size of images, how many there are, then determin the size of the image reel.
 +
var imageWidth = $(".window").width();
 +
var imageSum = $(".image_reel img").size();
 +
var imageReelWidth = imageWidth * imageSum;
 +
 +
//Adjust the image reel to its new size
 +
$(".image_reel").css({'width' : imageReelWidth});
 +
 +
//Paging + Slider Function
 +
rotate = function(){
 +
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
 +
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
 +
 +
$(".paging a").removeClass('active'); //Remove all active class
 +
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
 +
 +
//Slider Animation
 +
$(".image_reel").animate({
 +
left: -image_reelPosition
 +
}, 500 );
 +
 +
};
 +
 +
//Rotation + Timing Event
 +
rotateSwitch = function(){
 +
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
 +
$active = $('.paging a.active').next();
 +
if ( $active.length === 0) { //If paging reaches the end...
 +
$active = $('.paging a:first'); //go back to first
 +
}
 +
rotate(); //Trigger the paging and slider function
 +
}, 3500); //Timer speed in milliseconds
 +
};
 +
 +
rotateSwitch(); //Run function on launch
 +
 +
//On Hover
 +
$(".image_reel a").hover(function() {
 +
clearInterval(play); //Stop the rotation
 +
}, function() {
 +
rotateSwitch(); //Resume rotation
 +
});
 +
 +
//On Click
 +
$(".paging a").click(function() {
 +
$active = $(this); //Activate the clicked paging
 +
//Reset Timer
 +
clearInterval(play); //Stop the rotation
 +
rotate(); //Trigger rotation immediately
 +
rotateSwitch(); // Resume rotation
 +
return false; //Prevent browser jump to link anchor
 +
});
 +
 +
});
 +
</script>
 +
 +
 +
<!-- Javascript-->
</head>
</head>
 +
<body>
 +
<div id="header_wrapper">
 +
 +
    <div id="header">
 +
   
 +
  <div id="site_title">
 +
           
 +
        </div>
 +
 +
 +
<!-- navigation -->
 +
<ul id="nav">
 +
<li><a href="https://2013.igem.org/Team:Waterloo/Test">Home</a></li>
 +
 +
   
 +
    <li><a href="https://2013.igem.org/Team:Waterloo/Project">Project</a>
 +
<ul>
 +
 +
 +
                             
 +
                                <li><a href="https://2013.igem.org/Team:Waterloo/Overview">Overview</a>                         
 +
                                </li>
 +
                                   
 +
                                <li><a href="https://2013.igem.org/Team:Waterloo/Results">Results</a></li>
 +
 +
</li>
 +
<li><a href="https://2013.igem.org/Team:Waterloo/Applications">Applications</a></li>
 +
</ul>
 +
</li>
 +
 +
 +
                <li><a href="http://waterlooigem.wordpress.com/">Blog</a></li>
 +
 +
 +
<li><a href="https://2013.igem.org/Team:Waterloo/Team">Team</a>
 +
                          <ul>
 +
                            <li><a href="https://2013.igem.org/Team:Waterloo/Members">Members</a></li>
 +
                            <li><a href="https://2013.igem.org/Team:Waterloo/Sponsors">Sponsors</a></li>
 +
                            <li><a href="https://2013.igem.org/Team:Waterloo/Gallery">Gallery</a></li>
 +
                          </ul>
 +
                </li>
 +
 
 +
  <li><a href="https://2013.igem.org/Team:Waterloo/humanparctices">Human Practice</a>             
 +
  <ul>
 +
    <li><a href="#">Events</a>
 +
<ul>
 +
<li><a href="https://2013.igem.org/Team:Waterloo">Intent to Invent</a></li>
 +
<li><a href="https://2013.igem.org/Team:Waterloo">Event A</a></li>
 +
<li><a href="https://2013.igem.org/Team:Waterloo">Event B</a></li>
 +
</ul> </li>
 +
    <li><a href="https://2013.igem.org/Team:Waterloo/Partners">Partners</a></li>
 +
  </ul>
 +
</li> 
 +
 +
<li><a class="last" href="https://2013.igem.org/Team:Waterloo/Modelling">Modelling</a></li>
 +
           
 +
</ul>
 +
 +
<!-- // end of navigation -->
 +
           
 +
         
 +
  <div id="search_box">
 +
 
 +
  <form action="http://www.google.com.hk/cse" id="cse-search-box" method="get" target="_blank" >
 +
    <input type="text" value=" " name="q" size="10" id="searchfield" title="searchfield" onFocus="clearText(this)" onBlur="clearText(this)" />
 +
    <input type="hidden" name="cx" value="012577055908532603606:zpok5ilqnda" />
 +
    <input type="hidden" name="cof" value="FORID:10" />
 +
    <input type="hidden" name="ie" value="UTF-8" />
 +
    <input type="submit" name="sa" value="Search" />
 +
      </form>
 +
 +
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
 +
 +
<script type="text/javascript">
 +
  google.load('search', '1', {language : 'en', style : google.loader.themes.GREENSKY});
 +
  google.setOnLoadCallback(function() {
 +
    var customSearchControl = new google.search.CustomSearchControl('012577055908532603606:zpok5ilqnda');
 +
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
 +
    customSearchControl.draw('cse');
 +
  }, true);
 +
</script>
 +
 +
  </div> 
 +
 +
 +
 +
   
 +
 +
 +
    <div class="cleaner"></div>
 +
    </div> <!-- end of header -->
 +
 +
</div>
 +
<!-- end of header_wrapper -->
 +
 +
</body>
 +
 +
 +
 +
 +
</head>
 +
 +
<body>
 +
 +
<div id="content_wrapper">
 +
 +
<div align="center">
 +
<table id="rotator_news">
 +
<tr>
 +
<td id="window_images">
 +
<div class="main_view">
 +
    <div class="window">
 +
        <div class="image_reel">
 +
                    <img src="http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2011/03/University-Waterloo-Engineering-5-2-537x295.jpg" style=" margin-right:0px; width:650px; height:400px" alt="" />
 +
                    <img src="http://images.dailytech.com/nimage/19635_M13_Virus.jpg" style=" margin-right:0px; width:650px; height:400px" alt="" />
 +
                               
 +
        </div>
 +
    </div>
 +
    <div class="paging">
 +
        <a href="#" rel="1">1</a>
 +
        <a href="#" rel="2">2</a>
 +
       
 +
 +
    </div>
 +
</div> <!-- close "main_view" div -->
 +
</td>
 +
</tr>
 +
</table>
 +
</div>
 +
<br/><br/>
 +
 +
        <h1>Lachesis</h1>
 +
<!-- Content wrap -->
 +
  <div>
 +
   
 +
    <div class="content_wrapper">
 +
                 
 +
            <div class="intro_box margin_r10">
 +
           
 +
            <h3>Team</h3>
 +
                <img src="https://static.igem.org/mediawiki/2011/7/78/USTC_Software_image_02.jpg" alt="product" />
 +
               
 +
              <p class="intro"> We promote diversity in our iGEM team. Encouraging people of all disciplines to partake in this incredible competition! From the Business faculty, to Arts, to Sciences, to Engineering, and back to Maths. These bunch collaborate in order to plan, design, construct and market our way to victory! <div class="button_01">
 +
<a href="https://2013.igem.org/Team:Waterloo/team">Details</a> </div> </p> </div>           
 +
            <div class="intro_box margin_r10">
 +
            <h3>Models</h3>
 +
                <img src="https://static.igem.org/mediawiki/2011/c/c8/USTC_Software_image_03.jpg" alt="product" />
 +
              <p class="intro">Enter Modelling Text Here!!!!
 +
 +
              <div class="button_01">
 +
<a href="https://2013.igem.org/Team:Waterloo/documents">Details</a> </div> </p> </div>
 +
           
 +
            <div class="intro_box margin_r10">
 +
            <h3>Human practice</h3>
 +
                <img src="https://static.igem.org/mediawiki/2011/3/3c/USTC_Software_image_04.jpg" alt="product" />
 +
               
 +
              <p class="intro">Put Events Crap Here!!<div class="button_01"> <a href="https://2013.igem.org/Team:Waterloo/humanpractices">Details</a> </div> </p> </div>
 +
           
 +
            <div class="cleaner"></div>
 +
    </div>
 +
       
 +
        <div class="cleaner_h40"></div>
 +
    <div class="content_section">
 +
       
 +
        <h2>Project</h2>
 +
       
 +
    <img src="http://www.qbrick.com/Libraries/Site/Communication.sflb.ashx" alt="image" width="363" class="fl_image" />
 +
                   
 +
    <p>
 +
<span lang="EN-US" xml:lang="EN-US">Our project is Cell-Cell Communication</span>
 +
<br/>
 +
 +
          <div><span lang="EN-US" xml:lang="EN-US">
 +
1.Use the M13 virus to transfer the message.<br/>
 +
2.Use GFP to test if message is received<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
 +
</p>
 +
</span>
 +
</div>
 +
 +
       
 +
    </div>
 +
<br/>
 +
     
 +
 +
          </tr>
 +
        </table>
 +
    </td>
 +
  </tr>
 +
</table>
 +
 +
 +
 +
 +
 +
 +
 +
<br/> 
 +
     
 +
<br/>
 +
 +
<h2> </h2>
 +
 +
  <div id="clustrmaps-widget"></div>
 +
</div>
 +
  <!-- end of content -->
 +
   
 +
  <div class="cleaner"></div>
 +
   
 +
    <br/> <br/>
 +
   
 +
</div>
 +
   
 +
    <div id="content_wrapper_bottom"></div> <!-- end of content_wrapper -->
 +
 +
<script type="text/javascript">
 +
 +
  var _gaq = _gaq || [];
 +
  _gaq.push(['_setAccount', 'UA-25857438-1']);
 +
  _gaq.push(['_trackPageview']);
 +
 +
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
 +
 +
</script>
 +
 +
 +
<div id="mfooter">
 +
 +
  <ul class="mfooter_menu">
 +
                <li><a href="#" target="_parent">Home</a></li>
 +
                <li><a href="https://2013.igem.org/Team:Waterloo/project" target="_parent">Project</a></li>
 +
                <li><a href="http://waterlooigem.wordpress.com/" target="_parent">Blog</a></li>
 +
                <li><a href="https://2013.igem.org/Team:Waterloo/team" class="current">Team</a></li>
 +
                <li><a href="https://2013.igem.org/Team:Waterloo/humanpractices" target="_parent">Human practice</a></li>
 +
                <li  class="last_menu"><a href="https://2013.igem.org/Team:Waterloo/modelling" target="_parent">Modelling</a></li>
 +
               
 +
  </ul>
 +
  <b> Learn more about &#160;&#160;<a href="http://uwaterloo.ca/about/" target="_blank">University of Waterloo</a>&#160;! </b>
 +
 +
 
 +
 +
</div> <!-- end of mfooter -->
 +
 +
</body>
</html>
</html>

Latest revision as of 02:46, 6 May 2013

1 2


Lachesis

Team

product

We promote diversity in our iGEM team. Encouraging people of all disciplines to partake in this incredible competition! From the Business faculty, to Arts, to Sciences, to Engineering, and back to Maths. These bunch collaborate in order to plan, design, construct and market our way to victory!

Models

product

Enter Modelling Text Here!!!!

Human practice

product

Put Events Crap Here!!

Project

image

Our project is Cell-Cell Communication

1.Use the M13 virus to transfer the message.
2.Use GFP to test if message is received