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

 
(38 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/main.css}}
 
−
 
−
{{Team:DTU-Denmark/javascript.js}}
 
−
 
−
<html>
 
  
 +
<html lang="en">
 
<head>
 
<head>
 +
    <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;}
  
−
<style>
+
        /*@media screen and (max-width: 810px) {
−
 
+
            #overview, #medal-requirements, #bronze, #silver, #gold {
−
.row {
+
                margin-left: 150px;
−
}
+
            }
−
.col {
+
        }*/
−
background: grey;
+
    </style>
−
width: 33%;
+
−
float: left;
+
−
 
+
−
}
+
−
</style>
+
 
</head>
 
</head>
  
−
<body class="container-fluid">
+
<!-- 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-->
  
−
<div class="row">
+
<br>
−
<div class="col">col1</div>
+
<div id="before-content"></div>
−
<div class="col">col2</div>
+
<div class="container">
−
<div class="col">col3</div>
+
<div class="row"> <!--Must sorround both content and sidebar-->
−
<div class="col">col4</div>
+
    <div class="col-md-9"> <!-- left-->
−
<div class="col">col5</div>
+
        <div id="overview">
−
<div class="col">col6</div>
+
        <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 id="bronze">
 +
        <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 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> <!-- /CONTENT-->
 +
</div> <!-- /BODY-->
  
−
<h2>Test 1</h2>
 
  
  
 +
</html>
  
−
<p>
 
−
Lorem ipsum dolor sit amet, munere vulputate vis ad, at cum intellegat abhorreant, pro vidit invidunt in. Essent facete interesset mel ut, cum at stet agam gubergren, vim eripuit minimum deleniti te. Agam lucilius has et, ex laudem legendos vix. Insolens perpetua sapientem cu vis. Vis an quidam dolorem, nostrum facilisi ut cum, ea nostrud dignissim sea. No errem debitis incorrupte vim. Vel nulla partem prodesset in, cu eum munere epicuri oporteat, discere bonorum has at.
 
  
−
Cum in mentitum perfecto incorrupte, cum harum platonem ea. At eius elitr senserit mei, qui bonorum accusam cu, paulo admodum forensibus an duo. Est suas graeci delicata ei. Suas officiis ut eam. Pri vivendo docendi constituto te, duo adhuc altera scribentur at.
+
{{Team:DTU-Denmark/footer}}
−
 
+
−
Falli posidonium usu ea, mea nobis nemore constituam te. Te prima euripidis ullamcorper vis. Eu soleat doming quo, reque forensibus est an, atomorum aliquando efficiantur qui id. Mea viris salutandi ex, ea solum intellegat eos, illum mundi eam at. At mel quis novum, case utroque dignissim eu ius. Vel vitae forensibus et, usu ea dicant convenire persequeris.
+
−
 
+
−
Quo platonem convenire no. Ut vis tota salutandi, ut esse postea usu, quas nostrum eum id. In vel agam feugait, in quas elitr lobortis vel. An equidem saperet signiferumque sea, ad salutatus definiebas pro. Has maiestatis scripserit ex. Cu cum maiestatis appellantur reprehendunt. Omnes laboramus complectitur his eu.
+
−
 
+
−
Equidem accusam reformidans ad sed, ex tempor commodo gloriatur sed. Cu odio quando urbanitas eum. In nec expetenda percipitur delicatissimi, eos habeo dicant at. An case tritani accommodare vis. Cum probo dicta adipiscing ei.
+
−
 
+
−
In pro dolorum salutatus, te agam sadipscing nec. Cu his utinam platonem delicata. Ad fierent appetere delicatissimi nec, cum sanctus efficiendi in. Vidit graecis maluisset et per, persecuti constituto instructior cu eos, vix ei augue reprimique efficiendi. In abhorreant mnesarchum mei, sea cu atqui nonumy, cu mei melius eripuit splendide. Regione vivendo assueverit ei duo, cum at prodesset interpretaris, at eam vide velit corpora.
+
−
 
+
−
Mei ex nemore elaboraret, quot eirmod reprimique id has. Ut debet melius complectitur vis, eos at duis elitr. Has putant voluptatum consectetuer in. Nostrum signiferumque ut per. Ut mel ferri blandit.
+
−
 
+
−
An postea nostro cum, eos sumo ullum ex. Vel an munere temporibus referrentur, eu mutat facete vim. An est mucius delenit, vero eruditi imperdiet ea per. Inimicus suavitate intellegat pro et, nec sint tantas malorum in. Unum noster ius in, sea ad illum senserit consulatu, simul consetetur at sed.
+
−
 
+
−
Mei causae praesent te, assum luptatum instructior ne his, ex duo dictas audiam scripta. Ea nostrum salutatus disputationi vis. Cu eos vocibus consulatu maiestatis, congue debitis albucius quo ut. Laoreet facilisi vulputate pri et. Has ut putant veritus abhorreant, solum hendrerit vis ex, eam ex vero decore similique. Cu option fabulas moderatius vix.
+
−
 
+
−
Ea modo case rebum mel, ea mea graecis detracto laboramus. Nec hinc paulo tractatos ne, platonem vituperatoribus cu per, nonumes constituam te cum. Id omnesque theophrastus reprehendunt eum, nec at mutat lorem conclusionemque, no sale lorem elaboraret pro. Et wisi tota summo qui. Prima bonorum adipisci eos te, nam duis feugiat id, quo meis clita euismod et. Nullam nominati an quo, mei ad labores fuisset periculis.
+
−
 
+
−
Usu esse quas id. Id duo solet doctus nonumes, in per omnium copiosae maluisset. Eam ex brute perfecto posidonium, tempor graecis usu ea, nam ut eruditi percipit. Et quot choro inciderint vel, rebum efficiendi his id, ex sea inani impetus.
+
−
 
+
−
Ius nihil reprimique ei. Nec vidit temporibus ex, duo eius mentitum nominavi et, ex eum ludus repudiandae. Sed id tota meis patrioque, cu usu mundi integre sapientem, graeci qualisque qui et. At pri vidit suscipiantur, dicant fastidii his ei, no nam reque appareat efficiantur. Agam nibh prodesset ut has.
+
−
 
+
−
Eu modo dolore tamquam mei. Pro utinam civibus id. Adhuc nulla posidonium id ius, quo dico omnium equidem ad. In his modo iudico concludaturque.
+
−
 
+
−
At vel labores sententiae, cum enim bonorum molestiae no, feugiat invidunt theophrastus ne qui. Ei dicta efficiendi vituperatoribus cum, feugiat utroque cum id. Vis ex affert splendide, ad erant gloriatur has, est et causae iriure propriae. Molestie explicari ius at, alii singulis repudiare ei duo. Quidam nostrum vel no. </p>
+
−
 
+
−
</body>
+
−
 
+
−
</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