Difference between revisions of "Team:Lethbridge HS/Design"

(Prototype team page)
 
 
(30 intermediate revisions by 6 users not shown)
Line 1: Line 1:
−
{{Lethbridge_HS}}
+
{{Team:Lethbridge_HS/bootstrapcss}}  
−
<html>
+
<html lang="en">
 +
    <head>
 +
       
 +
       
 +
       
 +
        <!-- Wiki Style Reset (From U of C)-->
 +
    <style type="text/css">
 +
      /* Reset the wiki style by overriding with a reset stylesheet.
 +
        The relevant wiki css rules are reset by using rules with higher priority.
 +
        (Written by Florian Albrecht)
 +
        Shoutout to the 2016 U of C wiki */
  
 +
      /* Start general reset ================================================== */
 +
        html body {font-size: inherit;font-family: inherit;background-color: transparent;color: inherit;padding: 0;}
 +
        div#globalWrapper {font-size: inherit;margin: 0;padding: 0;position: static;width: auto;}
 +
      /* Start top-section reset ============================================== */
 +
        div#top-section {border: 0;height: auto;margin: 0;position: static;width: auto;}
 +
        div#p-logo {height: auto;position: static;width: auto;z-index: auto;}
 +
        div#p-logo a, div#p-logo a:hover {text-decoration: none; font-family: 'Roboto', sans-serif;}
 +
        div#menubar {font-family: inherit;font-size: inherit;line-height: inherit;position: static;top: 0px;white-space: normal;width: auto;z-index: auto;}
 +
        div.left-menu, div.left-menu a {color: inherit;left: 0;text-align: left;text-transform: none;font-family: 'Roboto', sans-serif;}
 +
        div#menubar ul {color: inherit;list-style: disc outside none;margin: 0;padding: 0; font-family: 'Roboto', sans-serif;}
 +
        div#menubar li {cursor: auto;display: list-item;padding: 0;margin: 0;position: static; font-family: 'Roboto', sans-serif;}
 +
        div.left-menu li a {padding: 0; font-family: 'Roboto', sans-serif;}
 +
        div.left-menu:hover {color: inherit;background-color: transparent;}
 +
        div.left-menu:hover a {color: inherit;font-family: 'Roboto', sans-serif;}
 +
        div.right-menu, div.right-menu a {color: inherit;right: 0;text-align: left;font-family: 'Roboto', sans-serif;}
 +
        div.right-menu li a {background-color: transparent;color: inherit;padding: 0;font-family: 'Roboto', sans-serif;}
 +
        div.right-menu li a:hover {color: inherit;text-decoration: none;font-family: 'Roboto', sans-serif;}
 +
        div#search-controls {background-color: transparent;height: auto;position: static;right: 0;text-align: left;top: 0;width: auto;z-index: auto;}
 +
      /* Start content reset ================================================== */
 +
        div#content {background: transparent;border: 0;color: inherit;line-height: inherit;margin: 0;padding: 0;position: static;width: auto;z-index: auto;}
 +
        body li {margin: 0; font-family: 'Roboto', sans-serif;}
 +
        body h1, body h2, body h3, body h4, body h5, body h6 {background: transparent;border: 0;color: inherit;padding: 0; font-family: 'Roboto', sans-serif;}
 +
        body .firstHeading {margin: 0;}
 +
        div#contentSub {color: inherit;font-size: inherit;line-height: inherit;margin: 0;width: auto;}
 +
        div#catlinks {background-color: transparent;border: 0;clear: both;margin: 0;padding: 0;}
 +
      /* Start footer reset =================================================== */
 +
        div#footer-box {background-color: transparent;border: 0;margin: 0;padding: 0;width: auto;}
 +
        div#footer {color: inherit;font-size: inherit;text-align: left;}
 +
        div#f-poweredbyico, div#f-copyrightico {float: none;}
 +
        div#footer li {margin: 0;display: list-item; font-family: 'Roboto', sans-serif;}
 +
      </style>
  
−
<div class="column full_size judges-will-not-evaluate">
+
      <!-- SideMenu for iGEM Stuff -->
−
<h3>★  ALERT! </h3>
+
      <style type="text/css">
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Awards#Special_Prizes"> design special prize</a>. </p>
+
      #sideMenu{width: 200px;position: absolute;top: 20px;left: 1020px;z-index: 10;padding-top: 0px;padding-bottom: 15px;padding-left: 15px;padding-right: 15px;background-color: white;text-align: left;display: none;z-index: 9996;}
 +
      #content{width: 100%;padding: 0px;margin-left: 0px;}
 +
      #top_title{overflow: hidden;display: none;}
 +
      #top_menu_14{height: 20px;}
 +
      #top_menu_under{height: 0px;}
 +
      #globalWrapper{padding-bottom: 200px;}
 +
      </style>
  
 +
      <!-- Custom Styling -->
 +
      <style>
 +
      a {list-style-image: none;}
 +
      ul {list-style-image: none;}
 +
      ol {list-style-image: none;}
 +
      li {list-style-image: none;}
 +
      </style>
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
 
−
</div>
 
  
  
  
−
<div class="column full_size">
+
<style>
 +
body{
 +
  background-color: white; 
 +
    font-family: 'Open Sans', sans-serif;
 +
}
 +
.jumbotron {
 +
    background-color: white;
 +
    position: relative;
 +
}
 +
.slide{
 +
    width:100%;
 +
   
 +
    margin: 0;
 +
   
 +
}
 +
#slide0{
 +
    background-image: url("https://static.igem.org/mediawiki/2016/9/9c/T—lethbridgehs--IMG_4553_cover_and.png");
 +
    background-size:cover;
 +
    background-position: center center;
 +
    background-repeat: no-repeat;
 +
    height: 50vh;
 +
    overflow: hidden;
 +
    margin: 0;
 +
    padding-top: 5%;
 +
    background-color: #333333;
 +
}
 +
#firsttitle{
 +
    vertical-align: center;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    text-align: left;
 +
    color: white;
 +
    vertical-align: center;
 +
position:absolute;
 +
bottom:0;
  
 +
 
 +
font-size: 8em;
 +
}
 +
#secondtitle{
 +
    vertical-align: center;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    text-align: center;
 +
    color: white;
 +
    vertical-align: middle;
 +
  top: 25%;
 +
font-size: 2em;
 +
}
 +
.slidesecondlist{
 +
    list-style-type: none;
 +
    margin-left: 15%;
 +
}
 +
.slidesecondlist ul{
 +
    margin: 0;
 +
    padding: 20px;
 +
    background-color: none;
 +
}
 +
#slidesecond{
  
−
<p>
+
    overflow: hidden;
−
By talking about your design work on this page, there is one medal criterion that you can attempt to meet, and one award that you can apply for. If your team is going for a gold medal by building a functional prototype, you should tell us what you did on this page.
+
    margin: 0;
−
</p>
+
    padding-top: 0;
 +
    padding: 0;
 +
    background-color: #eee7dd;
 +
}
  
 +
#slide_project_0{
 +
    background-image: url("images/funnyteamcover.png");
 +
    background-size:cover;
 +
    background-position: center -10%;
 +
    background-repeat: no-repeat;
 +
    height: 90%;
 +
    overflow: hidden;
 +
}
 +
#slide_team_0{
 +
    background-image: url("images/IMG_4553.jpg");
 +
    background-size:cover;
 +
    background-position: center -10%;
 +
    background-repeat: no-repeat;
 +
    height: 90%;
 +
    overflow: hidden;
 +
}
 +
#slide_hp_0{
 +
    background-image: url("images/funnyteamcover.png");
 +
    background-size:cover;
 +
    background-position: center -10%;
 +
    background-repeat: no-repeat;
 +
    height: 90%;
 +
    overflow: hidden;
 +
}
 +
#slide0title{
 +
    color: white;
 +
    display: block;
 +
    margin: auto;
 +
    text-align: center;
 +
}
 +
#blooddrop{
 +
    position: absolute;
 +
    bottom: 0;
 +
    left: 0;
 +
  right: 0;
 +
  margin: 0 auto;
 +
    z-index: 1;
 +
    -webkit-animation: fadeInOut 2s infinite;
 +
    -moz-animation: fadeInOut 2s infinite;
 +
    -o-animation: fadeInOut 2s infinite;
 +
    animation: fadeInOut 2s infinite;
 +
}
 +
#slide1{
 +
    /*background-color:#eee7dd;*/
 +
    background-color:white;
 +
  /* background-image: url("images/289680_1231091663_large.jpg");
 +
    background
 +
    background-size:cover;
 +
    background-position: center center;
 +
    background-repeat: no-repeat;*/
 +
    color: black;
 +
   
 +
}
 +
#slide1Sub{
 +
    margin-left: 10%;
 +
    margin-right: 10%;
 +
   
 +
}
 +
#slide2{
 +
  /* background-image: url("images/anotherteamcover.png");*/
 +
    background-color: green;
 +
    background-size: cover;
 +
    background-position: center center;
 +
    background-repeat: no-repeat;
 +
}
 +
#slide6{
 +
   
 +
}
 +
#slide3{
 +
    background-color: #cf4848;
 +
    height: 90%;
 +
    padding-top:2%;
 +
}ding-top:1%;
 +
#slide1title{
 +
    color:red;
 +
    text-align: center;
 +
    font-size:60px;
 +
    margin-top:0%;
 +
}
 +
#slide12ndline{
 +
    color:red;
 +
    text-align: center;
 +
    font-size:50px;
 +
}
 +
#slide1para{
 +
    font-size: 1.1em;
 +
    color: black;
 +
}
 +
.logo{
 +
    float:left;
 +
    margin-left:9%;
 +
    margin-top: 1%;
 +
}
 +
.navbar-header{
 +
    margin-top:-20px;
 +
}
 +
.navbar-default{
 +
  /** box-shadow: 0px 8px 6px -6px #999;**/
 +
 +
}
 +
.navbar-default .navbar-nav>li>a {
 +
    color: white;
 +
    font-size: 15px;
 +
    padding-top:2px;
 +
    padding-top:2px;
 +
    margin-top: 12px;
 +
}
 +
.navbar-collapse.collapse {
 +
    padding-bottom: 6px;
 +
    padding-top: 3px;
 +
}
 +
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
 +
    color: white;
 +
    background-color: transparent;
 +
}
  
−
<p>This is a prize for the team that has developed a synthetic biology product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways.</p>
+
.removeNavBarColor{
 +
    background-color: transparent;
 +
   
 +
}
 +
.makeNavBarColor{
 +
  /** background-color: #CC141C ;*/
 +
    background-color: #dc4640 ;
 +
   
 +
   
 +
}
  
−
<p>
+
.navbar-default .navbar-nav>li>a{
−
If you are working on art and design as your main project, please join the art and design track. If you are integrating art and design into the core of your main project, please apply for the award by completing this page.
+
    padding-top: 30px;
−
</p>
+
    margin-top: 0;
 +
    margin-bottom: 0%;
 +
    padding-bottom: 15px;
 +
    color:white;
 +
}
 +
.navbar-collapse.collapse{
 +
    padding-top: 0;
 +
    padding-bottom: 0;
 +
}
 +
@-webkit-keyframes fadeInOut{
 +
    0% { opacity: 0;}
 +
    50% { opacity: 1; }
 +
    100% { opacity:0;}
 +
}
 +
@-moz-keyframes fadeInOut{
 +
    0% { opacity: 0;}
 +
    50% { opacity: 1; }
 +
    100% { opacity:0;}
 +
}
 +
@-o-keyframes fadeInOut{
 +
    0% { opacity: 0;}
 +
    50% { opacity: 1; }
 +
    100% { opacity:0;}
 +
}
 +
@keyframes fadeInOut{
 +
    0% { opacity: 0;}
 +
    50% { opacity: 1; }
 +
    100% { opacity:0;}
 +
}
  
 +
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
 +
        font-family: Flaticon;
 +
        font-size: 30px;
 +
        font-style: normal;
 +
        margin-left: 0px;
 +
        color: white;
 +
   
 +
    }
  
−
<p>Teams who want to focus on art and design should be in the art and design special track. If you want to have a sub-project in this area, you should compete for this award.</p>
+
 
 +
.glyph {
 +
        display: inline-block;
 +
        width: 9em;
 +
        margin: 1em;
 +
        text-align: center;
 +
        vertical-align: top;
 +
        background: #FFF;
 +
    float: left;
 +
    }
 +
    .glyph .glyph-icon {
 +
        display:inline-block;
 +
        float: left;
 +
       
 +
        font-family:"Flaticon";
 +
        font-size: 64px;
 +
    }
 +
.glyph .glyph-icon:before {
 +
        font-size: 64px;
 +
        color: white;
 +
        margin-left: 0;
 +
    }
 +
 
 +
.menuIcon{
 +
 +
}
 +
.active{
 +
    background-color: red;
 +
    color: white !important;
 +
}
 +
[class^="active"]:before, [class*="active"]:before, [class^="active"]:after, [class*="active"]:after {
 +
    color: white;
 +
}
 +
.menuIcon:before,
 +
.menuIcon:after { 
 +
 
 +
        font-size: 20px;
 +
 
 +
}
 +
.menuIcon2:after { 
 +
 
 +
        font-size: 40px;
 +
 
 +
}
 +
 
 +
.coverCircle{
 +
    margin: 0;
 +
    padding: 0;
 +
    display: block;
 +
    position: absolute;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
}
 +
.sidebar{
 +
    list-style-type: none;
 +
    list-style-position: inside;
 +
    color: #cc141c;
 +
    font-size: 1em;
 +
    left: 0;
 +
    right: 0;
 +
}
 +
.sidebar li{
 +
  list-style-position: inside;
 +
    padding-top: 20px;
 +
    color: #cc141c;
 +
    font-size: 2em;
 +
 
 +
 
 +
}
 +
a:visited {
 +
    color: #cc141c;
 +
 
 +
}
 +
 
 +
.fixSideBar{
 +
    position: fixed;
 +
    top: 8%;
 +
    left: 0;
 +
    right: 0;
 +
}
 +
.removeFixSideBar{
 +
    position: absolute;
 +
    left: 0;
 +
    right: 0;
 +
}
 +
 
 +
.outerBar{
 +
    position: relative;
 +
    word-wrap:break-word;
 +
}
 +
.fixNoteBookSideBar{
 +
    position: fixed;
 +
    top: 8%;
 +
    right: 0;
 +
 
 +
}
 +
.removeFixNoteBookSideBar{
 +
   
 +
}
 +
.profilePicBox{
 +
    width: 100%;
 +
 
 +
 
 +
    background-color: red;
 +
    margin-top: 10px;
 +
    padding: 0;
 +
   
 +
}
 +
.profilePicBox img{
 +
    margin: 0;
 +
    padding: 0;
 +
   
 +
}
 +
.profileInfoBox{
 +
    display: none;
 +
    background-color: white;
 +
    position: absolute;
 +
    z-index: 1000;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding-right: 2em;
 +
}
 +
.showInfoBox{
 +
    display: block;
 +
}
 +
.makeGray{
 +
    -webkit-filter: grayscale(100%);
 +
    filter: grayscale(100%);
 +
}
 +
.noteBookMonthLabels{
 +
    margin: left:3%;
 +
}
 +
#datelist{
 +
    display: none;   
 +
}
 +
#dateList li{
 +
    list-style-type: none;
 +
    font-size: 1em;
 +
}
 +
.notebookSidebar{
 +
    width: inherit;
 +
}
 +
.notebookSideBar h1{
 +
    padding-top:5px;
 +
    padding-bottom: 5px;
 +
    font-size: 2em;
 +
}
 +
.notebookIcon {
 +
font-size: 0px;
 +
cursor: pointer;
 +
width: auto;
 +
height: auto;
 +
text-align: center;
 +
position: relative;
 +
z-index: 1;
 +
color: #fff;
 +
margin-left:auto;
 +
margin-right:auto;
 +
 
 +
}
 +
 
 +
 
 +
.notebookIcon:before {
 +
font-family: 'Flaticon';
 +
speak: none;
 +
font-size: 35px;
 +
line-height: 35xp;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
    color: white;
 +
display: block;
 +
-webkit-font-smoothing: antialiased;
 +
text-align:center;
 +
margin-left:auto;
 +
margin-right:auto;
 +
    vertical-align: center;
 +
    position: relative;
 +
    top:5%;
 +
    transform: translateY(-5%);
 +
}
 +
/*****************************************Time line*********************************/
 +
.timeline{
 +
    list-style: none;
 +
    position: relative;
 +
}
 +
 
 +
.timeline li{
 +
    position: relative;
 +
}
 +
.tl_month{
 +
    width: 100%;
 +
    height: 50px;
 +
    background-color: #ee4d4d;
 +
    margin-bottom: 15px;
 +
      vertical-align: center;
 +
    padding-top: 0.75%;
 +
    padding-left: auto;
 +
    padding-right: auto;
 +
    color:white;
 +
}
 +
.tl_month h2{
 +
    float:inherit;
 +
    margin-top: auto;
 +
    margin-bottom: auto;
 +
    color: white;
 +
}
 +
.tl_time {
 +
    display: block;
 +
    width: 25%;
 +
    margin-top:2%;
 +
    padding-right: 100px;
 +
    position: absolute;
 +
    font-size:20;
 +
    color:#ee4d4d;
 +
}
 +
/**************************How to make font size on notebook responsive*******/
 +
.tl_label{
 +
    margin-bottom: 15px;
 +
    margin-left: 25%;
 +
    color: black;
 +
    border: 3px solid #ee4d4d;
 +
    position: relative;
 +
    border-radius: 5px;
 +
    background: white;
 +
    padding-left: 2%;
 +
    padding-right: 2%;
 +
    cursor: pointer;
 +
}
 +
.tl_label h2{
 +
    margin-bottom: 15px;
 +
    font-size: 1.3em;
 +
}
 +
.tl_label:before{
 +
    right: 100%;
 +
    border: solid transparent;
 +
    content: '';
 +
    height: 0;
 +
    width: 0;
 +
    position: absolute;
 +
    pointer-events: none;
 +
    border-right-color: #ee4d4d;
 +
    border-width: 1vw;
 +
    /*top: 1vw;*/
 +
}
 +
.dateContent{
 +
    display: none;
 +
    padding: 10px;
 +
}
 +
.tl_icon{
 +
    width: 40px;
 +
    height: 40px;
 +
    position: absolute;
 +
    background: #ee4d4d;
 +
    margin-top:1%;
 +
    border-radius: 50%;
 +
    box-shadow:  0 0 0 8px #ee4d4d;
 +
    top:0;
 +
   
 +
    position: relative;
 +
    float: left;
 +
    left: auto;
 +
    left: 20%;
 +
    margin-left: -25px;
 +
}
 +
.tl_icon img{
 +
    margin-top:4px;
 +
    margin-left: 2px;
 +
}
 +
.caption{
 +
    text-align:center;
 +
}
 +
.topOfTimeLineEntry{
 +
 
 +
}
 +
.dropdown:hover .dropdown-menu {
 +
display: block;
 +
}
 +
/*******************************************************************/
 +
.an-slide-title{
 +
    text-align: center;
 +
}
 +
.an-slide-img{
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
}
 +
.animatedSlide{
 +
    background-color: transparent;
 +
    overflow: hidden;
 +
}
 +
.carousel-indicators{
 +
    bottom: -8%;
 +
    padding-bottom: 0;
 +
    margin-bottom:
 +
       
 +
}
 +
.sidebar{
 +
    padding-top: 10px;
 +
}
 +
#homepageslide5{
 +
    background-color: #343838 ;
 +
    height: 30%;
 +
}
 +
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
 +
    color: white;
 +
}
 +
.containerForExploreTeam{
 +
    height: 100%;
 +
}
 +
.exploreteam{
 +
    display: inline-block;
 +
    float: left;
 +
    text-align: center;
 +
    color: white;
 +
    vertical-align: middle;
 +
    position: relative;
 +
  top: 25%; 
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
}
 +
#homepageslide6{
 +
    background-color: black;
 +
}
 +
#credits{
 +
    color: white;
 +
}
 +
.button{
 +
    float: left;
 +
    display: inline-block;
 +
    border-radius: 30px;
 +
    background-color: #ee4d4d;
 +
    padding: 1.5% 2%;
 +
    color: white;
 +
    position: relative;
 +
    text-align: center;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
}
 +
.constantSidebar{
 +
    background-color: red;
 +
    position: fixed;
 +
   
 +
}
 +
.jumbotron {
 +
    padding: 0;
 +
}
 +
.menuitem{
 +
    width: 100%;
 +
    padding-right: 20px;
 +
    padding-top: 8px;
 +
}
 +
.menuitem p{
 +
float: right;
 +
margin: 0;
 +
    padding: 0;
 +
}
 +
.subHeaderContainer{
 +
    width: 100%;
 +
    background-color: red;
 +
}
 +
.doublepic1 h1{
 +
    display: block;
 +
    text-align: center;
 +
    color: white;
 +
    vertical-align: middle;
 +
    font-size: 3em;
 +
  top: 25%;
 +
}
 +
.doublepic2 h1{
 +
    display: block;
 +
    text-align: center;
 +
    color: white;
 +
    font-size: 3em;
 +
    vertical-align: middle;
 +
  top: 25%;
 +
}
 +
.doublepic1{
 +
    float: left;
 +
    height: 50%;
 +
    margin: 0;
 +
    padding: 0;
 +
    width: 50%;
 +
    background-image: url("images/Learning-More-About-The-Latest-Science-Research-1.jpg");
 +
    background-size:cover;
 +
    background-repeat: no-repeat;
 +
}
 +
.doublepic2{
 +
    float: left;
 +
height: 50%;
 +
    margin: 0;
 +
    padding: 0;
 +
    width: 50%;
 +
    background-image: url("images/LethHS_Group_Photo1.jpg");
 +
    background-size:cover;
 +
    background-repeat: no-repeat;
 +
}
 +
.sidebarright{
 +
float:left;
 +
width:20%;
 +
 
 +
}
 +
 
 +
.contentleft{
 +
float:left;
 +
width:80%;
 +
 
 +
}
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
    <!-- Import Google Icon Font -->
 +
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 +
    <!-- Roboto Font -->
 +
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 +
    <!--Import materialize.css-->
 +
    <!--Let browser know website is optimized for mobile-->
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 +
    <!-- Page Title -->
 +
    <title>Lethbridge HS iGEM 2016</title>
 +
 
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
        <meta charset="utf-8">
 +
        <meta name="viewport" content="width=device-width, initial-scale=1">
 +
       
 +
<!--<link rel="stylesheet" href="https://2016.igem.org/Team:Lethbridge_HS/bootstrapcss?action=raw&ctype=text/css">
 +
      <link rel="stylesheet" href="https://2016.igem.org/Team:Lethbridge_HS/maincss?action=raw&ctype=text/css">  -->
 +
        <link rel="stylesheet" href="flaticon.css">
 +
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 +
        <script src="https://2016.igem.org/Team:Lethbridge_HS/bootstrapmin?action=raw&ctype=text/javascript"></script>
 +
        <script src="https://2016.igem.org/Team:Lethbridge_HS/localscrollmin?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
        <script src="https://2016.igem.org/Team:Lethbridge_HS/scrolltomin?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
 
 +
               
 +
 
 +
        <link rel="stylesheet" href="animations.css">
 +
       
 +
        <script type="text/javascript">
 +
            $(document).ready(function(){
 +
                $('#blooddrop').addClass('delay-2000 animated pulse');
 +
                var s = $(".menu");
 +
                s.addClass("removeNavBarColor");
 +
                $(window).scroll(function(){
 +
                    var windowPos = $(window).scrollTop();
 +
                   
 +
                    if (windowPos >= 50){
 +
                        s.addClass("makeNavBarColor"); 
 +
                        s.removeClass("removeNavBarColor");
 +
                       
 +
                    }
 +
                    else{
 +
                        s.addClass("removeNavBarColor"); 
 +
                        s.removeClass("makeNavBarColor");
 +
                    }
 +
                })
 +
            });
 +
           
 +
           
 +
 
 +
        </script>
 +
    </head>
 +
 
 +
    <body>
 +
        <nav class="navbar navbar-default navbar-fixed-top menu" style="border:none;">
 +
            <div class="container-fluid" style="padding-left:10%; padding-right:10%;">
 +
                <div class="navbar-header">
 +
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1" aria-expanded="false">
 +
                        <span class="sr-only">Toggle navgiation</span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                    </button>
 +
                    <a class="navbar-brand" href="https://2016.igem.org/Team:Lethbridge_HS" style="color:#CC141C; margin-top:20%;"><img src="https://static.igem.org/mediawiki/2016/5/50/T—lethbridgehs--whitelogo_and.png" width="70"></a>
 +
                </div>
 +
               
 +
                <div class="collapse navbar-collapse" id="navbar1">
 +
                    <ul class="nav navbar-nav navbar-right" >
 +
                     
 +
                       
 +
                        <li class= "dropdown">
 +
                            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">PROJECT<b class="caret"></b></a>
 +
                            <ul class="dropdown-menu">
 +
                                <li>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Description">DESCRIPTION</a>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Design">DESIGN</a>
 +
<a href="https://2016.igem.org/Team:Lethbridge_HS/Prototype">PROTOTYPE</a>
 +
<a href="https://2016.igem.org/Team:Lethbridge_HS/Proof">PROOF OF CONCEPT</a>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Experiments">EXPERIMENTS</a>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Results">RESULTS</a>
 +
<a href="https://2016.igem.org/Team:Lethbridge_HS/Achievements">ACHIEVEMENTS</a>
 +
                                </li>
 +
                            </ul>   
 +
                        </li>
 +
 
 +
<li class= "dropdown">
 +
                            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">PARTS<b class="caret"></b></a>
 +
                            <ul class="dropdown-menu">
 +
                                <li>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Basic_Part">BASIC PARTS</a>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Composite_Part">COMPOSITE PARTS</a>
 +
                                </li>
 +
                            </ul>   
 +
                        </li>
 +
                       
 +
                       
 +
 
 +
<li class= "dropdown">
 +
                            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">HUMAN PRACTICES<b class="caret"></b></a>
 +
                            <ul class="dropdown-menu">
 +
                                <li>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Human_Practices">HUMAN PRACTICES</a>
 +
<a href="https://2016.igem.org/Team:Lethbridge_HS/HP/Silver">SILVER</a>
 +
  <a href="https://2016.igem.org/Team:Lethbridge_HS/HP/Gold">GOLD</a>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Integrated_Practices">INTEGRATED HUMAN PRACTICES</a>
 +
<a href="https://2016.igem.org/Team:Lethbridge_HS/Engagement">ENGAGEMENT</a>
 +
                                </li>
 +
                            </ul>   
 +
                        </li>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<li class= "dropdown">
 +
                            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">NOTEBOOK<b class="caret"></b></a>
 +
                            <ul class="dropdown-menu">
 +
                                <li>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Notebook">NOTEBOOK</a>
 +
<a href="https://2016.igem.org/Team:Lethbridge_HS/Methods">METHODS</a>
 +
 
 +
                                </li>
 +
                            </ul>   
 +
                        </li>
 +
 
 +
 
 +
 
 +
                        <li><a href="https://2016.igem.org/Team:Lethbridge_HS/Safety" style="" class="menuitem" style="margin:0; padding:0; ">SAFETY</a></li>
 +
                                               
 +
                        <li class= "dropdown">
 +
                            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">TEAM<b class="caret"></b></a>
 +
                            <ul class="dropdown-menu">
 +
                                <li>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Team#students">STUDENTS</a>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Team#students">ADVISORS</a>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Team#students">SPONSORS</a>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Attributions">ATTRIBUTIONS</a>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Collaborations">COLLABORATIONS</a>
 +
                                </li>
 +
                            </ul>   
 +
                        </li>
 +
                       
 +
                        <li><a href="https://igem.org/Main_Page" style="" class="menuitem" style="margin:0; padding:0 ">IGEM</a></li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
        </nav>
 +
       
 +
        <div class="jumbotron slide" id="slide0" style="">
 +
<div class="container-fluid" style="margin-left:10%;">
 +
            <h1 id="firsttitle" style=""> <b>DESIGN</b></h1>
 +
            <!--<div style="position:relative;">
 +
            <video width="100%" autoplay muted loop style="float:left; position:absolute; z-index:5;">
 +
                <source src="Product%20Demonstration%20Video%20for%20Lumify%20USB%20Solar%20Fairy%20Lights.mp4" type="video/mp4">
 +
            </video>
 +
                </div>-->
 +
           
 +
        </div>
 +
       
 +
        </div>
 +
 
 +
<div class="container-fluid" style="margin-left:10%; margin-right:10%;">   
 +
<div class="row">
 +
<div class="col-md-2">
 +
<ul class="sidebar">
 +
 
 +
</ul>
 
</div>
 
</div>
 +
<div class="col-md-11">
 +
<h3>Market Research</h3>
 +
<a name="first"></a>
 +
<p>In order to understand what types of products are available or that are in the testing phase, our team did some research to look at how we could design our product to improve upon the issues in the products we found.</p>
  
 +
<p><br><img src="https://static.igem.org/mediawiki/2016/d/d2/T--Lethbridge_HS--table--.png" width="800px" height=""500px"><br/>The above table shows a comparison between Coagu.coli and blood coagulants that are currently in the market. As you can see, most of these products are not available to be used yet, and are not affordable. Looking at each coagulant more specifically though, we can recognize the faults present in each:</p>
 +
<p><b>QuikClot:</b>According to the official QuikClot website, this coagulant intercepts in the natural blood clotting cascade at the very beginning. It uses a substance known as kaolin, which starts the clotting process with the activation of factor XII. Since this factor is located at the start of the clotting cascade, this product will not be as “quick” as the name suggests (Z-Medica, 2014). QuikClot has also been known to be troublesome to remove from a wound after application as the material can become too hard if it is left too long in the wound. Bleeding can also resume after removal (NurseAmyandDrBones, 2015).</p>
 +
<p><b>VetiGel:</b>This coagulant seems to be the best out of all the others. It is fast and affordable. The only problem is that it is not yet ready to be revealed in the market for human use, and has only been focused on being used in veterinarian clinics on animals (Weller, 2014).</p>
 +
<p><b>Tisseel</b> Although this factor has not been included in the table, Tisseel is known to be made from substances made of human plasma, which “can contain infectious agents”(Center & Evaluation, 2014) and transmit diseases. Looking into the other faults that this coagulant contains, Tisseel is not available to be used in a home setting by an individual. Instead, it is supposed to be applied by a healthcare professional in a medical setting (Drugs, n.d.). And since Tisseel is a fibrin sealant, it is found to be more expensive than other types of coagulants (2009). </p>
 +
<p><b>Duraseal and Floseal:</b> These are both surgical compounds and would not be beneficial to an individual for use on a normal wound. (Corporation, 2016; pdriscoll, 2015).</p>
 +
<p><b>Xyntha:</b> This coagulant is only useful to people with a deficiency of factor VIII (classic hemophilia), and isn’t useful to other types of hemophilia or Von Willebrand's disease (Pfizer Inc, 2016). </p>
 +
<p>Overall, the table shows just why our product Coagu.coli is the perfect coagulant. </p>
 +
<h3>Our Constructs</h3>
 +
<p><b>First Construct
 +
</b></p>
 +
<p> <br><img src="https://static.igem.org/mediawiki/2016/9/9f/T--Lethbridge_HS--construct1--.jpeg"><br/>To obtain our goal of an accelerated clotting process, we have deployed the venom serine protease “Cerastotin” which will act on the thrombin, bypassing multiple factors in the clotting cascade and cut long fibrinogen strands into fibrin monomers which will stop the bleeding at a greatly accelerated rate. In order for the venom to stay localized at the wound site, we have augmented a short fibrin peptide with the venom that will polymerize with the other fibrin monomers at the wound site. With the polymerization of the venom within a permanent clot and with blood pressure directing flow to the wound, the venom will not be traveling throughout the body and initiating a clot other than that of the wound site. </p>
 +
<p> We chose a constitutive medium strength promoter (J23107) and a medium/strong RBS for our construct in order to produce an ample amount of venom, but also allowing our Thiol isomerase time to stabilize the multiple disulphide bonds in the venom, so the protein will fold properly and its enzymatic activity increases. </p>
 +
<p>
 +
To ensure our venom protein folds properly, we have a periplasmic signal attached to both the venom/fibrin protein as well as the thiol isomerase. Foreign proteins don't fold well within the rough cytoplasm, so we sent our proteins to the periplasmic space which is a more ideal situation for our venom. With addition to the DsbC, the enzymatic activity of the venom should be significantly higher which in turn should accelerate our clotting. By having our proteins in the periplasmic space, we only need to puncture the outer membrane in order to lyse the cell. This function also allows us to release our construct without introducing E.coli inside the body.
 +
</p>
 +
<p> As a side note, we decided to use E.Coli as our chassis because it is easier to use than other chassis such as yeast, and we have experience of working with it before. We have looked into using other chassis such as plant cells, but based on the convenience of E.Coli, we went with that. 
 +
</p>
 +
<p><b>Second Construct</b></p>
 +
<p><br><img src="https://static.igem.org/mediawiki/2016/f/fe/T--Lethbridge_HS--construct_2.jpg" height=""500px"><br/>The design of our first construct induced a rapid production of clotting proteins and in order to supplement it, we have designed a construct that would stabilize the clot and sterilize the wound. In order to stabilize the clot, we added Human Factor XIIIa (propeptide removed) which is the enzyme responsible for the polymerization of fibrin monomers, by keeping the promoters and binding sites the same strength we ensure that all of the fibrin-venom strands bind at the wound site and form a permanent plug that will not be easily re-opened. Having Factor XIIIa will accelerate the rate of polymerization which further ensures that the venom-fibrin strands will stay localized.
 +
</p>
 +
<p>In addition, we have added an AntiMicrobial peptide to insure that all bacteria and infection that is potentially in the wound is sterilized. We have deployed the AMP LL-37 which punctures the outer membrane of bacterial cells causing their organelles to become exposed, ending in the cells dying. We have paired the AMP with a thrombin cleavage site that when introduced to the venom serine protease (Cerastotin) from our original construct, will cut the AMP that is bound to Factor XIIIa at the thrombin site, and at that moment become a functional protein that sterilizes the wound. </p>
 +
<h3>Application Method</h3>
 +
<p>
  
 +
<left><table>
 +
<tr><td><br><img src="https://static.igem.org/mediawiki/2016/6/67/T--Lethbridge_HS--bandage--.jpeg" width="350px" height=""250px"><br/></td>
 +
<td><br> <img src="https://static.igem.org/mediawiki/2016/9/9b/T--Lethbridge_HS--syringe--.jpeg" width="350px" height=""250px"><br/></td></tr>
 +
</table></left>
 +
</p>
 +
<p>In order to apply our product to the wound, we will contain our construct in a pre-filled syringe that can be applied to the wound which would be followed by a bandage for sealing it in place. Although our team discussed various other application methods such as spray, gel, or gauze, we eventually decided on the syringe and bandage because of advice and feedback we had received from interviews that were conducted. For instance, a bandage is more resistant to cold temperatures, easy to apply and was the most popular answer on the survey.<br><img src="https://static.igem.org/mediawiki/2016/3/36/T--Lethbridge_HS--applicationsurveyresults.jpg
  
 +
"><br/></p>
  
 +
<p> We decided to use a syringe because it is already in use by other blood coagulants, for example Pfizer and Xyntha. </p>   
  
 +
<h3>References</h3>
 +
<a name="second"></a>
 +
<p>Center, & Evaluation, B. (2014, December 31). Product information. Retrieved October 16, 2016, from http://www.fda.gov/BiologicsBloodVaccines/BloodBloodProducts/ApprovedProducts/LicensedProductsBLAs/FractionatedPlasmaProducts/ucm089262.htm</p>
 +
<p>Corporation, B. H. (2016). FLOSEAL Hemostatic matrix. Retrieved October 16, 2016, from http://www.floseal.com/us/</p>
 +
<p>Drugs. Tisseel medical facts from drugs.Com. Retrieved October 16, 2016, from https://www.drugs.com/mtm/tisseel.html </p>
 +
<p>hemostatguy@gmail.com. (2009, June 14). Medical Hemostat. Retrieved October 16, 2016, from http://medicalhemostat.blogspot.ca/2009/06/hemostasis-market-review-of-gelfoam.html</p>
 +
<p>NurseAmyandDrBones. (2015, September 25). Celox and Quikclot to control bleeding. Retrieved October 16, 2016, from active shooter, https://www.doomandbloom.net/celox-and-quikclot-to-control-bleeding/</p>
 +
<p>Pfizer, Inc. (2016, February ). Home. Retrieved October 16, 2016, from http://www.xyntha.com/</p>
 +
<p>pdriscoll. (2015, May 4). Synthetic surgical sealants | | advanced medical technologies. Retrieved October 16, 2016, from http://blog.mediligence.com/2015/05/04/synthetic-surgical-sealants/</p>
 +
<p>Weller, C. (2014, November 20). Tomorrow’s band-aid stops bleeding instantly [VIDEO]. Innovation. Retrieved from http://www.medicaldaily.com/pulse/vetigel-stops-bleeding-seconds-polymer-could-be-band-aid-future-311514</p>
 +
<p>Z-Medica. (2014). QuikClot® - stop bleeding fast. Retrieved October 16, 2016, from http://www.quikclot.com/</p>
 +
</div>
 +
 +
 +
</div>
 +
       
 +
    </body>
 
</html>
 
</html>

Latest revision as of 03:16, 20 October 2016

Lethbridge HS iGEM 2016

DESIGN

Market Research

In order to understand what types of products are available or that are in the testing phase, our team did some research to look at how we could design our product to improve upon the issues in the products we found.



The above table shows a comparison between Coagu.coli and blood coagulants that are currently in the market. As you can see, most of these products are not available to be used yet, and are not affordable. Looking at each coagulant more specifically though, we can recognize the faults present in each:

QuikClot:According to the official QuikClot website, this coagulant intercepts in the natural blood clotting cascade at the very beginning. It uses a substance known as kaolin, which starts the clotting process with the activation of factor XII. Since this factor is located at the start of the clotting cascade, this product will not be as “quick” as the name suggests (Z-Medica, 2014). QuikClot has also been known to be troublesome to remove from a wound after application as the material can become too hard if it is left too long in the wound. Bleeding can also resume after removal (NurseAmyandDrBones, 2015).

VetiGel:This coagulant seems to be the best out of all the others. It is fast and affordable. The only problem is that it is not yet ready to be revealed in the market for human use, and has only been focused on being used in veterinarian clinics on animals (Weller, 2014).

Tisseel Although this factor has not been included in the table, Tisseel is known to be made from substances made of human plasma, which “can contain infectious agents”(Center & Evaluation, 2014) and transmit diseases. Looking into the other faults that this coagulant contains, Tisseel is not available to be used in a home setting by an individual. Instead, it is supposed to be applied by a healthcare professional in a medical setting (Drugs, n.d.). And since Tisseel is a fibrin sealant, it is found to be more expensive than other types of coagulants (2009).

Duraseal and Floseal: These are both surgical compounds and would not be beneficial to an individual for use on a normal wound. (Corporation, 2016; pdriscoll, 2015).

Xyntha: This coagulant is only useful to people with a deficiency of factor VIII (classic hemophilia), and isn’t useful to other types of hemophilia or Von Willebrand's disease (Pfizer Inc, 2016).

Overall, the table shows just why our product Coagu.coli is the perfect coagulant.

Our Constructs

First Construct



To obtain our goal of an accelerated clotting process, we have deployed the venom serine protease “Cerastotin” which will act on the thrombin, bypassing multiple factors in the clotting cascade and cut long fibrinogen strands into fibrin monomers which will stop the bleeding at a greatly accelerated rate. In order for the venom to stay localized at the wound site, we have augmented a short fibrin peptide with the venom that will polymerize with the other fibrin monomers at the wound site. With the polymerization of the venom within a permanent clot and with blood pressure directing flow to the wound, the venom will not be traveling throughout the body and initiating a clot other than that of the wound site.

We chose a constitutive medium strength promoter (J23107) and a medium/strong RBS for our construct in order to produce an ample amount of venom, but also allowing our Thiol isomerase time to stabilize the multiple disulphide bonds in the venom, so the protein will fold properly and its enzymatic activity increases.

To ensure our venom protein folds properly, we have a periplasmic signal attached to both the venom/fibrin protein as well as the thiol isomerase. Foreign proteins don't fold well within the rough cytoplasm, so we sent our proteins to the periplasmic space which is a more ideal situation for our venom. With addition to the DsbC, the enzymatic activity of the venom should be significantly higher which in turn should accelerate our clotting. By having our proteins in the periplasmic space, we only need to puncture the outer membrane in order to lyse the cell. This function also allows us to release our construct without introducing E.coli inside the body.

As a side note, we decided to use E.Coli as our chassis because it is easier to use than other chassis such as yeast, and we have experience of working with it before. We have looked into using other chassis such as plant cells, but based on the convenience of E.Coli, we went with that.

Second Construct



The design of our first construct induced a rapid production of clotting proteins and in order to supplement it, we have designed a construct that would stabilize the clot and sterilize the wound. In order to stabilize the clot, we added Human Factor XIIIa (propeptide removed) which is the enzyme responsible for the polymerization of fibrin monomers, by keeping the promoters and binding sites the same strength we ensure that all of the fibrin-venom strands bind at the wound site and form a permanent plug that will not be easily re-opened. Having Factor XIIIa will accelerate the rate of polymerization which further ensures that the venom-fibrin strands will stay localized.

In addition, we have added an AntiMicrobial peptide to insure that all bacteria and infection that is potentially in the wound is sterilized. We have deployed the AMP LL-37 which punctures the outer membrane of bacterial cells causing their organelles to become exposed, ending in the cells dying. We have paired the AMP with a thrombin cleavage site that when introduced to the venom serine protease (Cerastotin) from our original construct, will cut the AMP that is bound to Factor XIIIa at the thrombin site, and at that moment become a functional protein that sterilizes the wound.

Application Method

In order to apply our product to the wound, we will contain our construct in a pre-filled syringe that can be applied to the wound which would be followed by a bandage for sealing it in place. Although our team discussed various other application methods such as spray, gel, or gauze, we eventually decided on the syringe and bandage because of advice and feedback we had received from interviews that were conducted. For instance, a bandage is more resistant to cold temperatures, easy to apply and was the most popular answer on the survey.

We decided to use a syringe because it is already in use by other blood coagulants, for example Pfizer and Xyntha.

References

Center, & Evaluation, B. (2014, December 31). Product information. Retrieved October 16, 2016, from http://www.fda.gov/BiologicsBloodVaccines/BloodBloodProducts/ApprovedProducts/LicensedProductsBLAs/FractionatedPlasmaProducts/ucm089262.htm

Corporation, B. H. (2016). FLOSEAL Hemostatic matrix. Retrieved October 16, 2016, from http://www.floseal.com/us/

Drugs. Tisseel medical facts from drugs.Com. Retrieved October 16, 2016, from https://www.drugs.com/mtm/tisseel.html

hemostatguy@gmail.com. (2009, June 14). Medical Hemostat. Retrieved October 16, 2016, from http://medicalhemostat.blogspot.ca/2009/06/hemostasis-market-review-of-gelfoam.html

NurseAmyandDrBones. (2015, September 25). Celox and Quikclot to control bleeding. Retrieved October 16, 2016, from active shooter, https://www.doomandbloom.net/celox-and-quikclot-to-control-bleeding/

Pfizer, Inc. (2016, February ). Home. Retrieved October 16, 2016, from http://www.xyntha.com/

pdriscoll. (2015, May 4). Synthetic surgical sealants | | advanced medical technologies. Retrieved October 16, 2016, from http://blog.mediligence.com/2015/05/04/synthetic-surgical-sealants/

Weller, C. (2014, November 20). Tomorrow’s band-aid stops bleeding instantly [VIDEO]. Innovation. Retrieved from http://www.medicaldaily.com/pulse/vetigel-stops-bleeding-seconds-polymer-could-be-band-aid-future-311514

Z-Medica. (2014). QuikClot® - stop bleeding fast. Retrieved October 16, 2016, from http://www.quikclot.com/