Difference between revisions of "Team:Sheffield"

 
(88 intermediate revisions by 5 users not shown)
Line 15: Line 15:
 
                 <link rel="stylesheet" type="text/css"  
 
                 <link rel="stylesheet" type="text/css"  
 
                 href="https://2016.igem.org/Template:Sheffield/style/slide?action=raw&ctype=text/css" />
 
                 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"  
 
                 <link rel="stylesheet" type="text/css"  
                 href="https://2016.igem.org/Template:Sheffield/style/team?action=raw&ctype=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>
 +
 
 +
                <script
 +
                  src="https://2016.igem.org/Template:Sheffield/scripts/popover?action=raw&ctype=text/javascript"></script>
 +
 
 +
                <script
 +
                  src="https://2016.igem.org/Template:Sheffield/scripts/front?action=raw&ctype=text/javascript"></script>
 
                 <script  
 
                 <script  
 
                   src="https://2016.igem.org/Template:Sheffield/scripts/min?action=raw&ctype=text/javascript"></script>
 
                   src="https://2016.igem.org/Template:Sheffield/scripts/min?action=raw&ctype=text/javascript"></script>
Line 33: Line 45:
 
       margin-left:0px;
 
       margin-left:0px;
 
}
 
}
#blank {
+
#results {
width:165px;
+
        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;
 +
}
  
#shield p {
+
#results span {
        font-size:25px;
+
        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;
 
       }
 
       }
  
#HQ_page th, #HQ_page td, #HQ_page table {
+
#page th, #page td, #page table {
 
       border:rgba(1,1,1,0);
 
       border:rgba(1,1,1,0);
 
       padding:0px;
 
       padding:0px;
Line 47: Line 101:
 
       background-color:rgba(1,1,1,0) ;
 
       background-color:rgba(1,1,1,0) ;
 
       }
 
       }
#HQ_page h1 {
+
 
 +
#page h1 {
 
       font-family:Century Gothic;
 
       font-family:Century Gothic;
 
       font-weight:normal;
 
       font-weight:normal;
 
}
 
}
 +
 +
#shield  p {
 +
        font-size:25px;
 +
      }
 +
 +
@media (min-width:992px) and (max-width:1199px) {
 +
 +
 +
}
 +
 +
@media (min-width:768px) and (max-width:991px) {
 +
#shield  p {
 +
        font-size:20px;
 +
      }
 +
#shield li {
 +
        font-size:20px;
 +
}
 +
}
 +
 +
@media (max-width:767px) {
 +
      #shield  p {
 +
        font-size:15px;
 +
        margin:10px;
 +
      }
 +
     
 +
#shield li {
 +
font-size:12px;
 +
}
 +
      #shield h2 {
 +
        font-size:30px;
 +
        margin-left:5px;
 +
      }
 +
     
 +
      #shield span {
 +
      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>
 +
  
 
</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">
Line 62: Line 183:
 
         <div class="navbar-header">
 
         <div class="navbar-header">
 
           <div 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">
             <img src="https://static.igem.org/mediawiki/2016/1/18/T--Sheffield--navbar-logo.png">
+
             <img src="https://static.igem.org/mediawiki/2016/a/a5/T--Sheffield--Website-home-mobile.png">
 
           </div>
 
           </div>
 
           <!-- <a class="navbar-brand" href="#">Igem Sheff 16</a> -->  
 
           <!-- <a class="navbar-brand" href="#">Igem Sheff 16</a> -->  
Line 75: Line 196:
 
<th>
 
<th>
 
<div class="navimagediv">
 
<div class="navimagediv">
<a href="intro_template.html"><img src="https://static.igem.org/mediawiki/2016/1/18/T--Sheffield--navbar-logo.png"></a>
+
<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>
 
</div>
 
</th>
 
</th>
Line 81: Line 202:
 
             </li>
 
             </li>
 
    <li class="dropdown" id="li-home">
 
    <li class="dropdown" id="li-home">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
+
               <a href="https://2016.igem.org/Team:Sheffield" >
 
  <center>
 
  <center>
 
<table id="navtable">
 
<table id="navtable">
Line 100: Line 221:
 
             </li> 
 
             </li> 
 
             <li class="dropdown">
 
             <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
+
            <a href="https://2016.igem.org/Team:Sheffield/Description" class="dropdown-toggle" >
 
  <center>
 
  <center>
 
<table id="navtable">
 
<table id="navtable">
Line 121: Line 242:
 
              
 
              
 
             <li class="dropdown">
 
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
+
               <a href="https://2016.igem.org/Team:Sheffield/project" class="dropdown-toggle" >
 
  <center>
 
  <center>
 
<table id="navtable">
 
<table id="navtable">
Line 142: Line 263:
 
 
 
<li class="dropdown">
 
<li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
+
               <a href="https://2016.igem.org/Team:Sheffield/Team" class="dropdown-toggle" >
 
  <center>
 
  <center>
 
<table id="navtable">
 
<table id="navtable">
Line 163: Line 284:
 
            
 
            
 
<li class="dropdown">
 
<li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
+
               <a href="https://2016.igem.org/Team:Sheffield/Notebook" class="dropdown-toggle" >
 
  <center>
 
  <center>
 
<table id="navtable">
 
<table id="navtable">
Line 184: Line 305:
 
              
 
              
 
             <li class="dropdown">
 
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
+
               <a href="https://2016.igem.org/Team:Sheffield/judging" class="dropdown-toggle" >
 
  <center>
 
  <center>
 
<table id="navtable">
 
<table id="navtable">
Line 208: Line 329:
 
      
 
      
 
     <div id="shield">
 
     <div id="shield">
    <div class = "container" >
+
          <div id="front">
<div style="height:100px"></div>
+
<div class="back-video">
<div class="heading">
+
<video loop muted autoplay class="fullscreen-bg">
<table>
+
<source src="https://static.igem.org/mediawiki/2016/c/cc/T--Sheffield--front-background.mp4">
<th class="banner-img">
+
</video>
<img src="https://static.igem.org/mediawiki/2016/6/67/T--Sheffield--heading-banner.png">
+
</th>
+
<th>
+
<div class="heading-title"><h1 style="padding:0px">THE TEAM</h1></div>
+
</th>
+
<th class="banner-img">
+
<img src="https://static.igem.org/mediawiki/2016/b/b2/T--Sheffield--heading-banner-flip.png">
+
</th>
+
</table>
+
</div>
+
 
+
+
<div class="jumbotron">
+
<p>We are a multi diverse team of many disciplines blah blah .....</p>
+
<div class="buttoncollection">
+
<div class = "button button1">
+
<p>Undergrads</p>
+
 
</div>
 
</div>
 +
<div class="tablet left-box">
 +
                       
 +
<div class = "left-but"><h1>New Here?</h1></div>
 
 
<div class = "button button2">
+
                        </div>
<p>Advisors</p>
+
</div>
+
 
 
<div class = "button button3">
+
<div class="tablet right-box">
<p>Supervisors</p>
+
<div class = "right-but"><h1>Our Theme</h1></div>
 
</div>
 
</div>
 
 
<div class = "button button4">
+
<img class="front-img" src="https://static.igem.org/mediawiki/2016/7/75/T--Sheffield--website-frontimg.png">
<p>Attributions</p>
+
</div>
+
                        <div class = "phone left-but"><h1>New Here?</h1></div>
</div>
+
<div class = "phone right-but"><h1>Our Theme</h1></div>
</div>
+
               
<div class="container2">
+
                        <div id="music">
<!--undergrad-->
+
                          <center>
<div class="intro text0">
+
                          <audio controls>
<center>
+
                            <source src="https://static.igem.org/mediawiki/2016/9/92/T--Sheffield--IronMarch.mp3" type="audio/mpeg">
<img src="css/slider-intro.png">
+
                              Your browser does not support this audio element.
</center>
+
                          </audio>
</div>
+
  <p>Credit to John Howard for making this wonderful song for us</p>
<div class= "undergrad text1">
+
                          <div class="close-music">
<div class= "entry">
+
                        <h3>Close</h3>
<table>
+
                        </div>
<th>
+
                          </center>
<div class="img"></div>
+
                      </div>
</th>
+
                     
<th>
+
  </div>
<div class="bio blue"><h1>Brandon Ford</h1>
+
<h2>Molecular and Microbiologist of House Brandopedia</h2>
+
<p>Brandon is a Molecular Biologist and our team’s very own Pun Generator. He is often known as the Brandopedia for his extensive knowledge in just about everything. When asked about his “inner funk”, his answer was “I would say that my skin is very good at keeping my inner funk inside where it belongs, but when that fails, I use a plaster or bandage.”
+
Brandon is a dispenser of accurate and valuable information and in general, a complete know-it-all. <p>
+
</p>
+
</div>
+
</th>
+
<th>
+
<div class="img"></div>
+
</th>
+
</table>
+
</div>
+
<div class="entry">
+
<table>
+
<th>
+
<div class="img"></div>
+
</th>
+
<th>
+
<div class="bio gold"><h1>Wesley Ho</h1>
+
<h2>Economist and P+P Co-ordinator of House Dorito-Dog</h2>
+
<p>Wesley is an Economist and describes himself as a noisy character that likes to make sure that we’re all awake at every point of team time. He is passionate about Economics and enjoys teaching everyone and anyone who shows interest (this includes times when we’re all tired at the end of the meetings). He is often overwhelmed by the level of science but always does his best to understand and has become our ‘simplicity seal of approval’ for the scientists. He forms one half of Hansley #WeShipHansley
+
</p>
+
</div>
+
</th>
+
<th>
+
<div class="img"></div>
+
</th>
+
</table>
+
</div>
+
<center>
+
<img class="heart" src="css/heart.png">
+
</center>
+
<div class="entry">
+
<table>
+
<th>
+
<div class="img"></div>
+
</th>
+
<th>
+
<div class="bio blue"><h1>Hannah Macfarlane</h1>  
+
<h2>Biomedical Scientist and P+P Co-ordinator of House Hannzilla </h2>
+
<p>Hannah is a part-time Biomedical Scientist, part-time Policy and Practices enthusiast. She is always full of ideas for how we can interview and talk to more patients or people and is also the other half of Hansley (see Wesley above for first half). #WeShipHansley 
+
</p>
+
</div>
+
</th>
+
<th>
+
<div class="img"></div>
+
</th>
+
</table>
+
</div>
+
<div class="entry">
+
<table>
+
<th>
+
<div class="img"></div>
+
</th>
+
<th>
+
<div class="bio gold"><h1>Wai Ching Lin</h1>  
+
<h2>Bioengineer and Modelling Expert of House Wai-Ching-For-Love</h2>
+
<p>Wai Ching is a Bioengineering student that loves to model systems and do basically anything and everything computer-related. She is of House Wai-Ching-For-Love because if you replace “Waiting” with “Wai Ching” in Avicii’s song “Waiting For Love”, it actually sounds better. Go on. Try it.
+
</p>
+
</div>
+
</th>
+
<th>
+
<div class="img"></div>
+
</th>
+
</table>
+
</div>
+
<div class="entry">
+
<table>
+
<th>
+
<div class="img"></div>
+
</th>
+
<th>
+
<div class="bio blue"><h1>Oana Pelea</h1>
+
<h2>Geneticist and Microbiologist of House Flower Fairy</h2>
+
<p>Miss Pelea of House Flower Fairy is our team hipster. She always has a smile on her face and is consistently enthusiastic even when everyone else gets down. Almost devout to the ways of veganism with an exception from our trips to Paris, London and that takeaway… 
+
Being of House Flower Fairy, she loves all life and treats her experiments like her babies.
+
She can be very nice but has a fierce streak to be blunt and ask people to get straight to the point. Beating around the bush is NOT an option. </p>
+
</div>
+
</th>
+
<th>
+
<div class="img"></div>
+
</th>
+
</table>
+
</div>
+
<div class="entry">
+
<table>
+
<th>
+
<div class="img"></div>
+
</th>
+
<th>
+
<div class="bio gold"><h1>James “you-havin’-a-giggle-mate” Gratton</h1>
+
<h2>Control Systems and Robotics Engineer of House Lubricator</h2>
+
<p>James is our Chief Graphics Designer, Wiki Builder and All-Round-Tech-Monkey. He’s the genius behind our logo and our-all-time-provider of British slang...that’s where his middle name comes from. “U wot mate?” He’ would like to think he artistic visionary and is never satisfied with anything artistic.
+
Of House Lubricator (don’t ask), James is one of the three engineers from our team who has also quite recently been known for his obsession with carrots. #JamesAndHisCarrot </p>
+
</div>
+
</th>
+
<th>
+
<div class="img"></div>
+
</th>
+
</table>
+
</div>
+
<div class="entry">
+
<table>
+
<th>
+
<div class="img"></div>
+
</th>
+
<th>
+
<div class="bio blue"><h1>Magdelana Dabrowska </h1>  
+
<h2>Biochemist and Head Microbiologist of House Vodka </h2>
+
<p>Magda is the mama of the Microbiology. Yes, you heard us.
+
She always seems to know exactly what she’s doing and can be seen dashing around the lab working on the team’s next bacterial monstrosity.
+
Due to her Polish heritage and her belonging to House Vodka, she has acquired a high tolerance of alcohol, in particular vodka. Magda is always keen on sharing this talent with the rest of the teams on socials, even if they cannot possibly take another shot!
+
 
+
<span>Note to self: Do NOT enter a drinking contest with her</span>.</p>
+
 
+
</div>
+
</th>
+
<th>
+
<div class="img"></div>
+
</th>
+
</table>
+
</div>
+
<div class="entry">
+
<table>
+
<th>
+
<div class="img"></div>
+
</th>
+
<th>
+
<div class="bio gold"><h1>Jamie Grimshaw</h1>
+
<h2>Molecular Biologist and Modeller of House Sly Fox</h2>
+
<p>Jamie is the calm and collected kid of the group. Of House Sly Fox, Jamie likes to play the Devil's Advocate in team discussions. In the man’s own words, “I am innately boring, but not to the point where that is particularly interesting.”</p>
+
</div>
+
</th>
+
<th>
+
<div class="img"></div>
+
</th>
+
</table>
+
</div>
+
<div class="entry">
+
<table>
+
<th>
+
<div class="img"></div>
+
</th>
+
<th>
+
<div class="bio blue"><h1>Jake Edmans</h1>  
+
<h2>Chemist of House Troll</h2>
+
<p>Jake, of House Troll, is an online gamer and a quieter member of the group. Jake will happily eat his whole meal and then take ALL leftover food donations from everyone else in the group.
+
Don’t mess with him in an online game or get rekt.</p>
+
  
</div>
+
            <div id="about">
</th>
+
                <div class="container">
<th>
+
                <div class="jumbotron">
<div class="img"></div>
+
                  <h2>How to use the website - a note from the team</h2>
</th>
+
                  <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>
</table>
+
<p>For the best experience we recommend using a <span>CHROME</span> browser</p>
</div>
+
<p><span>A few things to look out for:</span></p>
<div class="entry">
+
                  <ol>
<table>
+
                  <li><p>Anytime you see a banner like this:</p>
<th>
+
                  <center>
<div class="img"></div>
+
                  <img style="width:200px;float:none" src="https://static.igem.org/mediawiki/2016/8/8e/T--Sheffield--banner-long.png">
</th>
+
                  </center>
<th>
+
                  <p>It will display the text below for that section</p></li>
<div class="bio gold"><h1>Saylee Jangam </h1>  
+
                  <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>
<h2>Bioengineer and Device Expert of House Jennifer</h2>
+
                  <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>
<p>The Social Media Queen of the group, Saylee, has an endless list of contacts that she can talk to about the project. She is always pushing the team to be lively and even more social (even if most of them want a quiet night in to themselves). In Paris, Saylee found her belonging to her long-lost House, House Jennifer. For those who don’t already know, Jen is her not-so-annoying alter ego. Don’t worry, you’ll come across her in Boston.</p>
+
                      <center>
</div>
+
                      <a href="https://2016.igem.org/Team:Sheffield/glossary">
</th>
+
                      <img style="width:200px;float:none"src="https://static.igem.org/mediawiki/2016/8/86/T--Sheffield--Glossary.png"></a></center>
<th>
+
                  <li><p><span>Wondering where to start?</span></p><p>Click on our introduction button to start you off</li>
<div class="img"></div>
+
                        <center>
</th>
+
                        <div class="table-link">
</table>
+
                        <a href="https://2016.igem.org/Team:Sheffield/Description">
</div>
+
                        <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>
+
               
<!--Advisors !-->
+
              </div>
<div class="text advisors text2">
+
              </div>
<div class="entry">
+
            <div>
<table>
+
<th>
+
<div class="img"></div>
+
</th>
+
<th>
+
<div class="bio gold"><h1>Dimitrios </h1>  
+
<h2>Bioengineer and Device Expert of House Jennifer</h2>
+
<p>The Social Media Queen of the group, Saylee, has an endless list of contacts that she can talk to about the project. She is always pushing the team to be lively and even more social (even if most of them want a quiet night in to themselves). In Paris, Saylee found her belonging to her long-lost House, House Jennifer. For those who don’t already know, Jen is her not-so-annoying alter ego. Don’t worry, you’ll come across her in Boston.</p>
+
</div>
+
</th>
+
<th>
+
<div class="img"></div>
+
</th>
+
</table>
+
</div>
+
+
</div>
+
+
</div>
+
 
     </div>
 
     </div>
 
     </div>
 
     </div>
Line 460: Line 421:
 
     ================================================== -->
 
     ================================================== -->
 
     <!-- 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