Difference between revisions of "Team:DTU-Denmark"

 
(51 intermediate revisions by 5 users not shown)
Line 1: Line 1:
/* Overview
+
{{Team:DTU-Denmark/header.html}} <!-- Header template  -->
1. Body
+
2. Masthead settings
+
3. Content left column
+
4. Sidebar right column
+
5. windowsize responsive
+
6. Attribution page
+
7. Team member page
+
8. Notebook
+
9. Masterhead mainpages
+
10. Modal Pictures
+
11. Panel
+
12. References
+
*/
+
  
/****
+
<html>
1. BODY
+
*****/
+
body {
+
    overflow-x: hidden; /*prevent sidescroll on narrow devices*/
+
}
+
  
/*
+
<head>
.MYbody {
+
<!--Hovereffect stylesheet costumized from: https://miketricking.github.io/dist/#-->
    position: fixed;
+
<link rel="stylesheet" href="https://2016.igem.org/Team:DTU-Denmark/hovereffect?action=raw&ctype=text/css">
    overflow-x: hidden;
+
    overflow-y: scroll;
+
}
+
*/
+
  
.MYbody p {
+
<style>
font-size: 1.5em;
+
     .p {
}
+
        font-family: Georgia, serif !important;
 
+
a:hover, a:visited, a:link, a:active
+
{
+
    text-decoration: none !important;
+
}
+
 
+
a,
+
a:visited {
+
    color: #555;
+
}
+
 
+
a:hover,
+
a:focus {
+
    color: #990000;
+
}
+
 
+
/***********
+
2. MASTHEAD
+
************/
+
.masthead { /*control height*/
+
    height: 300px;
+
}
+
 
+
.masthead .caption { /*control shadowing*/
+
    width:100%;
+
    height: 300px;
+
    bottom: .0rem;
+
    position: absolute;
+
    background:#000;
+
    background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
+
    background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
+
    background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
+
    background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
+
}
+
 
+
.masthead .thumbnail {
+
    height: 300px;
+
    width: 100%;
+
    background-size: cover;
+
    background-position: center;
+
    background-repeat: no-repeat;
+
    border: 0 none;
+
    box-shadow: none;
+
    margin:0;
+
    padding:0;
+
}
+
       
+
.masthead .caption > div {
+
     margin-top: 2em;
+
}
+
 
+
.masthead .caption h1 {
+
    margin-top: -.0em;
+
    padding-top: -.0em;
+
}
+
 
+
.masthead .caption h1,
+
.masthead .caption p {
+
    color: #fff;
+
}
+
 
+
.masthead .title h1,
+
.masthead .title h1 > p{
+
    text-transform: uppercase;
+
    text-align: justify;
+
    float: left;
+
}
+
 
+
.masthead .title h1 > p {
+
    border-top: 1px solid;
+
    padding-top: .3em;
+
}
+
 
+
.masthead .intro blockquote {
+
    position: absolute;
+
    margin-top: 30px;
+
}
+
 
+
.masthead .intro blockquote p {
+
    text-align: right !important;
+
}
+
 
+
.masthead .intro blockquote small {
+
    color: #fff;
+
}
+
 
+
/******************
+
3. CONTENT LEFT COLUMN
+
******************/
+
.colLeft blockquote {
+
    border-left-color: #990000;
+
}
+
 
+
.colLeft a.anchor:target,
+
.colLeft div.anchor:target { /*Ensure that internal links will have the correct setoff, below the fixed header*/
+
    display: block;
+
    top: -125px;
+
    position: relative;
+
    visibility: hidden;
+
}
+
 
+
.colLeft .h2 {
+
    border-bottom-width: 2px;
+
    font-weight: 500;
+
}
+
 
+
.colLeft .h3 {
+
    border-bottom-width: 1px;
+
    font-weight: 500;
+
margin-bottom: 0.4em;
+
}
+
#bodyContent h3 {
+
margin-bottom: 0.5em;
+
}
+
 
+
.colLeft .h2,
+
.colLeft .h3 {
+
    padding-bottom: 0.2em;
+
    border-bottom-style: solid;
+
    border-bottom-color: #990000;
+
clear: both;
+
}
+
/* grid layout for achievements, notebook, and parts page */
+
.grid-row {
+
    clear:both;
+
}
+
 
+
/*******************
+
4. SIDEBAR RIGHT COLUMN
+
********************/
+
@media screen and (max-width: 1000px){
+
    .colRight {
+
    padding-left: 0px !important;
+
 
     }
 
     }
}
 
 
#sidebar {
 
    margin-top: 20px;
 
    padding-top: 18px;
 
    padding-bottom: 5px;
 
    padding-left: 5px;
 
    padding-right: 5px;
 
    border-radius: 5px;
 
}
 
 
#sidebar {
 
    margin-left: 0px;
 
}
 
 
 
#sidebar.nav li a {
 
    color: #999;
 
    font-size: .9em;
 
    padding-top: 0.3em;
 
    padding-bottom: .3em;
 
    background-color: transparent;
 
    text-transform: uppercase;
 
    border-left-width: 3px;
 
    border-left-style: solid;
 
    border-left-color: #fff;
 
 
      
 
      
}
+
    #bodyContent div.front-page h1.main-title {
 
+
        font-size: 50px;
#sidebar.nav li a:active,
+
        text-align: center;
#sidebar.nav li a:hover,
+
        border-bottom-style: solid;
#sidebar.nav li a:focus,
+
        border-bottom-color: #990000;
#sidebar.nav li a.nav-active:hover {
+
        border-bottom-width: 3px;
    background-color: transparent;
+
    list-style: circle;
+
    border-left-width: 3px;
+
    border-left-style: solid;
+
    border-left-color: #990000;
+
}
+
 
+
#sidebar.nav li a.nav-active {
+
    color:black;
+
    border-left-width: 3px;
+
    border-left-style: solid;
+
    border-left-color: #750000;
+
}
+
 
+
/* Undo the affixed behavior in mobile views */
+
 
+
 
+
/* Apply the affixed behavior */
+
/* affix-top: The affix-top class should be inline to the page. */
+
#sidebar.affix-top {
+
    width:200px;
+
/* for reference - no additional styling */
+
}
+
 
+
/* affix: The affix class should be fixed to the page. */
+
#sidebar.affix {
+
    position: fixed;
+
    top: 125px;      /* same as body padding or outer navbar height */
+
    width: 200px;  /* stop it from growing - anyone know how to fix this? */
+
}
+
 
+
/* affix bottom: The affix-bottom class should be positioned absolute. */
+
#sidebar.affix-bottom {
+
    position: absolute;
+
    width: 200px;
+
}
+
   
+
 
+
/********************
+
5. WINDOWSIZE RESPONSIVE
+
********************/
+
/*Fixes dissapear reappear of sidebar when scrolling on iPad */
+
#sidebar *:not(html) {
+
    -webkit-transform: translate3d(0, 0, 0);
+
}
+
 
+
@media screen and (max-width: 900px) {
+
 
+
    div.colLeft {
+
        width: 100%;
+
 
     }
 
     }
  
     #sidebar {
+
     @media only screen and (max-width: 700px){
         position: fixed;
+
         #bodyContent div.front-page h1.main-title {
        top: 70px !important;
+
            font-size: 36px;
        width: 200px;  /* stop it from growing - anyone know how to fix this? */
+
         }
        z-index: 200;
+
         div.front-page .p {
         background-color: white;
+
            font-weight: 200;
         border-color: #790000;
+
            font-size: 12px !important;
        border-style: solid;
+
        }
        border-width: 3px;
+
    }
+
 
+
    #sidebar.affix-bottom,
+
    #sidebar.affix-top {
+
        position: fixed;
+
 
     }
 
     }
 
      
 
      
     #scrollspy {
+
     .space a:hover,
         display: none;
+
    .space a:focus {
 +
         cursor: pointer;
 
     }
 
     }
}
+
    .space {
 
+
        margin-bottom: 2em;
/***************
+
    }
6. ATTRIBUTION PAGE
+
    .ul {
****************/
+
 
+
.sponsor-image {
+
    width: 100%;
+
    margin-bottom: 40px;
+
}
+
 
+
/***************
+
7. TEAM MEMBER PAGE
+
****************/
+
 
          
 
          
.student {
 
    margin-bottom: 3em;
 
}
 
       
 
.student img {
 
    margin-top: 1.5em;
 
}
 
 
/********
 
8. NOTEBOOK
 
********/
 
 
/* Timeline */
 
#timeline .timeline-item:after,
 
#timeline .timeline-item:before {
 
    content: '';
 
    display: block;
 
    width: 100%;
 
    clear: both;
 
}
 
#timeline {
 
    width: 100%;
 
    margin: 30px auto;
 
    position: relative;
 
    padding: 0 10px;
 
    -webkit-transition: all 0.4s ease;
 
    -moz-transition: all 0.4s ease;
 
    -ms-transition: all 0.4s ease;
 
    transition: all 0.4s ease;
 
}
 
#timeline:before {
 
    content: "";
 
    width: 3px;
 
    height: 100%;
 
    background: #EFEFEF;
 
    left: 50%;
 
    top: 0;
 
    position: absolute;
 
}
 
#timeline:after {
 
    content: "";
 
    clear: both;
 
    display: table;
 
    width: 100%;
 
}
 
#timeline .timeline-item {
 
    margin-bottom: 50px;
 
    position: relative;
 
}
 
#timeline .timeline-item .timeline-icon {
 
    background: #EFEFEF;
 
    width: 50px;
 
    height: 50px; 
 
    position: absolute;
 
    top: 0;
 
    left: 50%;
 
    overflow: hidden;
 
    margin-left: -23px;
 
    border-radius: 100%;
 
}
 
 
#timeline .timeline-item .timeline-icon span.star {
 
    position: relative;
 
    top: 28%;
 
    left: 28%;
 
    color: #6C7A89;
 
    font-size: x-large;
 
}
 
 
#timeline .timeline-item .timeline-content {
 
    width: 45%;
 
    background: #EFEFEF;
 
    padding: 20px;
 
}
 
#timeline .timeline-item .timeline-content h2 {
 
    padding: 15px;
 
    color: #141414;
 
    margin:-20px -20px 5px -20px;
 
    font-weight: 300;
 
    font-size:21px;
 
}
 
#timeline .timeline-item .timeline-content:before {
 
    content: '';
 
    position: absolute;
 
    left: 45%;
 
    top: 20px;
 
    width: 0;
 
    height: 0;
 
    border-top: 7px solid transparent;
 
    border-bottom: 7px solid transparent;
 
    border-left: 7px solid #f1f1f1;
 
}
 
#timeline .timeline-item .timeline-content.right {
 
    float: right;
 
}
 
#timeline .timeline-item .timeline-content.right:before {
 
    content: '';
 
    right: 45%;
 
    left: inherit;
 
    border-left: 0;
 
    border-right: 7px solid #f1f1f1;
 
}
 
 
@media screen and (max-width: 768px) {
 
    #timeline {
 
        margin: 30px;
 
        padding: 0px;
 
        width: 90%;
 
 
     }
 
     }
     #timeline:before {
+
     h3.achi {
         left: 0;
+
         text-align: center;
 
     }
 
     }
    #timeline .timeline-item .timeline-content {
+
</style>
        width: 90%;
+
</head>
        float: right; 
+
    }
+
    #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
+
        left: 10%;
+
        margin-left: -6px;
+
        border-left: 0;
+
        border-right: 7px solid #f1f1f1;
+
    }
+
    #timeline .timeline-item .timeline-icon {
+
        left: 0;
+
    }
+
}
+
  
   
 
/* Labels */
 
#timeline .label-main {
 
    background-color: #6C7A89;
 
    color:#FFF;
 
    font-size:14px;
 
    margin-left:-30px;
 
    border-radius:0;
 
    font-weight:400;
 
}
 
#full-schedule .label-main {
 
    background-color: #6C7A89;
 
    color:#FFF;font-size:14px;
 
    margin-left:0px;
 
    border-radius:0;
 
    font-weight:400;
 
}
 
  
/***********
+
<br>
9. MASTHEAD
+
************/
+
.masthead-main { /*control height*/
+
    height: 200px;
+
}
+
  
.masthead-main .caption { /*control shadowing*/
 
    width:100%;
 
    height: 200px;
 
    bottom: .0rem;
 
    position: absolute;
 
    background:#000;
 
    background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
 
    background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
 
    background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
 
    background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
 
}
 
  
.masthead-main .thumbnail {
+
<body class="container-fluid">
    height: 200px;
+
<div class="container front-page">
    width: 100%;
+
    background-size: cover;
+
    background-position: center;
+
    background-repeat: no-repeat;
+
    border: 0 none;
+
    box-shadow: none;
+
    margin:0;
+
    padding:0;
+
}
+
  
.masthead-main h1.title {
+
<h1 class="main-title">ACHIEVEMENTS</h1>
    text-transform: uppercase;
+
<div class="row">
    text-align: justify;
+
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
color: white;
+
        <h3 class="achi">We won a gold medal</h3>
}
+
        <h3 class="achi">We got nominated for Best Hardware, Overgrad</h3>
 
+
        <h3 class="achi">We got nominated for Best Poster, Overgrad</h3>
/***********
+
     </div>
10. MODAL PICTURES
+
</div>
************/
+
 
+
.modal-img {
+
cursor: pointer;
+
}
+
 
+
/* The Modal (background) */
+
.modal {
+
     display: none; /* Hidden by default */
+
    position: fixed; /* Stay in place */
+
    z-index: 1; /* Sit on top */
+
    padding-top: 100px; /* Location of the box */
+
    left: 0;
+
    top: 0;
+
    width: 100%; /* Full width */
+
    height: 100%; /* Full height */
+
    overflow: auto; /* Enable scroll if needed */
+
    background-color: rgb(0,0,0); /* Fallback color */
+
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+
}
+
 
+
/* Modal Content (Image) */
+
.modal-content {
+
    margin: auto;
+
    display: block;
+
    width: 80%;
+
    max-width: 700px;
+
}
+
 
+
/* Caption of Modal Image (Image Text) - Same Width as the Image */
+
#caption {
+
    margin: auto;
+
    display: block;
+
    width: 80%;
+
    max-width: 700px;
+
    text-align: center;
+
    color: #ccc;
+
    padding: 10px 0;
+
    height: 150px;
+
}
+
 
+
/* Add Animation - Zoom in the Modal */
+
.modal-content, #caption {
+
    -webkit-animation-name: zoom;
+
    -webkit-animation-duration: 0.6s;
+
    animation-name: zoom;
+
    animation-duration: 0.6s;
+
}
+
 
+
@-webkit-keyframes zoom {
+
    from {-webkit-transform:scale(0)}
+
    to {-webkit-transform:scale(1)}
+
}
+
 
+
@keyframes zoom {
+
    from {transform:scale(0)}
+
    to {transform:scale(1)}
+
}
+
 
+
/* The Close Button */
+
.close {
+
    position: absolute;
+
    top: 15px;
+
    right: 35px;
+
    color: #f1f1f1;
+
    font-size: 40px;
+
    font-weight: bold;
+
    transition: 0.3s;
+
}
+
 
+
.close:hover,
+
.close:focus {
+
     color: #bbb;
+
    text-decoration: none;
+
    cursor: pointer;
+
}
+
 
+
/* 100% Image Width on Smaller Screens */
+
@media only screen and (max-width: 700px){
+
    .modal-content {
+
        width: 100%;
+
    }
+
}
+
  
/****
+
<h1 class="main-title">YEASTILIZATION</h1>
11. PANEL
+
****/
+
  
.panel div.panel-heading {
+
<div class="row"> <!--row1-->
background-color: #990000
+
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <!-- implement along with hovereffect stylesheet -->
}
+
        <div class="space">
 +
            <div class="hovereffect" onclick="void(0)">
 +
                <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/1/13/T--DTU-Denmark--graininflask_sq.jpg">
 +
               
 +
                <div class="overlay">
 +
                  <h2>The <strong>problem</strong></h2>
 +
                        <p><strong>
 +
                            In the current state of industrial biotechnology, the vast majority of biorefineries rely on edible substrates such as corn, wheat or sugar cane. This has sparked the food vs. fuel debate, leading to the fundamental question whether we should use our edible crops to feed the growing human population, or to provide sustainable chemicals. The limiting factor for current processes is the lack of molecular tools,
 +
                            which restricts biotechnology to conventional organisms that are optimised for a limited number of substrates.
 +
                        </strong></p>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
 +
        <div class="space">
 +
            <div class="hovereffect" onclick="void(0)">
 +
                <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/9/9d/T--DTU-Denmark--solution_sq.jpg">
 +
               
 +
                <div class="overlay">
 +
                <h2>The <strong>solution</strong></h2>
 +
             
 +
                <p><strong>
 +
                    The development of new technologies such as CRISPR/Cas9 and Next-generation sequencing has dramatically reduced the effort required to genetically modify non-model organisms, and is effectively breaking down the barrier between model and non-model organisms. In our project we utilise <i>Yarrowia lipolytica</i>, in order to solve the food vs. fuel dilemma while simultaneously making industrial biotechnology an integrated part of waste handling. <p><i>Scroll down to explore our project</i></p>
 +
                </strong></p>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
</div> <!--/row1-->
  
.panel h4.panel-title {
 
color: #fff;
 
}
 
  
.panel h4.panel-title:hover,
+
<h1 class="main-title">EXPLORE</h1>
.panel h4.panel-title:focus {
+
<div class="row front-tiles"> <!--row2-->
font-weight: 400;
+
    <div class="col-lg-1 col-md-1 col-sm-1 xs-hidden"></div>
text-decoration: none;
+
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <!--Project tile-->
}
+
      <div class="space">
 +
          <a class="hovereffect" onclick="void(0)" href="https://2016.igem.org/Team:DTU-Denmark/project">
 +
                <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/0/09/T--DTU-Denmark--project-tile.jpg">
 +
                   
 +
                <div class="overlay">
 +
                    <h2><strong>Project</strong></h2>
 +
                </div>
 +
            </a>
 +
      </div>
 +
    </div>
 +
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <!--Wetlab tile-->
 +
        <div class="space">
 +
            <a class="hovereffect" onclick="void(0)" href="https://2016.igem.org/Team:DTU-Denmark/wetlab">
 +
                <img class="img-responsive"    src="https://static.igem.org/mediawiki/2016/1/1c/T--DTU-Denmark--wetlab-tile.jpg">
 +
                   
 +
                <div class="overlay">
 +
                    <h2><strong>Wetlab</strong></h2>
 +
                </div>
 +
            </a>
 +
        </div>
 +
    </div>
 +
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <!--Compute tile-->
 +
      <div class="space">
 +
          <a class="hovereffect" onclick="void(0)" href="https://2016.igem.org/Team:DTU-Denmark/compute">
 +
                    <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/c/c6/T--DTU-Denmark--compute-tile.jpg">
 +
                   
 +
                    <div class="overlay">
 +
                        <h2><strong>Compute</strong></h2>
 +
                    </div>
 +
            </a>
 +
      </div>
 +
    </div>
 +
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <!--Team tile-->
 +
      <div class="space">
 +
          <a class="hovereffect" onclick="void(0)" href="https://2016.igem.org/Team:DTU-Denmark/team">
 +
                <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/0/06/T--DTU-Denmark--team-tile.jpg">
 +
                   
 +
                <div class="overlay">
 +
                    <h2><strong>Team</strong></h2>
 +
                </div>
 +
            </a>
 +
      </div>
 +
    </div>
 +
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <!--Outreach tile-->
 +
      <div class="space">
 +
          <a class="hovereffect" onclick="void(0)" href="https://2016.igem.org/Team:DTU-Denmark/outreach">
 +
                    <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/5/5f/T--DTU-Denmark--collab-tile.jpg">
 +
                   
 +
                    <div class="overlay">
 +
                        <h2><strong>Outreach</strong></h2>       
 +
                    </div>
 +
            </a>
 +
      </div>
 +
    </div>
 +
    <div class="col-lg-1 col-md-1 col-sm-1 xs-hidden"></div>
 +
    <!--/Outreach tile-->
 +
</div> <!--/row2-->
 +
</div> <!--/container front-page-->
  
/*********
+
<script>
REFERENCES
+
// For Demo purposes only (show hover effect on mobile devices)
*********/
+
[].slice.call( document.querySelectorAll('.content a') ).forEach( function(el) {
 +
el.onclick = function() { return false; }
 +
} );
 +
</script>
  
div.ref-sec h2.h2 {
 
padding-bottom: 0.2em;
 
    border-bottom-style: none;
 
    border-bottom-color: #fff;
 
padding-top: 1em;
 
border-top-style: solid;
 
border-bottom-color: #990000;
 
clear: both;
 
}
 
  
div.ref-sec ol {
+
<br>
font-size: 1.1em;
+
<br>
color: #990000;
+
<br>
}
+
  
div.ref-sec li {
+
 
font-size: 1.1em;
+
</body>
}
+
</html>
 +
{{Team:DTU-Denmark/footer}}

Latest revision as of 00:29, 3 December 2016

New HTML template for the wiki





ACHIEVEMENTS

We won a gold medal

We got nominated for Best Hardware, Overgrad

We got nominated for Best Poster, Overgrad

YEASTILIZATION

The problem

In the current state of industrial biotechnology, the vast majority of biorefineries rely on edible substrates such as corn, wheat or sugar cane. This has sparked the food vs. fuel debate, leading to the fundamental question whether we should use our edible crops to feed the growing human population, or to provide sustainable chemicals. The limiting factor for current processes is the lack of molecular tools, which restricts biotechnology to conventional organisms that are optimised for a limited number of substrates.

The solution

The development of new technologies such as CRISPR/Cas9 and Next-generation sequencing has dramatically reduced the effort required to genetically modify non-model organisms, and is effectively breaking down the barrier between model and non-model organisms. In our project we utilise Yarrowia lipolytica, in order to solve the food vs. fuel dilemma while simultaneously making industrial biotechnology an integrated part of waste handling.

Scroll down to explore our project

EXPLORE




  • FIND US AT:
Facebook Twitter
  • DTU BIOBUILDERS
  • DENMARK
  • DTU - SØLTOFTS PLADS, BYGN. 221/002
  • 2800 KGS. LYNGBY

  • E-mail:
  • dtu-biobuilders-2016@googlegroups.com
  • MAIN SPONSORS:
Lundbeck fundation DTU blue dot Lundbeck fundation Lundbeck fundation