Difference between revisions of "Team:McMaster"

 
(45 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{McMaster/Header}}
 
 
{{McMaster/w3}}
 
{{McMaster/w3}}
  
 +
<!-- Declare that you are going to use html code instead of wiki code -->
 +
<html>
  
<html>
+
<link href='http://fonts.googleapis.com/css?family=Century+Gothic' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<!-- Start of CSS - Changing iGEM defaults here-->
 +
<style type="text/css">
  
 +
/* WIKI SETTINGS*/
 +
                /*-- remove default heading*/
 +
#home_logo, #sideMenu { display:none; }
 +
        #sideMenu, #top_title, .patrollink  {display:none;}
 +
/* Hide first heading */
 +
.firstHeading {
 +
display: none;
 +
}
 +
 +
/*-- Remove borders, float content left and remove padding/margin */
 +
#content{
 +
background-color: transparent;
 +
//border: 3px solid red;
 +
float: left;
 +
width: 99%;
 +
margin-left: 0.5%;
 +
padding: 0px;
 +
}
 +
#globalWrapper{
 +
//border: 3px solid blue;
 +
float:left;
 +
margin-left:0%;
 +
padding: 0px;
 +
width:100%;
 +
}
  
<div class="w3-content" style="max-width:2000px;margin-top:-51px">
+
/*left align Black Menu Bar */
  <img class="mySlides" src="https://static.igem.org/mediawiki/2017/b/b4/Team_McMasterU_WetLab.jpg" style="width:100%">
+
#top_menu_inside {
  <img class="mySlides" src="https://static.igem.org/mediawiki/2017/b/b4/Team_McMasterU_WetLab.jpg" style="width:100%">
+
margin-left: 25%;
  <img class="mySlides" src="https://static.igem.org/mediawiki/2017/b/b4/Team_McMasterU_WetLab.jpg" style="width:100%">
+
}
</div>
+
</style>
  
<div class="w3-black">
 
    <div class="w3-container w3-content w3-center" style="max-width:1200px;padding: 30px 30px;">
 
    <img class="img-circle-left" style = "background-image:url(https://static.igem.org/mediawiki/2017/b/b4/Team_McMasterU_WetLab.jpg)" >
 
      <h3 class="w3-wide w3-center" style="color:white;">Wetlab</h3>
 
      <p class="w3-opacity" style="color:white;">The increasing prevalence of multidrug-resistant and hypervirulent bacterial strains represents a growing global healthcare concern. However, early detection of pathogenic microbes allow for timely care of patients and the prevention of infectious strains proliferation. In the face of the current challenges in profiling bacterial infections.</p>
 
    <br style = "clear:both">
 
    </div>
 
</div>
 
  
<div class = "band">
+
<!-- Start of CSS-->
<img class="img-circle-right" style = "background-image:url(https://static.igem.org/mediawiki/2017/c/c9/Team_McMasterU_HP.jpg)" >
+
  
<h3> Human Practices </h3>
+
<style type="text/css">
  
<p>The Human Practices team will investigate the current process of detecting antibiotic resistant bacteria to better understand the context for which the Wet Lab is developing the product. We will examine direct and indirect costs, accessibility, time constraints, safety and ethics of the current processes. From the information collected, we will discuss the need and the potential impact of developing products that will detect bacteria more cheaply and quickly.</p>
+
/* PAGE LAYOUT */
  
<br style = "clear:both">
+
/* Change Background color*/
<p></p>
+
body {
<p><hr /></p>
+
background-color: white;
<p></p>
+
}
 +
 
 +
/* Creates a container that will wrap all of the content inside your wiki pages. */
 +
#mainContainer { 
 +
                                //width: 978px;
 +
width: 100%;
 +
overflow:hidden;
 +
margin-left:0%;
 +
                                //margin-right:auto;
 +
                                margin-bottom: 0px;
 +
background-color: #fff;
 +
box-shadow: 0px 0px 50px gray;
 +
//border: 2px solid #565656;
 +
font-family: 'Century Gothic', sans-serif;
 +
font-weight:400;
 +
//font-family: 'Century Gothic', sans-serif;
 +
}
 +
 
 +
/* Creates the container for the menu */
 +
#menuContainer  {
 +
//float:right;
 +
                                width: 100%;
 +
                                  margin: 0 auto;
 +
                                display: inline-block;
 +
                                text-align: center;
 +
padding: 0px 230px;
 +
//note on padding order: top/bottom are 5px, left/right are 15px
 +
//border-top: 0px solid #565656;
 +
//border-bottom: 0px solid #565656;
 +
background-color: #282828;
 +
                               
 +
}
 +
 
 +
/* Creates the container for the content */
 +
#contentContainer {
 +
padding: 0px;
 +
                                margin: 0px;
 +
width: 100%;
 +
//width: 895px;
 +
//width: 930px;
 +
//float: left;
 +
                                display: inline-block;
 +
background-color: #30306E; /*background blue*/
 +
//border: 1px solid red;
 +
//border-top: 14px solid #565656;
 +
font-family: 'Century Gothic', sans-serif;
 +
//font-family: 'Century Gothic', sans-serif;
 +
 
 +
}
 +
 
 +
/*Set up height place holder for the banner*/
 +
#bannerContainer {
 +
//height:200px;
 +
margin:auto;
 +
text-align:center;
 +
color: #24C794;
 +
}
 +
 
 +
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 +
 
 +
/*Change the styling of text for everything inside main container*/
 +
#mainContainer p {
 +
font-size: 16px;
 +
color: #000000;
 +
//padding:10px 0px;
 +
line-height:1.75;
 +
}
 +
 +
/*This changes the color and font family */
 +
#contentContainer h1, h2, h3, h4, h5, h6 {
 +
color: #565656;
 +
border-bottom: none;
 +
font-weight: bold;
 +
                                line-height: 150%;
 +
font-family: 'Century Gothic', sans-serif;
 +
font-weight:800;
 +
//font-family: 'Century Gothic', sans-serif;
 +
margin-top:10px;
 +
padding:25px 0px;
 +
}
 +
#contentContainer h1{
 +
font-size:42px;
 +
}
 +
#contentContainer h2{
 +
font-size:36px;
 +
}
 +
#contentContainer h3{
 +
font-size:30px;
 +
}
 +
#contentContainer h4{
 +
font-size:24px;
 +
}
 +
#contentContainer h5{
 +
font-size:18px;
 +
}
 +
#contentContainer h6{
 +
font-size:16px;
 +
}
 +
#contentContainer li{
 +
font-size:16px;
 +
                                font-family: 'Century Gothic', sans-serif;
 +
}
 +
                        #contentContainer p{
 +
                                font-family: 'Century Gothic', sans-serif;
 +
}
 +
/*Style of the links - links are different inside the menu */
 +
#contentContainer a {
 +
font-weight: bold;
 +
color: #E64B3C;
 +
font-size:16px;
 +
}
 +
 
 +
  /* Styling links on hover- links are different inside the menu */
 +
#contentContainer a:hover {
 +
color: black;
 +
font-size:16px;
 +
text-decoration:none;
 +
}
 +
 
 +
/*Change the styling of tables */
 +
        #contentContainer table {
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    width: 90%;
 +
    margin: auto;
 +
    margin-bottom: 15px;
 +
    margin-top: 15px;
 +
    margin-right: 10px;
 +
    margin-left: 10px;
 +
    }
 +
 
 +
/*Change the styling of table cells*/
 +
    #contentContainer  td {
 +
    padding: 10px;
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    }
 +
 
 +
/*Change the styling of table headers */
 +
    #contentContainer th {
 +
    background-color: #E8E8E9;
 +
    padding: 10px;
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    }
 +
 
 +
 
 +
 
 +
/*MENU STYLING */
 +
 
 +
/*Styling for the links in the menu */
 +
#menuContainer a {
 +
color: #FFF;
 +
text-decoration:none;
 +
font-weight: bold;
 +
}
 +
 
 +
/* Sets the style for lists inside menuContainer  */
 +
#menuContainer ul {
 +
list-style: none;
 +
}
 +
 
 +
/*Styles the list items to become menu buttons */
 +
#menuContainer ul li {
 +
font-size:12px;
 +
color:#FFF;
 +
text-align: center;
 +
display: block;
 +
position:relative;
 +
float:left;
 +
width: 15%;
 +
padding: 0.4%;
 +
}
 +
 
 +
/*For the menu buttons, changes the color when hovering*/
 +
#menuContainer li:hover {
 +
color:  #FFF;
 +
background-color: #2CC94A;
 +
//box-shadow: 0px 0px 10px 1px gray;
 +
}
 +
 
 +
/*Submenus are not displayed as default*/
 +
#menuContainer li ul {
 +
display: none;
 +
position: absolute;
 +
opacity: 0.95;
 +
//box-shadow: 0px 0px 10px 1px gray;
 +
padding:0px 0px;
 +
margin-top: 8px;
 +
width:100%;
 +
//border:3px solid gray;
 +
margin-left: -2.9%;
 +
}
 +
 
 +
/*Submenus are displayed when hovering the menu button */
 +
#menuContainer li:hover ul {
 +
display: block;
 +
}
 +
 
 +
/*Style the submenu buttons*/
 +
#menuContainer li ul li{
 +
background-color: #282828;
 +
color: #FFF;
 +
padding:10px 0px;
 +
margin-bottom:-1px;
 +
                                margin-top: -1px;
 +
width: 100%;
 +
//border: 1px solid #ebb211;
 +
}
 +
 
 +
/*CLASSES */
 +
 
 +
/*Clear class for all the pages, adds spacing too*/
 +
.clear{
 +
clear:both;
 +
height: 10px;
 +
}
 +
 
 +
 
 +
/* highlight box for special messages */
 +
    .highlightBox {
 +
        width:80%;
 +
        margin-left:10%;
 +
                                display:right;
 +
margin-bottom: 15px;
 +
margin-top: 15px;
 +
padding: 15px;
 +
//padding-top: 5px;
 +
font-size:16px;
 +
    }
 +
.band{ 
 +
                                /*text-align: center;*/
 +
margin:0px;
 +
padding:20px 125px;
 +
}
 +
                        .mySlides {display:none;}
 +
                        .videoWrapper {
 +
                                position: relative;
 +
                                padding-bottom: 56.25%; /* 16:9 */
 +
                                padding-top: 25px;
 +
                                height: 0;
 +
                      }
 +
                        .videoWrapper iframe {
 +
                                position: absolute;
 +
                        top: 0;
 +
                        left: 0;
 +
                                width: 100%;
 +
                                height: 100%;
 +
                      }
 +
 
 +
                      /* Creates circular images */
 +
                        .img-circle-left {
 +
                                border-radius: 50%;
 +
                                width: 500px;
 +
                                height:500px;
 +
                                background-size:cover;
 +
                                float:left;
 +
                                margin: 0px 30px 0px 0px;
 +
                        }
 +
 
 +
                        .img-circle-right {
 +
                                border-radius: 50%;
 +
                                width: 500px;
 +
                                height:500px;
 +
                                background-size:cover;
 +
                                float:right;
 +
                                margin: -10px -10px -10px 30px;
 +
                        }
 +
                      .DropDown-menu {
 +
                                width: 500px;
 +
                        }
 +
 
 +
                      .DropDown-menu a {
 +
                                background-color: #eee; /* Grey background color */
 +
                                color: black; /* Black text color */
 +
                                display: block; /* Make the links appear below each other */
 +
                                padding: 12px; /* Add some padding */
 +
                                text-decoration: none; /* Remove underline from links */
 +
                      }
 +
 
 +
                      .DropDown-menu a:hover {
 +
                                background-color: #ccc; /* Dark grey background on mouse-over  */
 +
                      }
 +
 
 +
                    .DropDown-menu a.active {
 +
                              background-color: #7DE655; /* Add a green color to the "active/current" link */
 +
                              color: white;
 +
                      }
 +
                        #menu { margin-top: 0px; }
 +
                        .menu-item { padding: 0 0px 0 0; }
 +
                        nav ul { list-style-type:none; }
 +
                        nav ul li { display: inline; }
 +
                        nav ul li a img { width: 50px; height: 50px; }
 +
 
 +
</style>
 +
<!-- End of CSS -->
 +
 
 +
<!-- Start of the template html elements. -->
 +
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
 +
 
 +
 
 +
 +
 
 +
<!-- Start of menu -->
 +
                        <div id="menuContainer">
 +
<ul>
 +
<a href="https://2018.igem.org/Team:McMaster"><li>HOME</li></a>
 +
<!--
 +
<a href="#"><li>PROJECT
 +
            <ul>
 +
<a href="https://2018.igem.org/Team:McMaster/Background"><li>Background</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/Methodologies"><li>Methodologies</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/Design"><li>Design</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/Hardware"><li>Hardware</li></a>
 +
</ul>
 +
</li></a>
 +
-->
 +
                                      <a href="#"><li>WET LAB
 +
            <ul>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/Description"><li>Project Description</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/GeneSeq"><li>Important Gene Sequences</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/GeneMap"><li>Gene Maps</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/Protocol"><li>Experiment Protocols</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/InterLab"><li>InterLab</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/Demonstrate"><li>Results</li></a>
 +
                                                       
 +
</ul>
 +
</li></a>
 +
 
 +
                                      <a href="#"><li>DRY LAB
 +
            <ul>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/Model"><li>NGS Model</li></a>
 +
<a href="https://2018.igem.org/Team:McMaster/Game"><li>NGS Game — HP Collaboration</li></a>
 +
</ul>
 +
</li></a>
 +
 
 +
                                      <a href="#"><li>HUMAN PRACTICES
 +
            <ul>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/HP/Overview"><li>Overview</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/HP/Gold_Integrated"><li>The NGS Paper</li></a>
 +
<a href="https://2018.igem.org/Team:McMaster/HP/Silver"><li>Stakeholder Interviews</li></a>
 +
                                                       
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/Engagement"><li>Community Engagement</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/Collaboration"><li>Collaboration</li></a>
 +
 +
</ul>
 +
</li></a>
 +
 
 +
                                        <a href="#"><li>TEAM
 +
            <ul>
 +
<a href="https://2018.igem.org/Team:McMaster/Team"><li>Members</li></a>
 +
                <a href="https://2018.igem.org/Team:McMaster/Sponsors"><li>Sponsors</li></a>
 +
                                                        <a href="https://2018.igem.org/Team:McMaster/Attributions"><li>Attributions</li></a>
 +
 +
</ul>
 +
</li></a>
 +
 
 +
 +
 
 +
</ul>
 +
</div>
 +
 
 +
<!-- End of menu  -->
 +
 
 +
                        <!-- Favicon and touch icons -->
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
 +
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 +
 
 +
<link rel="stylesheet"
 +
      href="https://2018.igem.org/Template:McMaster/highlightjs/CSS?action=raw&amp;ctype=text/css">
 +
<script src="https://2018.igem.org/Template:McMaster/highlightjs/JS?action=raw&amp;ctype=text/javascript"></script>
 +
    <script>
 +
hljs.initHighlightingOnLoad();
 +
 
 +
$( document ).ready( function() {
 +
  $('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2018/7/72/T--McMaster--Brain.png');
 +
});
 +
 
 +
</script>
 +
                        <!-- End Favicon and touch icons -->
 +
 
 +
<!-- Start of content -->
 +
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
 +
 
 +
<div id="bannerContainer" >
 +
      <img width = "100%"; src = "https://static.igem.org/mediawiki/2018/3/39/T--McMaster--Header.png">
 
</div>
 
</div>
 +
 +
</html>
 +
 +
 +
<html>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
<div class="w3-black">
+
<div class="w3-mgem-lightpurple">
 
     <div class="w3-container w3-content w3-center" style="max-width:1200px;padding: 30px 30px;">
 
     <div class="w3-container w3-content w3-center" style="max-width:1200px;padding: 30px 30px;">
    <img class="img-circle-left" style = "background-image:url(https://static.igem.org/mediawiki/2017/4/43/Team_McMasterU_DryLab.jpg)" >
+
    <a href="https://2018.igem.org/Team:McMaster/Description"><img style ="background-size:cover;float:left;margin: 0px 30px 0px 0px" src = "https://static.igem.org/mediawiki/2018/5/5c/T--McMaster--Notebook.png"></a>
       <h3 class="w3-wide w3-center" style="color:white;">Dry Lab</h3>
+
       <a href="https://2018.igem.org/Team:McMaster/Description"><h3 class="w3-wide w3-center" style="color:white;">Wet Lab</h3></a>
       <p class="w3-opacity" style="color:white;">The Dry Lab will be supporting the Wet Lab as they use SELEX to find a DNAzyme for a highly pathogenic strain of C. Difficile. During the SELEX process, the Dry Lab will analyze deep sequencing data, monitoring sequence diversity as selection progresses to find possible homologies or motifs that are enriched through selection, using a clustering algorithm. After SELEX has narrowed the DNA library to a few potential DNAzymes, the Dry Lab will use a genetic algorithm as an in silico approach to find highly specific DNAzyme sequences. The affinities of the selected sequences will be measured by the Wet Lab, and high-affinity sequences will be preferentially crossed-over and mutated to create the next generation, in an iterative process that will produce higher-affinity DNAzymes.</p>
+
       <p style="color:white;">Our project this year was to express human amyloid beta protein variants  in E. coli as a system for studying the molecular basis of aggregation. This research will contribute to our understanding of neurodegenerative diseases.</p>
 
     <br style = "clear:both">
 
     <br style = "clear:both">
 
     </div>
 
     </div>
 
</div>
 
</div>
  
<div class = "band">
+
<div class="w3-mgem-lightgrey">
<p></p>
+
    <div class="w3-container w3-content w3-center" style="max-width:1200px;padding: 30px 30px;">
<img class="img-circle-right" style = "background-image:url(https://static.igem.org/mediawiki/2017/8/84/Team_McMasterU_Outreach.jpg)" >
+
   
<h3> Community Outreach </h3>
+
    <a href="https://2018.igem.org/Team:McMaster/HP/Overview"><img style ="background-size:cover;float:right;margin: 0px 0px 0px 30px" src = "https://static.igem.org/mediawiki/2018/d/d6/T--McMaster--HP.png"></a>
<p>The iGEM community outreach team is focused on spreading the interesting work being done in the world of synthetic biology, and more specifically by our research team, across the Hamilton community. We put an extra emphasis on trying to educate and empower students who may be interested in exploring our area of research as a means of achieving two central goals. </p>
+
      <a href="https://2018.igem.org/Team:McMaster/HP/Overview"><h3 class="w3-wide w3-center" style="color:black;">Human Practices</h3></a>
<br style = "clear:both">
+
      <p style="color:black;">By interviewing physicians, educators, and community members, the Human Practices subteam was able to understand Alzheimer's disease from many different perspectives. We are showcasing what we've learned through an educational video aimed to increase public knowledge and destigmatize those living with Alzheimer's.</p>
 +
    <br style = "clear:both">
 +
    </div>
 
</div>
 
</div>
  
<script>
+
<div class="w3-mgem-lightpurple">
// Automatic Slideshow - change image every 4 seconds
+
    <div class="w3-container w3-content w3-center" style="max-width:1200px;padding: 30px 30px;">
var myIndex = 0;
+
    <a href="https://2018.igem.org/Team:McMaster/Model"><img style ="background-size:cover;float:left;margin: 0px 10px 0px 0px" src = "https://static.igem.org/mediawiki/2018/6/61/T--McMaster--NGS--Game.png"></a>
carousel();
+
      <a href="https://2018.igem.org/Team:McMaster/Model"><h3 class="w3-wide w3-center" style="color:white;">Dry Lab</h3></a>
 +
      <p style="color:white;">The Dry Lab will be supporting the Wet Lab to develop an algorithm for NGS data analysis and modelling. We will also be collaborating with the Human Practices team to create a NGS video game.</p>
 +
    <br style = "clear:both">
 +
    </div>
 +
</div>
  
function carousel() {
+
<div class="w3-mgem-lightgrey">
    var i;
+
     <div class="w3-container w3-content w3-center" style="max-width:1200px;padding: 30px 30px;">
    var x = document.getElementsByClassName("mySlides");
+
      <a href="https://2018.igem.org/Team:McMaster/Team"><img style ="background-size:cover;float:right;margin: 0px 0px 0px 30px" src = "https://static.igem.org/mediawiki/2018/e/ea/T--McMaster--Team.png"></a>
     for (i = 0; i < x.length; i++) {
+
      <a href="https://2018.igem.org/Team:McMaster/Team"><h3 class="w3-wide w3-center" style="color:black;">The Team</h3></a>
      x[i].style.display = "none";
+
      <p style="color:black;">From our members to our sponsors and all those have helped us along the way, nothing would have been accomplished without our team. Thank you, from the bottom of our hearts.</p>
    }
+
    <br style = "clear:both">
    myIndex++;
+
    </div>
    if (myIndex > x.length) {myIndex = 1}   
+
</div>
    x[myIndex-1].style.display = "block";
+
    setTimeout(carousel, 4000);  
+
}
+
 
+
// Used to toggle the menu on small screens when clicking on the menu button
+
function myFunction() {
+
    var x = document.getElementById("navDemo");
+
    if (x.className.indexOf("w3-show") == -1) {
+
        x.className += " w3-show";
+
    } else {
+
        x.className = x.className.replace(" w3-show", "");
+
    }
+
}
+
 
+
// When the user clicks anywhere outside of the modal, close it
+
var modal = document.getElementById('ticketModal');
+
window.onclick = function(event) {
+
  if (event.target == modal) {
+
    modal.style.display = "none";
+
  }
+
}
+
</script>
+
 
</html>
 
</html>
<p></p>
 
  
 
{{McMaster/Footer}}
 
{{McMaster/Footer}}

Latest revision as of 21:40, 17 October 2018


Wet Lab

Our project this year was to express human amyloid beta protein variants in E. coli as a system for studying the molecular basis of aggregation. This research will contribute to our understanding of neurodegenerative diseases.


Human Practices

By interviewing physicians, educators, and community members, the Human Practices subteam was able to understand Alzheimer's disease from many different perspectives. We are showcasing what we've learned through an educational video aimed to increase public knowledge and destigmatize those living with Alzheimer's.


Dry Lab

The Dry Lab will be supporting the Wet Lab to develop an algorithm for NGS data analysis and modelling. We will also be collaborating with the Human Practices team to create a NGS video game.


The Team

From our members to our sponsors and all those have helped us along the way, nothing would have been accomplished without our team. Thank you, from the bottom of our hearts.