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

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;}
 +
        a:link, a:hover, a:active, a:visited{color: white; text-decoration: none;font-family: 'Roboto', sans-serif;}
 +
        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>
  
 +
      <!-- SideMenu for iGEM Stuff -->
 +
      <style type="text/css">
 +
      #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>
  
−
<div class="column full_size">
+
      <!-- 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>Tell us about your project, describe what moves you and why this is something important for your team.</p>
 
  
  
−
<h5>What should this page contain?</h5>
 
−
<ul>
 
−
<li> A clear and concise description of your project.</li>
 
−
<li>A detailed explanation of why your team chose to work on this particular project.</li>
 
−
<li>References and sources to document your research.</li>
 
−
<li>Use illustrations and other visual resources to explain your project.</li>
 
−
</ul>
 
  
 +
<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: 100vh;
 +
    overflow: hidden;
 +
    margin: 0;
 +
    padding-top: 5%;
 +
    background-color: #333333;
 +
}
 +
#firsttitle{
 +
    vertical-align: center;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    text-align: center;
 +
    color: white;
 +
    vertical-align: middle;
  
−
</div>
+
 
 +
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{
  
−
<div class="column full_size" >
+
    overflow: hidden;
 +
    margin: 0;
 +
    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;
 +
}
  
−
<h5>Advice on writing your Project Description</h5>
+
.removeNavBarColor{
 +
    background-color: transparent;
 +
   
 +
}
 +
.makeNavBarColor{
 +
  /** background-color: #CC141C ;*/
 +
    background-color: #dc4640 ;
 +
   
 +
   
 +
}
  
−
<p>
+
.navbar-default .navbar-nav>li>a{
−
We encourage you to put up a lot of information and content on your wiki, but we also encourage you to include summaries as much as possible. If you think of the sections in your project description as the sections in a publication, you should try to be consist, accurate and unambiguous in your achievements.  
+
    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;}
 +
}
  
−
<p>
+
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
−
Judges like to read your wiki and know exactly what you have achieved. This is how you should think about these sections; from the point of view of the judge evaluating you at the end of the year.
+
        font-family: Flaticon;
−
</p>
+
        font-size: 30px;
 +
        font-style: normal;
 +
        margin-left: 0px;
 +
        color: white;
 +
   
 +
    }
  
−
</div>
 
  
 +
.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;
 +
    }
  
−
<div class="column half_size" >
+
.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 { 
  
−
<h5>References</h5>
+
        font-size: 20px;
−
<p>iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you thought about your project and what works inspired you.</p>
+
  
−
</div>
+
}
 +
.menuIcon2:after { 
  
 +
        font-size: 40px;
  
−
<div class="column half_size" >
+
}
−
<h5>Inspiration</h5>
+
−
<p>See how other teams have described and presented their projects: </p>
+
  
−
<ul>
+
.coverCircle{
−
<li><a href="https://2014.igem.org/Team:Imperial/Project"> Imperial</a></li>
+
    margin: 0;
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Project_Overview"> UC Davis</a></li>
+
    padding: 0;
−
<li><a href="https://2014.igem.org/Team:SYSU-Software/Overview">SYSU Software</a></li>
+
    display: block;
−
</ul>
+
    position: absolute;
−
</div>
+
    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: 2em;
 +
    left: 0;
 +
    right: 0;
 +
}
 +
.sidebar li{
 +
  list-style-position: inside;
 +
    padding-top: 10px;
 +
}
 +
.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{
 +
    box-shadow: 0px 0px 5px #888888;
 +
    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{
 +
    box-shadow: 0px 0px 5px #888888;
 +
    padding: 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;
 +
}
 +
 +
</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="#" 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="project.html">BACKGROUND</a>
 +
                                    <a href="#">EXPERIMENTS</a>
 +
                                    <a href="#">RESULTS</a>
 +
                                    <a href="#">PARTS</a>
 +
                                    <a href="#">ACHIVEMENTS</a>
 +
                                </li>
 +
                            </ul>   
 +
                        </li>
 +
                       
 +
                        <li><a href="#" style="" class="menuitem" style="margin:0; padding:0; ">HUMAN PRACTICES</a></li>
 +
                        <li><a href="#" style="" class="menuitem" style="margin:0; padding:0;">NOTEBOOK</a></li>
 +
                        <li><a href="#" 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="project.html">STUDENTS</a>
 +
                                    <a href="#">ADVISORS</a>
 +
                                    <a href="#">SPONSORS</a>
 +
                                    <a href="#">ATTRIBUTIONS</a>
 +
                                    <a href="#">COLLABORATIONS</a>
 +
                                </li>
 +
                            </ul>   
 +
                        </li>
 +
                       
 +
                        <li><a href="#" 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">
 +
            <h1 id="firsttitle" style=""> <b>Coaugi</b>Coli</h1>
 +
            <h3 id="secondtitle" style="text-align:center;"> Lethbridge HS iGEM Team</h3>
 +
            <!---<img id="blooddrop" src="images/blooddrop.png" width="50">-->
 +
            <!--<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>-->
 +
           
 +
            <a href="#moveDown"><img id="blooddrop" src="https://static.igem.org/mediawiki/2016/f/f5/T—lethbridgehs--down_and.png" width="70"></a>
 +
        </div>
 +
       
 +
        </div>
 +
       
 +
 +
        <div  class="jumbotron slide" id="slidesecond" style="">
 +
            <a name="moveDown"></a>
 +
                                <h1 style="text-align:center;"> Features of the InstaClotter</h1>
 +
            <div class="row">
 +
                <div class="col-md-8">
 +
 +
                    <li class="slidesecondlist">
 +
                        <ul> <img src="images/blood-drops-clip-art-drop-clip-art-vector-clip-EknQci-clipart.png" width="25px" style="margin-right:10px;"> It is very good</ul>
 +
                        <ul><img src="images/blood-drops-clip-art-drop-clip-art-vector-clip-EknQci-clipart.png" width="25px" style="margin-right:10px;">It can save you</ul>
 +
                        <ul><img src="images/blood-drops-clip-art-drop-clip-art-vector-clip-EknQci-clipart.png" width="25px" style="margin-right:10px;">Recived five start rating from 5 organizations</ul>
 +
                        <ul><img src="images/blood-drops-clip-art-drop-clip-art-vector-clip-EknQci-clipart.png" width="25px" style="margin-right:10px;">Recived five start rating from 5 organizations</ul>
 +
 +
                    </li>
 +
                </div>
 +
               
 +
                <div class="col-md-4">
 +
                    <img src="images/Apple-iPad-Air2.png" width="360px">
 +
                </div>
 +
            </div> 
 +
        </div>
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
        <div class="jumbotron slide" id="slide1" style="">
 +
            <div id="slide1Sub">
 +
            <h2 id="slide1title" style="color:black; text-align:center;">What is the Blood Clotter?</h2>
 +
                <p id="slide1para">When our team started meeting, we had many great project ideas, such as taking on autoimmune disorders or treating fetal alcohol syndrome. We also considered bacterial fuel cells, terraforming bacteria, biofilm inhibitors, and synthetic ivory production. After a gladiator-style fight to the death, we narrowed it down to clotting blood. We asked ourselves who we wanted to help, what kind of wounds we wanted to treat, and how we could interact with our community. We decided that we want to focus on the medical field, more specifically medical treatment in emergency situations. We recognized that in most emergency situations, excessive blood loss is a threat that could result in hypovolemic shock, anemia or even death. Preventing or reducing blood loss would greatly increase the chances of survival as well as speeding up the healing process. After discussing different wound sizes and how our project could be applied to each, we decided we would focus mainly on treating medium to large sized wounds. Then, we started designing a construct based around snake venom. Some snake venoms are very effective at inducing blood clotting by skipping many steps of the clotting pathway and thereby greatly increasing the rate of blood clotting. The Cerastes cerastes snake venom acts similar to thrombin in the blood clotting cascade, causing inactive fibrinogen to be converted into active fibrin monomers. Along with Factor XVIII, the fibrin monomers form a crosslink structure that traps red blood cells, resulting in a blood clot.<br><br>
 +
For human practices we have been contacting professionals in relevant fields to ensure that our project is applicable in real-world emergency situations. Another component of our human practices is the community outreach we have been conducting. For example, we have gone to schools in Southern Alberta to educate students with respect to our project and iGEM. In addition, we have devised a public survey, went door to door, and created a social media account to try and establish an amicable rapport with those affected by severe bleeding and members of our community.<br><br>
 +
In the lab, we hope to successfully express our recombinant DNA in E.coli, and produce an effective solution for clotting blood. After that, we hope to develop a fast-acting and effective prototype that will be able to clot pressurized blood being pumped through a simulated wound. If this is accomplished, we’ll attempt to design a tool or delivery system to make sure that we apply the right amount of our system to the wound in order to get the best clot. In addition, we want to test whether or not the clotting factors can move through the body causing an embolism elsewhere. This is something we want to prevent and need to test if our system can remain local in the wound.<br><br>
 +
Our team hopes that our inexpensive and effective technology will be able to help military personnel, disaster victims, and other people affected with severe bleeding survive their ordeals, and have a better quality of life afterwards. In doing so, we will reduce strain on healthcare systems, simplify treatment of major bleeding for EMTs and doctors, and keep families together.</p>
 +
            <!------<iframe style="display:block; margin:auto;" width="560" height="315" src="https://www.youtube.com/embed/4WvnjCkLbvY" frameborder="0" allowfullscreen></iframe>-->
 +
           
 +
        </div>
 +
        </div>
 +
        <div class="jumbotron slide" id="slide6" style="">
 +
                    <div class="doublepic1">
 +
                        <h1>Lots of Great Lab Stuff</h1>
 +
                    </div>
 +
                    <div class="doublepic2">
 +
                        <h1>Lots of Human practices</h1>
 +
                    </div>
 +
            </div>   
 +
        </div>
 +
       
 +
        <div class="jumbotron slide" id="slidesecond" style="">
 +
                                <h1 style="text-align:center;"> Features of the InstaClotter</h1>
 +
            <div class="row">
 +
                <div class="col-md-8">
 +
 +
                    <li class="slidesecondlist">
 +
                        <ul> <img src="images/blood-drops-clip-art-drop-clip-art-vector-clip-EknQci-clipart.png" width="25px" style="margin-right:10px;"> It is very good</ul>
 +
                        <ul><img src="images/blood-drops-clip-art-drop-clip-art-vector-clip-EknQci-clipart.png" width="25px" style="margin-right:10px;">It can save you</ul>
 +
                        <ul><img src="images/blood-drops-clip-art-drop-clip-art-vector-clip-EknQci-clipart.png" width="25px" style="margin-right:10px;">Recived five start rating from 5 organizations</ul>
 +
                        <ul><img src="images/blood-drops-clip-art-drop-clip-art-vector-clip-EknQci-clipart.png" width="25px" style="margin-right:10px;">Recived five start rating from 5 organizations</ul>
 +
 +
                    </li>
 +
                </div>
 +
               
 +
                <div class="col-md-4">
 +
                    <img src="images/Apple-iPad-Air2.png" width="360px">
 +
                </div>
 +
            </div> 
 +
        </div>
 +
        <div class="jumbrotron slide" id="homepageslide5">
 +
            <div class="containerForExploreTeam">
 +
            <h1 class="exploreteam"> EXPLORE OUR TEAM PAGE </h1>
 +
            <a href="#" class="button" style="">Click me</a>
 +
                </div>
 +
        </div>
 +
    <div class="jumbrotron slide" id="homepageslide6">
 +
<p id="credits">Designed by Dinula De Silva</p>
 +
        </div>
 +
        <!----<div class="jumbotron slide" id="slide3">
 +
            <h1 style="color: white; text-align:center; font-size: 3em; margin-top:0;">Features of the InstaClotter</h1>
 +
            <div id="feature-carousel" class="carousel slide" data-ride="carousel1" data-interval="3000">
 +
               
 +
               
 +
                <div class="carousel-inner">
 +
                    <div class="item active animatedSlide">
 +
                      <h1 class="an-slide-title"> Hospital Approved</h1>
 +
                        <img class="an-slide-img" src="images/syringe.png" width="500">
 +
                        <div class="carousel-caption">
 +
                            <h3>Caption</h3>
 +
                        </div>
 +
                    </div>
 +
                    <div class="item ">
 +
                        <h1 class="an-slide-title"> Hospital Approved</h1>
 +
                        <img class="an-slide-img" src="images/syringe.png" width="500">
 +
                        <div class="carousel-caption">
 +
                            <h3>Caption</h3>
 +
                        </div>
 +
                    </div>
 +
                    <div class="item ">
 +
                        <h1 class="an-slide-title"> Hospital Approved</h1>
 +
                        <img class="an-slide-img" src="images/syringe.png" width="500">
 +
                        <div class="carousel-caption">
 +
                            <h3>Caption</h3>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <ol class="carousel-indicators">
 +
                    <li data-target="#feature-carousel" data-slide-to="0" class="active"></li>
 +
                    <li data-target="#feature-carousel" data-slide-to="1"></li>
 +
                    <li data-target="#feature-carousel" data-slide-to="2"></li>
 +
                </ol>
 +
               
 +
            </div>
 +
        </div>-->
 +
       
 +
       
 +
       
 +
        <div class="jumbotron slide" id="slide2" style="">
 +
        </div>
 +
    </body>
 
</html>
 
</html>

Revision as of 02:14, 16 October 2016

Lethbridge HS iGEM 2016

CoaugiColi

Lethbridge HS iGEM Team

Features of the InstaClotter

    • It is very good
      It can save you
      Recived five start rating from 5 organizations
      Recived five start rating from 5 organizations

    • What is the Blood Clotter?

    When our team started meeting, we had many great project ideas, such as taking on autoimmune disorders or treating fetal alcohol syndrome. We also considered bacterial fuel cells, terraforming bacteria, biofilm inhibitors, and synthetic ivory production. After a gladiator-style fight to the death, we narrowed it down to clotting blood. We asked ourselves who we wanted to help, what kind of wounds we wanted to treat, and how we could interact with our community. We decided that we want to focus on the medical field, more specifically medical treatment in emergency situations. We recognized that in most emergency situations, excessive blood loss is a threat that could result in hypovolemic shock, anemia or even death. Preventing or reducing blood loss would greatly increase the chances of survival as well as speeding up the healing process. After discussing different wound sizes and how our project could be applied to each, we decided we would focus mainly on treating medium to large sized wounds. Then, we started designing a construct based around snake venom. Some snake venoms are very effective at inducing blood clotting by skipping many steps of the clotting pathway and thereby greatly increasing the rate of blood clotting. The Cerastes cerastes snake venom acts similar to thrombin in the blood clotting cascade, causing inactive fibrinogen to be converted into active fibrin monomers. Along with Factor XVIII, the fibrin monomers form a crosslink structure that traps red blood cells, resulting in a blood clot.

    For human practices we have been contacting professionals in relevant fields to ensure that our project is applicable in real-world emergency situations. Another component of our human practices is the community outreach we have been conducting. For example, we have gone to schools in Southern Alberta to educate students with respect to our project and iGEM. In addition, we have devised a public survey, went door to door, and created a social media account to try and establish an amicable rapport with those affected by severe bleeding and members of our community.

    In the lab, we hope to successfully express our recombinant DNA in E.coli, and produce an effective solution for clotting blood. After that, we hope to develop a fast-acting and effective prototype that will be able to clot pressurized blood being pumped through a simulated wound. If this is accomplished, we’ll attempt to design a tool or delivery system to make sure that we apply the right amount of our system to the wound in order to get the best clot. In addition, we want to test whether or not the clotting factors can move through the body causing an embolism elsewhere. This is something we want to prevent and need to test if our system can remain local in the wound.

    Our team hopes that our inexpensive and effective technology will be able to help military personnel, disaster victims, and other people affected with severe bleeding survive their ordeals, and have a better quality of life afterwards. In doing so, we will reduce strain on healthcare systems, simplify treatment of major bleeding for EMTs and doctors, and keep families together.

    Lots of Great Lab Stuff

    Lots of Human practices

    Features of the InstaClotter

    • It is very good
      It can save you
      Recived five start rating from 5 organizations
      Recived five start rating from 5 organizations

    • EXPLORE OUR TEAM PAGE

    Click me

    Designed by Dinula De Silva