Difference between revisions of "Template:Team:IngenuityLab Canada"

 
(140 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
 
<title>Ingenuity Lab - dNANO</title>  
 
<title>Ingenuity Lab - dNANO</title>  
 +
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700,900" rel="stylesheet">
 +
<script>
 +
document.addEventListener("touchstart", function(){}, true);
 +
</script>
 
<style>
 
<style>
 +
#globalWrapper {
 +
  font-size: 100%;
 +
}
 
body {
 
body {
 
margin: 0;
 
margin: 0;
 
padding: 0;  
 
padding: 0;  
 
position: relative;
 
position: relative;
−
background: url(http://ingenuitylab.ca/igem/images/il_nano_bg.jpg) no-repeat fixed center;
+
        background-color: #ffffff;
 +
/*background: url(https://static.igem.org/mediawiki/2016/4/4e/T--IngenuityLab_Canada--il_nano_bg.jpg) no-repeat fixed center;*/
 
background-size: cover;
 
background-size: cover;
 
font-size: 16px;
 
font-size: 16px;
−
font-family: 'Titillium Web', helvetica, Arial, sans-serif;
+
font-family: 'Titillium Web', Helvetica, Arial, sans-serif;
 
}
 
}
−
h1 {
+
#HQ_page {
 +
        font-size: 16px;
 +
}
 +
#HQ_page p, #HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page h4, #HQ_page h5 {
 +
  font-family: 'Titillium Web', helvetica, Arial, sans-serif !important;
 +
  overflow: visible;
 +
}
 +
#HQ_page h1 {
 
color: #ce559f;
 
color: #ce559f;
 
font-weight: 700;
 
font-weight: 700;
−
font-size: 2.2em;
+
font-size: 2em;  
 +
        line-height: 1em;   
 
}
 
}
−
h2 {
+
#HQ_page h2 {
 
color: #405e88;
 
color: #405e88;
 
font-weight: 700;
 
font-weight: 700;
 
font-size: 1.6em;
 
font-size: 1.6em;
−
margin: 1.8em 0 0;
+
margin: 1em 0 0;
 +
        line-height: 1.2em;
 
}
 
}
−
h3 {
+
#HQ_page h3 {
 
color: #595959;
 
color: #595959;
 
margin: 1em 0 0;
 
margin: 1em 0 0;
 
}
 
}
−
ol h3 {
+
#HQ_page ol h3 {
 
margin: 1em 0 0 -1.5em;
 
margin: 1em 0 0 -1.5em;
 
}
 
}
−
em {
+
#HQ_page em {
 
color: #00c2f4;
 
color: #00c2f4;
 
font-weight: 700;
 
font-weight: 700;
Line 37: Line 54:
 
font-size: 1.2em;
 
font-size: 1.2em;
 
}
 
}
−
p {
+
#HQ_page p {
 
font-size: 1.1em;
 
font-size: 1.1em;
 
}
 
}
−
.header {
+
.il_header {
 
background-color: #fff;
 
background-color: #fff;
 
box-shadow: 0 0 10px rgba(0,0,0,0.3);
 
box-shadow: 0 0 10px rgba(0,0,0,0.3);
Line 46: Line 63:
 
height: 70px;
 
height: 70px;
 
width: 100%;
 
width: 100%;
−
top: 0;
+
top: 18px;
 +
left: 0;
 +
}
 +
.firstHeading, .logo_2016, #toc {
 +
  display: none;
 
}
 
}
 
.logo {
 
.logo {
Line 53: Line 74:
 
float: left;
 
float: left;
 
}
 
}
 +
#sideMenu { display: none; }
 
.menu {
 
.menu {
 
color: #405e88;
 
color: #405e88;
Line 85: Line 107:
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
−
.menu ul:hover {
+
.menu ul:hover,
 +
.menu ul:focus,
 +
.menu ul:active {
 
color: #ffffff;
 
color: #ffffff;
 
background-color: #405e88;
 
background-color: #405e88;
 
}
 
}
−
.menu ul:hover > li {
+
.menu ul:hover > li,
 +
.menu ul:focus > li,
 +
.menu ul:active > li {
 
display: block;
 
display: block;
 
}
 
}
−
.menu ul li:hover {
+
.menu ul li:hover,
 +
.menu ul li:focus,
 +
.menu ul li:active {
 
color: #ffffff;
 
color: #ffffff;
 
background-color: #405e88;
 
background-color: #405e88;
Line 104: Line 132:
 
   text-decoration: none;
 
   text-decoration: none;
 
}
 
}
−
.menu ul a:hover {
+
.menu ul a:hover,
 +
.menu ul a:focus,
 +
.menu ul a:active {
 
   color: #ffffff;
 
   color: #ffffff;
 +
}
 +
element:hover, element:active {
 +
-webkit-tap-highlight-color: rgba(0,0,0,0);
 +
-webkit-user-select: none;
 +
-webkit-touch-callout: none
 
}
 
}
 
.main-image {
 
.main-image {
 +
        background: url(https://static.igem.org/mediawiki/2016/4/4e/T--IngenuityLab_Canada--il_nano_bg.jpg) no-repeat fixed center;
 +
        background-size: cover;
 
   text-align: center;
 
   text-align: center;
 
   width: 100%;
 
   width: 100%;
−
   padding: 140px 0 100px;
+
   padding: 45px 0 60px;
 +
        opacity:0;
 
}
 
}
 
.main-image img {
 
.main-image img {
Line 118: Line 156:
 
#content {
 
#content {
 
   background-color: rgba(0,0,0,0);
 
   background-color: rgba(0,0,0,0);
 +
  margin: 0;
 +
  padding: 0;
 +
  width:100%;
 
}
 
}
 
.contents {
 
.contents {
Line 128: Line 169:
 
background-color: #fff;
 
background-color: #fff;
 
box-shadow: 0 0 10px rgba(0,0,0,0.3);
 
box-shadow: 0 0 10px rgba(0,0,0,0.3);
−
padding: 50px 0;
+
padding-top: 20px;
 +
}
 +
.article-img {
 +
        margin: 0 auto;
 +
        max-width: 800px;
 +
}
 +
.article-cap {
 +
  font-family: Arial,Helvetica,sans-serif;
 +
  font-size: 0.9em;
 +
  line-height: 1.2em;
 +
  margin-top: 1em;
 +
}
 +
.members .article-img {
 +
max-width: 500px;
 +
width: 100%;
 +
margin: 30px auto 0;
 +
}
 +
.members .article-cap {
 +
  text-align: center;
 
}
 
}
−
.header .wrapper {
+
.il_header .wrapper {
 
width: 100%;
 
width: 100%;
 
max-width: 1020px;  
 
max-width: 1020px;  
Line 140: Line 199:
 
padding: 0.5em 2% 2em;
 
padding: 0.5em 2% 2em;
 
max-width: 800px;
 
max-width: 800px;
 +
}
 +
#HQ_page .article .wrapper-title {
 +
display: block;
 +
max-width: 800px;
 +
margin: 0 auto;
 +
}
 +
#HQ_page .article .wrapper-title h1 {
 +
color: #405e88;
 +
font-size: 2.2em;
 +
margin-top: 0;
 
}
 
}
 
.article img {
 
.article img {
Line 146: Line 215:
 
.members figure {
 
.members figure {
 
     margin: 5em 0 1em;
 
     margin: 5em 0 1em;
−
}
 
−
.members img {
 
−
max-width: 422px;
 
 
}
 
}
 
.members figcaption {
 
.members figcaption {
Line 162: Line 228:
 
.members figure {
 
.members figure {
 
     margin: 5em 0 1em;
 
     margin: 5em 0 1em;
−
}
 
−
.members img {
 
−
max-width: 422px;
 
 
}
 
}
 
.members figcaption {
 
.members figcaption {
Line 176: Line 239:
 
   margin: 0 auto;
 
   margin: 0 auto;
 
   max-width: 800px;
 
   max-width: 800px;
−
   padding: 0 2% 0.6em;
+
   padding: 0 2% 0.89em;
 
   width: 100%;
 
   width: 100%;
 
}
 
}
Line 191: Line 254:
 
float: left;
 
float: left;
 
margin: 0 0 0 1px;
 
margin: 0 0 0 1px;
−
padding: 0.33em 1em;
+
padding: 0.6em 1em;
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
−
.buttons-tabs div:hover > em {
+
.buttons-tabs.protocols {
 +
  padding: 0 1em 2.4em;
 +
}
 +
.buttons-tabs div:hover > em,
 +
.buttons-tabs div:focus > em,
 +
.buttons-tabs div:active > em {
 
color: #ff7000;
 
color: #ff7000;
 
}
 
}
Line 221: Line 289:
 
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 
height: 70px;
 
height: 70px;
 +
        margin: 60px 0 -20px;
 
width: 100%;
 
width: 100%;
 
}
 
}
Line 231: Line 300:
 
border: 1px solid #dddddd;
 
border: 1px solid #dddddd;
 
padding: 0.5em 1em;  
 
padding: 0.5em 1em;  
 +
}
 +
 +
/* MEDIA QUERY */
 +
@media only screen and (max-width: 65em) {
 +
.logo {
 +
margin-left: 10px;
 +
}
 +
}
 +
@media only screen and (max-width: 57.5em) {
 +
.menu ul {
 +
width: 80px;
 +
}
 +
}
 +
@media only screen and (max-width: 53.75em) {
 +
.article .wrapper {
 +
margin: 0 10px;
 +
}
 +
.buttons-tabs {
 +
  margin: 0 0 0 20px;
 +
}
 +
#HQ_page .article .wrapper-title h1 {
 +
margin-left: 10px;
 +
}
 +
}
 +
@media only screen and (max-width: 46.875em) {
 +
.menu ul {
 +
width: 75px;
 +
}
 
}
 
}
 
</style>
 
</style>
 +
 +
<script>
 +
document.addEventListener("DOMContentLoaded", function(){
 +
try{
 +
var pd_button_tab1 = document.getElementById("pd_button_tab1");
 +
var pd_tab1 = document.getElementById("pd_tab1");
 +
pd_button_tab1.addEventListener("click", function(){ pd_tab1.style.display = "block"; pd_tab2.style.display = "none"; pd_tab3.style.display = "none"; });
 +
} catch(e){}
 +
try{
 +
var pd_button_tab2 = document.getElementById("pd_button_tab2");
 +
var pd_tab2 = document.getElementById("pd_tab2");
 +
pd_button_tab2.addEventListener("click", function(){ pd_tab1.style.display = "none"; pd_tab2.style.display = "block"; pd_tab3.style.display = "none"; });
 +
} catch(e){}
 +
try{
 +
var pd_button_tab3 = document.getElementById("pd_button_tab3");
 +
var pd_tab3 = document.getElementById("pd_tab3");
 +
pd_button_tab3.addEventListener("click", function(){ pd_tab1.style.display = "none"; pd_tab2.style.display = "none"; pd_tab3.style.display = "block"; });
 +
} catch(e){}
 +
 +
var home;
 +
try{
 +
home = document.getElementById("home");
 +
}catch(e){}
 +
if(home){
 +
jQuery(".main-image").css({ opacity: 0 });
 +
jQuery(".main-image").animate({ opacity: 1 },500);
 +
}else{
 +
jQuery(".main-image").css({ opacity: 0 });
 +
jQuery(".main-image").animate({ opacity: 1 },500,function(){
 +
setTimeout(function(){ jQuery("html, body").animate({ scrollTop: "575px" },800); }, 800);
 +
});
 +
}
 +
});
 +
</script>
 +
 
</head>
 
</head>
  
 
<body>
 
<body>
−
<div class="header">
+
<div class="il_header">
 
<div class="wrapper">
 
<div class="wrapper">
−
<div class="logo"><a href="http://ingenuitylab.ca"><img src="http://ingenuitylab.ca/igem/images/il_logo_img.png" /></a></div>
+
<div class="logo"><a href="http://ingenuitylab.ca"><img src="https://static.igem.org/mediawiki/2016/8/87/T--IngenuityLab_Canada--il_logo_img.png" /></a></div>
 
<div class="menu">
 
<div class="menu">
−
<ul><a href="http://ingenuitylab.ca/igem/index.html">Home</a></ul>
+
<ul><a href="https://2016.igem.org/Team:IngenuityLab_Canada/dNANO">dNANO</a></ul>
−
<ul><a href="http://ingenuitylab.ca/igem/blog.html">Blog</a></ul>
+
 
<ul>Project
 
<ul>Project
−
<li><a href="http://ingenuitylab.ca/igem/project_description.html">Description</a></li>
+
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Description">Description</a></li>
−
<li><a href="http://ingenuitylab.ca/igem/project_protocols.html">Protocols</a></li>
+
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Parts">Parts</a></li>
−
<li><a href="http://ingenuitylab.ca/igem/project_results.html">Results</a></li>
+
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Results">Results</a></li>
 +
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Protocols">Protocols</a></li>
 +
                                                <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Attributions">Attributions</a></li>
 
</ul>
 
</ul>
 
<ul>Practices
 
<ul>Practices
−
<li><a href="http://ingenuitylab.ca/igem/community_outreach.html">Community Outreach</a></li>
+
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Collaborations">Collaborations</a></li>
−
<li><a href="http://ingenuitylab.ca/igem/human_practices.html">Human Practices</a></li>
+
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Practices">Human Practices</a></li>
 
</ul>
 
</ul>
 
<ul>Team
 
<ul>Team
−
<li><a href="http://ingenuitylab.ca/igem/members.html">Members</a></li>
+
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Members">Members</a></li>
−
<li><a href="http://ingenuitylab.ca/igem/sponsors.html">Sponsors</a></li>
+
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Sponsors">Sponsors</a></li>
 +
                                                <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Blog">Blog</a></li>
 
</ul>
 
</ul>
−
<ul><a href="http://ingenuitylab.ca/igem/safety.html">Safety</a></ul>
+
                                        <ul><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Achievements">Achievements</a></ul>
 +
<ul><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Safety">Safety</a></ul>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="contents">
 
<div class="contents">
−
<div class="main-image"><div class="wrapper"><img src="http://ingenuitylab.ca/igem/images/il_icons_img.png" /></div></div>
+
<div class="main-image"><div class="wrapper"><img src="https://static.igem.org/mediawiki/2016/2/25/T--IngenuityLab_Canada--il_icons_img.jpg" /></div></div>
−
<div class="article">
+
<div class="article">&nbsp;
−
<div class="wrapper">
+
−
<h1>dNANO</h1>
+
−
<p><em>
+
−
Despite recent advances in nanotechnology, techniques have been largely geared towards a specific type of application. One of the fundamental problems that scientists face is choosing the type of material that is compatible with the whole system.</em>
+
−
</p><p>
+
−
In dNANO, our team has developed a nanoscaffold built on what we find is the ideal nanomaterial: DNA. It is relatively cheap to manufacture synthetically and well suited to the purpose because of its biocompatibility and flexible structure. One of the biggest advantages of DNA-based nanostructure is its single-pot reaction, with the self-assembling properties of DNA.
+
−
</p><p>
+
−
Using computer software called CADnano, we have designed a 3D structure that serves as a scaffold with a hollow cavity. The cavity can be used for variety of purposes; one test we recently did was to build gold nanowire via gold precipitation along the hollow cavity. The DNA-based gold nanowires can be self-assembled via Teslaphoresis into a long chain of wires. The self-assembly of the structure is what our team of young innovators has always strived for - because of its uniqueness. 
+
−
</p><p>
+
−
To further suggest an application for our product, we attempted to test if we can successfully harvest electron from an organic source. The source we choose was Photosystem II, a protein that is highly efficient in converting light energy into electrical energy. This protein was isolated from a mutant strain of cyanobacteria and stabilized in liposomes.
+
−
</p><p>
+
−
Through development of this DNA-based scaffold, we have attempted to create an assembly standard where anyone with minimal experience can create 3D shape out of DNA and apply it in various fields such as the healthcare and energy sectors. 
+
−
</p>
+
−
</div> <!-- wrapper -->
+
−
</div> <!-- article -->
+
−
<div class="footer"></div>
+
−
</div> <!-- content -->
+
−
</body>
+
−
 
+
−
</html>
+

Latest revision as of 23:44, 19 October 2016

Ingenuity Lab - dNANO