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

(Replaced content with "testing")
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
<!DOCTYPE html>
+
testing
<html>
+
<head lang="en">
+
    <meta charset="UTF-8">
+
    <title></title>
+
 
+
    <link rel="stylesheet" href="/css/bootstrap.css">
+
    <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="http://www.taosciences.it/ssbss2015/css/main.new.css"-->
+
    <link rel="stylesheet" href="/css/wiki.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="/js/bootstrap.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="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 href="/Team:DTU-Denmark">Main</a></li><li ><a href="/Team:DTU-Denmark/Team">Team</a></li><li ><a href="/Team:DTU-Denmark/Research">Research</a></li><li ><a href="/Team:DTU-Denmark/Modelling">Modelling</a></li><li ><a href="/Team:DTU-Denmark/Cooperation">Cooperation</a></li><li ><a href="/Team:DTU-Denmark/Outreach">Outreach</a></li><li ><a href="/Team:DTU-Denmark/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="#About">About the Team</a></li><li><a class="page-scroll" href="#Members">Members</a></li>
+
        </ul>
+
    </div>
+
</nav>
+
<section class="intro-header" style="background-image: url(/img/dna.jpg);">
+
    <div class="intro-message">
+
        <!--div class="igem-logo col-md-12">
+
            <a href="https://igem.org" target="_blank">
+
                <img src="/img/Igemlogo_officiallogo.png">
+
            </a>
+
        </div-->
+
        <div class="container">
+
            <div class="row intro-text">
+
                <div class="col-md-12">
+
                   
+
                   
+
                    <h1>Team</h1>
+
                   
+
                    <hr />
+
                    <ul class="list-inline intro-social-buttons">
+
                       
+
                        <li>
+
                            <a id="About-submenu" class="btn btn-default btn-transparent btn-lg page-scroll" href="#About">About the Team</a>
+
                        </li>
+
                       
+
                        <li>
+
                            <a id="Members-submenu" class="btn btn-default btn-transparent btn-lg page-scroll" href="#Members">Members</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="#About" class="btn btn-circle page-scroll">
+
                    <i class="fa fa-angle-double-down"></i>
+
                </a>
+
                </div>
+
            </div>
+
        </div>
+
    </div>
+
</section>
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
<section class="main" id="About">
+
    <div class="container">
+
        <div class="row">
+
            <div class="col-lg-12">
+
                <h2>About the Team</h2>
+
                <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">Just testing some different things</div>
+
 
+
<p><img alt="" src="http://localhost:5000/img/448755a-f1.2.jpg" style="display:block; margin-left:auto; margin-right:auto" /></p>
+
 
+
<p>&nbsp;</p>
+
 
+
<p>&nbsp;</p>
+
 
+
<p>vilhelm is a <strong>noob!</strong></p>
+
 
+
            </div>
+
        </div>
+
    </div>
+
</section>
+
 
+
 
+
 
+
 
+
<div class="img" style="background-image: url(/img/hero.jpg);">
+
    <h4 class="img-title">Nulla vitae elit libero, a pharetra augue mollis interdum.</h4>
+
</div>
+
 
+
 
+
<section class="main" id="Members">
+
    <div class="container">
+
        <div class="row">
+
            <div class="col-md-12">
+
                <h2>Members</h2>
+
                <p>List of members</p>
+
 
+
               
+
               
+
                <div class="row">
+
                    <div class="col-md-12">
+
                    <h3>Mads Anderson</h3>
+
                    </div>
+
                    <div class="col-md-2">
+
                        <img src="/img/448755a-f1.2.jpg" class="member-image img-circle">
+
                    </div>
+
                    <div class="col-md-10">
+
                        <!--dl class="dl-horizontal">
+
                            <dt>Definition list</dt>
+
                            <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+
                                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+
                                commodo consequat.</dd>
+
                            <dt>Lorem ipsum dolor sit amet</dt>
+
                            <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+
                                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+
                                commodo consequat.</dd>
+
                        </dl-->
+
                        <p>Hejsa</p>
+
 
+
<p>&nbsp;</p>
+
 
+
<p>Fint</p>
+
 
+
                    </div>
+
                </div>
+
               
+
               
+
               
+
                <div class="row">
+
                    <div class="col-md-12">
+
                    <h3 class="text-right">Vilhelm</h3>
+
                    </div>
+
                    <div class="col-md-10">
+
                        <!--dl class="dl-horizontal">
+
                            <dt>Definition list</dt>
+
                            <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+
                                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+
                                commodo consequat.</dd>
+
                            <dt>Lorem ipsum dolor sit amet</dt>
+
                            <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+
                                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+
                                commodo consequat.</dd>
+
                        </dl-->
+
                        <p>I&#39;m the team noob</p>
+
 
+
                    </div>
+
                    <div class="col-md-2">
+
                        <img src="/img/dna.jpg" class="member-image img-circle">
+
                    </div>
+
                </div>
+
               
+
               
+
            </div>
+
        </div>
+
    </div>
+
</section>
+
 
+
 
+
 
+
<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="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>
+
</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>
+
</html>
+

Latest revision as of 13:11, 2 August 2015

testing