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

(Prototype team page)
 
 
(45 intermediate revisions by 4 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>
  
 +
      <!-- 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 judges-will-not-evaluate">
+
      <!-- Custom Styling -->
−
<h3>★  ALERT! </h3>
+
      <style>
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Awards#SpecialPrizes">Best Education and Public Engagement award</a>. </p>
+
      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>
 
  
  
 +
<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/b/bf/T—lethbridgehs--hpcover45.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{
  
−
<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;
 +
}
  
−
<p>Do you want to be considered for the <a href="https://2016.igem.org/Judging/Awards#SpecialPrizes">Best Education and Public Engagement award</a>? Help the judges consider your team for this award by describing your work on this page.</p>
+
.removeNavBarColor{
−
</div>
+
    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;
 +
   
 +
    }
  
−
<p>Here are two examples of excellent Education and Public Engagement from 2015:</p>
 
−
<ul>
 
−
<li><a href="https://2015.igem.org/Team:UFMG_Brazil/Public_Engagement"> UFMG Brazil 2015</a></li>
 
−
<li><a href="https://2015.igem.org/Team:William_and_Mary/Practices"> William and Mary 2015</a></li>
 
−
</ul>
 
  
 +
.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>PUBLIC ENGAGEMENT</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">
 +
<li><a href="#first">Survey</a></li>
 +
<li><a href="#first">School Presentations</a></li>
 +
<li><a href="#first">City Council</a></li>
 +
<li><a href="#first">Dictionary</a></li>
 +
<li><a href="#first">First title</a></li>
 +
</ul>
 
</div>
 
</div>
 +
<div class="col-md-10">
 +
<h3>Survey</h3>
 +
<a name="first"></a>
 +
<p><br><img src="https://static.igem.org/mediawiki/2016/1/17/--Lethbridge_HS--.jpeg" width="500px" height=""300px"><br/>
 +
Our team understands that a survey with such a small sample size is not the most reliable of methods to gain information. However, we still decided to conduct a survey in order to gain a general public opinion on various aspects of our project. Applying synthetic biology components to open wounds can be a very sensitive subject that needs to be carefully evaluated. In addition to considering the ethics of our project, we also wanted to examine how exactly people in our community would respond to our proposed blood clotting agent.  Mainly we wanted to gain an opinion on possible application methods for our product. We created paper copies of the survey, that we handed out to respondents in the city as well as a digital copy that we shared on social media in the hope of collecting a more diverse sample. In total, 40 individuals respondent to our survey. From the survey, we gathered that a bandage form is the most popular form for applying our product. This informed our final decision on the application of our product. We also learned that people have heard of snake venom being used for clotting blood, and are somewhat comfortable with using components of snake venom to heal a wound. People would also consider using synthetic biology as a clotting method. Overall we conducted this survey out of curiosity to learn what others would think of our product.
  
 +
</p>
 +
<h3>School Presentations</h3>
 +
<a name="second"></a>
 +
<p>
  
 +
<left><table>
 +
<tr><td><br><img style="margin-left:auto; margin-right:auto; text-align:center;" src="https://static.igem.org/mediawiki/2016/1/13/T--Lethbridge_HS--schoolpresentation--.jpeg" width="350px" height=""300px"><br/></td>
 +
<td><br> <img style="margin-left:auto; margin-right:auto; text-align:center;" src="https://static.igem.org/mediawiki/2016/5/5b/T--Lethbridge_HS--schoolpresentation2--.jpeg" width="350px" height=""300px"><br/></td></tr>
 +
</table></left>
 +
</p>
 +
<p>We believe an important aspect of iGEM is to spark interest in synthetic biology and iGEM in other students. This year, we decided to present to Grade 11 classes in several High Schools in Lethbridge about our project and the iGEM competition in general. As part of the Grade 11 curriculum, students learn about the components of blood and the blood clotting pathway. Our project and presentation therefore integrated very well into the their curriculum. Through our presentation, we raised students’ awareness for the application and significance of some of the concepts they learned in school and made them more interested to become involved with iGEM in the future.</p>
 +
<h3>City Council Presentation</h3>
 +
<a name="third"></a>
 +
<p><br><img style="margin-left:auto; margin-right:auto; text-align:center;" src="https://static.igem.org/mediawiki/2016/f/fe/T--Lethbridge_HS--citycouncil--.jpeg" width="350px" height=""300px"><br/>In order to accumulate funds and some media coverage, as a team we resolved to present our blood coagulation project to city council members. Our goal was to ask for $1000 in order to aid the funding of our prototype construction. Although the money was not granted, we gained an invaluable experience at presenting in city hall to twelve councillors and the mayor. Having the opportunity to answer questions and hear the council members perspectives was truly an enlightening experience. The councillors expressed their interest and belief in our project, as well as perceived the value in iGEM even though they denied our request. Our visit to city hall certainly was still beneficial, as media such as the Lethbridge Herald and Shaw interviewed a team member, and we got a chance to spread the word of our funding page and project idea. Overall, it was a rewarding experience. </p>
 +
<h3>Dictionary</h3>
 +
<a name="fourth"></a>
 +
<p> In order to ensure that all team members were familiar with the basis of our blood clotting project at the beginning of the iGEM season, we designed this dictionary including basic terms relevant to our project. Every team member submitted a few terms related to our project, along with their definition, in order to create this dictionary. In addition to helping our team members mitigate their uncertainties in some aspects of the project, we hope that this dictionary will also allow the community to understand our project and its significance in a more in depth manner.</p>
  
 +
 +
<embed src="https://static.igem.org/mediawiki/2016/a/a1/T--Lethbridge_HS--dictionary--.pdf" width="80%" height="800px" type='application/pdf'>
 +
 +
 +
</div>
 +
 +
 +
</div>
 +
       
 +
    </body>
 
</html>
 
</html>

Latest revision as of 03:12, 20 October 2016

Lethbridge HS iGEM 2016

PUBLIC ENGAGEMENT

Survey



Our team understands that a survey with such a small sample size is not the most reliable of methods to gain information. However, we still decided to conduct a survey in order to gain a general public opinion on various aspects of our project. Applying synthetic biology components to open wounds can be a very sensitive subject that needs to be carefully evaluated. In addition to considering the ethics of our project, we also wanted to examine how exactly people in our community would respond to our proposed blood clotting agent. Mainly we wanted to gain an opinion on possible application methods for our product. We created paper copies of the survey, that we handed out to respondents in the city as well as a digital copy that we shared on social media in the hope of collecting a more diverse sample. In total, 40 individuals respondent to our survey. From the survey, we gathered that a bandage form is the most popular form for applying our product. This informed our final decision on the application of our product. We also learned that people have heard of snake venom being used for clotting blood, and are somewhat comfortable with using components of snake venom to heal a wound. People would also consider using synthetic biology as a clotting method. Overall we conducted this survey out of curiosity to learn what others would think of our product.

School Presentations

We believe an important aspect of iGEM is to spark interest in synthetic biology and iGEM in other students. This year, we decided to present to Grade 11 classes in several High Schools in Lethbridge about our project and the iGEM competition in general. As part of the Grade 11 curriculum, students learn about the components of blood and the blood clotting pathway. Our project and presentation therefore integrated very well into the their curriculum. Through our presentation, we raised students’ awareness for the application and significance of some of the concepts they learned in school and made them more interested to become involved with iGEM in the future.

City Council Presentation



In order to accumulate funds and some media coverage, as a team we resolved to present our blood coagulation project to city council members. Our goal was to ask for $1000 in order to aid the funding of our prototype construction. Although the money was not granted, we gained an invaluable experience at presenting in city hall to twelve councillors and the mayor. Having the opportunity to answer questions and hear the council members perspectives was truly an enlightening experience. The councillors expressed their interest and belief in our project, as well as perceived the value in iGEM even though they denied our request. Our visit to city hall certainly was still beneficial, as media such as the Lethbridge Herald and Shaw interviewed a team member, and we got a chance to spread the word of our funding page and project idea. Overall, it was a rewarding experience.

Dictionary

In order to ensure that all team members were familiar with the basis of our blood clotting project at the beginning of the iGEM season, we designed this dictionary including basic terms relevant to our project. Every team member submitted a few terms related to our project, along with their definition, in order to create this dictionary. In addition to helping our team members mitigate their uncertainties in some aspects of the project, we hope that this dictionary will also allow the community to understand our project and its significance in a more in depth manner.