Difference between revisions of "Team:DTU-Denmark/test1"

Line 1: Line 1:
−
{{Team:DTU-Denmark/header.html}}
+
{{Team:DTU-Denmark/header.html}} <!-- Header template  -->
  
−
<html>
 
  
 +
<html lang="en">
 
<head>
 
<head>
−
     <title>DTU Biobuilders</title>
+
     <title>Bootstrap Example</title>
−
     <link rel="stylesheet" href="https://2016.igem.org/Team:DTU-Denmark/hovereffect?action=raw&ctype=text/css">
+
     <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <!--Bootstrap, source: https://getbootstrap.com/-->
 +
       
 +
    <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/bootstrap-js?action=raw&ctype=text/javascript"></script>
 +
    <script>
 +
        // Dynamic affix to bottom of masthead
 +
        $('#MYsidebar').affix({
 +
            offset: {
 +
                top: function() { return $('.before-content').height(); }
 +
            }
 +
        });
 +
    </script>
 +
   
 +
   
 +
    <style>
 +
       
 +
        /*#MYsidebar.affix-top {
 +
            position: static;
 +
        }
  
−
    <style>
+
        #MYsidebar.affix {
−
   
+
            position: fixed;
 +
            top: 125px;
 +
        }*/
 +
       
 +
        div.col-sm-9 div {
 +
            height: 250px;
 +
            font-size: 28px;
 +
        }
 +
       
 +
        #overview {color: #fff; background-color: #1E88E5;}
 +
        #medal-requirements {color: #fff; background-color: #673ab7;}
 +
        #bronze {color: #fff; background-color: #ff9800;}
 +
        #silver {color: #fff; background-color: #00bcd4;}
 +
        #gold {color: #fff; background-color: #009688;}
 +
 
 +
        /*@media screen and (max-width: 810px) {
 +
            #overview, #medal-requirements, #bronze, #silver, #gold {
 +
                margin-left: 150px;
 +
            }
 +
        }*/
 
     </style>
 
     </style>
 
</head>
 
</head>
  
−
 
+
<!-- BODY -->
−
<body class="container-fluid">
+
<div data-spy="scroll" data-target="#myScrollspy" data-offset="10">
−
<div class="container"> <!--Gives the margin-->
+
    <div class="masthead">
−
    <div class="row">
+
        <div class="container-fluid" style="background-color:#2196F3;color:#fff;">
−
        <h2>Introduction</h2>
+
        <div class="row">
−
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
            <h1>Masthead</h1>
−
            <div class="hovereffect" onclick="void(0)">
+
            <h1>Scrollspy & Affix Example</h1>
−
                <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Gallet_clamshell_600x600_movement.jpg">
+
            <h3>Fixed vertical sidenav on scroll</h3>
−
                <div class="overlay">
+
            <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
−
                    <h2>The <strong>problem</strong></h2>
+
            <p>The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.</p>
−
                    <p><strong>The current state of industrial biotechnology means that the vast majority biorefineries relies on edible substrates such as corn, wheat or sugar canes. This has sparked sparked the food vs. fuel debate, leading to the fundamental question: “Should we use our edible crops to feed the growing human population, or use it to provide sustainable chemicals to the industrialised world?”. A better question might be: “Why are we not doing both?”. The limiting factor of current processes, is a lack of molecular tools that has limited us to rely on a small number of organisms with narrow substrate ranges. Even though efforts has been made to expand the substrate range of many conventional cell factories, such as Escherichia coli and Saccharomyces cerevisiae, the task has proven difficult and real impact has soon to come as a result of these experiments</strong></p>
+
             <!-- Insert content for masthead-->
−
                </div>
+
−
             </div>
+
 
         </div>
 
         </div>
−
           
 
−
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
 
−
            <div class="hovereffect">
 
−
                <img class="img-responsive" src="http://silencetv.com/blog/wp-content/uploads/2011/07/Icons004-600x600.jpg">
 
−
                <div class="overlay">
 
−
                    <h2>The <strong>solution</strong></h2>
 
−
                    <p><strong>The development of new technologies such as CRISPR 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 organism. Therefore we though: “Why force a model organisms to grow on non-conventional substrates, when we can start of with an organism that already grows on a broad range of substrates?”. See our proposed solution by scrolling down.</strong></p>
 
−
                </div>
 
−
            </div>
 
−
        </div> <!-- /Introduction -->
 
 
     </div>
 
     </div>
−
    <span class="space"></span>
+
</div> <!-- /masthead-->
−
   
+
 
−
    <div class="row">
+
<br>
−
    <h2>Project description</h2>
+
<div id="before-content"></div>
−
    <div class="row">
+
<div class="container">
−
        <div class="col-md-4">
+
<div class="row"> <!--Must sorround both content and sidebar-->
−
            <h3><strong>Our idea</strong></h3>
+
    <div class="col-md-9"> <!-- left-->
−
             <p>By basing biorefineries on an organism with a broad substrate range we will be able to utilize industrial waste-streams as substrate for biorefineries, and leave edible feedstocks for the growing human population.</p>
+
        <div id="overview">
 +
        <h1>Overview</h1>
 +
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
 +
            </p><p>
 +
            Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
 +
             </p><p>
 +
            Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p>
 +
        </div> <!-- /overview-->
 +
       
 +
        <div id="medal-requirements">
 +
        <h1>Medal requirements</h1>
 +
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
 +
            </p><p>
 +
            Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
 +
            </p><p>
 +
            Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p>
 
         </div>
 
         </div>
−
         <div class="col-md-4">
+
       
−
            <h3><strong>Introducing Yarrowia Lipolytica</strong></h3>
+
         <div id="bronze">
−
             <p>In contrast to today’s model organisms, Y. lipolytica has been shown to exhibit excellent growth on a long range of substrates, ranging from reduced sugars, organic acids and even lipids. Due to this broad substrate range, Y. lipolytica is ideal for bio-refineries based on non-conventional substrates.</p>
+
        <h1>Bronze</h1>
 +
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
 +
            </p><p>
 +
            Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
 +
             </p><p>
 +
            Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p>
 
         </div>
 
         </div>
−
         <div class="col-md-4">
+
         <div id="silver">
−
            <h3><strong>What substrates?</strong></h3>
+
        <h1>Silver</h1>
−
             <p>Studies have shown Y. lipolytica could support biorefineries based on a long range of both crude and complex substrates. Several studies even suggests Y. lipolytica could support utilising substrates such as wastewater from oils mills, the remains from fish and meat production, leftover glycerol from bio-diesel production and the mixed sugars resulting from hydrolysates of lignocellulosic biomass.</p>
+
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
 +
            </p><p>
 +
            Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
 +
             </p><p>
 +
            Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p>
 
         </div>
 
         </div>
−
    </div>
+
        <div id="gold">
−
   
+
         <h1>Gold</h1>
−
    <div class="row">
+
             <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
−
         <div class="col-md-6">
+
            </p><p>
−
             <h3><strong>Why haven’t anyone done this already?!</strong></h3>
+
            Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
−
             <p>Despite the great potential of Y. lipolytica to support a biorefinery based on waste streams, realising this with a large scale plant has yet to become a reality. This is mainly due to the frugal toolbox associated with Y. lipolytica, which makes this organism a less desirable as cell factory compared to conventional cell factories such as Escherichia coli, Saccharomyces cerevisiae and Aspergillus niger.</p>
+
             </p><p>
 +
            Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p>
 
         </div>
 
         </div>
−
        <div class="col-md-6">
+
     </div> <!-- /LEFT -->
−
            <h3><strong>Yeastillisation</strong></h3>
+
−
            <p>Our project, Yeastillisation, aims to develop a genetic and bioinformatic toolbox, thereby paving the way for the use of Y. lipolytica as a novel cell factory for future biorefineries.</p>
+
−
        </div>
+
−
     </div>
+
−
    </div>
+
 
      
 
      
−
     <span class="space"></span>
+
     <!-- RIGHT-->
−
    <div class="row">
+
    <div class="col-md-3 hidden-sm hidden-xs" id="myScrollspy">  
−
     <h2>Explore</h2>
+
        <ul class="nav nav-pills nav-stacked" id="MYsidebar" data-spy="affix"> <!-- data-offset-top="230" data-offset-bottom="100">-->
 +
            <!--data-offset-top control at which scroll point the affix will come into effect, data-offset-bottom control when affix will no longer be in effect-->
 +
            <li><a href="#overview">OVERVIEW</a></li>
 +
            <li><a href="#medal-requirements">MEDAL REQUIREMENTS</a></li>
 +
            <li><a href="#bronze">BRONZE</a></li>
 +
            <li><a href="#silver">SILVER</a></li>
 +
            <li><a href="#gold">GOLD</a></li>
 +
        </ul>
 +
     </div> <!-- /RIGHT -->
 
      
 
      
−
    </div>
+
</div>
−
</div>  
+
</div>
−
</body>
+
</div> <!-- /CONTENT-->
 +
</div> <!-- /BODY-->
 +
 
  
−
</html>
 
  
 +
</html>
  
  
 
{{Team:DTU-Denmark/footer}}
 
{{Team:DTU-Denmark/footer}}

Revision as of 17:10, 13 August 2016

New HTML template for the wiki





Bootstrap Example

Masthead

Scrollspy & Affix Example

Fixed vertical sidenav on scroll

Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".

The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.


Overview

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.

Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.

Medal requirements

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.

Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.

Bronze

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.

Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.

Silver

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.

Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.

Gold

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.

Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.


  • 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