|
|
(27 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 66: |
Line 67: |
| <li><a href="https://2017.igem.org/Team:Dalhousie/Description" >Description</a></li> | | <li><a href="https://2017.igem.org/Team:Dalhousie/Description" >Description</a></li> |
| <li><a href="https://2017.igem.org/Team:Dalhousie/Design">Design</a></li> | | <li><a href="https://2017.igem.org/Team:Dalhousie/Design">Design</a></li> |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Improve">Improve</a></li>
| + | <li><a href="https://2017.igem.org/Team:Dalhousie/Requirements">Requirements</a></li> |
| </ul> | | </ul> |
| </li> | | </li> |
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/Part_Collection">Part Collections</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/Science_Literacy">Science Literacy</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Ethics">Ethics</a></li>
| + | |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Demonstrate">Demonstrate</a></li>
| + | |
| </ul> | | </ul> |
| </li> | | </li> |
Line 111: |
Line 110: |
| <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/Parts">Parts</a></li> | | <li><a href="https://2017.igem.org/Team:Dalhousie/Parts">Parts</a></li> |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Basic_Parts">Basic Parts</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Composite_Parts">Composite Parts</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Part_Collection">Part Collections</a></li>
| |
| <li><a href="https://2017.igem.org/Team:Dalhousie/Safety" >Safety</a></li> | | <li><a href="https://2017.igem.org/Team:Dalhousie/Safety" >Safety</a></li> |
| <li><a href="https://2017.igem.org/Team:Dalhousie/Experiments">Experiments</a></li> | | <li><a href="https://2017.igem.org/Team:Dalhousie/Experiments">Experiments</a></li> |
| <li><a href="https://2017.igem.org/Team:Dalhousie/Notebook">Notebook</a></li> | | <li><a href="https://2017.igem.org/Team:Dalhousie/Notebook">Notebook</a></li> |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Contribution">Contribution</a></li> | + | <li><a href="https://2017.igem.org/Team:Dalhousie/Improve">Improve</a></li> |
− | <li><a href="https://2017.igem.org/Team:Dalhousie/Model">Model</a></li>
| + | |
| </ul> | | </ul> |
| </li> | | </li> |
Line 124: |
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 223: |
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="60%" 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">
| + | |
− | <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 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/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 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">
| + | |
− | <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: 0;
| + | |
− | left: 48%;
| + | |
− | 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 555: |
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 607: |
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 646: |
Line 309: |
| #panel1{ | | #panel1{ |
| background: transparent; | | background: transparent; |
− | height: 850px; | + | height: 950px; |
| width:100%; | | width:100%; |
| z-index:100; | | z-index:100; |
Line 652: |
Line 315: |
| #panel2{ | | #panel2{ |
| width:100%; | | width:100%; |
− | height: 100%; | + | height: 600px; |
| margin-bottom:0px; | | margin-bottom:0px; |
| background: white; | | background: white; |
Line 663: |
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;
| |
| } | | } |
| | | |