|
|
Line 1: |
Line 1: |
− | <html> | + | <!DOCTYPE html> |
− | <head lang="en"> | + | <html lang="en"> |
− | <meta charset="UTF-8">
| + | <head> |
− | <title></title>
| + | <meta charset="utf-8"> |
| + | <title>Team</title> |
| + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| + | <meta name="description" content=""> |
| + | <meta name="author" content=""> |
| | | |
− | <link rel="stylesheet" href="/Team:DTU-Denmark/test/bootstrap.css?action=raw&ctype=text/css" type="text/css" />
| + | <!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /--> |
− | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
| + | <!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /--> |
− | <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
| + | <!--script src="js/less-1.3.3.min.js"></script--> |
− | <link rel="stylesheet" href="/Team:DTU-Denmark/test/wiki.css?action=raw&ctype=text/css" type="text/css" />
| + | <!--append ‘#!watch’ to the browser URL, then refresh the page. --> |
| + | |
| + | <link href="/Team:DTU-Denmark/test/css/bootstrap.css" rel="stylesheet"> |
| + | <!--link href="/Team:DTU-Denmark/test/css/style.css" rel="stylesheet"--> |
| | | |
− | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
| + | <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> |
− | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
| + | <!--[if lt IE 9]> |
− | <script src="/Team:DTU-Denmark/test/bootstrap.js?action=raw&ctype=text/js"></script> | + | <script src="j/Team:DTU-Denmark/test/js/html5shiv.js"></script> |
− | <style>
| + | <![endif]--> |
− | .timeline {
| + | |
− | list-style: none;
| + | |
− | padding: 20px 0 20px;
| + | |
− | position: relative;
| + | |
− | }
| + | |
| | | |
− | .timeline:before {
| + | |
− | top: 0;
| + | <script type="text/javascript" src="/Team:DTU-Denmark/test/js/jquery.min.js"></script> |
− | bottom: 0;
| + | <script type="text/javascript" src="/Team:DTU-Denmark/test/js/bootstrap.min.js"></script> |
− | position: absolute;
| + | <!--script type="text/javascript" src="/Team:DTU-Denmark/test/js/scripts.js"--></script> |
− | 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> | | </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="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="/Team:DTU-Denmark/test">Main</a></li><li ><a class="wee" href="/Team:DTU-Denmark/test/Team">Team</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"> | + | <body> |
− | <div class="container">
| + | <div class="container"> |
− | <ul class="nav navbar-nav">
| + | <div class="row clearfix"> |
− | <li><a class="page-scroll" href="#Members">Members</a></li>
| + | <div class="col-md-12 column"> |
− | </ul>
| + | <div class="page-header"> |
− | </div>
| + | <h1> |
− | </nav> | + | Modular Biosynthesis <small>Technical University of Denmark</small> |
− | <section class="intro-header" style="background-image: url(/static/);"> | + | </h1> |
− | <div class="intro-message">
| + | </div> |
− | <!--div class="igem-logo col-md-12">
| + | <nav class="navbar navbar-default" role="navigation"> |
− | <a href="https://igem.org" target="_blank">
| + | <div class="navbar-header"> |
− | <img src="/img/Igemlogo_officiallogo.png">
| + | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> |
− | </a>
| + | <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span> |
− | </div-->
| + | <span class="icon-bar"></span> |
− | <div class="container">
| + | <span class="icon-bar"></span> |
− | <div class="row intro-text">
| + | </button> |
− | <div class="col-md-12">
| + | <a class="navbar-brand" href="#">DTU</a> |
− |
| + | </div> |
− |
| + | |
− | <h1>Team</h1> | + | <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> |
− |
| + | <ul class="nav navbar-nav"> |
− | <hr />
| + | |
− | <ul class="list-inline intro-social-buttons">
| + | |
| | | |
− | <li>
| + | <li> |
− | <a id="Members-submenu" class="btn btn-default btn-transparent btn-lg page-scroll" href="#Members">Members</a>
| + | <a href="/">Main</a> |
− | </li>
| + | </li> |
| | | |
− | <!--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>
| + | <a href="/Team">Team</a> |
− | </li>
| + | </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>
| + | </ul> |
− | </li>
| + | </div> |
− | <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>
| + | </nav> |
− | </li-->
| + | </div> |
− | </ul>
| + | </div> |
− |
| + | <div class="row clearfix"> |
− | </div>
| + | |
| + | |
| + | <div class="col-md-12 column"> |
| + | <h2> |
| + | Members |
| + | </h2> |
| + | |
| + | |
| + | |
| + | <div class="row"> |
| + | <div class="col-md-12"> |
| + | <h3>Member1</h3> |
| </div> | | </div> |
− | <div class="row"> | + | <div class="col-md-2"> |
− | <div class="col-md-12">
| + | <img src="/Team:DTU-Denmark/test/img/default-avatar.png" class="img-circle" style="width: 100px;"> |
− | Scroll down for more<br>
| + | |
− | <a href="#Members" class="btn btn-circle page-scroll"> | + | |
− | <i class="fa fa-angle-double-down"></i>
| + | |
− | </a>
| + | |
− | </div>
| + | |
| </div> | | </div> |
− | </div>
| + | <div class="col-md-10"> |
− | </div>
| + | <p>Hi</p> |
− | </section> | + | |
| | | |
| + | <p>I am Member 1.</p> |
| | | |
| + | <p>I can write <strong>bold</strong> text</p> |
| | | |
− | | + | </div> |
− | | + | </div> |
− | | + | |
− | | + | |
− | <section class="main" id="Members"> | + | |
− | <div class="container">
| + | |
| <div class="row"> | | <div class="row"> |
| <div class="col-md-12"> | | <div class="col-md-12"> |
− | <h2>Members</h2>
| + | <h3 class="text-right">Member 2</h3> |
− |
| + | |
− |
| + | |
| </div> | | </div> |
− | </div>
| + | <div class="col-md-10"> |
− | </div>
| + | <p>Hi there</p> |
− | </section> | + | |
| | | |
| + | <p>My name is Member 2</p> |
| | | |
− | | + | </div> |
− | <footer class="container">
| + | <div class="col-md-2"> |
− | <div class="row">
| + | <img src="/Team:DTU-Denmark/test/img/default-avatar.png" class="img-circle" style="width: 100px;"> |
− | <div class="col-md-2 col-md-offset-2">
| + | </div> |
− | <a href="http://www.dtu.dk" target="_blank">
| + | |
− | <img src="https://static.igem.org/mediawiki/2014/d/de/DTU-Denmark-DTUlogo.png" 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="/img/igemlogo_officiallogo.png" height="90px">
| + | |
− | </a> | + | |
| </div> | | </div> |
− | </div> | + | |
− | </footer>
| + | |
− | <script> | + | </div> |
− | $(document).ready(function() {
| + | |
− | $('body').scrollspy({target: '.extrabar',
| + | </div> |
− | offset: 60})
| + | </div> |
− | // 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> |