Difference between revisions of "Team:Lethbridge HS"

Line 62: Line 62:
 
       li {list-style-image: none;}
 
       li {list-style-image: none;}
 
       </style>
 
       </style>
 +
 +
 +
 +
 +
<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: 100%;
 +
    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;
 +
 +
 
 +
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{
 +
 +
    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;
 +
}
 +
 +
.removeNavBarColor{
 +
    background-color: transparent;
 +
   
 +
}
 +
.makeNavBarColor{
 +
  /** background-color: #CC141C ;*/
 +
    background-color: #dc4640 ;
 +
   
 +
   
 +
}
 +
 +
.navbar-default .navbar-nav>li>a{
 +
    padding-top: 30px;
 +
    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;
 +
   
 +
    }
 +
 +
 +
.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: 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 -->
 
     <!-- Import Google Icon Font -->

Revision as of 14:55, 15 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