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

 
(31 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{Team:DTU-Denmark/index.html}}
+
{{Team:DTU-Denmark/header.html}} <!-- Header template  -->
  
−
{{Team:DTU-Denmark/index.html}}
 
−
 
−
<html>
 
  
 +
<html lang="en">
 
<head>
 
<head>
−
<link rel="stylesheet" href="https://2016.igem.org/Team:DTU-Denmark/hovereffect?action=raw&ctype=text/css">
+
    <title>Bootstrap Example</title>
 +
    <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;
 +
        }
 +
       
 +
        #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>
 
</head>
 
</head>
  
 +
<!-- BODY -->
 +
<div data-spy="scroll" data-target="#myScrollspy" data-offset="10">
 +
    <div class="masthead">
 +
        <div class="container-fluid" style="background-color:#2196F3;color:#fff;">
 +
        <div class="row">
 +
            <h1>Masthead</h1>
 +
            <h1>Scrollspy & Affix Example</h1>
 +
            <h3>Fixed vertical sidenav on scroll</h3>
 +
            <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
 +
            <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>
 +
            <!-- Insert content for masthead-->
 +
        </div>
 +
    </div>
 +
</div> <!-- /masthead-->
  
−
<body class="container-fluid">
+
<br>
 +
<div id="before-content"></div>
 
<div class="container">
 
<div class="container">
−
 
+
<div class="row"> <!--Must sorround both content and sidebar-->
−
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
    <div class="col-md-9"> <!-- left-->
−
    <div class="hovereffect">
+
        <div id="overview">
−
         <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Gallet_clamshell_600x600_movement.jpg">
+
         <h1>Overview</h1>
−
<h2>The problem</h2>      
+
            <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="overlay">
+
            </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><p>
−
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
+
            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>
−
</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>
+
       
−
</div>
+
        <div id="bronze">
−
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
        <h1>Bronze</h1>
−
    <div class="hovereffect">
+
            <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.
−
        <img class="img-responsive" src="http://silencetv.com/blog/wp-content/uploads/2011/07/Icons004-600x600.jpg">
+
            </p><p>
−
        <div class="overlay">
+
            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.
−
                      <h2>The solution</h2>
+
            </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>
−
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 clicking the arrow.
+
−
</p>
+
 
         </div>
 
         </div>
−
     </div>
+
        <div id="silver">
 +
        <h1>Silver</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 id="gold">
 +
        <h1>Gold</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> <!-- /LEFT -->
 +
   
 +
    <!-- RIGHT-->
 +
    <div class="col-md-3 hidden-sm hidden-xs" id="myScrollspy">
 +
        <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>
 +
</div> <!-- /CONTENT-->
 +
</div> <!-- /BODY-->
  
  
−
</body>
 
  
 
</html>
 
</html>

Latest revision as of 17:12, 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