Difference between revisions of "Team:UCopenhagen"

 
(127 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{Team:UCopenhagen/Templates/NavBar}
+
{{template:Copenhagen-Header}}
−
<html>
+
−
<style>
+
  
  
−
</style>
+
<!DOCTYPE HTML>
 +
<html lang="en">
  
−
<body>
+
<head>
  
−
     <!-- Navigation -->
+
     <meta charset="utf-8">
−
    <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
+
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
     <nav id="sidebar-wrapper">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
−
        <ul class="sidebar-nav">
+
    <meta name="description" content="">
−
            <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
+
    <meta name="author" content="">
−
            <li class="sidebar-brand">
+
−
                <a href="#top" onclick=$("#menu-close").click();>InCell</a>
+
−
            </li>
+
−
            <li>
+
−
                <a href="#top" onclick=$("#menu-close").click();>Project</a>
+
−
            </li>
+
−
            <li>
+
−
                <a href="#about" onclick=$("#menu-close").click();>Team + Attributions</a>
+
−
            </li>
+
−
            <li>
+
−
                <a href="#services" onclick=$("#menu-close").click();>Parts</a>
+
−
            </li>
+
−
            <li>
+
−
                <a href="#portfolio" onclick=$("#menu-close").click();>Notebook + Safety</a>
+
−
            </li>
+
−
            <li>
+
−
                <a href="#contact" onclick=$("#menu-close").click();>Modelling</a>
+
−
            </li>
+
−
            <li>
+
−
                <a href="#contact" onclick=$("#menu-close").click();>Human Practices + Outreach</a>
+
−
            </li>
+
−
        </ul>
+
−
    </nav>
+
  
−
     <!-- Header -->
+
     <title>inCell</title>
−
    <header id="top" class="header">
+
−
        <div class="text-vertical-center">
+
−
            <h1>InCell</h1>
+
−
            <br>
+
−
            <br>
+
−
            <h3>Inspired by the fermenting research field surrounding interspecies and interdomain interactions, our <br>team has decided to pursue a study of endosymbiosis, its history, mechanisms, and future <br>applications.</h3>
+
−
            <br><br>
+
−
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
+
−
        </div>
+
−
    </header>
+
  
−
     <!-- About -->
+
     <!-- Bootstrap Core CSS -->
−
     <section id="about" class="about">
+
     <link href="css/bootstrap.min.css" rel="stylesheet">
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-lg-12 text-center">
+
−
                    <h2>THE TEAM</h2>
+
−
                    <p class="lead">InCell is a strong international and interdisciplinary team with expertises ranging from Molecular Biomedicine to Communication and IT, including Biochemistry, Microbiology, and Food Science &amp; Technology.</p>
+
−
                </div>
+
−
            </div>
+
−
            <!-- /.row -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </section>
+
  
−
     <!-- Services -->
+
     <!-- Custom CSS -->
−
     <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
+
     <link href="css/landing-page.css" rel="stylesheet">
−
    <section id="services" class="services bg-primary">
+
   
−
        <div class="container">
+
    <!-- Custom JS -->
−
            <div class="row text-center">
+
    <script src="js/twitter.js"></script>
−
                <div class="col-lg-10 col-lg-offset-1">
+
−
                    <h2>CONTENT</h2>
+
−
                    <hr class="small">
+
−
                    <div class="row">
+
−
                        <div class="col-md-4 col-sm-6">
+
−
                            <div class="service-item">
+
−
                                <span class="fa-stack fa-4x">
+
−
                                <i class="fa fa-circle fa-stack-2x"></i>
+
−
                                <i class="fa fa-cloud fa-stack-1x text-primary"></i>
+
−
                            </span>
+
−
                                <h4>
+
−
                                    <strong>Project</strong>
+
−
                                </h4>
+
−
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
−
                                <a href="#" class="btn btn-light">Learn More</a>
+
−
                            </div>
+
−
                        </div>
+
−
                        <div class="col-md-4 col-sm-6">
+
−
                            <div class="service-item">
+
−
                                <span class="fa-stack fa-4x">
+
−
                                <i class="fa fa-circle fa-stack-2x"></i>
+
−
                                <i class="fa fa-compass fa-stack-1x text-primary"></i>
+
−
                            </span>
+
−
                                <h4>
+
−
                                    <strong>Team + attributions</strong>
+
−
                                </h4>
+
−
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
−
                                <a href="#" class="btn btn-light">Learn More</a>
+
−
                            </div>
+
−
                        </div>
+
−
                        <div class="col-md-4 col-sm-6">
+
−
                            <div class="service-item">
+
−
                                <span class="fa-stack fa-4x">
+
−
                                <i class="fa fa-circle fa-stack-2x"></i>
+
−
                                <i class="fa fa-flask fa-stack-1x text-primary"></i>
+
−
                            </span>
+
−
                                <h4>
+
−
                                    <strong>Parts</strong>
+
−
                                </h4>
+
−
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
−
                                <a href="#" class="btn btn-light">Learn More</a>
+
−
                            </div>
+
−
                        </div>
+
−
                    </div>
+
−
                    <div class="row">
+
−
                        <div class="col-md-4 col-sm-6">
+
−
                            <div class="service-item">
+
−
                                <span class="fa-stack fa-4x">
+
−
                                <i class="fa fa-circle fa-stack-2x"></i>
+
−
                                <i class="fa fa-shield fa-stack-1x text-primary"></i>
+
−
                            </span>
+
−
                                <h4>
+
−
                                    <strong>Notebook + Safety</strong>
+
−
                                </h4>
+
−
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
−
                                <a href="#" class="btn btn-light">Learn More</a>
+
−
                            </div>
+
−
                        </div>
+
−
                        <div class="col-md-4 col-sm-6">
+
−
                            <div class="service-item">
+
−
                                <span class="fa-stack fa-4x">
+
−
                                <i class="fa fa-circle fa-stack-2x"></i>
+
−
                                <i class="fa fa-shield fa-stack-1x text-primary"></i>
+
−
                            </span>
+
−
                                <h4>
+
−
                                    <strong>Modelling</strong>
+
−
                                </h4>
+
−
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
−
                                <a href="#" class="btn btn-light">Learn More</a>
+
−
                            </div>
+
−
                        </div>
+
−
                        <div class="col-md-4 col-sm-6">
+
−
                            <div class="service-item">
+
−
                                <span class="fa-stack fa-4x">
+
−
                                <i class="fa fa-circle fa-stack-2x"></i>
+
−
                                <i class="fa fa-shield fa-stack-1x text-primary"></i>
+
−
                            </span>
+
−
                                <h4>
+
−
                                    <strong>Human Practices + Outreach</strong>
+
−
                                </h4>
+
−
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
−
                                <a href="#" class="btn btn-light">Learn More</a>
+
−
                            </div>
+
−
                        </div>
+
−
                    </div>
+
−
                    <!-- /.row (nested) -->
+
−
                </div>
+
−
                <!-- /.col-lg-10 -->
+
−
            </div>
+
−
            <!-- /.row -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </section>
+
  
−
     <!-- Callout
+
     <!-- Custom Fonts -->
−
     <aside class="callout">
+
     <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
−
        <div class="text-vertical-center">
+
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
−
            <h1>Vertically Centered Text</h1>
+
 
−
         </div>
+
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
−
     </aside>
+
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
−
   
+
    <!--[if lt IE 9]>
−
-->
+
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
−
     <!-- Portfolio -->
+
         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
−
     <section id="portfolio" class="portfolio">
+
     <![endif]-->
 +
 
 +
</head>
 +
 
 +
<body>
 +
     <!-- Header -->
 +
     <a name="Forside"></a>
 +
    <header id="df-header" role="banner" style="background-image: url('<?php header_image(); ?>');">
 +
    <video autoplay loop poster="'https://static.igem.org/mediawiki/2017/d/dc/UCopenhagen_bg'" id="bg-video">
 +
    <source src="https://static.igem.org/mediawiki/2017/d/dc/UCopenhagen_bg.webm" type="video/webm">
 +
    <source src="https://static.igem.org/mediawiki/2017/d/dc/UCopenhagen_bg.mp4" type="video/mp4">
 +
    </video>
 +
    <div class="home">
 
         <div class="container">
 
         <div class="container">
 
             <div class="row">
 
             <div class="row">
−
                 <div class="col-lg-10 col-lg-offset-1 text-center">
+
                 <div class="col-lg-12">
−
                    <h2>SOCIAL MEDIA</h2>
+
                     <div class="intro-message">
−
                    <hr class="small">
+
                         <h1></h1>
−
                     <div class="row">
+
                         <h3> </h3>
−
                        <div class="col-md-6">
+
−
                            <div class="portfolio-item">
+
−
                                <a href="#">
+
−
                                    <img class="img-portfolio img-responsive" src="img/portfolio-1.jpg">
+
−
                                </a>
+
−
                            </div>
+
−
                         </div>
+
−
                        <div class="col-md-6">
+
−
                            <div class="portfolio-item">
+
−
                                <a href="#">
+
−
                                    <img class="img-portfolio img-responsive" src="img/portfolio-2.jpg">
+
−
                                </a>
+
−
                            </div>
+
−
                         </div>
+
−
                        <div class="col-md-6">
+
−
                            <div class="portfolio-item">
+
−
                                <a href="#">
+
−
                                    <img class="img-portfolio img-responsive" src="img/portfolio-3.jpg">
+
−
                                </a>
+
−
                            </div>
+
−
                        </div>
+
−
                        <div class="col-md-6">
+
−
                            <div class="portfolio-item">
+
−
                                <a href="#">
+
−
                                    <img class="img-portfolio img-responsive" src="img/portfolio-4.jpg">
+
−
                                </a>
+
−
                            </div>
+
−
                        </div>
+
 
                     </div>
 
                     </div>
−
                    <!-- /.row (nested) -->
 
−
                    <a href="#" class="btn btn-dark">View More Items</a>
 
 
                 </div>
 
                 </div>
−
                <!-- /.col-lg-10 -->
 
 
             </div>
 
             </div>
−
            <!-- /.row -->
+
 
 
         </div>
 
         </div>
 
         <!-- /.container -->
 
         <!-- /.container -->
−
    </section>
 
  
−
     <!-- Call to Action
+
    </div>
−
     <aside class="call-to-action bg-primary">
+
     <!-- /.intro-header -->
 +
 
 +
     <!-- Page Content -->
 +
 
 +
<a  name="klubber"></a>
 +
    <div class="content-section-a">
 
         <div class="container">
 
         <div class="container">
 
             <div class="row">
 
             <div class="row">
−
                 <div class="col-lg-12 text-center">
+
                 <div class="col-lg-5 col-sm-6">
−
                     <h3>The buttons below are impossible to resist.</h3>
+
                     <hr class="section-heading-spacer">
−
                     <a href="#" class="btn btn-lg btn-light">Click Me!</a>
+
                    <div class="clearfix"></div>
−
                     <a href="#" class="btn btn-lg btn-dark">Look at Me!</a>
+
                    <h2 class="section-heading">Incell: a platform for synthetic endosymbiosis</h2>
 +
                    <p class="lead">Incell is a new synthetic biology platform with near future applications in research, industry and services. We are rewriting nature’s code for endosymbiosis and transforming an evolutionary phenomenon into a technology compatible with standard biological parts.
 +
<br> <br>
 +
Our vision is to produce synthetic host–endosymbiont systems. We set out with a trinity of experiments intrinsic to the synthetic reconstruction of endosymbiosis. First, creating and sustaining dependence between a host and its endosymbionts by fulfilling the amino acid requirement of an auxotrophic host. Next, to build a modular system of cell-penetrating peptides for protein transport of host nuclear encoded proteins into an endosymbiont, recapitulating a crucial feature of the natural process. Finally, regulating the number of endosymbionts within a host using a CRISPR-Cas system for control of replication.
 +
<br> <br>
 +
Further ahead we see a safe, customisable, sustainable technology providing biological solutions to present and future challenges in biotechnology, agriculture and medicine.
 +
 
 +
                    <br> <br>
 +
 
 +
<h2 class="section-heading">We'd like to thank our amazing sponsors for the invaluable support and the possibilities they have given us to participate in iGEM 2017!</h2>
 +
                     <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/4/43/NovoNordiskFonden.png" alt="" width="250" height="200">
 +
                    <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/2/27/PharmaDanmark.png" alt="" width="250" height="200">
 +
                    <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/3/3e/DanishBiotechnologySociety.png" alt="" width="250" height="200">
 +
                    <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/1/17/KoebenhavnsUniversitet.png" alt="" width="250" height="200">
 +
                     <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/4/43/Lundbeckfonden.png" alt="" width="250" height="200">
 +
                    </p>
 +
                </div>
 +
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
 +
                    <img class="img-responsive" src="img/dlf-logo.png" alt="">
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 +
 
         </div>
 
         </div>
−
    </aside>
+
        <!-- /.container -->
−
-->
+
 
−
    <!-- Map
+
    </div>
−
    <section id="contact" class="map">
+
 
−
        <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A&amp;output=embed"></iframe>
+
<a name="arrangementer"></a>
−
        <br />
+
     <div class="banner">
−
        <small>
+
−
            <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A"></a>
+
−
        </small>
+
−
     </section>
+
−
    -->
+
  
−
    <!-- Footer -->
 
−
    <footer>
 
 
         <div class="container">
 
         <div class="container">
 +
 
             <div class="row">
 
             <div class="row">
−
                 <div class="col-lg-10 col-lg-offset-1 text-center">
+
                 <div class="col-lg-6">
−
                     <h4><strong>SPONSORS</strong>
+
                     <h2>Find inCell here:</h2>
−
                    </h4>
+
                </div>
−
                    <br><br>
+
                <div class="col-lg-6">
−
                    <h4><strong>CONTACT INFORMATION</strong>
+
                     <ul class="list-inline banner-social-buttons">
−
                    </h4>
+
−
                    <p>Thorvaldsensvej 40
+
−
                        <br>2000 Frederiksberg</p>
+
−
                    <ul class="list-unstyled">
+
−
                        <li><i class="fa fa-phone fa-fw"></i> +45 XX XX XX XX</li>
+
−
                        <li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:name@example.com">igem2017@gmail.com</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <br>
+
−
                     <ul class="list-inline">
+
 
                         <li>
 
                         <li>
−
                             <a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
+
                             <a href="https://twitter.com/iGEM_Copenhagen" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
+
                             <a href="https://www.facebook.com/iGEMCopenhagen" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="#"><i class="fa fa-dribbble fa-fw fa-3x"></i></a>
+
                             <a href="https://www.instagram.com/igemku2017" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-instagram fa-fw"></i> <span class="network-name">Instagram</span></a>
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
−
                    <hr class="small">
 
−
                    <p class="text-muted">Copyright &copy; iGEM KU 2017</p>
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 +
 
         </div>
 
         </div>
−
         <a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
+
         <!-- /.container -->
−
     </footer>
+
 
 +
    </div>
 +
                   
 +
    <!-- /.banner -->
 +
 
 +
    <!-- Footer -->
 +
        <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="navbar-header">
 +
<ul class="nav navbar-nav">
 +
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
 +
                    <li>
 +
                <a class="page-scroll" href="#">Top</a>
 +
</li>
 +
                </ul>
 +
            </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>
 +
                        <a class="page-scroll" href="https://2017.igem.org/Team:UCopenhagen">Previous</a>
 +
                    </li>
 +
                    <li>
 +
                        <a class="page-scroll" href="https://2017.igem.org/Team:UCopenhagen/Project">Next</a>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
            <!-- /.navbar-collapse -->
 +
        </div>
 +
        <!-- /.container -->
 +
     </nav>
 +
</div>
 +
 
 +
<footer>
 +
    <div class="container text-center content-section sponsor-section">
 +
      <div class="row">
 +
     
 +
      </div>
 +
    </div>
 +
</footer>
 +
 
  
 
     <!-- jQuery -->
 
     <!-- jQuery -->
Line 282: Line 175:
 
     <!-- Bootstrap Core JavaScript -->
 
     <!-- Bootstrap Core JavaScript -->
 
     <script src="js/bootstrap.min.js"></script>
 
     <script src="js/bootstrap.min.js"></script>
−
 
−
    <!-- Custom Theme JavaScript -->
 
−
    <script>
 
−
    // Closes the sidebar menu
 
−
    $("#menu-close").click(function(e) {
 
−
        e.preventDefault();
 
−
        $("#sidebar-wrapper").toggleClass("active");
 
−
    });
 
−
    // Opens the sidebar menu
 
−
    $("#menu-toggle").click(function(e) {
 
−
        e.preventDefault();
 
−
        $("#sidebar-wrapper").toggleClass("active");
 
−
    });
 
−
    // Scrolls to the selected menu item on the page
 
−
    $(function() {
 
−
        $('a[href*=#]:not([href=#],[data-toggle],[data-target],[data-slide])').click(function() {
 
−
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
 
−
                var target = $(this.hash);
 
−
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
 
−
                if (target.length) {
 
−
                    $('html,body').animate({
 
−
                        scrollTop: target.offset().top
 
−
                    }, 1000);
 
−
                    return false;
 
−
                }
 
−
            }
 
−
        });
 
−
    });
 
−
    //#to-top button appears after scrolling
 
−
    var fixed = false;
 
−
    $(document).scroll(function() {
 
−
        if ($(this).scrollTop() > 250) {
 
−
            if (!fixed) {
 
−
                fixed = true;
 
−
                // $('#to-top').css({position:'fixed', display:'block'});
 
−
                $('#to-top').show("slow", function() {
 
−
                    $('#to-top').css({
 
−
                        position: 'fixed',
 
−
                        display: 'block'
 
−
                    });
 
−
                });
 
−
            }
 
−
        } else {
 
−
            if (fixed) {
 
−
                fixed = false;
 
−
                $('#to-top').hide("slow", function() {
 
−
                    $('#to-top').css({
 
−
                        display: 'none'
 
−
                    });
 
−
                });
 
−
            }
 
−
        }
 
−
    });
 
−
    // Disable Google Maps scrolling
 
−
    // See http://stackoverflow.com/a/25904582/1607849
 
−
    // Disable scroll zooming and bind back the click event
 
−
    var onMapMouseleaveHandler = function(event) {
 
−
        var that = $(this);
 
−
        that.on('click', onMapClickHandler);
 
−
        that.off('mouseleave', onMapMouseleaveHandler);
 
−
        that.find('iframe').css("pointer-events", "none");
 
−
    }
 
−
    var onMapClickHandler = function(event) {
 
−
            var that = $(this);
 
−
            // Disable the click handler until the user leaves the map area
 
−
            that.off('click', onMapClickHandler);
 
−
            // Enable scrolling zoom
 
−
            that.find('iframe').css("pointer-events", "auto");
 
−
            // Handle the mouse leave event
 
−
            that.on('mouseleave', onMapMouseleaveHandler);
 
−
        }
 
−
        // Enable map zooming with mouse scroll when the user clicks the map
 
−
    $('.map').on('click', onMapClickHandler);
 
−
    </script>
 
  
 
</body>
 
</body>
−
 
  
 
</html>
 
</html>
−
{{:Team:UCopenhagen/Templates/Footer}}
 

Latest revision as of 03:55, 2 November 2017


<!DOCTYPE HTML> inCell