Difference between revisions of "Team:Sheffield"

 
(67 intermediate revisions by 5 users not shown)
Line 23: Line 23:
 
                  
 
                  
 
                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
−
                  
+
 
 +
                 <script
 +
                  src="https://2016.igem.org/Template:Sheffield/scripts/popover?action=raw&ctype=text/javascript"></script>
 +
 
 
                 <script  
 
                 <script  
 
                   src="https://2016.igem.org/Template:Sheffield/scripts/front?action=raw&ctype=text/javascript"></script>
 
                   src="https://2016.igem.org/Template:Sheffield/scripts/front?action=raw&ctype=text/javascript"></script>
Line 41: Line 44:
 
     .mw-content-ltr ul {
 
     .mw-content-ltr ul {
 
       margin-left:0px;
 
       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;
 
}
 
}
  
 +
#results span {
 +
        color:#eac100;
 +
        }
  
−
 
+
.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 {
 
#page th, #page td, #page table {
Line 93: Line 142:
 
       font-size:18px;
 
       font-size:18px;
 
       }
 
       }
 +
      .table-link {
 +
        width:200px;
 +
      }
 +
      #button-link img {
 +
        width:75px;
 +
        }
 +
      #button-link h3 {
 +
        font-size:20px;
 +
        }
 
}
 
}
−
     
+
@media( max-width:767px) {
 +
        #results {
 +
        width:300px;
 +
        height:250px;
 +
        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>
 
</style>
  
Line 261: Line 336:
 
</div>
 
</div>
 
<div class="tablet left-box">
 
<div class="tablet left-box">
−
<div class = "left-but"><h1>About Us</h1></div>
+
                       
−
</div>
+
<div class = "left-but"><h1>New Here?</h1></div>
 +
 +
                        </div>
 
 
 
<div class="tablet right-box">
 
<div class="tablet right-box">
−
<div class = "right-but"><h1>Coming soon</h1></div>
+
<div class = "right-but"><h1>Our Theme</h1></div>
 
</div>
 
</div>
 
 
 
<img class="front-img" src="https://static.igem.org/mediawiki/2016/7/75/T--Sheffield--website-frontimg.png">
 
<img class="front-img" src="https://static.igem.org/mediawiki/2016/7/75/T--Sheffield--website-frontimg.png">
 
 
−
                         <div class = "phone left-but"><h1>About Us</h1></div>
+
                         <div class = "phone left-but"><h1>New Here?</h1></div>
−
<div class = "phone right-but"><h1>Timeline</h1></div>
+
<div class = "phone right-but"><h1>Our Theme</h1></div>
−
+
               
−
</div>
+
                        <div id="music">
 +
                          <center>
 +
                          <audio controls>
 +
                            <source src="https://static.igem.org/mediawiki/2016/9/92/T--Sheffield--IronMarch.mp3" type="audio/mpeg">
 +
                              Your browser does not support this audio element.
 +
                          </audio>
 +
  <p>Credit to John Howard for making this wonderful song for us</p>
 +
                          <div class="close-music">
 +
                        <h3>Close</h3>
 +
                        </div>
 +
                          </center>
 +
                      </div>
 +
                     
 +
  </div>
 +
 
 
             <div id="about">
 
             <div id="about">
 
                 <div class="container">
 
                 <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">
 
                 <div class="back-video">
 
<video loop muted autoplay class="fullscreen-bg">
 
<video loop muted autoplay class="fullscreen-bg">
Line 281: Line 412:
 
</video>
 
</video>
 
</div>
 
</div>
−
                 <div style="margin-top:120px" class="jumbotron">
+
                  
−
<h2>The March of the Superbugs</h2>
+
−
<p >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. The World Health Organisation has declared antibiotic resistance as <span>“one of the biggest threats to global health”</span>. A major factor contributing to this is the mis-prescription of antibiotics when they are not at all needed - in the case of a viral infection. With overlapping symptoms to many bacterial infections, the common cold or flu can often be misinterpreted in the short span of doctor’s appointment.
+
−
</p>
+
−
+
−
<div class="right-float">
+
−
<h2>Who are we?</h2>
+
−
</div>
+
−
<p>
+
−
We at iGEM Sheffield aim to address this problem by building a device that helps to slow down the future development of antibiotic resistance. We are directly addressing the absence of a useful diagnostic tool in the market by building a device that can detect a bacterial infection from a sample of bodily fluid, within a short time-span. Thus, <span>preventing unnecessary use of antibiotics.</span>
+
−
</p>
+
−
+
−
<h2>What are we going to do?</h2>
+
−
<p>
+
−
We plan to do this by engineering bacteria to fight our war against them! Bacteria are engaged in a constant battle with the human body over the precious resource, iron. Iron-scavenging machines called siderophores are released by bacteria. The immune system fights back by producing lipocalin, which neutralises siderophores. We are engineering a strain of E coli to be part of a system which detects increased lipocalin levels, characteristic of a bacterial infection, and responds with a change in fluorescence.
+
−
</p>
+
−
<p>
+
−
Our detection system involves the use of Fur, an iron-dependent repressor, linked to the fluorescent reporter protein, GFP, via a RyhB invertor. By measuring the intensity of fluorescence, 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.
+
−
</p>
+
−
              <center>
+
−
                  <div class="close-jumbo"><h3>Close</h3></div>
+
 
               </div>
 
               </div>
 
               </div>
 
               </div>

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