Difference between revisions of "Team:Glasgow"

 
(84 intermediate revisions by 9 users not shown)
Line 1: Line 1:
{{Template: Glasgow Home}}
+
{{GlasgowHeader}}<html>
<html>
+
<div class="photo-block" id="Frontpage">
<!-- Template by Quackit.com -->
+
<div class="text left">
<!-- Images by various sources under the Creative Commons CC0 license and/or the Creative Commons Zero license.  
+
<div class="title">
Although you can use them, for a more unique website, replace these images with your own. -->
+
<i>Campy</i>LOCATOR
 +
</div>
 +
<div class="sub">
 +
Detection of <i>Campylobacter jejuni</i> for the prevention of food poisoning </i>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="text-block" id="project-desc">
 +
<div class="title">
 +
Project Description
 +
</div>
 +
<div class="copy_container row">
 +
<div class="large-6 columns">
 +
<p class="copy">
 +
<i>Campylobacter </i> species, especially <i>Campylobacter jejuni</i>, are bacterial pathogens responsible for the majority of food poisoning in the UK. This bacteria is considered to cause over 280,000 cases of bacterial gastroenteritis annually. Although also found on red meat, unpasteurized milk and unfiltered water, 4 out of 5 cases of campylobacteriosis come from contaminated chickens. During the slaughter process the bacterium gets transferred onto the chicken skin and is often found on fresh retail chickens and their packaging. The most important transmission route is consumption of undercooked chicken or other foods that get cross-contaminated from raw poultry meat. </p>
 +
</div>
 +
<div class="large-6 columns">
 +
<p class="copy"> Current detection systems for the pathogen are time-consuming, expensive and inaccessible for everyday users. We therefore aimed to develop a new, cheaper and faster system for detection of <i>C. jejuni</i> using synthetic biology. We approached this by genetically engineering <i>Escherichia coli</i> to serve a function of a dual-input biosensor. The bacterium will sense bacterial quorum sensing signals and xylulose - a sugar naturally present in the outer capsule of <i>Campylobacter jejuni</i>, to detect the pathogen on a swabbed surface. </p>
 +
<p class="copy"></p>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="photo-block" id="Ceremony">
 +
<div class="text right">
 +
<div class="title">
 +
<a href="https://2017.igem.org/Team:Glasgow/Accomplishments">Our Accomplishments at the Jamboree!</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="photo-block" id="Xylulose">
 +
<div class="text right">
 +
<div class="title">
 +
<a href="https://2017.igem.org/Team:Glasgow/mtlR">Engineering <i>E. coli</i> to Respond to <i>Campylobacter</i>-Associated Sugar</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="photo-block" id="AraC">
 +
<div class="text right">
 +
<div class="title">
 +
<a href="https://2017.igem.org/Team:Glasgow/araC">Expanding the Biosensor parts Toolkit, using <i>araC</i> Mutants</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="photo-block" id="Hardware">
 +
<div class="text right">
 +
<div class="title">
 +
<a href="https://2017.igem.org/Team:Glasgow/Hardware">Designing a Functional Prototype Biosensor device</a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="photo-block" id="Public">
 +
<div class="text right">
 +
<div class="title">
 +
<a href="https://2017.igem.org/Team:Glasgow/Outreach">Engaging with the world about <i>Campylobacter</i></a>
 +
</div>
 +
</div>
 +
</div>
  
<head>
+
</html>{{GlasgowFooter}}
 
+
    <meta charset="utf-8">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+
 
+
    <title>Glasgow IGEM 2017</title>
+
 
+
    <!-- Bootstrap Core CSS -->
+
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
+
 
+
    <!-- Custom CSS-->
+
    <style>
+
    html,
+
body {
+
    width: 100%;
+
    height: 100%;
+
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
+
}
+
 
+
a {
+
    color: yellowgreen;
+
    -webkit-transition: all .35s;
+
    -moz-transition: all .35s;
+
    transition: all .35s;
+
}
+
 
+
a:hover,
+
a:focus {
+
    color: forestgreen;
+
}
+
 
+
p {
+
    font-size: 16px;
+
    line-height: 1.5;
+
}
+
 
+
header {
+
    position: relative;
+
    width: 100%;
+
    min-height: auto;
+
    text-align: center;
+
    color: #fff;
+
    background-image: url(https://static.igem.org/mediawiki/2017/6/6b/GlasgowHeader.jpeg);
+
    background-position: center;
+
    -webkit-background-size: cover;
+
    -moz-background-size: cover;
+
    background-size: cover;
+
    -o-background-size: cover;
+
}
+
 
+
header .header-content {
+
    position: relative;
+
    width: 100%;
+
    padding: 100px 15px 70px;
+
    text-align: center;
+
}
+
 
+
header .header-content .header-content-inner h1 {
+
    margin-top: 0;
+
    margin-bottom: 20px;
+
    font-size: 50px;
+
    font-weight: 300;
+
}
+
 
+
header .header-content .header-content-inner p {
+
    margin-bottom: 50px;
+
    font-size: 16px;
+
    font-weight: 300;
+
    color: rgba(255,255,25,.7);
+
}
+
 
+
@media(min-width:768px) {
+
    header {
+
        min-height: 100%;
+
    }
+
 
+
    header .header-content {
+
        position: absolute;
+
        top: 50%;
+
        padding: 0 50px;
+
        -webkit-transform: translateY(-50%);
+
        -ms-transform: translateY(-50%);
+
        transform: translateY(-50%);
+
    }
+
 
+
    header .header-content .header-content-inner {
+
        margin-right: auto;
+
        margin-left: auto;
+
        max-width: 1000px;
+
    }
+
 
+
header .header-content .header-content-inner h1 {
+
    font-size: 100px;
+
}
+
 
+
    header .header-content .header-content-inner p {
+
        margin-right: auto;
+
        margin-left: auto;
+
        max-width: 80%;
+
        font-size: 18px;
+
    }
+
}
+
 
+
.section-heading {
+
    margin-top: 0;
+
    margin-bottom: 20px;
+
}
+
 
+
.intro {
+
color: #fff;
+
    background-color: #1abc9c;
+
    padding: 70px 0;
+
    text-align: center;
+
}
+
 
+
.content {
+
    padding: 100px 0;
+
    color: #fff;
+
    background-color: #16a085
+
}
+
 
+
.content-2 {
+
    color: #fff;
+
    background-color: #e67e22;
+
}
+
 
+
.content-3 {
+
padding: 20px 0 40px;
+
color: #fff;
+
text-align: center;
+
background-color: #2980b9;
+
}
+
 
+
.promo,
+
.promo h3,
+
.promo a:link,
+
.promo a:visited,
+
.promo a:hover,
+
.promo a:active {
+
    color: white;
+
text-shadow: 0px 0px 40px black;
+
    text-decoration: none;
+
}
+
 
+
.promo-item {
+
    height: 200px;
+
    line-height: 180px;
+
    text-align: center;
+
}
+
 
+
.promo-item:hover {
+
    background-size: 110%;
+
    border: 10px solid rgba(255,255,255,0.3);
+
    line-height: 160px;
+
}
+
 
+
.promo-item h3 {
+
    font-size: 40px;
+
    display: inline-block;
+
    vertical-align: middle;
+
}
+
 
+
.item-1 {
+
background: url('https://static.igem.org/mediawiki/2017/5/59/Trabajar-y-estudiar-practicas-universitarias-en-el-2017-1.jpg');
+
}
+
+
.item-2 {
+
background: url('https://static.igem.org/mediawiki/2017/d/df/Campylobactercdc.png');
+
}
+
+
.item-3 {
+
background: url('https://static.igem.org/mediawiki/2017/a/a7/People-cartoon-characters_23-2147501999.png');
+
}
+
+
.item-1,
+
.item-2,
+
.item-3 {
+
background-size: cover;
+
background-position: 50% 50%;
+
}
+
 
+
.page-footer {
+
text-align: center;
+
}
+
 
+
.page-footer .contact {
+
padding: 100px 0;
+
background-color: yellowgreen;
+
color: #fff;
+
}
+
 
+
.page-footer .contact p {
+
font-size: 22px;
+
font-weight: 300;
+
}
+
+
.content-3 .glyphicon,
+
.page-footer .contact .glyphicon {
+
font-size: 32px;
+
font-weight: 700;
+
}
+
+
.page-footer .small-print {
+
padding: 50px 0 40px;
+
font-weight: 300;
+
}
+
 
+
.text-light {
+
    color: rgba(255,255,25,.7);
+
}
+
 
+
.navbar-default {
+
    border-color: rgba(34,34,34,.05);
+
    background-color: #fff;
+
    -webkit-transition: all .35s;
+
    -moz-transition: all .35s;
+
    transition: all .35s;
+
}
+
 
+
.navbar-default .navbar-header .navbar-brand {
+
    color: yellowgreen;
+
}
+
 
+
.navbar-default .navbar-header .navbar-brand:hover,
+
.navbar-default .navbar-header .navbar-brand:focus {
+
    color: #eb3812;
+
}
+
 
+
.navbar-default .nav > li>a,
+
.navbar-default .nav>li>a:focus {
+
    color: #222;
+
}
+
 
+
.navbar-default .nav > li>a:hover,
+
.navbar-default .nav>li>a:focus:hover {
+
    color: yellowgreen;
+
}
+
 
+
.navbar-default .nav > li.active>a,
+
.navbar-default .nav>li.active>a:focus {
+
    color: yellowgreen!important;
+
    background-color: transparent;
+
}
+
 
+
.navbar-default .nav > li.active>a:hover,
+
.navbar-default .nav>li.active>a:focus:hover {
+
    background-color: transparent;
+
}
+
 
+
@media(min-width:768px) {
+
    .navbar-default {
+
        border-color: rgba(255,255,255,.3);
+
        background-color: transparent;
+
    }
+
 
+
    .navbar-default .navbar-header .navbar-brand {
+
        color: rgba(255,255,255,.7);
+
        letter-spacing: 0.5em;
+
    }
+
 
+
    .navbar-default .navbar-header .navbar-brand:hover,
+
    .navbar-default .navbar-header .navbar-brand:focus {
+
        color: #fff;
+
    }
+
 
+
    .navbar-default .nav > li>a,
+
    .navbar-default .nav>li>a:focus {
+
        color: rgba(255,255,255,.7);
+
    }
+
 
+
    .navbar-default .nav > li>a:hover,
+
    .navbar-default .nav>li>a:focus:hover {
+
        color: #fff;
+
    }
+
 
+
    .navbar-default.affix {
+
        border-color: #fff;
+
        background-color: #fff;
+
        box-shadow: 0px 7px 20px 0px rgba(0,0,0,0.1);
+
    }
+
 
+
    .navbar-default.affix .navbar-header .navbar-brand {
+
        letter-spacing: 0;
+
        color: yellowgreen;
+
    }
+
 
+
    .navbar-default.affix .navbar-header .navbar-brand:hover,
+
    .navbar-default.affix .navbar-header .navbar-brand:focus {
+
        color: #eb3812;
+
    }
+
 
+
    .navbar-default.affix .nav > li>a,
+
    .navbar-default.affix .nav>li>a:focus {
+
        color: #222;
+
    }
+
 
+
    .navbar-default.affix .nav > li>a:hover,
+
    .navbar-default.affix .nav>li>a:focus:hover {
+
        color: yellowgreen;
+
    }
+
}
+
 
+
.btn-default {
+
    border-color: #fff;
+
    color: #222;
+
    background-color: #fff;
+
    -webkit-transition: all .35s;
+
    -moz-transition: all .35s;
+
    transition: all .35s;
+
}
+
 
+
.btn-default:hover,
+
.btn-default:focus,
+
.btn-default.focus,
+
.btn-default:active,
+
.btn-default.active,
+
.open > .dropdown-toggle.btn-default {
+
    border-color: #eee;
+
    color: #222;
+
    background-color: #eee;
+
}
+
 
+
.btn-default:active,
+
.btn-default.active,
+
.open > .dropdown-toggle.btn-default {
+
    background-image: none;
+
}
+
 
+
.btn-default.disabled,
+
.btn-default[disabled],
+
fieldset[disabled] .btn-default,
+
.btn-default.disabled:hover,
+
.btn-default[disabled]:hover,
+
fieldset[disabled] .btn-default:hover,
+
.btn-default.disabled:focus,
+
.btn-default[disabled]:focus,
+
fieldset[disabled] .btn-default:focus,
+
.btn-default.disabled.focus,
+
.btn-default[disabled].focus,
+
fieldset[disabled] .btn-default.focus,
+
.btn-default.disabled:active,
+
.btn-default[disabled]:active,
+
fieldset[disabled] .btn-default:active,
+
.btn-default.disabled.active,
+
.btn-default[disabled].active,
+
fieldset[disabled] .btn-default.active {
+
    border-color: #fff;
+
    background-color: #fff;
+
}
+
 
+
.btn-default .badge {
+
    color: #fff;
+
    background-color: #222;
+
}
+
 
+
.btn-primary {
+
    border-color: yellowgreen;
+
    color: #fff;
+
    background-color: yellowgreen;
+
    -webkit-transition: all .35s;
+
    -moz-transition: all .35s;
+
    transition: all .35s;
+
}
+
 
+
.btn-primary:hover,
+
.btn-primary:focus,
+
.btn-primary.focus,
+
.btn-primary:active,
+
.btn-primary.active,
+
.open > .dropdown-toggle.btn-primary {
+
    border-color: limegreen;
+
    color: #fff;
+
    background-color: limegreen;
+
}
+
 
+
.btn-primary:active,
+
.btn-primary.active,
+
.open > .dropdown-toggle.btn-primary {
+
    background-image: none;
+
}
+
 
+
.btn-primary.disabled,
+
.btn-primary[disabled],
+
fieldset[disabled] .btn-primary,
+
.btn-primary.disabled:hover,
+
.btn-primary[disabled]:hover,
+
fieldset[disabled] .btn-primary:hover,
+
.btn-primary.disabled:focus,
+
.btn-primary[disabled]:focus,
+
fieldset[disabled] .btn-primary:focus,
+
.btn-primary.disabled.focus,
+
.btn-primary[disabled].focus,
+
fieldset[disabled] .btn-primary.focus,
+
.btn-primary.disabled:active,
+
.btn-primary[disabled]:active,
+
fieldset[disabled] .btn-primary:active,
+
.btn-primary.disabled.active,
+
.btn-primary[disabled].active,
+
fieldset[disabled] .btn-primary.active {
+
    border-color: yellowgreen;
+
    background-color: yellowgreen;
+
}
+
 
+
.btn-primary .badge {
+
    color: yellowgreen;
+
    background-color: #fff;
+
}
+
 
+
 
+
.btn {
+
    border-radius: 300px;
+
    text-transform: uppercase;
+
}
+
 
+
.btn-lg {
+
    padding: 15px 30px;
+
}
+
 
+
::-moz-selection {
+
    text-shadow: none;
+
    color: #fff;
+
    background: #222;
+
}
+
 
+
::selection {
+
    text-shadow: none;
+
    color: #fff;
+
    background: #222;
+
}
+
 
+
img::selection {
+
    color: #fff;
+
    background: 0 0;
+
}
+
 
+
img::-moz-selection {
+
    color: #fff;
+
    background: 0 0;
+
}
+
 
+
.text-primary {
+
    color: yellowgreen;
+
}
+
 
+
.bg-primary {
+
    background-color: yellowgreen;
+
}
+
    </style>
+
    <!-- 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]-->
+
 
+
    <!-- Custom Fonts from Google -->
+
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
+
   
+
</head>
+
 
+
<body>
+
 
+
    <!-- Navigation -->
+
    <nav id="siteNav" class="navbar navbar-default navbar-fixed-top" role="navigation">
+
        <div class="container">
+
            <!-- Logo and responsive toggle -->
+
            <div class="navbar-header">
+
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
+
                    <span class="sr-only">Toggle navigation</span>
+
                    <span class="icon-bar"></span>
+
                    <span class="icon-bar"></span>
+
                    <span class="icon-bar"></span>
+
                </button>
+
                <a class="navbar-brand" href="#">
+
                <span class="glyphicon glyphicon-home"></span>
+
                IGEM 2017
+
                </a>
+
            </div>
+
            <!-- Navbar links -->
+
            <div class="collapse navbar-collapse" id="navbar">
+
                <ul class="nav navbar-nav navbar-right">
+
                    <li class="active">
+
                        <a href="#">Home</a>
+
                    </li>
+
                    <li>
+
                        <a href="#">Products</a>
+
                    </li>
+
<li class="dropdown">
+
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
+
<ul class="dropdown-menu" aria-labelledby="about-us">
+
<li><a href="#">Engage</a></li>
+
<li><a href="#">Pontificate</a></li>
+
<li><a href="#">Synergize</a></li>
+
</ul>
+
</li>
+
                    <li>
+
                        <a href="#">Contact</a>
+
                    </li>
+
                </ul>
+
               
+
            </div><!-- /.navbar-collapse -->
+
        </div><!-- /.container -->
+
    </nav>
+
 
+
<!-- Header -->
+
    <header>
+
        <div class="intro">
+
            <div class="container">
+
                <h1>IGEM 2017</h1>
+
                <p>Glasgow Team.</p>
+
                <a href="#" class="btn btn-primary btn-lg">Learn More</a>
+
            </div>
+
        </div>
+
    </header>
+
 
+
<!-- Intro Section -->
+
    <section class="intro">
+
        <div class="container">
+
            <div class="row">
+
                <div class="col-lg-8 col-lg-offset-2">
+
                <span class="glyphicon glyphicon-education" style="font-size: 60px"></span>
+
                    <h2 class="section-heading">This sensor will utilise the rare sugar xylulose.</h2>
+
                    <p class="text-light">Which is found in the polysaccharide capsule of campylobacter and is released when the bacteria is run through an acidic solution.</p>
+
                </div>
+
            </div>
+
        </div>
+
    </section>
+
 
+
<!-- Content 1 -->
+
    <section class="content">
+
        <div class="container">
+
            <div class="row">
+
                <div class="col-sm-6">
+
                    <img class="img-responsive img-circle center-block" src="https://static.igem.org/mediawiki/2017/d/df/Campylobactercdc.png" alt="">
+
                </div>
+
                <div class="col-sm-6">
+
                <h2 class="section-header">Campylobacter1</h2>
+
                <p class="lead text-muted">Our project idea is to develop a biosensor to detect the presence of the bacteria Campylobacter. This sensor will utilise the rare sugar xylulose, which is found in the polysaccharide capsule of campylobacter and is released when the bacteria is run through an acidic solution.</p>
+
                <a href="#" class="btn btn-primary btn-lg">Classify It</a>
+
                </div>               
+
               
+
            </div>
+
        </div>
+
    </section>
+
 
+
<!-- Content 2 -->
+
    <section class="content content-2">
+
        <div class="container">
+
            <div class="row">
+
                <div class="col-sm-6">
+
                <h2 class="section-header">Campylobacter2</h2>
+
                <p class="lead text-light">Our project idea is to develop a biosensor to detect the presence of the bacteria Campylobacter. This sensor will utilise the rare sugar xylulose, which is found in the polysaccharide capsule of campylobacter and is released when the bacteria is run through an acidic solution.</p>
+
                <a href="#" class="btn btn-default btn-lg">Test It</a>
+
                </div>   
+
                <div class="col-sm-6">
+
                    <img class="img-responsive img-circle center-block" src="https://static.igem.org/mediawiki/2017/d/d9/Virus-close01.jpg" alt="">
+
                </div>           
+
               
+
            </div>
+
        </div>
+
    </section>   
+
 
+
    <!-- Promos -->
+
<div class="container-fluid">
+
        <div class="row promo">
+
        <a href="#">
+
<div class="col-md-4 promo-item item-1">
+
<h3>
+
Unleash
+
</h3>
+
</div>
+
            </a>
+
            <a href="#">
+
<div class="col-md-4 promo-item item-2">
+
<h3>
+
Synergize
+
</h3>
+
</div>
+
            </a>
+
+
<a href="#">
+
<div class="col-md-4 promo-item item-3">
+
<h3>
+
Human Practise
+
</h3>
+
</div>
+
            </a>
+
        </div>
+
    </div><!-- /.container-fluid -->
+
 
+
<!-- Content 3 -->
+
    <section class="content content-3">
+
        <div class="container">
+
<h2 class="section-header"><span class="glyphicon glyphicon-pushpin text-primary"></span><br> Team </h2>
+
<p class="lead text-light">This sensor will utilise the rare sugar xylulose.</p>
+
                    <a href="#" class="btn btn-primary btn-lg">Check Now</a>             
+
            </div>
+
        </div>
+
    </section>
+
 
+
    <!-- jQuery -->
+
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
 
+
    <!-- Bootstrap Core JavaScript -->
+
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
+
 
+
    <!-- Plugin JavaScript -->
+
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
+
   
+
    <!-- Custom Javascript -->
+
    <script>
+
    // Offset for Site Navigation
+
$('#siteNav').affix({
+
offset: {
+
top: 100
+
}
+
})
+
 
+
</script>
+
 
+
</body>
+
 
+
</html>
+

Latest revision as of 21:00, 15 December 2017

Glasgow iGEM 2017
CampyLOCATOR
Detection of Campylobacter jejuni for the prevention of food poisoning
Project Description

Campylobacter species, especially Campylobacter jejuni, are bacterial pathogens responsible for the majority of food poisoning in the UK. This bacteria is considered to cause over 280,000 cases of bacterial gastroenteritis annually. Although also found on red meat, unpasteurized milk and unfiltered water, 4 out of 5 cases of campylobacteriosis come from contaminated chickens. During the slaughter process the bacterium gets transferred onto the chicken skin and is often found on fresh retail chickens and their packaging. The most important transmission route is consumption of undercooked chicken or other foods that get cross-contaminated from raw poultry meat.

Current detection systems for the pathogen are time-consuming, expensive and inaccessible for everyday users. We therefore aimed to develop a new, cheaper and faster system for detection of C. jejuni using synthetic biology. We approached this by genetically engineering Escherichia coli to serve a function of a dual-input biosensor. The bacterium will sense bacterial quorum sensing signals and xylulose - a sugar naturally present in the outer capsule of Campylobacter jejuni, to detect the pathogen on a swabbed surface.

Using synthetic biology to create a biosensor for detection of Campylobacter jejuni, a bacteria linked to food poisoning.