Difference between revisions of "Team:Sheffield"

 
(96 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
 
−
<!DOCTYPE hmtl>
 
−
 
 
<html>
 
<html>
 
<head>
 
<head>
Line 8: Line 5:
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
 
−
<meta name="iGEM Sheffield 2016" content="Our homepage and the introduction to the iron wars project">
+
<meta name="description" content="">
−
<meta name="author" content="James Gratton">
+
<meta name="author" content="">
−
                <meta property="og:image" content="https://static.igem.org/mediawiki/2016/a/a1/T--Sheffield--home-front-logo-new.png">
+
−
+
−
<title>The first igem sheffield page</title>
+
 
 
 +
<title>A template page</title>
 +
 
<link rel="stylesheet" type="text/css"  
 
<link rel="stylesheet" type="text/css"  
−
                 href="https://2016.igem.org/Template:Sheffield/style/main?action=raw&ctype=text/css" />
+
                 href="https://2016.igem.org/Template:Sheffield/style/template?action=raw&ctype=text/css" />
−
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+
−
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
+
  
−
<!-- Custom styles for this template -->
+
                <link rel="stylesheet" type="text/css"
−
<link href="navbar-fixed-top.css" rel="stylesheet">
+
                href="https://2016.igem.org/Template:Sheffield/style/slide?action=raw&ctype=text/css" />
 +
               
 +
            <link rel="stylesheet" type="text/css"
 +
                href="https://2016.igem.org/Template:Sheffield/style/banner?action=raw&ctype=text/css" />
 +
               
 +
                <link rel="stylesheet" type="text/css"
 +
                href="https://2016.igem.org/Template:Sheffield/style/front?action=raw&ctype=text/css" />
 +
               
 +
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  
−
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
+
                <script
−
<!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+
                  src="https://2016.igem.org/Template:Sheffield/scripts/popover?action=raw&ctype=text/javascript"></script>
−
<script src="assets/js/ie-emulation-modes-warning.js"></script>
+
  
−
<style type="text/css">
+
                <script
 +
                  src="https://2016.igem.org/Template:Sheffield/scripts/front?action=raw&ctype=text/javascript"></script>
 +
                <script
 +
                  src="https://2016.igem.org/Template:Sheffield/scripts/min?action=raw&ctype=text/javascript"></script>
 +
 
 +
<style type="text/css">
 
     #top_title, #sideMenu{
 
     #top_title, #sideMenu{
 
       display:none;
 
       display:none;
Line 36: Line 42:
 
       padding:0;
 
       padding:0;
 
     }
 
     }
 +
    .mw-content-ltr ul {
 +
      margin-left:0px;
 +
}
 +
#results {
 +
        width:600px;
 +
        height:300px;
 +
        z-index:100;
 +
        background-color:rgba(52, 50, 50, 0.85);
 +
        border:#eac100 2px solid;
 +
        border-radius:5px;
 +
        top:50%;
 +
        left:50%;
 +
        margin-top:-150px;
 +
        margin-left:-300px;
 +
        position:fixed;
 +
        padding:20px;
 +
        text-align:center;
 +
}
  
−
#blank {
+
#results span {
−
width:165px;
+
        color:#eac100;
−
}
+
        }
  
−
#stupid p {
+
.close-results {
 +
      border:5px solid #eac100;
 +
        padding:10px;
 +
        width:300px;
 +
        cursor:pointer;
 +
        color: #C4AE00;
 +
    font-size: 40px;
 +
}
 +
.close-results h3 {
 +
border:5px solid #eac100;
 +
        padding:10px;
 +
        width:300px;
 +
        cursor:pointer;
 +
        color: #C4AE00;
 +
    font-size: 40px;
 +
      }
 +
.table-link {
 +
    border-left:#9246D0 1px solid;
 +
    border-right:#9246D0 1px solid;
 +
    width:250px;
 +
}
 +
#button-link img {
 +
      width:200px;
 +
      float:none;
 +
      }
 +
#button-link p {
 +
      font-size:30px;
 +
      text-align:center;
 +
      }
 +
 
 +
#page th, #page td, #page table {
 +
      border:rgba(1,1,1,0);
 +
      padding:0px;
 +
      vertical-align:middle;
 +
      background-color:rgba(1,1,1,0) ;
 +
      }
 +
 
 +
#page h1 {
 +
      font-family:Century Gothic;
 +
      font-weight:normal;
 +
}
 +
 
 +
#shield p {
 
         font-size:25px;
 
         font-size:25px;
 
       }
 
       }
Line 47: Line 113:
 
@media (min-width:992px) and (max-width:1199px) {
 
@media (min-width:992px) and (max-width:1199px) {
  
−
.nav>li {
 
−
width:100px;
 
−
}
 
−
.nav>li>a {
 
−
width:100px;
 
−
}
 
−
        #blank {
 
−
        width:90px;
 
−
        }
 
  
 
}
 
}
  
 
@media (min-width:768px) and (max-width:991px) {
 
@media (min-width:768px) and (max-width:991px) {
−
 
+
#shield  p {
−
    .nav>li {
+
        font-size:20px;
−
width:100px;
+
      }
−
padding:0px 5px 0px 5px;
+
#shield li {
−
   
+
        font-size:20px;
−
}
+
}
−
.nav>li>a {
+
−
width:100px;
+
−
}
+
−
.nav>li:nth-child(4) {
+
−
padding:5px 10px 0px 10px;
+
−
width:100px;
+
−
    }
+
−
   
+
−
   
+
−
  .navimage a img {
+
−
    width: 120px;
+
−
    height: 30px;
+
−
}
+
−
+
−
.navbar-default {
+
−
    background-color: rgba(51,51,51,0.75);
+
−
    height: 50px;
+
−
    }
+
−
   
+
−
    .nav>li>a {
+
−
    width:90px;
+
−
    height:35px;
+
−
    }
+
−
   
+
−
   
+
−
    .nav>li>a>.notebook-icon>img{
+
−
width:25px;
+
−
height:25px;
+
−
}
+
−
 
+
−
.nav>li>a>.PandP-icon>img{
+
−
width:23px;
+
−
height:30px;
+
−
}
+
−
+
−
.nav>li>a>.result-icon>img{
+
−
width:35px;
+
−
height:25px;
+
−
}
+
−
    #blank {
+
−
        width:90px;
+
−
      }
+
 
}
 
}
  
 
@media (max-width:767px) {  
 
@media (max-width:767px) {  
−
       #stupid p {
+
       #shield p {
 
         font-size:15px;
 
         font-size:15px;
 +
        margin:10px;
 
       }
 
       }
−
 
+
     
−
       .jumbotron h2 {
+
#shield li {
 +
font-size:12px;
 +
}
 +
       #shield h2 {
 
         font-size:30px;
 
         font-size:30px;
 +
        margin-left:5px;
 
       }
 
       }
 
        
 
        
−
       .jumbotron span {
+
       #shield span {
 
       font-size:18px;
 
       font-size:18px;
 
       }
 
       }
−
     
+
       .table-link {
−
       .frontimage {
+
        width:200px;
−
      width:100%
+
      }
−
      }
+
      #button-link img {
−
   
+
        width:75px;
−
    .workparagraph h1 {
+
        }
−
      font-size:35px;
+
       #button-link h3 {
−
      }
+
        font-size:20px;
−
        
+
        }
−
    .jumbotron> .right-float>h2 {
+
−
      margin:0px;
+
 
}
 
}
−
   
+
@media( max-width:767px) {
−
      .workimage {
+
        #results {
−
      width:100%;
+
        width:300px;
−
      }
+
        height:250px;
−
</style>
+
        z-index:100;
 +
        top:50%;
 +
        left:50%;
 +
        margin-top:-125px;
 +
        margin-left:-150px;
 +
        position:fixed;
 +
        padding:10px;
 +
        text-align:center;
 +
        }
 +
#results p {
 +
        font-size:15px;
 +
        }
 +
 
 +
} 
 +
</style>
 +
 
 +
 
 
</head>
 
</head>
 
 
  
−
<body style="min-height:2000px;background-color:black">
+
<body style="background-color:black">
 +
        <div id="page">
 
<nav class="navbar navbar-default navbar-fixed-top">
 
<nav class="navbar navbar-default navbar-fixed-top">
 
       <div class="container">
 
       <div class="container">
 
   
 
   
 
         <div class="navbar-header">
 
         <div class="navbar-header">
−
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+
           <div class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
−
             <span class="sr-only">Toggle navigation</span>
+
             <img src="https://static.igem.org/mediawiki/2016/a/a5/T--Sheffield--Website-home-mobile.png">
−
            <span class="icon-bar"></span>
+
           </div>
−
            <span class="icon-bar"></span>
+
−
            <span class="icon-bar"></span>
+
−
          </button>
+
−
          <!-- <a class="navbar-brand" href="#">Igem Sheff 16</a> -->
+
−
        </div>
+
−
       
+
−
        <div class="navbar-header">
+
−
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Igem Sheff 16</a> -->  
 
           <!-- <a class="navbar-brand" href="#">Igem Sheff 16</a> -->  
 
         </div>
 
         </div>
Line 170: Line 192:
 
           <ul class="nav navbar-nav">
 
           <ul class="nav navbar-nav">
 
   
 
   
 +
<li id="navimage" >
 +
<table id="imgtable">
 +
<th>
 +
<div class="navimagediv">
 +
<a href="https://2016.igem.org/Team:Sheffield"><img src="https://static.igem.org/mediawiki/2016/1/18/T--Sheffield--navbar-logo.png"></a>
 +
</div>
 +
</th>
 +
</table>
 +
            </li>
 +
    <li class="dropdown" id="li-home">
 +
              <a href="https://2016.igem.org/Team:Sheffield" >
 +
  <center>
 +
<table id="navtable">
 +
<th>
 +
<center>
 +
<div id="nav-intro">
 +
</div>
 +
</center>
 +
</th>
 +
<tr>
 +
<td>
 +
<p>HOME</p>
 +
</td>
 +
</tr>
 +
</table>
 +
  </center>
 +
              </a>
 +
            </li> 
 
             <li class="dropdown">
 
             <li class="dropdown">
−
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" ><img class="intro-icon" src="https://static.igem.org/mediawiki/2016/1/19/Website-icon-introtx.png"></span></a>
+
            <a href="https://2016.igem.org/Team:Sheffield/Description" class="dropdown-toggle" >
−
 
+
  <center>
−
            </li>
+
<table id="navtable">
−
           
+
<th>
−
            <li id="blank">
+
<center>
−
</li>
+
<div id="nav-intro">
−
+
<img src="https://static.igem.org/mediawiki/2016/5/53/T--Sheffield--Intro-Icon.png">
−
<li id="blank">
+
</div>
−
</li>
+
</center>
−
           
+
</th>
−
            <li class="dropdown">
+
<tr>
−
<div class="navimage">
+
<td>
−
<a href="intro_template.html"><img src="https://static.igem.org/mediawiki/2016/1/18/T--Sheffield--navbar-logo.png"></a>
+
<p>INTRO</p>
−
</div>
+
</td>
−
</li>
+
</tr>
−
+
</table>
−
</ul>
+
  </center>
 +
              </a>
 +
            </li>          
 +
           
 +
            <li class="dropdown">
 +
              <a href="https://2016.igem.org/Team:Sheffield/project" class="dropdown-toggle" >
 +
  <center>
 +
<table id="navtable">
 +
<th>
 +
<center>
 +
<div id="nav-project">
 +
<img src="https://static.igem.org/mediawiki/2016/8/86/T--Sheffield--icon-project.png">
 +
</div>
 +
</center>
 +
</th>
 +
<tr>
 +
<td>
 +
<p>PROJECT</p>
 +
</td>
 +
</tr>
 +
</table>
 +
  </center>
 +
              </a>
 +
            </li>
 
 
−
<ul class="nav navbar-nav navbar-right">
+
<li class="dropdown">
−
        <li class="dropdown">
+
              <a href="https://2016.igem.org/Team:Sheffield/Team" class="dropdown-toggle" >
−
 
+
  <center>
−
                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+
<table id="navtable">
−
                                  <img class="team-icon" src = "https://static.igem.org/mediawiki/2016/4/46/T--Sheffield--website-icon-teamtx.png"></a>  
+
<th>
−
                                </li>
+
<center>
−
                      </ul>
+
<div id="nav-team">
−
         
+
<img src="https://static.igem.org/mediawiki/2016/0/07/T--Sheffield--icon-team.png">
 +
</div>
 +
</center>
 +
</th>
 +
<tr>
 +
<td>
 +
<p>TEAM</p>
 +
</td>
 +
</tr>
 +
</table>
 +
  </center>
 +
              </a>
 +
            </li> 
 
            
 
            
 +
<li class="dropdown">
 +
              <a href="https://2016.igem.org/Team:Sheffield/Notebook" class="dropdown-toggle" >
 +
  <center>
 +
<table id="navtable">
 +
<th>
 +
<center>
 +
<div id="nav-notebook">
 +
<img src="https://static.igem.org/mediawiki/2016/c/ce/T--Sheffield--icon-notebook.png">
 +
</div>
 +
</center>
 +
</th>
 +
<tr>
 +
<td>
 +
<p>NOTES</p>
 +
</td>
 +
</tr>
 +
</table>
 +
  </center>
 +
              </a>
 +
            </li>
 +
           
 +
            <li class="dropdown">
 +
              <a href="https://2016.igem.org/Team:Sheffield/judging" class="dropdown-toggle" >
 +
  <center>
 +
<table id="navtable">
 +
<th>
 +
<center>
 +
<div id="nav-judging">
 +
<img src="https://static.igem.org/mediawiki/2016/3/35/T--Sheffield--icon-judging.png">
 +
</div>
 +
</center>
 +
</th>
 +
<tr>
 +
<td>
 +
<p>JUDGING</p>
 +
</td>
 +
</tr>
 +
</table>
 +
  </center>
 +
              </a>
 +
            </li> 
 
         </div><!--/.nav-collapse -->
 
         </div><!--/.nav-collapse -->
 
       </div>
 
       </div>
 
     </nav>
 
     </nav>
−
<center>
+
   
−
<img src="https://static.igem.org/mediawiki/2016/a/a1/T--Sheffield--home-front-logo-new.png" class="frontimage">
+
    <div id="shield">
−
        </center>
+
          <div id="front">
−
<div class="container">
+
<div class="back-video">
−
        <div id="stupid">
+
<video loop muted autoplay class="fullscreen-bg">
−
      <!-- Main component for a primary marketing message or call to action -->
+
<source src="https://static.igem.org/mediawiki/2016/c/cc/T--Sheffield--front-background.mp4">
−
      <div class="jumbotron">
+
</video>
−
<h2>The March of the Superbugs</h2>
+
</div>
−
<p class="text">As the onset of the post-antibiotic era approaches, we may be forced to take a step back in modern medicine and enter a world where antibiotics are no longer useful. WHO has declared antibiotic resistance as <span>“one of the biggest threats to global health”</span> at present. A major factor contributing to this is the prescription of antibiotics when they are least needed - in the event of a viral infection. With overlapping symptoms, the common cold or flu can often be misinterpreted in the short span of doctor’s appointment.  
+
<div class="tablet left-box">
−
</p>
+
                       
−
+
<div class = "left-but"><h1>New Here?</h1></div>
−
<div class="right-float">
+
−
<h2>Who are we?</h2>
+
                        </div>
−
</div>
+
−
<p>
+
<div class="tablet right-box">
−
We at iGEM Sheffield aim to address this problem by building a device that helps to slow down the buildup of resistance in the future. We are directly addressing the absence of a useful diagnostic tool in the market by building a device that can, within a short span, detect a bacterial infection from a sample of bodily fluid. Thus, <span>eliminating wasted uses of anitibiotics.</span>
+
<div class = "right-but"><h1>Our Theme</h1></div>
−
</p>
+
</div>
−
+
−
<h2>What are we going to do?</h2>
+
<img class="front-img" src="https://static.igem.org/mediawiki/2016/7/75/T--Sheffield--website-frontimg.png">
−
<p>
+
−
How we plan to do this is by engineering bacteria to fight our war against them! Bacteria produce iron-scavenging machineries called siderophores, which when present in bodily fluids, can be detected by E coli receptors. Another engineered strain of E coli will then be able to detect iron uptake by producing a colour change.
+
                        <div class = "phone left-but"><h1>New Here?</h1></div>
−
</p>
+
<div class = "phone right-but"><h1>Our Theme</h1></div>
−
<p>
+
               
−
Our detection system involves the use of the protein hemerythrin, a high-affinity iron-binding protein, that turns blue when bound to iron. By comparing the colour against a standard, the cause of infection can be determined, i.e. viral or bacterial, confirming the need of an antibiotic, producing a more informed prescription all within your doctor’s appointment.  
+
                        <div id="music">
−
</p>
+
                          <center>
−
      </div>
+
                          <audio controls>
−
<div class="workparagraph">
+
                            <source src="https://static.igem.org/mediawiki/2016/9/92/T--Sheffield--IronMarch.mp3" type="audio/mpeg">
−
        <center>
+
                              Your browser does not support this audio element.
−
<h1>Our scribes and architects aren't finished yet! Come back later for more information</h1>
+
                          </audio>
−
        </center>
+
  <p>Credit to John Howard for making this wonderful song for us</p>
−
</div>
+
                          <div class="close-music">
−
+
                        <h3>Close</h3>
−
</center>
+
                        </div>
−
</div>
+
                          </center>
−
     </div> <!-- /container -->
+
                      </div>
−
+
                     
−
<!-- Bootstrap core JavaScript
+
  </div>
 +
 
 +
            <div id="about">
 +
                <div class="container">
 +
                <div class="jumbotron">
 +
                  <h2>How to use the website - a note from the team</h2>
 +
                  <p>We welcome you to team Sheffield's wiki for 2016. The website has been designed to run on all devices big or small. We have made the website as interactive as possible.</p>
 +
<p>For the best experience we recommend using a <span>CHROME</span> browser</p>
 +
<p><span>A few things to look out for:</span></p>
 +
                  <ol>
 +
                  <li><p>Anytime you see a banner like this:</p>
 +
                  <center>
 +
                  <img style="width:200px;float:none" src="https://static.igem.org/mediawiki/2016/8/8e/T--Sheffield--banner-long.png">
 +
                  </center>
 +
                  <p>It will display the text below for that section</p></li>
 +
                  <li>Words like this <button class="btn btn-lg btn-danger" data-placement="top" data-toggle="popover" title="Important word" data-content="A text definition goes here. Click the button to close me">click me</button> are part of our interactive glossary. Click them to bring up a quick definition of the word and click them again to close</li>
 +
                  <li>Or if you want to see all our terms look out for the glossary image to take you to our fulls set of definitions</li>
 +
                      <center>
 +
                      <a href="https://2016.igem.org/Team:Sheffield/glossary">
 +
                      <img style="width:200px;float:none"src="https://static.igem.org/mediawiki/2016/8/86/T--Sheffield--Glossary.png"></a></center>
 +
                  <li><p><span>Wondering where to start?</span></p><p>Click on our introduction button to start you off</li>
 +
                        <center>
 +
                        <div class="table-link">
 +
                        <a href="https://2016.igem.org/Team:Sheffield/Description">
 +
                        <table id="button-link">
 +
                            <tr>
 +
                                <td><center>
 +
                                <img src="https://static.igem.org/mediawiki/2016/5/53/T--Sheffield--Intro-Icon.png">
 +
                                </center> </td>
 +
                            </tr>
 +
                            <tr>
 +
                                <td><p>INTRODUCTION</p></td>
 +
                            </tr>
 +
                        </table>
 +
                        </a>
 +
                        </div>
 +
                        </center>
 +
                    </ol>
 +
                    <center>
 +
                    <div class="close-jumbo">
 +
                        <h3>Close</h3>
 +
                    </div>
 +
                    </center>
 +
                </div>
 +
                <div class="back-video">
 +
<video loop muted autoplay class="fullscreen-bg">
 +
<source src="https://static.igem.org/mediawiki/2016/c/cc/T--Sheffield--front-background.mp4">
 +
</video>
 +
</div>
 +
               
 +
              </div>
 +
              </div>
 +
            <div>
 +
     </div>
 +
    </div>
 +
    <!-- Bootstrap core JavaScript
 
     ================================================== -->
 
     ================================================== -->
 
     <!-- Placed at the end of the document so the pages load faster -->
 
     <!-- Placed at the end of the document so the pages load faster -->
−
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+
      
−
     <script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
+
      
−
    <script src="js/bootstrap.min.js"></script>
+
−
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+
−
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
+
−
    <script src="js/popover.js"></script>
+
 
      
 
      
 
      
 
      

Latest revision as of 00:14, 3 December 2016

A template page

New Here?

Our Theme

New Here?

Our Theme

Credit to John Howard for making this wonderful song for us

Close

How to use the website - a note from the team

We welcome you to team Sheffield's wiki for 2016. The website has been designed to run on all devices big or small. We have made the website as interactive as possible.

For the best experience we recommend using a CHROME browser

A few things to look out for:

  1. Anytime you see a banner like this:

    It will display the text below for that section

  2. Words like this are part of our interactive glossary. Click them to bring up a quick definition of the word and click them again to close
  3. Or if you want to see all our terms look out for the glossary image to take you to our fulls set of definitions

  4. Wondering where to start?

    Click on our introduction button to start you off

Close