Difference between revisions of "Team:DTU-Denmark/test"
Line 1: | Line 1: | ||
− | <html lang="en"> | + | <html> |
− | + | <head lang="en"> | |
− | + | <meta charset="UTF-8"> | |
− | + | <title></title> | |
− | + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> | |
− | + | <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |
− | + | <link rel="stylesheet" href="/Team:DTU-Denmark/test/files/css/wiki.css" type="text/css" /> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
− | + | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> | |
− | <script src=" | + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> |
− | + | <style> | |
+ | .timeline { | ||
+ | list-style: none; | ||
+ | padding: 20px 0 20px; | ||
+ | position: relative; | ||
+ | } | ||
− | + | .timeline:before { | |
− | + | top: 0; | |
− | + | bottom: 0; | |
− | + | position: absolute; | |
− | + | content: " "; | |
− | + | width: 3px; | |
− | + | background-color: #eeeeee; | |
− | + | left: 50%; | |
− | + | margin-left: -1.5px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .timeline > li { | ||
+ | margin-bottom: 20px; | ||
+ | position: relative; | ||
+ | } | ||
+ | .timeline > li:before, | ||
+ | .timeline > li:after { | ||
+ | content: " "; | ||
+ | display: table; | ||
+ | } | ||
− | < | + | .timeline > li:after { |
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .timeline > li:before, | ||
+ | .timeline > li:after { | ||
+ | content: " "; | ||
+ | display: table; | ||
+ | } | ||
+ | |||
+ | .timeline > li:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .timeline > li > .timeline-panel { | ||
+ | width: 46%; | ||
+ | float: left; | ||
+ | border: 1px solid #d4d4d4; | ||
+ | border-radius: 2px; | ||
+ | padding: 20px; | ||
+ | position: relative; | ||
+ | -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); | ||
+ | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); | ||
+ | } | ||
+ | |||
+ | .timeline > li > .timeline-panel:before { | ||
+ | position: absolute; | ||
+ | top: 26px; | ||
+ | right: -15px; | ||
+ | display: inline-block; | ||
+ | border-top: 15px solid transparent; | ||
+ | border-left: 15px solid #ccc; | ||
+ | border-right: 0 solid #ccc; | ||
+ | border-bottom: 15px solid transparent; | ||
+ | content: " "; | ||
+ | } | ||
+ | |||
+ | .timeline > li > .timeline-panel:after { | ||
+ | position: absolute; | ||
+ | top: 27px; | ||
+ | right: -14px; | ||
+ | display: inline-block; | ||
+ | border-top: 14px solid transparent; | ||
+ | border-left: 14px solid #fff; | ||
+ | border-right: 0 solid #fff; | ||
+ | border-bottom: 14px solid transparent; | ||
+ | content: " "; | ||
+ | } | ||
+ | |||
+ | .timeline > li > .timeline-badge { | ||
+ | color: #fff; | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | line-height: 50px; | ||
+ | font-size: 1.4em; | ||
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | top: 16px; | ||
+ | left: 50%; | ||
+ | margin-left: -25px; | ||
+ | background-color: #999999; | ||
+ | z-index: 100; | ||
+ | border-top-right-radius: 50%; | ||
+ | border-top-left-radius: 50%; | ||
+ | border-bottom-right-radius: 50%; | ||
+ | border-bottom-left-radius: 50%; | ||
+ | } | ||
+ | |||
+ | .timeline > li.timeline-inverted > .timeline-panel { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | .timeline > li.timeline-inverted > .timeline-panel:before { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 15px; | ||
+ | left: -15px; | ||
+ | right: auto; | ||
+ | } | ||
+ | |||
+ | .timeline > li.timeline-inverted > .timeline-panel:after { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 14px; | ||
+ | left: -14px; | ||
+ | right: auto; | ||
+ | } | ||
+ | |||
+ | .timeline-badge.primary { | ||
+ | background-color: #2e6da4 !important; | ||
+ | } | ||
+ | |||
+ | .timeline-badge.success { | ||
+ | background-color: #3f903f !important; | ||
+ | } | ||
+ | |||
+ | .timeline-badge.warning { | ||
+ | background-color: #f0ad4e !important; | ||
+ | } | ||
+ | |||
+ | .timeline-badge.danger { | ||
+ | background-color: #d9534f !important; | ||
+ | } | ||
+ | |||
+ | .timeline-badge.info { | ||
+ | background-color: #5bc0de !important; | ||
+ | } | ||
+ | |||
+ | .timeline-title { | ||
+ | margin-top: 0; | ||
+ | color: inherit; | ||
+ | } | ||
+ | |||
+ | .timeline-body > p, | ||
+ | .timeline-body > ul { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | .timeline-body > p + p { | ||
+ | margin-top: 5px; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 767px) { | ||
+ | ul.timeline:before { | ||
+ | left: 40px; | ||
+ | } | ||
+ | |||
+ | ul.timeline > li > .timeline-panel { | ||
+ | width: calc(100% - 90px); | ||
+ | width: -moz-calc(100% - 90px); | ||
+ | width: -webkit-calc(100% - 90px); | ||
+ | } | ||
+ | |||
+ | ul.timeline > li > .timeline-badge { | ||
+ | left: 15px; | ||
+ | margin-left: 0; | ||
+ | top: 16px; | ||
+ | } | ||
+ | |||
+ | ul.timeline > li > .timeline-panel { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | ul.timeline > li > .timeline-panel:before { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 15px; | ||
+ | left: -15px; | ||
+ | right: auto; | ||
+ | } | ||
+ | |||
+ | ul.timeline > li > .timeline-panel:after { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 14px; | ||
+ | left: -14px; | ||
+ | right: auto; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <body data-spy="scroll" data-target="#test"> | ||
+ | |||
+ | <!-- Navigation --> | ||
+ | <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> | ||
+ | <!-- Brand and toggle get grouped for better mobile display --> | ||
<div class="container"> | <div class="container"> | ||
− | <div class=" | + | <div class="navbar-header"> |
− | < | + | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> |
− | < | + | <span class="sr-only">Toggle navigation</span> |
− | < | + | <span class="icon-bar"></span> |
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | </button> | ||
+ | <a class="navbar-brand" href="#">DTU</a> | ||
+ | </div> | ||
+ | <!-- Collect the nav links, forms, and other content for toggling --> | ||
+ | <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | |||
+ | <li > | ||
+ | <a class="wee" href="/">Home</a> | ||
+ | </li> | ||
+ | |||
+ | <li > | ||
+ | <a class="wee" href="/Team">Team</a> | ||
+ | </li> | ||
+ | |||
+ | <li > | ||
+ | <a class="wee" href="/Project">Project</a> | ||
+ | </li> | ||
+ | |||
+ | <li > | ||
+ | <a class="wee" href="/Collaborations">Collaborations</a> | ||
+ | </li> | ||
+ | |||
+ | <li > | ||
+ | <a class="wee" href="/Practices">Human Practices</a> | ||
+ | </li> | ||
+ | |||
+ | <li > | ||
+ | <a class="wee" href="/Journal">Journal</a> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | <!--ul class="nav navbar-nav navbar-right"> | ||
+ | <li><a href="#">Link</a></li> | ||
+ | </ul--> | ||
+ | </div><!-- /.navbar-collapse --> | ||
+ | </div> | ||
+ | </nav> | ||
+ | |||
+ | |||
+ | <nav class="navbar navbar-default extrabar hidden hidden-xs hidden-sm" id="test" data-spy="affix"> | ||
+ | <div class="container"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li><a class="page-scroll" href="#Section">Section</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </nav> | ||
+ | <section class="intro-header" style="background-image: url(/Team:DTU-Denmark/test/files/img/dna.jpg);"> | ||
+ | <div class="intro-message"> | ||
+ | <!--div class="igem-logo col-md-12"> | ||
+ | <a href="https://igem.org" target="_blank"> | ||
+ | <img src="</html>{{filepath:Igemlogo_officiallogo.png|nowiki}}<html>"> | ||
+ | </a> | ||
+ | </div--> | ||
+ | <div class="container"> | ||
+ | <div class="row intro-text"> | ||
+ | <div class="col-md-12"> | ||
+ | |||
+ | |||
+ | <h1>Lorem ipsum dolor sit amet</h1> | ||
+ | <h3>Technical University of Denmark</h3> | ||
+ | |||
+ | <hr /> | ||
+ | <ul class="list-inline intro-social-buttons"> | ||
+ | |||
+ | <li> | ||
+ | <a id="Section-submenu" class="btn btn-default btn-transparent btn-lg page-scroll" href="#Section">Section</a> | ||
+ | </li> | ||
+ | |||
+ | <!--li> | ||
+ | <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-transparent btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-transparent btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#" class="btn btn-default btn-transparent btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a> | ||
+ | </li--> | ||
+ | </ul> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-12"> | ||
+ | Scroll down for more<br> | ||
+ | <a href="#Section" class="btn btn-circle page-scroll"> | ||
+ | <i class="fa fa-angle-double-down"></i> | ||
+ | </a> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</section> | </section> | ||
+ | <div class="container"> | ||
+ | |||
+ | |||
+ | <div class="row col-md-12 column"> | ||
+ | <h2> | ||
+ | Section | ||
+ | </h2> | ||
+ | <p>Writing some stuff</p> | ||
− | |||
− | |||
</div> | </div> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | <footer class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-2 col-md-offset-2"> | ||
+ | <a href="http://www.dtu.dk" target="_blank"> | ||
+ | <img src="</html>{{filepath:DTU-Denmark-DTUlogo.png|nowiki}}<html>" height="130px"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="col-md-4"> | ||
+ | <address> | ||
+ | <strong>Technical University of Denmark</strong><br> | ||
+ | Department of Systems Biology <br> | ||
+ | Søltofts Plads 221 <br> | ||
+ | 2800 Kgs. Lyngby<br> | ||
+ | Denmark<br> | ||
+ | <abbr title="Phone">P:</abbr> +45 45 25 25 25<br> | ||
+ | <abbr title="Mail">M:</abbr> <a class="dtured" href="mailto:dtuigem14@gmail.com">dtuigem14@gmail.com</a> | ||
+ | </address> | ||
+ | </div> | ||
+ | <div class="col-md-2"> | ||
+ | <a href="https://igem.org" style="float:left" target="_blank"> | ||
+ | <img src="</html>{{filepath:Igemlogo_officiallogo.png|nowiki}}<html>" height="90px"> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </footer> | ||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | $('body').scrollspy({target: '.extrabar', | ||
+ | offset: 60}) | ||
+ | // jQuery to collapse the navbar on scroll | ||
+ | $(window).scroll(function () { | ||
+ | if ($(".navbar").offset().top > $(".intro-header").height()) { | ||
+ | $(".navbar-fixed-top").addClass("top-nav-collapse"); | ||
+ | $(".extrabar").removeClass("hidden"); | ||
+ | } else { | ||
+ | $(".navbar-fixed-top").removeClass("top-nav-collapse"); | ||
+ | $(".extrabar").addClass("hidden"); | ||
+ | } | ||
+ | }); | ||
+ | // jQuery for page scrolling feature - requires jQuery Easing plugin | ||
+ | $(function () { | ||
+ | $('a.page-scroll').bind('click', function (event) { | ||
+ | var $anchor = $(this); | ||
+ | $('html, body').stop().animate({ | ||
+ | scrollTop: $($anchor.attr('href')).offset().top | ||
+ | }, 1500, 'easeInOutExpo'); | ||
+ | event.preventDefault(); | ||
+ | }); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 17:43, 18 July 2015
Section
Writing some stuff