Difference between revisions of "Team:Glasgow/Katy"

 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
+
{{GlasgowHeader}}
{{Template: Glasgow Home}}
+
<html>
+
<!-- Template by Quackit.com -->
+
<!-- Images by various sources under the Creative Commons CC0 license and/or the Creative Commons Zero license.
+
Although you can use them, for a more unique website, replace these images with your own. -->
+
 
+
<head>
+
 
+
    <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">
+
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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: black;
+
}
+
 
+
p {
+
    font-size: 16px;
+
    line-height: 1.5;
+
}
+
 
+
header {
+
    color: #fff;
+
    background-image: url(https://static.igem.org/mediawiki/2017/2/25/Glasgowbackground.jpeg);
+
    background-position: center;
+
    width: 100%;
+
    padding: 200px 0;
+
    text-align: center;
+
}
+
 
+
header .header-content {
+
    padding: 100px 0;
+
    color: #fff;
+
    background-color: #16a085
+
}
+
 
+
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>
+
                        <a href="#">Project</a>
+
                    </li>
+
                    <li>
+
                        <a href="#">Engineering</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="#">Measurement</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="header">
+
            <div class="header-content-inner">
+
                <h1>GLASGOW IGEM 2017</h1>
+
                <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>
+
Project
+
</h3>
+
</div>
+
            </a>
+
            <a href="#">
+
<div class="col-md-4 promo-item item-2">
+
<h3>
+
Engineering
+
</h3>
+
</div>
+
            </a>
+
+
<a href="#">
+
<div class="col-md-4 promo-item item-3">
+
<h3>
+
Human Practices
+
</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>
+
<table style="width:100%">
+
  <tr>
+
    <th><img src="https://static.igem.org/mediawiki/2017/8/8a/Person-girl-flat.png" alt="" style="width:200px; height:auto;" ></th>
+
      <th><img src="https://static.igem.org/mediawiki/2017/4/4a/Speaker-3.png"></th>
+
          <th><img src="https://static.igem.org/mediawiki/2017/4/4a/Speaker-4.png" class="speaker-img"></th>
+
  </tr>
+
  <tr>
+
    <td></td>
+
    <td>Colonel cluck</td>
+
    <td>Ambra</td>
+
  </tr>
+
</table>
+
                    <a href="https://2017.igem.org/Template:GlasgowTeam" class="btn btn-primary btn-lg">Check Now</a>             
+
            </div>
+
        </div>
+
    </section>
+
 
+
<!-- Footer -->
+
    <footer class="page-footer">
+
   
+
    <!-- Contact Us -->
+
        <div class="contact">
+
        <div class="container">
+
<h2 class="section-heading">Contact Us</h2>
+
<p><span class="glyphicon glyphicon-earphone"></span><br> +1(23) 456 7890</p>
+
<p><span class="glyphicon glyphicon-envelope"></span><br> info@example.com</p>
+
        </div>
+
                <div class="container">
+
<p><span class="glyphicon glyphicon-home"></span><br>
+
<span>Bower Building, Wilkins Teaching Laboratory</span>
+
University of Glasgow
+
<span>University Avenue</span>
+
<span>G12 8QQ</span></p>
+
<p><br><i class="fa fa-facebook fa-3x"></i></a>
+
<a href="#"><i class="fa fa-twitter fa-3x"></i></a>
+
<a href="#"><i class="fa fa-linkedin fa-3x"></i></a></p>
+
</div>       
+
</div>
+
       
+
        <!-- Copyright etc -->
+
        <div class="small-print">
+
        <div class="container">
+
        <p>Copyright &copy; <a href="https://www.igem.org">igem.org</a>2017</p>
+
        </div>
+
        </div>
+
       
+
    </footer>
+
 
+
    <!-- 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 12:48, 26 October 2017

Glasgow iGEM 2017