|
|
| Line 205: |
Line 205: |
| | | | |
| | | | |
| | + | <img src="https://static.igem.org/mediawiki/2017/6/6b/Project_Design.png"> |
| | | | |
| − |
| |
| − | <div class="panel" id="panel2">
| |
| − | <div style=" border: 1px solid #000; margin: 50px; padding: 30px; background-color: rgba(35,47,19,1);">
| |
| − |
| |
| − | Welcome! </br>
| |
| − | The goal of our project is to convert cellulose into glucose, which can be used for biofuel. </br>
| |
| − | 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 class="container" style="height:450px; width:100%; position: relative;"> | | <div class="container" style="height:450px; width:100%; position: relative;"> |
| | | | |
