Difference between revisions of "Team:BOKU-Vienna"

Line 1: Line 1:
−
<html>
+
<!DOCTYPE html>
−
 
+
<html lang="en">
−
<style>
+
−
  .intro {
+
−
    display: table;
+
−
    width: 100%;
+
−
    height: auto;
+
−
    padding: 100px 0;
+
−
    text-align: center;
+
−
    color: black;
+
−
    background: url(plastic.jpg) no-repeat bottom center scroll;
+
−
    background-color: black;
+
−
    -webkit-background-size: cover;
+
−
    -moz-background-size: cover;
+
−
    background-size: cover;
+
−
    -o-background-size: cover;
+
−
  }
+
−
</style>
+
  
 +
<head>
 +
 +
    <meta charset="utf-8">
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <meta name="description" content="">
 +
    <meta name="author" content="">
 +
 +
    <title>D.I.V.E.R.T.</title>
 +
 +
    <!-- Bootstrap Core CSS -->
 +
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:BOKU-Vienna/bootstrap.css?action=raw&ctype=text/css" />
 +
 +
 +
    <!-- Theme CSS -->
 +
    <style>
 +
    /*!
 +
    * Start Bootstrap - Grayscale v3.3.7+1 (http://startbootstrap.com/template-overviews/grayscale)
 +
    * Copyright 2013-2016 Start Bootstrap
 +
    * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 +
    */
 +
    body {
 +
      width: 100%;
 +
      height: 100%;
 +
      font-family: Tahoma, Geneva, sans-serif;
 +
      color: white;
 +
      background-color: black;
 +
    }
 +
    html {
 +
      width: 100%;
 +
      height: 100%;
 +
    }
 +
    h1,
 +
    h2,
 +
    h3,
 +
    h4,
 +
    h5,
 +
    h6 {
 +
      margin: 0 0 35px;
 +
      text-transform: uppercase;
 +
      font-family: Tahoma, Geneva, sans-serif;
 +
      font-weight: 700;
 +
      letter-spacing: 1px;
 +
    }
 +
    p {
 +
      margin: 0 0 25px;
 +
      font-size: 18px;
 +
      line-height: 1.5;
 +
    }
 +
    @media (min-width: 768px) {
 +
      p {
 +
        margin: 0 0 35px;
 +
        font-size: 20px;
 +
        line-height: 1.6;
 +
      }
 +
    }
 +
    a {
 +
      color: #42DCA3;
 +
      -webkit-transition: all 0.2s ease-in-out;
 +
      -moz-transition: all 0.2s ease-in-out;
 +
      transition: all 0.2s ease-in-out;
 +
    }
 +
    a:hover,
 +
    a:focus {
 +
      text-decoration: none;
 +
      color: #1d9b6c;
 +
    }
 +
    .light {
 +
      font-weight: 400;
 +
    }
 +
    .navbar-custom {
 +
      margin-bottom: 0;
 +
      border-bottom: 0px solid rgba(255, 255, 255, 0.3);
 +
      text-transform: uppercase;
 +
      font-family: Tahoma, Geneva, sans-serif;
 +
      background-color: black;
 +
    }
 +
    .navbar-custom .navbar-toggle {
 +
      color: white;
 +
      background-color: rgba(255, 255, 255, 0.2);
 +
      font-size: 12px;
 +
    }
 +
    .navbar-custom .navbar-toggle:focus,
 +
    .navbar-custom .navbar-toggle:active {
 +
      outline: none;
 +
    }
 +
    .navbar-custom .navbar-brand {
 +
      font-weight: 700;
 +
    }
 +
    .navbar-custom .navbar-brand img {
 +
      height: 40px;
 +
    }
 +
    .navbar-custom .navbar-brand:focus {
 +
      outline: none;
 +
    }
 +
    .navbar-custom a {
 +
      color: black;
 +
    }
 +
    .navbar-custom .nav li a {
 +
      -webkit-transition: background 0.3s ease-in-out;
 +
      -moz-transition: background 0.3s ease-in-out;
 +
      transition: background 0.3s ease-in-out;
 +
    }
 +
    .navbar-custom .nav li a:hover {
 +
      color: rgba(255, 255, 255, 0.8);
 +
      outline: none;
 +
      background-color: transparent;
 +
    }
 +
    .navbar-custom .nav li a:focus,
 +
    .navbar-custom .nav li a:active {
 +
      outline: none;
 +
      background-color: transparent;
 +
    }
 +
    .navbar-custom .nav li.active {
 +
      outline: none;
 +
    }
 +
    .navbar-custom .nav li.active a {
 +
      background-color: rgba(255, 255, 255, 0.3);
 +
    }
 +
    .navbar-custom .nav li.active a:hover {
 +
      color: white;
 +
    }
 +
    @media (min-width: 768px) {
 +
      .navbar-custom {
 +
        padding: 20px 0;
 +
        border-bottom: none;
 +
        letter-spacing: 1px;
 +
        background: transparent;
 +
        -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
 +
        -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
 +
        transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
 +
      }
 +
      .navbar-custom.top-nav-collapse {
 +
        padding: 0;
 +
        background: black;
 +
        border-bottom: 0px solid rgba(255, 255, 255, 0.3);
 +
      }
 +
    }
 +
    .intro {
 +
      display: table;
 +
      width: 100%;
 +
      height: auto;
 +
      padding: 100px 0;
 +
      text-align: center;
 +
      color: black;
 +
      background: url(plastic.jpg) no-repeat bottom center scroll;
 +
      background-color: black;
 +
      -webkit-background-size: cover;
 +
      -moz-background-size: cover;
 +
      background-size: cover;
 +
      -o-background-size: cover;
 +
    }
 +
    .intro .intro-body {
 +
      display: table-cell;
 +
      vertical-align: middle;
 +
    }
 +
    .intro .intro-body .brand-heading {
 +
      font-size: 40px;
 +
    }
 +
    .intro .intro-body .intro-text {
 +
      font-size: 18px;
 +
      font-family: Tahoma, Geneva, sans-serif;
 +
    }
 +
    @media (min-width: 768px) {
 +
      .intro {
 +
        height: 100%;
 +
        padding: 0;
 +
      }
 +
      .intro .intro-body .brand-heading {
 +
        font-size: 100px;
 +
      }
 +
      .intro .intro-body .intro-text {
 +
        font-size: 26px;
 +
      }
 +
    }
 +
    .btn-circle {
 +
      width: 70px;
 +
      height: 70px;
 +
      margin-top: 15px;
 +
      padding: 7px 16px;
 +
      border: 2px solid black;
 +
      border-radius: 100% !important;
 +
      font-size: 40px;
 +
      color: black;
 +
      background: transparent;
 +
      -webkit-transition: background 0.3s ease-in-out;
 +
      -moz-transition: background 0.3s ease-in-out;
 +
      transition: background 0.3s ease-in-out;
 +
    }
 +
    .btn-circle:hover,
 +
    .btn-circle:focus {
 +
      outline: none;
 +
      color: white;
 +
      background: rgba(255, 255, 255, 0.1);
 +
    }
 +
    .btn-circle i.animated {
 +
      -webkit-transition-property: -webkit-transform;
 +
      -webkit-transition-duration: 1s;
 +
      -moz-transition-property: -moz-transform;
 +
      -moz-transition-duration: 1s;
 +
    }
 +
    .btn-circle:hover i.animated {
 +
      -webkit-animation-name: pulse;
 +
      -moz-animation-name: pulse;
 +
      -webkit-animation-duration: 1.5s;
 +
      -moz-animation-duration: 1.5s;
 +
      -webkit-animation-iteration-count: infinite;
 +
      -moz-animation-iteration-count: infinite;
 +
      -webkit-animation-timing-function: linear;
 +
      -moz-animation-timing-function: linear;
 +
    }
 +
    @-webkit-keyframes pulse {
 +
      0% {
 +
        -webkit-transform: scale(1);
 +
        transform: scale(1);
 +
      }
 +
      50% {
 +
        -webkit-transform: scale(1.2);
 +
        transform: scale(1.2);
 +
      }
 +
      100% {
 +
        -webkit-transform: scale(1);
 +
        transform: scale(1);
 +
      }
 +
    }
 +
    @-moz-keyframes pulse {
 +
      0% {
 +
        -moz-transform: scale(1);
 +
        transform: scale(1);
 +
      }
 +
      50% {
 +
        -moz-transform: scale(1.2);
 +
        transform: scale(1.2);
 +
      }
 +
      100% {
 +
        -moz-transform: scale(1);
 +
        transform: scale(1);
 +
      }
 +
    }
 +
    .content-section {
 +
      padding-top: 100px;
 +
      height: 100%;
 +
    }
 +
 +
    #map {
 +
      width: 100%;
 +
      height: 200px;
 +
      margin-top: 100px;
 +
    }
 +
    @media (min-width: 767px) {
 +
      .content-section {
 +
        height: 100%;
 +
        padding-top: 250px;
 +
      }
 +
      .download-section {
 +
        padding: 100px 0;
 +
      }
 +
      #map {
 +
        height: 400px;
 +
        margin-top: 250px;
 +
      }
 +
    }
 +
    .btn {
 +
      text-transform: uppercase;
 +
      font-family: Tahoma, Geneva, sans-serif;
 +
      font-weight: 400;
 +
      -webkit-transition: all 0.3s ease-in-out;
 +
      -moz-transition: all 0.3s ease-in-out;
 +
      transition: all 0.3s ease-in-out;
 +
      border-radius: 0;
 +
    }
 +
    .btn-default {
 +
      border: 1px solid #42DCA3;
 +
      color: #42DCA3;
 +
      background-color: transparent;
 +
    }
 +
    .btn-default:hover,
 +
    .btn-default:focus {
 +
      border: 1px solid #42DCA3;
 +
      outline: none;
 +
      color: black;
 +
      background-color: #42DCA3;
 +
    }
 +
    ul.banner-social-buttons {
 +
      margin-top: 0;
 +
    }
 +
    @media (max-width: 1199px) {
 +
      ul.banner-social-buttons {
 +
        margin-top: 15px;
 +
      }
 +
    }
 +
    @media (max-width: 767px) {
 +
      ul.banner-social-buttons li {
 +
        display: block;
 +
        margin-bottom: 20px;
 +
        padding: 0;
 +
      }
 +
      ul.banner-social-buttons li:last-child {
 +
        margin-bottom: 0;
 +
      }
 +
    }
 +
    footer {
 +
      padding: 50px 0;
 +
    }
 +
    footer p {
 +
      margin: 0;
 +
    }
 +
    ::-moz-selection {
 +
      text-shadow: none;
 +
      background: #fcfcfc;
 +
      background: rgba(255, 255, 255, 0.2);
 +
    }
 +
    ::selection {
 +
      text-shadow: none;
 +
      background: #fcfcfc;
 +
      background: rgba(255, 255, 255, 0.2);
 +
    }
 +
    img::selection {
 +
      background: transparent;
 +
    }
 +
    img::-moz-selection {
 +
      background: transparent;
 +
    }
 +
    body {
 +
      webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
 +
    }
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
    .scrollnav-custom {
 +
      margin-bottom: 0;
 +
      border-bottom: 0px solid rgba(255, 255, 255, 0.3);
 +
      font-family: Tahoma, Geneva, sans-serif
 +
      background-color: black;
 +
    }
 +
    .scrollnav-custom .scrollnav-toggle {
 +
      color: white;
 +
      background-color: rgba(255, 255, 255, 0.2);
 +
      font-size: 12px;
 +
    }
 +
    .scrollnav-custom .scrollnav-toggle:focus,
 +
    .scrollnav-custom .scrollnav-toggle:active {
 +
      outline: none;
 +
    }
 +
    .scrollnav-custom .scrollnav-brand {
 +
      font-weight: 700;
 +
    }
 +
    .scrollnav-custom .scrollnav-brand img {
 +
      height: 40px;
 +
    }
 +
    .scrollnav-custom .scrollnav-brand:focus {
 +
      outline: none;
 +
    }
 +
    .scrollnav-custom a {
 +
      color: white;
 +
    }
 +
    .scrollnav-custom .nav li a {
 +
      -webkit-transition: background 0.3s ease-in-out;
 +
      -moz-transition: background 0.3s ease-in-out;
 +
      transition: background 0.3s ease-in-out;
 +
    }
 +
    .scrollnav-custom .nav li a:hover {
 +
      color: rgba(255, 255, 255, 0.8);
 +
      outline: none;
 +
      background-color: transparent;
 +
    }
 +
    .scrollnav-custom .nav li a:focus,
 +
    .scrollnav-custom .nav li a:active {
 +
      outline: none;
 +
      background-color: transparent;
 +
    }
 +
    .scrollnav-custom .nav li.active {
 +
      outline: none;
 +
    }
 +
    .scrollnav-custom .nav li.active a {
 +
      background-color: rgba(255, 255, 255, 0.3);
 +
    }
 +
    .scrollnav-custom .nav li.active a:hover {
 +
      color: white;
 +
    }
 +
    @media (min-width: 768px) {
 +
      .scrollnav-custom {
 +
        padding: 0;
 +
        letter-spacing: 1px;
 +
        background: black;
 +
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 +
      }
 +
    }
 +
    .navbar-brand img {
 +
      height: 100%;
 +
    }
 +
    .sponsor-section {
 +
      background-color: white;
 +
      color: black;
 +
    }
 +
    </style>
 +
 +
 +
</head>
  
 
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
 
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
Line 67: Line 457:
 
         <!-- /.container -->
 
         <!-- /.container -->
 
     </nav>
 
     </nav>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  
Line 148: Line 549:
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
−
  </body>
 
  
−
  </html>
+
    <!-- jQuery -->
 +
    <script src="https://2017.igem.org/common/jquery-latest.min.js"></script>
 +
 
 +
    <!-- Bootstrap Core JavaScript -->
 +
    <script type="text/javascript" src="https://2017.igem.org/Template:BOKU-Vienna/bootstrap.js?action=raw&ctype=text/javascript"></script>
 +
 
 +
    <!-- Plugin JavaScript -->
 +
    <script type="text/javascript" src="https://2017.igem.org/Template:BOKU-Vienna/jquers.easing.min.js?action=raw&ctype=text/javascript"></script>
 +
 
 +
 
 +
    <!-- Theme JavaScript -->
 +
    <script>
 +
    // jQuery to collapse the navbar on scroll
 +
    function collapseNavbar() {
 +
        if ($(".navbar").offset().top > 50) {
 +
            $(".navbar-fixed-top").addClass("top-nav-collapse");
 +
            $(".navbar-custom a").css("color", "white");
 +
            $(".navbar-fixed-bottom").show();
 +
        } else {
 +
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
 +
            $(".navbar-custom a").css("color", "black");
 +
            $(".navbar-fixed-bottom").hide();
 +
        }
 +
    }
 +
 
 +
    $(window).scroll(collapseNavbar);
 +
    $(document).ready(collapseNavbar);
 +
 
 +
    // 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();
 +
        });
 +
    });
 +
 
 +
    // Closes the Responsive Menu on Menu Item Click
 +
    $('.navbar-collapse ul li a').click(function() {
 +
        $(".navbar-collapse").collapse('hide');
 +
    });
 +
 
 +
 
 +
    </script>
 +
 
 +
</body>
 +
 
 +
</html>

Revision as of 14:26, 17 June 2017

<!DOCTYPE html> D.I.V.E.R.T.

D.I.V.E.R.T.

The Next Step of Evolution.
Created by BOKU Vienna.

Welcome

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Sponsors

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.