Difference between revisions of "Team:Technion Israel"

Line 1: Line 1:
 
{{Team:Technion_Israel/navbar}}
 
{{Team:Technion_Israel/navbar}}
 
<html lang="en">
 
<html lang="en">
 +
   
 +
    <head>
 +
        <!-- Title for the page & metadata  -->       
 +
        <title>S.Tar, by iGEM Technion 2016</title>
 +
    <meta charset="utf-8">
 +
    <meta name="navbar" content="width=device-width, initial-scale=1">
  
−
<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="iGEM technion 2016">
 
−
    <meta name="author" content="iGEM Technion">
 
  
−
    <title>iGEM Technion 2016</title>
+
<style>/* inline page CSS */
 +
 +
 +
body {
 +
}
  
 +
/* ==========Background and effects ========== */
 +
/*Make sure the div is unuiqe to each page*/
 +
.team_wrapper {
 +
position: relative;
 +
 +
background: white; /* For browsers that do not support gradients */
 +
background: -webkit-linear-gradient(white, #ecf7fb, white); /* For Safari 5.1 to 6.0 */
 +
background: -o-linear-gradient(white, #ecf7fb, white); /* For Opera 11.1 to 12.0 */
 +
background: -moz-linear-gradient(white, #ecf7fb, white); /* For Firefox 3.6 to 15 */
 +
background: linear-gradient(white, #ecf7fb, white); /* Standard syntax */
 +
/*background-image:url('addres');
 +
background-size:cover;
 +
filter: blur(5px) grayscale(80%) opacity(10%);*/
 +
}
 +
/* ========== END: and effects ========== */
  
  
−
        <!--This section can be deleted when uploading to the wiki, because we already have in in the navbar-->
+
/*
−
            <!--Bootstrap Core CSS -->
+
Object in external CSS sheet:
−
            <link href="https://2016.igem.org/Team:Technion_Israel/bootstrap.min.css/CSS?action=raw&ctype=text/css" rel="stylesheet">
+
−
                    <link href="https://2016.igem.org/Team:Technion_Israel/homecss/CSS?action=raw&ctype=text/css" rel="stylesheet">
+
−
        <!--Delete up to here-->
+
−
       
+
  
 +
nav-tabs, cont_tabs:
 +
Open diffrent tabs, we uses imgs.
  
 +
back-to-top:
 +
go back to top. Apears only when going down the page.
  
 +
cont_box:
 +
The containers (box) which hold the texts and imgs in the page.
  
 +
img_cont:
 +
Every in-content-page img needs to have this class of img.
  
 +
no-title-col:
 +
Every in-content-page img needs to have this class of col.
 +
*/
  
 +
.members{
 +
font-family: "Candara", "Calibri", "Segoe", "Segoe UI", "Optima", Arial, sans-serif;
 +
color: black;
 +
line-height: 1.5;
 +
margin-bottom: .25em;
 +
padding-top: .17em;
 +
font-size: 17px;
 +
font-weight: 400;
 +
font-style: normal;
 +
font-variant: normal;
 +
}
  
−
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
−
    <!-- 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>
 
−
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 
−
    <![endif]-->
 
  
−
    <style>
+
/*==========Imgs change effect=========*/
 +
#cf {
 +
position:relative;
 +
/*height:100%;
 +
width:100%;*/
 +
}
 +
#cf img {
 +
position:absolute;
 +
left:0;
 +
opacity: 1;
 +
-webkit-transition: opacity 0.5s ease-in-out;
 +
-moz-transition: opacity 0.5s ease-in-out;
 +
-o-transition: opacity 0.5s ease-in-out;
 +
-ms-transition: opacity 0.5s ease-in-out;
 +
transition: opacity 0.5s ease-in-out;
 +
}
  
 +
#cf img.top:hover {
 +
opacity:0;
 +
}
 +
/*=================End==================*/
  
−
    </style>
+
.ocenter .img-responsive {
 +
margin: 0 auto;
 +
}
  
−
</head>
+
.vcenter {
 +
display: inline-block;
 +
vertical-align: middle;
 +
float: none;
 +
}
  
−
<body>
+
/*description div*/
 +
.description{
 +
border: 2px solid #000;
 +
padding: 20px;
 +
border-radius:10px;
 +
background-color: #bae2f0;
 +
/*box-shadow: 5px 5px 5px #eee;*
 +
}
  
−
    <!-- Navigation -->
+
</style>
−
        <!-- There is a template-->
+
  
−
    <!-- Header -->
 
−
    <header id="top" class="header">
 
−
        <div class="text-vertical-center">
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <h1>S.tar</h1>
 
−
            <h3>By iGEM Technion 2016</h3>
 
−
            <br>
 
−
            <a href="#about" class="btn btn-dark btn-lg">Let's S.tart</a>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
        </div>
 
−
    </header>
 
  
−
    <!-- About -->
+
<script>
−
    <section id="about" class="about">
+
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-lg-12 text-center">
+
−
                    <h2>A short introduction</h2>
+
−
                    <p class="lead">FlashLab offers a set of tools for harnessing the bacterial chemotaxis system. We show that by replacing the Ligand Binding Domain (LBD) of the E. coli Tar-chemoreceptor with various LBD's, or by inserting an inducible intein into the LBD, chemotaxis can be programmed to respond to a substance of our choice.</p>
+
−
                </div>
+
−
            </div>
+
−
            <!-- /.row -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </section>
+
  
−
    <!-- Services -->
+
//up arrow:
−
    <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
+
$(document).ready(function(){
−
    <section id="services" class="services bg-primary">
+
$(window).scroll(function () {
−
        <div class="container">
+
if ($(this).scrollTop() > 350) {
−
            <div class="row text-center">
+
$('#back-to-top').fadeIn();
−
                <div class="col-lg-10 col-lg-offset-1">
+
} else {
−
                    <h2>Gateway</h2>
+
$('#back-to-top').fadeOut();
−
                    <hr class="small">
+
}
−
                    <div class="row">
+
});
−
                        <div class="col-md-3 col-sm-6">
+
// scroll body to 0px on click
−
                            <div class="service-item">
+
$('#back-to-top').click(function () {
−
                                <span class="fa-stack fa-4x">
+
$('#back-to-top').tooltip('hide');
−
                                <i class="fa fa-circle fa-stack-2x"></i>
+
$('body,html').animate({
−
                                <i class="fa fa-cloud fa-stack-1x text-primary"></i>
+
scrollTop: 0
−
                            </span>
+
}, 800);
−
                                <h4>
+
return false;
−
                                    <strong>Project overview</strong>
+
});
−
                                </h4>
+
−
                                <p>Here you will find a general description of our project, motivations, background and more.</p>
+
$('#back-to-top').tooltip('show');
−
                                <a href="#" class="btn btn-light">Learn More</a>
+
−
                            </div>
+
−
                        </div>
+
−
                        <div class="col-md-3 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>S.tar guiding system</strong>
+
−
                                </h4>
+
−
                                <p>S.tar-guided system. The system enable to target bacteria to a specific substance.</p>
+
−
                                <a href="#" class="btn btn-light">Learn More</a>
+
−
                            </div>
+
−
                        </div>
+
−
                        <div class="col-md-3 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>Flash-Lab chip</strong>
+
−
                                </h4>
+
−
                                <p>Flash-Lab chip harnesses the power of S.tar system to detect chemicals. This way, each chemical which...</p>
+
−
                                <a href="#" class="btn btn-light">Learn More</a>
+
−
                            </div>
+
−
                        </div>
+
−
                        <div class="col-md-3 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>Meet the team</strong>
+
−
                                </h4>
+
−
                                <p>So who are we? What do we do in life? Here you'll be able to meet our team members.</p>
+
−
                                <a href="#" class="btn btn-light">Learn More</a>
+
−
                            </div>
+
−
                        </div>
+
−
                    </div>
+
−
                    <!-- /.row (nested) -->
+
−
                </div>
+
−
                <!-- /.col-lg-10 -->
+
−
            </div>
+
−
            <!-- /.row -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </section>
+
  
 +
});
  
−
    <!-- Footer -->
+
</script>
−
    <footer>
+
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-lg-10 col-lg-offset-1 text-center">
+
−
                    <h4><strong>iGEM Technion 2016</strong>
+
−
                    </h4>
+
−
                    <p>Technion, Zone 7,
+
−
                        <br>Faculty of Biotechnology and Food Engineering,
+
−
                        <br>3200003 Haifa, Israel</p>
+
−
                    <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>
+
−
                </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 -->
+
</head>
−
    <script src="js/jquery.js"></script>
+
  
−
    <!-- Bootstrap Core JavaScript -->
 
−
    <script src="js/bootstrap.min.js"></script>
 
  
−
    <!-- Custom Theme JavaScript -->
+
<body>
−
    <script>
+
−
    // 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'
+
−
                    });
+
−
                });
+
−
            }
+
−
        }
+
−
    });
+
−
    </script>
+
  
−
</body>
+
<header>
 +
</header>
 +
  
 +
<!-- ===== One overall container (wrapper) ===== -->
 +
<div class="team_wrapper">
 +
 +
<br>
 +
<br>
 +
 +
<!-- ======== Cover photo: ======== -->
 +
<div class="row">
 +
<div class="col-xs-10 col-xs-offset-1">
 +
<img src="http://www.clipartkid.com/images/270/brain-overload-people-scienerf-UcVVTz-clipart.jpg" class="img-responsive img-center cont_cover img-cont" width="100%">
 +
</div>
 +
</div>
 +
<!-- ===== END: Cover photo: ===== -->
 +
 +
<br>
 +
<br>
 +
<br>
 +
 +
 +
 +
<div class="row">
 +
<div class="col-md-10 col-sm-12 col-md-offset-1"><!--6 text-->
 +
<!--6 text - 6 img div-->
 +
<div class="row">
 +
<div class="col-md-2 col-sm-12 vcenter"><!--6 text-->
 +
<a href="https://2016.igem.org/Team:Technion_Israel/S.Tar_intro">
 +
<img class="img-responsive img-center" src="https://static.igem.org/mediawiki/2016/thumb/f/fb/T--Technion_Israel--starlogoicon.png/600px-T--Technion_Israel--starlogoicon.png" alt="Read more">
 +
<h4 class="text-center">Read more</h4>
 +
</a>
 +
</div><!--
 +
--><div class="col-md-10 col-sm-12 vcenter"><!--6 img div-->
 +
<p class="text-justify description">
 +
Project Super Tar - S.Tar - is designed to be a novel platform for controlled chemotaxis.
 +
We show that by mutating the native Tar LBD or by interchanging it with that of other receptors,
 +
the E. coli chemotaxis system can be programmed to respond to completely new ligands.
 +
<br>
 +
As an extension of our system, we designed an easy-to-use detection system, which utilizes
 +
the high sensitivity of the chemotactic response. FlashLab is a simple and cheap platform
 +
for the detection of any chemoeffector, using S.Tar bacteria.
 +
</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<br>
 +
<br>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<div class="row">
 +
<div class="col-xs-8 col-xs-offset-2">
 +
 +
<div class="row">
 +
 +
<div class="col-xs-6">
 +
<a href="https://2016.igem.org/Team:Technion_Israel/S.Tar_intro">
 +
<div id="cf">
 +
<img class="bottom img-responsive img-center" src="https://static.igem.org/mediawiki/2016/2/25/T--Technion_Israel--homestarhov.png" />
 +
<img class="top img-responsive img-center" src="https://static.igem.org/mediawiki/2016/8/8d/T--Technion_Israel--homestar.png" />
 +
</div>
 +
<img class= img-responsive img-center" style="visibility: hidden;" src="https://static.igem.org/mediawiki/2016/8/8d/T--Technion_Israel--homestar.png" />
 +
</a>
 +
</div>
 +
 +
<div class="col-xs-6">
 +
<a href="https://2016.igem.org/Team:Technion_Israel/Design">
 +
<div id="cf">
 +
<img class="bottom img-responsive img-center" src="https://static.igem.org/mediawiki/2016/4/4d/T--Technion_Israel--homeflashlabhov.png" />
 +
<img class="top img-responsive img-center" src="https://static.igem.org/mediawiki/2016/a/a9/T--Technion_Israel--homeflashlab.png" />
 +
</div>
 +
<img class="img-responsive img-center" style="visibility: hidden;" src="https://static.igem.org/mediawiki/2016/a/a9/T--Technion_Israel--homeflashlab.png" />
 +
</a>
 +
</div>
 +
 +
</div>
 +
 +
<br>
 +
 +
 +
 +
<div class="row">
 +
 +
<div class="col-xs-3">
 +
<a href="https://2016.igem.org/Team:Technion_Israel/Results">
 +
<div id="cf">
 +
<img class="bottom img-responsive img-center" src="https://static.igem.org/mediawiki/2016/b/bd/T--Technion_Israel--homeresultshov.png" />
 +
<img class="top img-responsive img-center" src="https://static.igem.org/mediawiki/2016/a/a1/T--Technion_Israel--homeresults.png" />
 +
</div>
 +
<img class="img-responsive img-center" style="visibility: hidden;" src="https://static.igem.org/mediawiki/2016/8/8d/T--Technion_Israel--homestar.png" />
 +
</a>
 +
</div>
 +
 +
<div class="col-xs-3">
 +
<a href="https://2016.igem.org/Team:Technion_Israel/Design">
 +
<div id="cf">
 +
<img class="bottom img-responsive img-center" src="https://static.igem.org/mediawiki/2016/3/39/T--Technion_Israel--homejudhov.png" />
 +
<img class="top img-responsive img-center" src="https://static.igem.org/mediawiki/2016/1/16/T--Technion_Israel--homejud.png" />
 +
</div>
 +
<img class="img-responsive img-center" style="visibility: hidden;" src="https://static.igem.org/mediawiki/2016/1/16/T--Technion_Israel--homejud.png" />
 +
</a>
 +
</div>
 +
 +
<div class="col-xs-3">
 +
<a href="https://2016.igem.org/Team:Technion_Israel/Design">
 +
<div id="cf">
 +
<img class="bottom img-responsive img-center" src="https://static.igem.org/mediawiki/2016/5/56/T--Technion_Israel--homeHPhov2.png" />
 +
<img class="top img-responsive img-center" src="https://static.igem.org/mediawiki/2016/e/e3/T--Technion_Israel--homeHP2.png" />
 +
</div>
 +
<img class="img-responsive img-center" style="visibility: hidden;" src="https://static.igem.org/mediawiki/2016/5/56/T--Technion_Israel--homeHPhov2.png" />
 +
</a>
 +
</div>
 +
 +
<div class="col-xs-3">
 +
<a href="https://2016.igem.org/Team:Technion_Israel/Team">
 +
<div id="cf">
 +
<img class="bottom img-responsive img-center" src="https://static.igem.org/mediawiki/2016/b/bc/T--Technion_Israel--hometeamhov.png" />
 +
<img class="top img-responsive img-center" src="https://static.igem.org/mediawiki/2016/b/b3/T--Technion_Israel--hometeam.png" />
 +
</div>
 +
<img class="img-responsive img-center" style="visibility: hidden;" src="https://static.igem.org/mediawiki/2016/b/b3/T--Technion_Israel--hometeam.png" />
 +
</a>
 +
</div>
 +
 +
 +
 +
 +
</div>
 +
 +
 +
 +
 +
 +
 +
<br>
 +
<br>
 +
 +
 +
</div>
 +
</div>
 +
</div><!--(wrapper)-->
 +
 +
 +
 +
<a id="back-to-top" href="#" class="btn btn-lg back-to-top" role="button" title="Up" data-toggle="tooltip" data-placement="left"><img src="https://static.igem.org/mediawiki/2016/5/5a/T--Technion_Israel--up_arrow.png" alt=""></a>
 +
 +
 +
</body>
 
</html>
 
</html>
 
{{:Team:Technion_Israel/supporters}}
 
{{:Team:Technion_Israel/supporters}}

Revision as of 10:05, 19 October 2016

S.tar, by iGEM Technion 2016

S.Tar, by iGEM Technion 2016





Read more

Read more

Project Super Tar - S.Tar - is designed to be a novel platform for controlled chemotaxis. We show that by mutating the native Tar LBD or by interchanging it with that of other receptors, the E. coli chemotaxis system can be programmed to respond to completely new ligands.
As an extension of our system, we designed an easy-to-use detection system, which utilizes the high sensitivity of the chemotactic response. FlashLab is a simple and cheap platform for the detection of any chemoeffector, using S.Tar bacteria.






S.tar, by iGEM Technion 2016