Team:Queens Canada

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Template:Queens_Canada/qgemheader}}
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
<html>
+
<head>
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
<title>Untitled Document</title>
 +
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/125588631/bootstrap.min.css" media="screen" />
 +
<script src="http://code.jquery.com/jquery.js"></script>
 +
<script src="https://dl.dropboxusercontent.com/u/125588631/bootstrap.min.js"></script>
<style>
<style>
 +
*{
 +
margin:0;
 +
padding:0;
 +
}
 +
html{
 +
padding:0;
 +
margin:0;
 +
}
 +
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{
 +
display: block;
 +
}
 +
/* ----------------Display:none---------------- */
 +
#p-logo {
 +
display: none;
 +
}
-
.tidal-wave{
+
#search-controls {
-
        width:100%;
+
display: none;
-
        text-align:center;
+
-
        float:center;
+
}
}
-
.spacer{
+
 
-
        opacity:0;
+
.firstHeading {
-
        height:30px;
+
display: none;
}
}
-
<!------Swivel Buttons------->
 
-
ul.project{height:auto;overflow:auto;}
 
-
ul.project li{display:block;float:left;padding:20px;text-align:center;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
+
#catlinks {
 +
display: none;
 +
}
-
ul.project li a.image{border:3px solid #d8d7d7;display:block;padding:15px;-moz-border-radius:200em;-webkit-border-radius:200em;border-radius:200em;-moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.8);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.8);box-shadow:0 0 4px rgba(0, 0, 0, 0.8);background:#e87478;background:-moz-radial-gradient(center, ellipse cover, #e87478 0%, #e1383f 100%);background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e87478), color-stop(100%, #e1383f));background:-webkit-radial-gradient(center, ellipse cover, #e87478 0%, #e1383f 100%);background:-o-radial-gradient(center, ellipse cover, #e87478 0%, #e1383f 100%);background:-ms-radial-gradient(center, ellipse cover, #e87478 0%, #e1383f 100%);background:radial-gradient(ellipse at center, #e87478 0%, #e1383f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e87478', endColorstr='#e1383f', GradientType=1);}
+
#footer-box {
 +
display: none;
 +
}
-
ul.project li a.image:hover img{transform:rotate(360deg) scale(0.95);-ms-transform:rotate(360deg) scale(0.95);-moz-transform:rotate(360deg) scale(0.9);-webkit-transform:rotate(360deg) scale(0.95);-o-transform:rotate(360deg) scale(0.95);}
+
#contentSub {
 +
display: none;
 +
}
-
ul.project li a.image img{border:0px solid rgba(225, 225, 225, 0.9);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-border-radius:200em;-webkit-border-radius:200em;border-radius:200em;-webkit-transition:all 1.5s ease-in-out 0s;-moz-transition:all 1.5s ease-in-out 0s;-o-transition:all 1.5s ease-in-out 0s;transition:all 1.5s ease-in-out 0s;}
+
#globalWrapper{
 +
    margin:0;
 +
    padding:0;
 +
    background-color:#999999
 +
}
-
ul.project li p{text-align:justify;}
+
#content{
 +
    margin:0;
 +
    padding:0;
 +
    width:100%;
 +
}
-
ul.project li a{display:block;}
+
#bodyContent{
 +
    margin:0;
 +
    padding:0;
 +
    width:100%;
 +
}
-
ul.project li a:hover h3{color:#e1383f;}
+
/**---------TOP-SECTION----**/
 +
#top-section {
 +
height: 30px;
 +
width: 100%;
 +
background-color:#343838; /*per Page*/
 +
        margin:0;
 +
        padding:0;
 +
}
-
.span1{
+
#menubar {
-
padding:5px 10px;
+
top: 2px;
 +
font-family: 'Droid Sans', sans-serif;
 +
}
 +
/* ----------------TopSection_left-menu---------------- */
 +
.left-menu,.left-menu a {
 +
color: white;
 +
left: 0px;
 +
text-transform: capitalize;
}
}
-
.sm{
+
.left-menu:hover {
-
vertical-align:middle;
+
background-color: transparent;
-
font-size:24px;
+
}
 +
 
 +
.left-menu:hover a {
 +
color: white;
 +
text-decoration: none !important;
 +
}
 +
 
 +
.left-menu li a:hover {
 +
color: #ff6669;
 +
}
 +
 
 +
/* ----------------TopSection_right-menu---------------- */
 +
.right-menu li {
 +
background-color: transparent;
 +
}
 +
 
 +
.right-menu,.right-menu a {
 +
color: white;
 +
right: 0;
 +
text-align: right;
 +
}
 +
 
 +
.right-menu:hover {
 +
background-color: transparent;
 +
}
 +
 
 +
.right-menu:hover a {
 +
color: white;
 +
}
 +
 
 +
.right-menu li a {
 +
background-color: transparent;
 +
color: white;
 +
}
 +
 
 +
.right-menu li a:hover {
 +
        text-decoration:none;
 +
color: #ff6669;
 +
}
 +
 
 +
/**---------PAGE------------**/
 +
#fullpage{
color:white;
color:white;
-
top-padding:5px;
+
margin:0;
 +
padding:0;
 +
width:100%;
 +
height:100%;
 +
position:fixed;
 +
}
 +
body{
 +
background:white;
 +
background-size:cover;
 +
z-index:-999;
 +
}
 +
/**---------HEADER----------**/
 +
.top-photo{
 +
        background:url(https://dl.dropboxusercontent.com/u/125588631/header_template.png) no-repeat center center;
 +
        position:relative;
 +
        overflow:hidden;
 +
        width:auto;
 +
padding-top:40px;
 +
}
 +
 
 +
.header-text{
 +
font-family:bebasN;
 +
font-size:4em;
 +
color:#ffb297;
 +
position:relative;
 +
margin:5px;
 +
}
 +
 
 +
.year{
 +
font-family:Arial, Helvetica, sans-serif;
 +
color:#320a00;
 +
font-size:9em;
 +
position:relative;
 +
margin:5px;
 +
margin-bottom:60px;
 +
}
 +
 
 +
#menu{
 +
margin-top:10%;
 +
margin-left:5%;
 +
}
 +
 
 +
#menu li{
 +
margin: 0 5px;
 +
padding: 0 9px;
 +
display:inline-block;
 +
color:white;
 +
font-size:2em;
 +
}
 +
 
 +
#menu li a:link{
 +
color:white;
 +
text-decoration:none;
 +
}
 +
 
 +
#menu li a:hover{
 +
border-bottom:5px solid #ffb297;
 +
}
 +
 
 +
#menu li a:visited{
 +
color:white;
 +
text-decoration:none;
 +
}
 +
/**--------General Style Elements------------**/
 +
.center-align{
 +
text-align:center;
 +
}
 +
.container{
 +
margin:0px;
 +
padding:0px;
 +
width:100%;
 +
z-index:0;
 +
position:relative;
 +
}
 +
/**---------Fonts---------**/
 +
@font-face{
 +
font-family:bebasN;
 +
src:url(https://dl.dropboxusercontent.com/u/125588631/BebasNeue.otf);
 +
}
 +
.menu-font{
 +
font-family:bebasN;
 +
font-size:2em;
 +
}
 +
 
 +
.regular{
 +
font-family:bebasN;
 +
color:black;
 +
font-size:15px;
 +
}
 +
 
 +
<!------- Toolbar ---------->
 +
.toolbar{
 +
height:50px;
 +
opacity:0.9;
 +
margin-top:500px;
 +
position:fixed;
 +
}
 +
 
 +
.toolbar-links ul{
 +
font-family:bebasN;
 +
font-size:1.2em;
 +
padding:15px;
 +
}
 +
 
 +
.toolbar-links ul li{
 +
display: inline-block;
 +
margin:0 4px;
 +
padding: 0 5px;
 +
}
 +
 
 +
.toolbar-links li a:link{
 +
text-decoration:none;
 +
color:white;
 +
}
 +
 
 +
.toolbar-links li a:visited{
 +
color:white;
 +
}
 +
 
 +
.toolbar-links li a:hover{
 +
color:#e88587;
 +
text-decoration:none;
}
}
</style>
</style>
Line 44: Line 253:
<body>
<body>
-
<div class="tidal-wave">
+
<div class="row-fluid toolbar" style="background-color:#83282a;bottom:0;">
-
        <h1>Welcome to the Queen's University iGEM homepage!</h1>
+
<div class="span2 offset1">
-
        <p></p>
+
    <img src="../toolbar-logo.png" style="height:50px;">  
-
<center>
+
    </div>
-
        <div class="row-fluid">
+
    <div class="span6 toolbar-links">
-
        <div class="span4 offset1 text-left">
+
    <ul>
-
        <small>Queen's University is located in Kingston, Ontario, a small city located on the eastern side of Canada. Their iGEM team is composed of dedicated students who have devoted their summer to working with synthetic biology, toiling away in labs and of course, having a blast. This year our project initially began as an idea to remove foot odour. It eventually evolved to a much wider idea involving mosquitoes, malaria, and of course smelly feet! To find out more about what we've been up to, keep reading!</small>
+
        <li><a href="#">HOME</a></li>
-
      </div>
+
            <li><a href="#">TEAM</a></li>
-
        <div class="span6">
+
            <li><a href="#">PROJECT</a></li>
-
        <div id="myCarousel" class="carousel">
+
            <li><a href="#">OUTREACH</a></li>
-
  <!-- Carousel items -->
+
            <li><a href="#">PARTS</a></li>
-
<center>
+
            <li><a href="#">SAFETY</a></li>
-
<div class="carousel-inner">
+
            <li><a href="#">JUDGING</a></li>
-
    <div class="active item"><img src="https://dl.dropboxusercontent.com/u/125588631/photo5.jpg" alt width="100%"></div>
+
            <li><a href="#">NOTEBOOK</a></li>
-
    <div class="item"><img src="https://dl.dropboxusercontent.com/u/125588631/photo4.jpg" alt width="100%"></div>
+
        </ul>
-
    <div class="item"><img src="https://dl.dropboxusercontent.com/u/125588631/photo6.jpg" alt width="100%"></div>
+
    </div>
-
  </div>
+
-
</center>
+
-
  <!-- Carousel nav -->
+
-
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+
-
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+
</div>
</div>
-
        </div>
 
-
        </div>
 
-
</center>
+
<div class="top-photo">
-
<div class="spacer">
+
<div class="header-text row"><div class="span4 offset1">WE ARE TEAM</div></div>
 +
<div class="row"><div class="span8 offset1"><img src="https://dl.dropboxusercontent.com/u/125588631/qgem-logo.png" style="height:120px;margin-bottom:40px;margin-top:10px;" /></div></div>
 +
<div class="year row"><div class="span4 offset1">2013</div></div>
 +
<div class="header-text row"><div class="span4 offset1">iGEM | QUEEN'S</div></div>
 +
<div>
 +
<div id="menu">
 +
<ul>
 +
    <li><a href="#">HOME</a></li>
 +
        <li><a href="#">TEAM</a></li>
 +
        <li><a href="#">PROJECT</a></li>
 +
        <li><a href="#">OUTREACH</a></li>
 +
        <li><a href="#">PARTS</a></li>
 +
        <li><a href="#">SAFETY</a></li>
 +
        <li><a href="#">JUDGING</a></li>
 +
        <li><a href="#">NOTEBOOK</a></li>
 +
    </ul>
</div>
</div>
-
<div class="row-fluid">
 
-
        <div class="span3 offset1">
 
-
        <ul class="project">
 
-
 
-
<li>
 
-
<a href=# class="image" title="repel" target="_blank">
 
-
<img src="https://dl.dropboxusercontent.com/u/125588631/repel.jpg" />
 
-
</a>
 
-
<a href="#/" title="repel" target="_blank">
 
-
<h3>Repel.</h3>
 
-
</a>
 
-
<div class="text-left">First, we plan to eliminate foot odor with engineered bacteria and replace it with natural mosquito repellants. This will make it more difficult for mosquitoes to find their hosts, without the risk of the insects developing resistance.</p>
 
-
</li>
 
-
        </ul>
 
-
        </div>
 
-
 
-
        <div class="span3">
 
-
        <ul class="project">
 
-
 
-
<li>
 
-
<a href=# class="image" title="attract" target="_blank">
 
-
<img src="https://dl.dropboxusercontent.com/u/125588631/attract.jpg" />
 
-
</a>
 
-
<a href=# title="attract" target="_blank">
 
-
<h3>Attract.</h3>
 
-
</a>
 
-
<div class="text-left">Second, we intend to devise a mosquito trap where bacteria will synthesize the chemicals found in foot and body odour. Once the mosquitoes are trapped, we aim to resolve further disease by infecting the mosquitoes to sterilize, control, or destroy the vectors.</p>
 
-
</li>
 
-
        </ul>
 
-
        </div>
 
-
       
 
-
<div class="span4">
 
-
<h4>Current research has shown that mosquitoes, primarily those that carry deadly diseases, such as Malaria, are attracted to human body odour – specifically the feet. We plan to take advantage of this finding and, utilizing the power of synthetic biology, work towards an effective solution for Malaria, West Nile Virus, Dengue Fever, and other mosquito-borne diseases. As a famous man once said, </h4><h2>"The foot giveth and the foot taketh away". </h2>
 
</div>
</div>
-
</div>
 
-
<div class="row-fluid" style="background-color:#ffb4ae;">
 
-
        <div class="span4 offset1 sm">Follow us on the following!</div>
 
-
        <div class="span1">
 
-
                <a href="https://www.facebook.com/iGEMQueens?fref=ts">
 
-
                <img src="https://dl.dropboxusercontent.com/u/125588631/facebook.png" class="img-circle">
 
-
        </a></div>
 
-
        <div class="span1">
 
-
                <a href="https://twitter.com/iGEMQueens">
 
-
                <img src="https://dl.dropboxusercontent.com/u/125588631/twitter.png" class="img-circle">
 
-
        </a></div>
 
-
        <div class="span1">
 
-
                <a href="http://www.youtube.com/user/iGEMQueens">
 
-
                <img src="https://dl.dropboxusercontent.com/u/125588631/youtube.png" class="img-circle">
 
-
        </div>
 
</div>
</div>
-
</div>
+
<script type="text/javascript">
-
<script>
 
$(document).ready(function(){
$(document).ready(function(){
-
         $('.carousel').carousel({
+
var height = $(window).height()-40;
-
                interval:2000
+
    var val = (height.toString())+"px";
-
        });
+
$(".top-photo").css("height",val);
 +
var toolbarHeight=(height.toString()-50)+"px";
 +
$(".toolbar").hide();
 +
 +
$(window).resize(function(){
 +
var height = $(window).height();
 +
var val = (height.toString())+"px";
 +
$(".top-photo").css("height",val);
 +
});
 +
 
 +
         $('.top-photo').waypoint(function(direction) {
 +
if (direction=="down"){
 +
$('.toolbar').fadeIn('fast');
 +
}
 +
else{
 +
$('.toolbar').fadeOut('fast');
 +
}
 +
}, {
 +
  offset: function() {
 +
    return -$(this).height();
 +
}
 +
});
});
});
</script>
</script>
 +
</body>
</body>
</html>
</html>

Revision as of 22:06, 10 June 2013

Untitled Document

WE ARE TEAM
2013
iGEM | QUEEN'S

Retrieved from "http://2013.igem.org/Team:Queens_Canada"