Difference between revisions of "Team:BOKU-Vienna/Description"

Line 1: Line 1:
−
{{BOKU-Vienna}}
+
{{BOKU-Vienna-header}}
−
<html lang="en">
+
<html>
−
 
+
<style>
−
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
+
  .myintro {
−
 
+
      display: table;
−
     <!-- Navigation -->
+
      width: 100%;
−
     <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
+
      height: 100%;
 +
      padding: 100px 0;
 +
      text-align: center;
 +
      color: black;
 +
      background: url("[[File:T--BOKU-Vienna--dna.jpg]]") no-repeat bottom center scroll;
 +
      background-color: black;
 +
      -webkit-background-size: cover;
 +
      -moz-background-size: cover;
 +
      background-size: cover;
 +
      -o-background-size: cover;
 +
    }
 +
    .myintro .myintro-body {
 +
      display: table-cell;
 +
      vertical-align: middle;
 +
    }
 +
    .myintro .myintro-body .brand-heading {
 +
      font-size: 40px;
 +
    }
 +
    .myintro .myintro-body .myintro-text {
 +
      font-size: 18px;
 +
      font-family: Tahoma, Geneva, sans-serif;
 +
    }
 +
</style>
 +
<div id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
 +
     <!-- One-Page Scroll NavBar -->
 +
     <nav class="navbar scrollnav-custom navbar-fixed-bottom" role="navigation" id="scrollnav">
 
         <div class="container">
 
         <div class="container">
 
             <div class="navbar-header">
 
             <div class="navbar-header">
Line 11: Line 36:
 
                     Menu <i class="fa fa-bars"></i>
 
                     Menu <i class="fa fa-bars"></i>
 
                 </button>
 
                 </button>
−
                 <a class="navbar-brand page-scroll" href="#page-top">
+
                 <a class="navbar-brand" target="_blank"  href="https://www.facebook.com/IGEM.BOKU.VIENNA">
−
                     D.I.V.E.R.T.
+
                     <img src="https://static.igem.org/mediawiki/2017/f/fa/T--BOKU-Vienna--fb.png" alt="Facebook" >
 +
                </a>
 +
                <a class="navbar-brand" target="_blank"  href="https://www.twitter.com/BOKU_iGEM">
 +
                    <img src="https://static.igem.org/mediawiki/2017/1/15/T--BOKU-Vienna--twitter.png" alt="Twitter" >
 
                 </a>
 
                 </a>
 
             </div>
 
             </div>
Line 24: Line 52:
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                         <a href="#">Team</a>
+
                         <a class="page-scroll" href="#description">Description</a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                         <a href="#">Project</a>
+
                         <a class="page-scroll" href="#design">Design</a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                         <a href="#">Parts</a>
+
                         <a class="page-scroll" href="#experiments">Experiments</a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                         <a href="#">Safety</a>
+
                         <a class="page-scroll" href="#notebook">Notebook</a>
 
                     </li>
 
                     </li>
 
                     <li>
 
                     <li>
−
                        <a href="#">Human Practices</a>
+
                         <a class="page-scroll" href="#results">Results</a>
−
                    </li>
+
−
                    <li>
+
−
                        <a href="#">Awards</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="#">Sponsors</a>
+
−
                    </li>
+
−
                </ul>
+
−
            </div>
+
−
            <!-- /.navbar-collapse -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </nav>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
    <!-- One-Page Scroll NavBar -->
+
−
    <nav class="navbar scrollnav-custom navbar-fixed-bottom" role="navigation" id="scrollnav">
+
−
        <div class="container">
+
−
            <div class="navbar-header">
+
−
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
+
−
                    Menu <i class="fa fa-bars"></i>
+
−
                </button>
+
−
                <a class="navbar-brand" target="_blank"  href="https://www.facebook.com">
+
−
                    <img src="fb.png" alt="Facebook" >
+
−
                </a>
+
−
                <a class="navbar-brand" target="_blank"  href="https://www.twitter.com">
+
−
                    <img src="twitter.png" alt="Twitter" >
+
−
                </a>
+
−
            </div>
+
−
 
+
−
            <!-- Collect the nav links, forms, and other content for toggling -->
+
−
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
+
−
                <ul class="nav navbar-nav">
+
−
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
+
−
                    <li class="hidden">
+
−
                        <a href="#page-top"></a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a class="page-scroll" href="#Welcome">Welcome</a>
+
−
                    </li>
+
−
                    <li>
+
−
                         <a class="page-scroll" href="#Sponsors">Sponsors</a>
+
 
                     </li>
 
                     </li>
 
                 </ul>
 
                 </ul>
Line 98: Line 73:
 
     </nav>
 
     </nav>
  
−
     <!-- Intro Header -->
+
     <!-- myintro Header -->
−
     <header class="intro">
+
     <header class="myintro">
−
         <div class="intro-body">
+
         <div class="myintro-body">
 
             <div class="container">
 
             <div class="container">
 
                 <div class="row">
 
                 <div class="row">
 
                     <div class="col-md-8 col-md-offset-2">
 
                     <div class="col-md-8 col-md-offset-2">
−
                         <h1 class="brand-heading">D.I.V.E.R.T.</h1>
+
                         <h1 class="brand-heading">Project Overview</h1>
−
                         <p class="intro-text">The Next Step of Evolution.
+
                         <p class="myintro-text"></p>
−
                            <br>Created by BOKU Vienna.</p>
+
                         <a href="#description" class="page-scroll">
−
                         <a href="#about" class="btn btn-circle page-scroll">
+
                          <div id="downarrow">
−
                             <i class="fa fa-angle-double-down animated"></i>
+
                             <img src="https://static.igem.org/mediawiki/2017/3/32/T--BOKU-Vienna--arrow.png" alt="V">
 +
                          </div>
 
                         </a>
 
                         </a>
 
                     </div>
 
                     </div>
Line 117: Line 93:
  
 
     <!-- About Section -->
 
     <!-- About Section -->
−
     <section id="Welcome" class="container content-section text-center">
+
     <section id="#description" class="container content-section text-center">
 
         <div class="row">
 
         <div class="row">
 
             <div class="col-lg-8 col-lg-offset-2">
 
             <div class="col-lg-8 col-lg-offset-2">
−
                 <h2>Welcome</h2>
+
                 <h2>Description.</h2>
−
                 <p>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.</p>
+
                 <p>In vivo continuous directed evolution offers significant advantages over classic in vitro methods as it drastically reduces the amount of time and actual lab work that needs to be invested. Most current approaches, however, are based on globally enhanced mutagenesis rates eventually leading to unwanted off-target mutations that interfere with the experiment. Here, we present the concept of a new continuous in vivo evolution strategy that allows complete spatial control of mutagenesis by cyclically using an RNA intermediate which finally replaces the original DNA cargo at the respective locus in the genome after it has been reverse-transcribed in an error prone way. </p>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
  
−
    <!-- Download Section -->
+
 
−
     <section id="Sponsors" class="container content-section text-center">
+
     <section id="#design" class="container content-section text-center">
−
            <div class="container">
+
        <div class="row">
−
                <div class="col-lg-8 col-lg-offset-2">
+
            <div class="col-lg-8 col-lg-offset-2">
−
                    <h2>Sponsors</h2>
+
                <h2>Design.</h2>
−
                    <p>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.</p>
+
                <p>In Progress ... </p>
−
                </div>
+
 
             </div>
 
             </div>
 +
        </div>
 
     </section>
 
     </section>
  
−
    <!-- Footer -->
 
−
    <footer>
 
−
        <div class="container text-center sponsor-section">
 
−
            <p>Copyright &copy; Your Website 2016</p>
 
−
        </div>
 
−
    </footer>
 
  
−
    <!-- jQuery -->
 
−
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 
  
−
     <!-- Bootstrap Core JavaScript -->
+
     <section id="#experiments" class="container content-section text-center">
−
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
        <div class="row">
 +
            <div class="col-lg-8 col-lg-offset-2">
 +
                <h2>Experiments.</h2>
 +
                <p>In Progress ... </p>
 +
            </div>
 +
        </div>
 +
    </section>
  
−
    <!-- Plugin JavaScript -->
 
−
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
 
  
  
−
     <!-- Theme JavaScript -->
+
     <section id="#notebook" class="container content-section text-center">
−
    <script>
+
        <div class="row">
−
    // jQuery to collapse the navbar on scroll
+
             <div class="col-lg-8 col-lg-offset-2">
−
    function collapseNavbar() {
+
                <h2>Notebook.</h2>
−
        if ($(".navbar").offset().top > 50) {
+
                <p>In Progress ... </p>
−
             $(".navbar-fixed-top").addClass("top-nav-collapse");
+
             </div>
−
            $(".navbar-custom a").css("color", "white");
+
         </div>
−
            $(".navbar-fixed-bottom").show();
+
     </section>
−
        } else {
+
−
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
+
−
            $(".navbar-custom a").css("color", "black");
+
−
             $(".navbar-fixed-bottom").hide();
+
−
         }
+
−
     }
+
  
−
     $(window).scroll(collapseNavbar);
+
     <section id="#results" class="container content-section text-center">
−
    $(document).ready(collapseNavbar);
+
         <div class="row">
−
 
+
             <div class="col-lg-8 col-lg-offset-2">
−
    // jQuery for page scrolling feature - requires jQuery Easing plugin
+
                <h2>Results.</h2>
−
    $(function() {
+
                 <p>In Progress ... </p>
−
         $('a.page-scroll').bind('click', function(event) {
+
             </div>
−
             var $anchor = $(this);
+
         </div>
−
            $('html, body').stop().animate({
+
     </section>
−
                 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>
+
{{BOKU-Vienna-footer}}

Revision as of 12:25, 18 June 2017

Project Overview

V

Description.

In vivo continuous directed evolution offers significant advantages over classic in vitro methods as it drastically reduces the amount of time and actual lab work that needs to be invested. Most current approaches, however, are based on globally enhanced mutagenesis rates eventually leading to unwanted off-target mutations that interfere with the experiment. Here, we present the concept of a new continuous in vivo evolution strategy that allows complete spatial control of mutagenesis by cyclically using an RNA intermediate which finally replaces the original DNA cargo at the respective locus in the genome after it has been reverse-transcribed in an error prone way.

Design.

In Progress ...

Experiments.

In Progress ...

Notebook.

In Progress ...

Results.

In Progress ...

{{BOKU-Vienna-footer}}