Difference between revisions of "Team:Dalhousie/test3"

 
(18 intermediate revisions by the same user not shown)
Line 11: Line 11:
 
         z-index: -100;
 
         z-index: -100;
 
         width:100%;
 
         width:100%;
 +
        height:100%;
  
 
}
 
}
Line 31: Line 32:
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
−
#content { width:100%; padding:0px;  margin-top:-20px; margin-left:0px; background-color: white;}
+
#content { width:100%; padding:0px;  margin-top:-20px; margin-left:0px; background-color: black;}
 
body {background-color:white; height:100%; }
 
body {background-color:white; height:100%; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;  background-color: transparent; z-index:100;}
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;  background-color: transparent; z-index:100;}
Line 95: Line 96:
 
         </a>
 
         </a>
 
         <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
 
         <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
−
        <li><a href="https://2017.igem.org/Team:Dalhousie/Human_Practices">Summary</a></li>
+
      <li><a href="https://2017.igem.org/Team:Dalhousie/Human_Practices">Summary</a></li>
−
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Silver_Integrated">Silver HP</a></li>
+
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Silver">Science Communication</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Gold_Integrated">Integrated and Gold</a></li>
 
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Gold_Integrated">Integrated and Gold</a></li>
−
           <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Public_Engagement">Public Engagement</a></li>
+
           <li><a href="https://2017.igem.org/Team:Dalhousie/Engagement">Public Engagement</a></li>
−
        <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Science_Literacy">Science Literacy</a></li>
+
<li><a href="https://2017.igem.org/Team:Dalhousie/SocialMedia">Social Media</a></li>
−
        <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Ethics">Ethics</a></li>
+
     
−
 
+
 
         </ul>
 
         </ul>
 
       </li>
 
       </li>
Line 119: Line 119:
 
        
 
        
  
−
 
−
<li class="dropdown">
 
−
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Awards
 
−
        </a>
 
−
        <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);">
 
−
          <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Applied_Design">Applied Design</a></li>
 
−
          <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Entrepreneurship">Entrepreneurship</a></li>
 
−
        </ul>
 
−
      </li>
 
  
  
Line 218: Line 209:
  
 
         <div class="panel" id="panel2">
 
         <div class="panel" id="panel2">
−
<div style=" border: 1px solid #000; margin: 50px; padding: 30px; background-color: rgba(35,47,19,1);">
+
<h1>  
−
 
+
<center><font color= "#ffffff">Mining the Microbiome</font></center>
−
Welcome! </br>
+
</h1>
−
The goal of our project is to convert cellulose into glucose, which can be used for biofuel. </br>
+
<center><img src="https://static.igem.org/mediawiki/parts/3/34/BIG_FRont_DESIGN.png" height="617" width="1097" style="margin-bottom:40px;"></center>
−
Let us show you how! </br>
+
−
</div>
+
−
            <div class="inner">
+
−
 
+
−
 
+
−
  <!-- Vertical Timeline -->
+
−
  <section id="conference-timeline">
+
−
 
+
−
    <div class="conference-center-line"></div>
+
−
    <div class="conference-timeline-content">
+
−
      <!-- Article -->
+
−
      <div class="timeline-article">
+
−
        <div class="content-left-container" >
+
−
          <div class="content-left" >
+
−
            <p>Softwood waste from the lumber industry contains cellulose, which can be turned into glucose and used to make biofuel.  <span class="article-number">01</span></p>
+
−
          </div>
+
−
       
+
−
        </div>
+
−
  <div class="content-right-container">
+
−
         
+
−
       
+
−
        </div>
+
−
        <div class="meta-date">
+
−
          <img src= "https://static.igem.org/mediawiki/2017/a/ab/Lumber.jpg" height="50%" width="60%"style="margin-top:15px;" >
+
−
        </div>
+
−
      </div>
+
−
      <!-- // Article -->
+
−
     
+
−
      <!-- Article -->
+
−
      <div class="timeline-article">
+
−
        <div class="content-left-container">
+
−
        </div>
+
−
 
+
−
        <div class="content-right-container">
+
−
          <div class="content-right">
+
−
            <p>We hypothesized that the porcupine microbiome must contain an enzyme that can break down cellulose, as bark is food. <span class="article-number">02</span></p>
+
−
          </div>
+
−
       
+
−
        </div>
+
−
        <div class="meta-date" style="background-color: white;">
+
−
  <img src= "https://static.igem.org/mediawiki/2017/6/67/Porcupiner.png" height="60%" width="75%"style="margin-top:15px;" >
+
−
        </div>
+
−
      </div>
+
−
      <!-- // Article -->
+
−
     
+
−
 
+
−
      <!-- Article -->
+
−
      <div class="timeline-article">
+
−
        <div class="content-left-container">
+
−
          <div class="content-left">
+
−
            <p>We mined the porcupine’s microbiome to identify the enzyme that was able to break down wood.  <span class="article-number">03</span></p>
+
−
          </div>
+
−
   
+
−
        </div>
+
−
        <div class="content-right-container">
+
−
         
+
−
+
−
        </div>
+
−
        <div class="meta-date">
+
−
  <img src= "https://static.igem.org/mediawiki/2017/4/48/Testtubee.png" height="65%" width="70%"style="margin-top:15px;" >
+
−
        </div>
+
−
      </div>
+
−
      <!-- // Article -->
+
−
<!-- Article -->
+
−
      <div class="timeline-article">
+
−
        <div class="content-left-container">
+
−
         
+
−
       
+
−
        </div>
+
−
        <div class="content-right-container">
+
−
        <div class="content-right">
+
−
            <p>We created a metagenomic library of the genes able to code this enzyme as well as novel enzymes. <span class="article-number">04</span></p>
+
−
          </div>
+
−
       
+
−
        </div>
+
−
        <div class="meta-date" style="background-color: white;">
+
−
    <img src= "https://static.igem.org/mediawiki/2017/e/ef/Comp.jpg" height="60%" width="70%"style="margin-top:15px;" >
+
−
        </div>
+
−
      </div>
+
−
      <!-- // Article -->
+
−
<!-- Article -->
+
−
      <div class="timeline-article">
+
−
        <div class="content-left-container">
+
−
        <div class="content-left">
+
−
            <p>We put these genes into E.coli to see if they could then digest cellulose down. <span class="article-number">05</span></p>
+
−
          </div>
+
−
   
+
−
        </div>
+
−
        <div class="content-right-container">
+
−
         
+
−
+
−
        </div>
+
−
        <div class="meta-date">
+
−
    <img src= "https://static.igem.org/mediawiki/2017/8/8a/Yy.jpg" height="50%" width="60%"style="margin-top:15px;" >
+
−
        </div>
+
−
      </div>
+
−
      <!-- // Article -->
+
−
<!-- Article -->
+
−
      <div class="timeline-article">
+
−
        <div class="content-left-container">
+
−
         
+
−
       
+
−
        </div>
+
−
        <div class="content-right-container">
+
−
        <div class="content-right">
+
−
            <p>We put the E.coli into a bioreactor with cellulose to see if it gets broken down. In the future this can be combined with yeast to transform in finally into biofuel! <span class="article-number">06</span></p>
+
−
          </div>
+
−
       
+
−
        </div>
+
−
        <div class="meta-date" style="background-color: white;">
+
−
        <img src= "https://static.igem.org/mediawiki/2017/a/ab/Lumber.jpg" height="50%" width="60%"style="margin-top:15px;" >
+
−
        </div>
+
−
      </div>
+
−
      <!-- // Article -->
+
−
    </div>
+
−
 
+
−
  </section>
+
−
  <!-- // Vertical Timeline -->
+
−
 
+
−
  <style>
+
−
body {
+
−
  background: #e6e6e6;
+
−
  font-family: "Roboto", sans-serif;
+
−
  font-weight: 400;
+
−
}
+
−
 
+
−
/*===== Vertical Timeline =====*/
+
−
#conference-timeline {
+
−
  position: relative;
+
−
  max-width: 920px;
+
−
  width: 100%;
+
−
  margin: 0 auto;
+
−
}
+
−
#conference-timeline .timeline-start,
+
−
#conference-timeline .timeline-end {
+
−
  display: table;
+
−
  font-family: "Roboto", sans-serif;
+
−
  font-size: 18px;
+
−
  font-weight: 900;
+
−
  text-transform: uppercase;
+
−
  background: rgba(35,47,19,1);
+
−
  padding: 15px 23px;
+
−
  color: #fff;
+
−
  max-width: 5%;
+
−
  width: 100%;
+
−
  text-align: center;
+
−
  margin: 0 auto;
+
−
}
+
−
#conference-timeline .conference-center-line {
+
−
  position: absolute;
+
−
  width: 3px;
+
−
  height: 100%;
+
−
  top: 0;
+
−
  left: 50%;
+
−
  margin-left: -2px;
+
−
  background: #232F13;
+
−
  z-index: -1;
+
−
}
+
−
#conference-timeline .conference-timeline-content {
+
−
  padding-top: 67px;
+
−
  padding-bottom: 67px;
+
−
}
+
−
.timeline-article {
+
−
  width: 100%;
+
−
  height: 100%;
+
−
  position: relative;
+
−
  overflow: hidden;
+
−
  margin: 20px 0;
+
−
}
+
−
.timeline-article .content-left-container,
+
−
.timeline-article .content-right-container {
+
−
  max-width: 44%;
+
−
  width: 100%;
+
−
+
−
}
+
−
.timeline-article .timeline-author {
+
−
  display: block;
+
−
  font-weight: 400;
+
−
  font-size: 14px;
+
−
  line-height: 24px;
+
−
  color: white;
+
−
  text-align: right;
+
−
}
+
−
.timeline-article .content-left,
+
−
.timeline-article .content-right {
+
−
  position: relative;
+
−
  width: auto;
+
−
  border: 1px solid #000;
+
−
  background-color: rgba(35,47,19,1);
+
−
  box-shadow: 0 1px 3px rgba(0,0,0,0.9);
+
−
  padding: 27px 25px;
+
−
}
+
−
.timeline-article p {
+
−
  margin: 0 0 0 60px;
+
−
  padding: 0;
+
−
  font-weight: 400;
+
−
  color: white;
+
−
  font-size: 14px;
+
−
  line-height: 24px;
+
−
  position: relative;
+
−
}
+
−
.timeline-article p span.article-number {
+
−
  position: absolute;
+
−
  font-weight: 300;
+
−
  font-size: 44px;
+
−
  top: 10px;
+
−
  left: -60px;
+
−
  color: white;
+
−
}
+
−
.timeline-article .content-left-container {
+
−
  float: left;
+
−
}
+
−
.timeline-article .content-right-container {
+
−
  float: right;
+
−
 
+
−
}
+
−
.timeline-article .content-left:before,
+
−
.timeline-article .content-right:before{
+
−
  position: absolute;
+
−
  top: 20px;
+
−
  font-size: 23px;
+
−
  font-family: "FontAwesome";
+
−
  color: #fff;
+
−
}
+
−
.timeline-article .content-left:before {
+
−
  content: "\f0da";
+
−
  right: -8px;
+
−
}
+
−
.timeline-article .content-right:before {
+
−
  content: "\f0d9";
+
−
  left: -8px;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
.timeline-article .meta-date {
+
−
  position: absolute;
+
−
  top: 10px;
+
−
  left: 49%;
+
−
  width: 80px;
+
−
  height: 80px;
+
−
  margin-left: -31px;
+
−
  color: #fff;
+
−
  border-radius: 100%;
+
−
  background:#232F13;
+
−
}
+
−
.timeline-article .meta-date .date,
+
−
.timeline-article .meta-date .month {
+
−
  display: block;
+
−
  text-align: center;
+
−
  font-weight: 900;
+
−
 
+
−
}
+
−
.timeline-article .meta-date .date {
+
−
  font-size: 30px;
+
−
  line-height: 40px;
+
−
 
+
−
}
+
−
.timeline-article .meta-date .month {
+
−
  font-size: 18px;
+
−
  line-height: 10px;
+
−
}
+
−
/*===== // Vertical Timeline =====*/
+
−
 
+
−
/*===== Resonsive Vertical Timeline =====*/
+
−
@media only screen and (max-width: 830px) {
+
−
  #conference-timeline .timeline-start,
+
−
  #conference-timeline .timeline-end {
+
−
    margin: 0;
+
−
  }
+
−
  #conference-timeline .conference-center-line {
+
−
    margin-left: 0;
+
−
    left: 50px;
+
−
  }
+
−
  .timeline-article .meta-date {
+
−
    margin-left: 0;
+
−
    left: 20px;
+
−
  }
+
−
  .timeline-article .content-left-container,
+
−
  .timeline-article .content-right-container {
+
−
    max-width: 100%;
+
−
    width: auto;
+
−
    float: none;
+
−
    margin-left: 110px;
+
−
    min-height: 53px;
+
−
  }
+
−
  .timeline-article .content-left-container {
+
−
    margin-bottom: 20px;
+
−
  }
+
−
  .timeline-article .content-left,
+
−
  .timeline-article .content-right {
+
−
    padding: 10px 25px;
+
−
    min-height: 65px;
+
−
  }
+
−
  .timeline-article .content-left:before {
+
−
    content: "\f0d9";
+
−
    right: auto;
+
−
    left: -8px;
+
−
  }
+
−
  .timeline-article .content-right:before {
+
−
    display: none;
+
−
  }
+
−
}
+
−
@media only screen and (max-width: 400px) {
+
−
  .timeline-article p {
+
−
    margin: 0;
+
−
  }
+
−
  .timeline-article p span.article-number {
+
−
    display: none;
+
−
  }
+
−
 
+
−
}
+
−
/*===== // Resonsive Vertical Timeline =====*/
+
−
</style>
+
−
 
+
−
            </div>
+
 
         </div>
 
         </div>
  
Line 550: Line 223:
  
 
         <div class="panel panel-red" id="panel3">
 
         <div class="panel panel-red" id="panel3">
−
           
 
−
     
 
−
<!---------------------------pics---------------------------->
 
 
<p style="text-align: center; ">
 
<p style="text-align: center; ">
−
<img src= "https://static.igem.org/mediawiki/2017/d/d3/Q.png" height="20%" width="20%" style=" padding:50px;">
+
<img src="https://static.igem.org/mediawiki/2017/8/8e/Plosibilities.png" height="30%" width="30%" style=" padding:50px;">
−
<img src= "https://static.igem.org/mediawiki/2017/8/82/S.png" height="20%" width="20%" style=" padding:50px;">
+
<img src="https://static.igem.org/mediawiki/parts/d/d7/Porcupinelogo2017.png" height="30%" width="30%" style=" padding:50px;">
−
<img src= "https://static.igem.org/mediawiki/2017/5/57/B.png" height="20%" width="20%" style=" padding:50px;">
+
 
</p>
 
</p>
 
              
 
              
Line 602: Line 271:
  
 
.noBackground {
 
.noBackground {
−
 
+
background-color: rgba(0,0,0,0);
−
background-color: rgba(0,0,0,0);
+
 
visibility: visible;
 
visibility: visible;
 
width:100%;
 
width:100%;
Line 641: Line 309:
 
#panel1{
 
#panel1{
 
background: transparent;
 
background: transparent;
−
height: 850px;
+
height: 950px;
 
width:100%;
 
width:100%;
 
z-index:100;
 
z-index:100;
Line 647: Line 315:
 
#panel2{
 
#panel2{
 
width:100%;
 
width:100%;
−
height: 100%;
+
height: 600px;
 
margin-bottom:0px;
 
margin-bottom:0px;
 
background:  white;
 
background:  white;
Line 658: Line 326:
 
#panel3{
 
#panel3{
 
width:100%;
 
width:100%;
−
height: 200px;
+
height: 100%;
−
 
+
margin-bottom:-100px;
 
background: rgba(35,47,19,0.9);
 
background: rgba(35,47,19,0.9);
−
bottom:-100px;
 
 
}
 
}
  

Latest revision as of 03:27, 27 October 2017

Dalhousie iGEM 2017

Mining the Microbiome