Line 4: | Line 4: | ||
+ | </style> | ||
+ | <body> | ||
− | </ | + | <!-- Navigation --> |
+ | <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a> | ||
+ | <nav id="sidebar-wrapper"> | ||
+ | <ul class="sidebar-nav"> | ||
+ | <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a> | ||
+ | <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 --> |
− | + | <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> | |
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | |
− | </ | + | |
− | < | + | <!-- About --> |
− | <div | + | <section id="about" class="about"> |
− | < | + | <div class="container"> |
− | <div class="col-lg- | + | <div class="row"> |
− | <center> | + | <div class="col-lg-12 text-center"> |
− | <img src=" | + | <h2>THE TEAM</h2> |
− | </center> | + | <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 & Technology.</p> |
− | </div> | + | </div> |
− | </ | + | </div> |
+ | <!-- /.row --> | ||
+ | </div> | ||
+ | <!-- /.container --> | ||
+ | </section> | ||
+ | |||
+ | <!-- Services --> | ||
+ | <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ --> | ||
+ | <section id="services" class="services bg-primary"> | ||
+ | <div class="container"> | ||
+ | <div class="row text-center"> | ||
+ | <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 | ||
+ | <aside class="callout"> | ||
+ | <div class="text-vertical-center"> | ||
+ | <h1>Vertically Centered Text</h1> | ||
+ | </div> | ||
+ | </aside> | ||
+ | |||
+ | --> | ||
+ | <!-- Portfolio --> | ||
+ | <section id="portfolio" class="portfolio"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-10 col-lg-offset-1 text-center"> | ||
+ | <h2>SOCIAL MEDIA</h2> | ||
+ | <hr class="small"> | ||
+ | <div class="row"> | ||
+ | <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> | ||
+ | <!-- /.row (nested) --> | ||
+ | <a href="#" class="btn btn-dark">View More Items</a> | ||
+ | </div> | ||
+ | <!-- /.col-lg-10 --> | ||
+ | </div> | ||
+ | <!-- /.row --> | ||
+ | </div> | ||
+ | <!-- /.container --> | ||
+ | </section> | ||
+ | |||
+ | <!-- Call to Action | ||
+ | <aside class="call-to-action bg-primary"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-12 text-center"> | ||
+ | <h3>The buttons below are impossible to resist.</h3> | ||
+ | <a href="#" class="btn btn-lg btn-light">Click Me!</a> | ||
+ | <a href="#" class="btn btn-lg btn-dark">Look at Me!</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </aside> | ||
+ | --> | ||
+ | <!-- Map | ||
+ | <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&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe> | ||
+ | <br /> | ||
+ | <small> | ||
+ | <a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A"></a> | ||
+ | </small> | ||
+ | </section> | ||
+ | --> | ||
+ | |||
+ | <!-- Footer --> | ||
+ | <footer> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-10 col-lg-offset-1 text-center"> | ||
+ | <h4><strong>SPONSORS</strong> | ||
+ | </h4> | ||
+ | <br><br> | ||
+ | <h4><strong>CONTACT INFORMATION</strong> | ||
+ | </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> | ||
+ | <a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"><i class="fa fa-dribbble fa-fw fa-3x"></i></a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <hr class="small"> | ||
+ | <p class="text-muted">Copyright © iGEM KU 2017</p> | ||
+ | </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> | ||
+ | </footer> | ||
+ | |||
+ | <!-- jQuery --> | ||
+ | <script src="js/jquery.js"></script> | ||
+ | <!-- Bootstrap Core JavaScript --> | ||
+ | <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> |
Revision as of 07:25, 28 June 2017
InCell
Inspired by the fermenting research field surrounding interspecies and interdomain interactions, our
team has decided to pursue a study of endosymbiosis, its history, mechanisms, and future
applications.
Find Out More
THE TEAM
InCell is a strong international and interdisciplinary team with expertises ranging from Molecular Biomedicine to Communication and IT, including Biochemistry, Microbiology, and Food Science & Technology.