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

Line 1: Line 1:
 +
{{Team:Lethbridge_HS/bootstrapcss}}
 
<html lang="en">
 
<html lang="en">
 
     <head>
 
     <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>
 +
 +
      <!-- Custom Styling -->
 +
      <style>
 +
      a {list-style-image: none;}
 +
      ul {list-style-image: none;}
 +
      ol {list-style-image: none;}
 +
      li {list-style-image: none;}
 +
      </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: 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{
 +
 +
    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: 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 charset="utf-8">
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
−
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+
       
−
        <link rel="stylesheet" href="main.css">
+
<!--<link rel="stylesheet" href="https://2016.igem.org/Team:Lethbridge_HS/bootstrapcss?action=raw&ctype=text/css">
−
        <link rel="stylesheet" href="animations.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 rel="stylesheet" href="flaticon.css">
−
 
+
 
         <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 
         <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
−
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+
         <script src="https://2016.igem.org/Team:Lethbridge_HS/bootstrapmin?action=raw&ctype=text/javascript"></script>
−
         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+
         <script src="https://2016.igem.org/Team:Lethbridge_HS/localscrollmin?action=raw&ctype=text/javascript" type="text/javascript"></script>  
−
         <script src="js/jquery.localscroll.min.js" type="text/javascript"></script>  
+
         <script src="https://2016.igem.org/Team:Lethbridge_HS/scrolltomin?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
         <script src="js/jquery.scrollTo.min.js" type="text/javascript"></script>
+
 
 +
               
 +
 
 +
         <link rel="stylesheet" href="animations.css">
 
          
 
          
 
         <script type="text/javascript">
 
         <script type="text/javascript">
 
             $(document).ready(function(){
 
             $(document).ready(function(){
−
               
 
−
                $('.profilePicBox img').mouseenter(function(){
 
−
                    var parent = $(this).parent();
 
−
                    var infoBoxPopUp = $(parent).next();
 
−
                    var selected_member = $(this).data('type');
 
−
                    $('.profileInfoBox.'+selected_member+'').addClass('showInfoBox');
 
−
                   
 
−
                    $('.profilePicBox img').each(function(){
 
−
                        if ($(this).data('type')==selected_member){
 
−
                               
 
−
                        }
 
−
                            else{
 
−
                                $(this).addClass('makeGray');
 
−
                            }
 
−
                    });
 
−
                });
 
−
                $('.profilePicBox img').mouseleave(function(){
 
−
                    var parent = $(this).parent();
 
−
                    var infoBoxPopUp = $(parent).next();
 
−
                    var selected_member = $(this).data('type');
 
−
                    $('.profileInfoBox.'+selected_member+'').removeClass('showInfoBox');
 
−
                    $('.profilePicBox img').removeClass('makeGray');
 
−
                });
 
−
               
 
 
                 $('#blooddrop').addClass('delay-2000 animated pulse');
 
                 $('#blooddrop').addClass('delay-2000 animated pulse');
 
                 var s = $(".menu");
 
                 var s = $(".menu");
Line 57: Line 787:
 
                 })
 
                 })
 
             });
 
             });
 +
           
 +
           
 +
 
         </script>
 
         </script>
 
     </head>
 
     </head>
Line 71: Line 804:
 
                         <span class="icon-bar"></span>
 
                         <span class="icon-bar"></span>
 
                     </button>
 
                     </button>
−
                     <a class="navbar-brand" href="#" style="color:#CC141C; margin-top:-5%;"><img src="images/logo.png" width="170"></a>
+
                     <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>
 
                  
 
                  
 
                 <div class="collapse navbar-collapse" id="navbar1">
 
                 <div class="collapse navbar-collapse" id="navbar1">
 
                     <ul class="nav navbar-nav navbar-right" >
 
                     <ul class="nav navbar-nav navbar-right" >
−
                         <li class="dropdown">
+
                     
−
                             <a href="project.html" style="" class="dropdown-toggle" data-toggle = "dropdown" style="margin:0; padding:0; "><div class="glyph-icon flaticon-dna-structure menuIcon "></div>Project</a>
+
                       
−
                        <ul class="dropdown-menu">
+
                         <li class= "dropdown">
−
                            <li>
+
                             <a href="#" class="dropdown-toggle" data-toggle = "dropdown">PROJECT<b class="caret"></b></a>
−
                            <a href="#">adsf</a>  
+
                            <ul class="dropdown-menu">
−
                            <a href="#">adsfd</a>
+
                                <li>
−
                            </li>
+
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Description">DESCRIPTION</a>
−
                        </ul>
+
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Design">DESIGN</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>
 +
                                </li>
 +
                            </ul>  
 
                         </li>
 
                         </li>
−
                        <li><a href="#" style="" class="menuitem" style="margin:0; padding:0; "><div class="glyph-icon flaticon-earth menuIcon"></div>Human Practices</a></li>
+
 
−
                        <li><a href="#" style="" class="menuitem" style="margin:0; padding:0;"><div class="glyph-icon flaticon-notebook menuIcon "></div>Notebook</a></li>
+
<li class= "dropdown">
−
                         <li><a href="#" style="" class="menuitem" style="margin:0; padding:0; "><div class="glyph-icon flaticon-safety-glasses menuIcon "></div>Safety</a></li>
+
                            <a href="#" class="dropdown-toggle" data-toggle = "dropdown">PARTS<b class="caret"></b></a>
−
                         <li><a href="#" style="" class="menuitem active" style="margin:0; padding:0; "><div class="glyph-icon flaticon-people  menuIcon active"></div>Team</a></li>
+
                            <ul class="dropdown-menu">
−
                         <li><a href="#" style="" class="menuitem" style="margin:0; padding:0 "><div class="glyph-icon flaticon-earth menuIcon "></div>iGEM</a></li>
+
                                <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>
 +
                                    <a href="https://2016.igem.org/Team:Lethbridge_HS/Part_Collection">PART COLLECTION</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/Integrated_Practices">INTEGRATED HUMAN PRACTICES</a>
 +
<a href="https://2016.igem.org/Team:Lethbridge_HS/Engagement">ENGAGEMENT</a>
 +
                                </li>
 +
                            </ul>   
 +
                        </li>
 +
 
 +
 
 +
 
 +
 
 +
                         <li><a href="https://2016.igem.org/Team:Lethbridge_HS/Notebook" style="" class="menuitem" style="margin:0; padding:0;">NOTEBOOK</a></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">
 
                         <li class= "dropdown">
−
                             <a href="#" class="dropdown-toggle" data-toggle = "dropdown">Project<b class="caret"></b></a>
+
                             <a href="#" class="dropdown-toggle" data-toggle = "dropdown">TEAM<b class="caret"></b></a>
 
                             <ul class="dropdown-menu">
 
                             <ul class="dropdown-menu">
 
                                 <li>
 
                                 <li>
−
                                     <a href="project.html">Overview</a>
+
                                     <a href="https://2016.igem.org/Team:Lethbridge_HS/Team#students">STUDENTS</a>
−
                                     <a href="#">Math Model</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>
 
                                 </li>
 
                             </ul>     
 
                             </ul>     
 
                         </li>
 
                         </li>
 +
                       
 +
                        <li><a href="#" style="" class="menuitem" style="margin:0; padding:0 ">IGEM</a></li>
 
                     </ul>
 
                     </ul>
 
                 </div>
 
                 </div>
Line 104: Line 872:
 
         </nav>
 
         </nav>
 
          
 
          
−
         <div class="jumbotron slide" id="slide_team_0" style="">
+
         <div class="jumbotron slide" id="slide0" style="">
−
            <!---<img id="blooddrop" src="images/blooddrop.png" width="50">-->
+
<div class="container-fluid" style="margin-left:10%;">
−
             <img class="coverCircle" src="images/teamcircle.png" width="110px">
+
            <h1 id="firsttitle" style=""> <b>Description</b>Coli</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">
 
−
            <h1>Students </h1>
 
−
            <div class="row">
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img data-type="member-Dinula" src="images/Team/dinula1.jpg" onmouseover="this.src='images/Team/dinula2.jpg'"  onmouseout="this.src='images/Team/dinula1.jpg'" width="100%">
 
−
                    </div>
 
−
                    <div class="profileInfoBox member-Dinula">
 
−
                        <h3>Dinula De Silva</h3>
 
−
                        <p>I am a grade 13 student at Winston Churchill High School. I enjoy programming, playing the guitar ( i dont know how to play), and watching movies (that i am allowed to watch). When I’m not stuck indoors (which is never), I like going running (ha) and biking (haha). I joined iGEM because the feats of synthetic biology fascinated me and I wanted to learn more about the processes involved (I want a better resume actually). I additionally wanted to develop my computer programming skills by working on the wiki and software aspect of the competition (by making games).</p>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img data-type="member-Dinulasssss" src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                    <div class="profileInfoBox member-Dinulasssss">
 
−
                        <h3>Dinula De Silva</h3>
 
−
                        <p>Blah blah blah</p>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img data-type="member-Dinulasss" src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                    <div class="profileInfoBox member-Dinulasss">
 
−
                        <h3>Dinula De Silva</h3>
 
−
                        <p>Blah blah blah</p>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img data-type="member-Dinulass" src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                    <div class="profileInfoBox member-Dinulass">
 
−
                        <h3>Dinula De Silva</h3>
 
−
                        <p>Blah blah blah</p>
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
            <div class="row">
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                    <div class="profileInfoBox">
 
−
                        <h3>Dinula De Silva</h3>
 
−
                        <p>Blah blah blah</p>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img  src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
            <div class="row">
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                    <div class="profileInfoBox">
 
−
                        <h3>Dinula De Silva</h3>
 
−
                        <p>Blah blah blah</p>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img  src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-md-3">
 
−
                    <div class="profilePicBox">
 
−
                        <img src="images/Team/dinula1.jpg" width="100%">
 
−
                    </div>
 
−
                </div>
 
−
            </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">First title</a></li>
 +
<li><a href="#first">First title</a></li>
 +
<li><a href="#first">First title</a></li>
 +
<li><a href="#first">First title</a></li>
 +
<li><a href="#first">First title</a></li>
 +
</ul>
 +
</div>
 +
<div class="col-md-10">
 +
<h3>sample title 1</h3>
 +
<a name="first"></a>
 +
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
 +
<h3>sample title 1</h3>
 +
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
 +
<h3>sample title 1</h3>
 +
<a name="second"></a>
 +
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
 +
</div>
 +
 
 +
 
 +
</div>
 +
       
 
     </body>
 
     </body>
 
</html>
 
</html>

Revision as of 03:20, 16 October 2016

Lethbridge HS iGEM 2016

DescriptionColi

sample title 1

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

sample title 1

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

sample title 1

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."