Difference between revisions of "Team:Central Calgary"

Line 1: Line 1:
−
<html>
+
<html lang="ja">
−
<head>
+
<!doctype html>  
−
 
+
−
    <!--JQUEER-->
+
−
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!--REMOVE THIS WHEN THIS IS PLACED ON THE WIKI AND FIND WHERE THE JQUERY LIBRARY IS ON THE IGEM SERVERs-->
+
−
<!--Javascript-->
+
−
<script>
+
−
$(document).ready(function() {
+
−
 
+
−
//THE FOOTER FONT SIZE INITIAL SET!
+
−
var x = $(window).width();
+
−
$("#footerText").css("font-size", x/70);
+
−
$("#footerTop").css("height", x/25);
+
−
 
+
−
});
+
−
 
+
−
if (window.runOnloadHook) runOnloadHook();
+
−
 
+
−
//THE STICKHY HEADER
+
  
 +
<head>
 +
<meta charset="utf-8">
 +
        <meta name="viewport" content="width=device-width, initial-scale=1.0">                                             
 +
<title>Central Memorial iGEM</title>
 +
       
 +
       
 +
  <link href="http://fonts.googleapis.com/css?family=Ubuntu:bold" rel="stylesheet" type="text/css">
 +
<link href="http://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet" type="text/css">
  
−
//The resize based on the width of the browser!
+
    <link href="https://2015.igem.org/Team:Central_Calgary/header-footer.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
−
$(window).resize(function() {
+
    <link href="https://2015.igem.org/Team:Central_Calgary/main-content.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 +
    <link href="https://2015.igem.org/wiki/index.php?title=Team:Central_Calgary/background.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 +
    <link href="https://2015.igem.org/Team:Central_Calgary/jinvertScroll.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 +
        <link href="https://2015.igem.org/Team:Central_Calgary/teampage.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
 
−
var x = $(this).width();
+
        </head>
  
−
   if (x < 811) {
+
<body>
 +
   
 +
        <div id="bg" class="scroll"> </div>
 +
 +
      <div id="header">
 +
       
 +
            <div id="logoDiv"><img id="logo" src ="img/centralLogo.png" alt="logo"></div>
 +
            <div id="homeText"><h10> Central iGEM </h10></div>
 +
<div id="headerLeft"></div>
 +
            <ul id="headerMenu">
 +
                <li class="headerMenuItem"><a class="menuItem" id="bPractices" href="#" data-target="practices1" align="middle">Practices</a></li>
 +
                <li class="headerMenuItem"><a class="menuItem" id="bPolicy"    href="#" data-target="policy1"    align="middle">Policy</a></li>
 +
                <li class="headerMenuItem"><a class="menuItem" id="bLog"      href="#" data-target="logbook1"   align="middle">Logbook</a></li>
 +
            <li class="headerMenuItem"><a class="menuItem" id="bEthics"    href="#" data-target="ethics1"    align="middle">Ethics</a></li>
 +
                <li class="headerMenuItem"><a class="menuItem" id="bSafety"    href="#" data-target="saftey1"    align="middle">Safety</a></li>
 +
        <li class="headerMenuItem"><a class="menuItem" id="bProject"  href="#" data-target="project1"  align="middle">Project</a></li>
 +
      <li class="headerMenuItem"><a class="menuItem" id="bTeam"      href="#" data-target="team1"      align="middle">The Team</a></li>
 +
                <li class="headerMenuItem"><a class="menuItem" id="bHome"      href="#" data-target="home"      align="middle">Home</a></li>
  
−
    $("#menuImage").fadeOut("fast");
+
</ul>
 +
               
 +
        </div>
 +
       
 +
        <div id="contentBg" style="width:110vw; height:100vh;"></div>
  
−
  } else {
+
<div id="content" class="scroll">
 +
       
 +
         
 +
           
 +
        <div id="home" class="panel"> <h1>Home Page</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 +
</p></div>
  
−
    $("#menuImage").show();
 
  
−
    }
+
            <div id="team1" class="panel"> <h1>Team Page Main</h1>
−
+
           
−
if (x < 760) {
+
                <div style="position:relative; top:0px; left:220px;">
 +
  <div class="bJP rad"></div>
 +
    <div class="bJP line"></div>
 +
    <div class="bJP box"><img src="img/portrait.png" style="float:left; width:200px;"><h2> Jared Pon</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem.
  
−
    $("#menuText").css();
+
Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer. </p></div>
 +
</div>
 +
           
 +
           
 +
                <div style="position:relative; top:-100px; left:400px;">
 +
  <div class="bFR rad"></div>
 +
    <div class="bFR line"></div>
 +
    <div class="bFR box"><img src="img/portrait.png" style="float:left; width:200px;"><h2> Francis (I forget your last name)</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem.
  
−
  } else {
+
Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer. </p></div>
 +
</div>    
 +
                       
 +
                <div style="position:relative; top:-100px; left:600px;">
 +
  <div class="bAG rad"></div>
 +
    <div class="bAG line"></div>
 +
    <div class="bAG box"><img src="img/portrait.png" style="float:left; width:200px;"><h2> Alexia Gendron</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem.
  
−
    $("#menuImage").show();
+
Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer. </p></div>
 +
</div>
 +
               
 +
                <div style="position:relative; top:-100px; left:800px;">
 +
  <div class="bZC rad"></div>
 +
    <div class="bZC line"></div>
 +
    <div class="bZC box"><img src="img/portrait.png" style="float:left; width:200px;"><h2> Zenib (I DON'T EVEN KNOW YOU)</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem.
  
−
    }
+
Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer. </p></div>
−
$("#footerText").css("font-size", x/70);
+
</div>
−
$("#footerTop").css("height", x/25);
+
             
 +
              <div style="position:relative; top:0px; left:220px;">
 +
  <div class="bVT rad"></div>
 +
    <div class="bVT line"></div>
 +
    <div class="bVT box"><img src="img/portrait.png" style="float:left; width:200px;"><h2> Dunno who this was supposed to be!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem.
  
−
});
+
Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer. </p></div>
−
</script>
+
</div>
 +
</div>
 +
           
  
−
<style media="screen" type="text/css">
+
            <div id="team2" class="panel"> <h1>Associates</h1> <p>Thank you for you generous sponsorship<img src="img/alberta.png" alt="Alberta Innovates" style="width:100px;"></p><p>For giving us an opportunity and something worth my spare time<img src="img/rams.png" alt="Central Memorial Highschool" style="width:100px;"></p><p>Special Thanks to: David Lloyd, our mentor</p> <p>Iain George our other mentor</p><p>Ms.Wyshinski, who is not a biologist but kept us on track</p><p>Mr.Klemmer for nothing as he was absolutely worthless and provided nothing but inhibiting progress</p></div>
 +
 
 +
            <div id="project1" class="panel"> <h1>The Project; The Dream 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 +
</p></div>
  
−
@charset "utf-8";
+
<div id="project2" class="panel"> <h1>The Project; The Dream 2</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 +
</p></div>
 +
<div id="project3" class="panel"> <h1>The Project; The Dream 3</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 +
</p></div>
 +
<div id="project4" class="panel"> <h1>The Project; The Dream 4</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 +
</p></div>
 +
<div id="project5" class="panel"> <h1>The Project; The Dream 5</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 +
</p></div>
 +
<div id="project6" class="panel"> <h1>The Project; The Dream 6</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
 +
</p></div>
 +
<div id="project7" class="panel"> <h1>The Project; The Dream 7 </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.
  
−
/*Make sure to update on launch*/
+
</p></div>
−
@font-face{
+
       
−
font-family: RobotoThin;
+
        </div>
−
src: url('RobotoThin.ttf');
+
       
−
font-stretch: thin;
+
      <div id="footer">
−
}
+
        </div>
−
+
       
−
@font-face{
+
       
−
font-family: BebasNeue;
+
<script type="https://2015.igem.org/Team:Central_Calgary/jquery.jInvertScroll.min.js?action=raw&ctype=text/javascript" src="js/jquery.jInvertScroll.min.js"></script>
−
src: url('BebasNeue.otf');
+
        <script type="https://2015.igem.org/Team:Central_Calgary/jquery.mousewheel.min.js?action=raw&ctype=text/javascript" src="js/jquery.mousewheel.min.js"></script>     
−
}
+
        <script type="https://2015.igem.org/Team:Central_Calgary/teampage.js?action=raw&ctype=text/javascript" src="js/teampage.js"></script>
−
 
+
       
−
@font-face{
+
        <script>
−
font-family: RobotoRegular;
+
var panels = new Array("#home","#team1","#team2","#project1","#project2","#project3","#project4","#project5","#project6","#project7");
−
src: url('Roboto-Regular.ttf');
+
var buttons = new Array("#bHome","#bTeam","#bProject");
−
}
+
var currentPanel = 0;
−
+
−
@font-face{
+
−
font-family: RobotoLight;
+
−
src: url('Roboto-Light.ttf');
+
−
}
+
−
 
+
−
h1 {
+
−
font-family: "RobotoLight";
+
−
font-size: 24px;
+
−
}
+
−
/*Remove all default margins of the browser*/
+
−
* {
+
−
margin: 0;
+
−
padding: 0;
+
−
}
+
−
 
+
−
 
+
−
body {
+
−
    background-color: #F2FAFF;
+
−
    background-size: 100%
+
−
}
+
−
 
+
−
/*-----------Header stuff------------*/
+
−
/*********Empty header that is swapped with the following 2 headers**********/
+
−
 
+
−
/* Header text styling
+
−
.header {
+
−
background: #FFCA19;
+
−
height: 220px;
+
−
position: relative;
+
−
}
+
−
*//*(url(https://static.igem.org/mediawiki/2015/7/77/Central-menubar.jpg);
+
−
background-position: left bottom;
+
−
background-repeat: no-repeat;
+
−
/*Header that sticks to the top when scrolled*/
+
−
.headerSticky-scroll {
+
−
position:fixed;
+
−
width: 100%;
+
−
height: 70px;
+
−
    background: #333333;
+
−
z-index: 2;
+
−
whitespace: nowrap;
+
−
}
+
−
 
+
−
#center {
+
−
  width: 70%;
+
−
  background: #eee;
+
−
  margin: 10px auto;
+
−
  position: relative;
+
−
  text-align: center;
+
−
}
+
−
 
+
−
/* Parent container that holds the header text */
+
−
#menuText {
+
−
position: absolute;
+
−
font-size: 30;
+
−
top: 5px;
+
−
left: 12px;
+
−
font-family: "RobotoLight";
+
−
color: #ffffff;
+
−
margin-bottom: 20;
+
−
+
−
}
+
−
 
+
−
#homeText {
+
−
position: relative;
+
−
font-family: "RobotoLight";
+
−
font-size: 36px;
+
−
vertical-align: central;
+
−
padding-bottom: 30px;
+
−
display: table-cell;
+
−
vertical-align: middle;
+
−
}
+
−
 
+
−
#name {
+
−
position: fixed;
+
−
    margin-left: 80px;
+
−
margin-top: 10px;
+
−
text-align:justify;
+
−
 
+
−
}
+
−
 
+
−
.parentMenu {
+
−
position: fixed;
+
−
width: 710px;
+
−
top: 8px;
+
−
margin-left: 25%;
+
−
margin-right: 30%;
+
−
font-weight: 300;
+
−
    font-family: "RobotoLight";
+
−
    font-weight: 100;
+
−
    vertical-align: middle;
+
−
}
+
−
 
+
−
.nav {
+
−
  background-color: #1256DC
+
−
  /*border: 1px solid #FFFFFF;*/
+
−
  border-radius: 5px;
+
−
  box-shadow: 0 0px 8px 10px #888888);
+
−
  color: #FFFFFF;
+
−
  display: inline-block;
+
−
  margin: 2px 22px 8px 22px;
+
−
  overflow: hidden;
+
−
  width:100%;
+
−
  align: center;
+
−
 
+
−
 
+
−
}
+
−
 
+
−
.nav ul {
+
−
color: #FFFFFF
+
−
    margin: 0;
+
−
    padding: 0;
+
−
 
+
−
}
+
−
 
+
−
.nav ul li {
+
−
      display: inline-block;
+
−
      list-style-type: none;
+
−
        -webkit-transition: all 0.2s;
+
−
        -moz-transition: all 0.2s;
+
−
        -ms-transition: all 0.2s;
+
−
        -o-transition: all 0.2s;
+
−
        transition: all 0.2s;
+
−
}
+
−
     
+
−
.nav > ul > li > a > .caret {
+
−
        border-top: 4px solid #FFFFFF;
+
−
        border-right: 4px solid transparent;
+
−
        border-left: 4px solid transparent;
+
−
        content: "";
+
−
        display: inline-block;
+
−
        height: 0;
+
−
        width: 0;
+
−
        vertical-align: middle;
+
−
 
+
−
        -webkit-transition: color 0.1s linear;
+
−
          -moz-transition: color 0.1s linear;
+
−
        -o-transition: color 0.1s linear;
+
−
          transition: color 0.1s linear;
+
−
      }
+
−
 
+
−
.nav > ul > li > a {
+
−
        color: #FFFFFF;
+
−
        display: block;
+
−
        line-height: 56px;
+
−
        padding: 0 24px;
+
−
        text-decoration: none;
+
−
      }
+
−
 
+
−
.nav > ul > li:hover {
+
−
          background-color:
+
−
}
+
−
 
+
−
.nav > ul > li:hover > a {
+
−
          color: #FFFFFF;
+
−
}
+
−
 
+
−
.nav > ul > li:hover > a > .caret {
+
−
          border-top-color: #FF9B19;
+
−
}
+
 
 
−
.nav > ul > li > div {
 
−
        background-color: #FF9B19;
 
−
        border-top: 0;
 
−
        border-radius: 0 0 4px 4px;
 
−
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
 
−
        display: none;
 
−
        margin: 0;
 
−
        opacity: 0;
 
−
        position: absolute;
 
−
        width: 165px;
 
−
        visibility: hidden;
 
−
 
 
−
        -webkit-transiton: opacity 0.2s;
 
−
        -moz-transition: opacity 0.2s;
 
−
        -ms-transition: opacity 0.2s;
 
−
        -o-transition: opacity 0.2s;
 
−
        -transition: opacity 0.2s;
 
−
}
 
−
 
−
.nav > ul > li:hover > div {
 
−
          display: block;
 
−
          opacity: 1;
 
−
          visibility: visible;
 
−
}
 
 
 
−
.nav > ul > li > div ul > li {
+
(function($) {
−
            display: block;
+
$.jInvertScroll(['.scroll'],        // an array containing the selector(s) for the elements you want to animate
−
}
+
{                
−
 
+
onScroll: function(percent) {  //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
−
.nav > ul > li > div ul > li > a {
+
}
−
              color: #fff;
+
});
−
              display: block;
+
−
              padding: 12px 24px;
+
var total = $('#content.scroll').width();
−
              text-decoration: none;
+
var height = $('html').height();
−
}
+
−
 
+
window.addEventListener("keydown", function(e) {
−
.nav > ul > li > div ul > li:hover > a {
+
    // space and arrow keys
−
              background-color: rgba( 255, 255, 255, 0.1);
+
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
−
}
+
        e.preventDefault();
−
 
+
  }
−
 
+
}, false);
−
#socialParent {
+
−
position: fixed;
+
−
display: inline-block;
+
$('#header a').on('click', function(e) {
−
margin-left: 10%;
+
e.preventDefault();
−
}
+
var target = '#'+$(this).data('target');
−
 
+
var left = $(target).position().left;
−
 
+
var perc = left / (total - $(window).width()) * 100;
−
/*Row 1 of the social icons*/
+
var final = ((height - $(window).height())/ 100 * perc);
−
 
+
−
/*BODY SHAIZA--*/
+
for(var i = 0; i < panels.length; i++)
−
#bodyContent {
+
{
−
position: relative;
+
if(panels[i] === target)
−
z-index: 1;
+
{
−
}
+
currentPanel=i;
−
 
+
break;
−
#homeonetext {
+
}
−
position: absolute;
+
}
−
display: block;
+
−
width: 800px;
+
for(var i = 0; i < buttons.length; i++)
−
margin-left: 500px;
+
{
−
text-align: justify;
+
$(buttons[i]).attr("class","menuItem");
−
}
+
−
 
+
}
−
#homeoneline {
+
−
color: #FFFFFF;
+
if(currentPanel === 0) {
−
margin-top: 4px;
+
$("#bHome").attr("class","currentLink");
−
margin-bottom: 8px;
+
 +
} else if(currentPanel === 1 || currentPanel === 2) {
 +
$("#bTeam").attr("class","currentLink");
 +
 +
} else if(currentPanel >= 3 || currentPanel <= 10) {
 +
$("#bProject").attr("class","currentLink");
 +
}
 +
 +
if(currentPanel===1)
 +
{
 +
$("#contentBg").fadeOut(0);
 +
$("#contentBg").css("background","url(img/teamPhoto.png)");
 +
$("#contentBg").fadeIn(1000);
 +
}
 +
else
 +
{
 +
$("#contentBg").fadeOut(1000);
 +
}
 +
 +
 +
 +
 +
$('html, body').stop().animate({scrollTop: final}, 1000);
 +
});
 +
 +
$("body").mousewheel(function(event,delta) {
 
 
−
}
 
−
 
−
#homeoneimage {
 
−
position: absolute;
 
 
 
−
}
+
event.preventDefault();
−
 
+
−
#hometwotext {
+
−
position: absolute;
+
−
display: block;
+
−
width: 800px;
+
−
margin-left: 150px;
+
−
text-align: justify;
+
−
}
+
−
 
+
−
#hometwoline {
+
−
color: #FFFFFF;
+
−
margin-top: 4px;
+
−
margin-bottom: 8px;
+
 
 
−
}
+
console.log(currentPanel-delta);
−
 
+
−
#hometwoimage {
+
if(currentPanel-delta < panels.length && currentPanel-delta>=0)
−
position: absolute;
+
{
−
margin-right: 80;
+
currentPanel-=delta;
−
margin-left: 67%;
+
−
}
+
var target = panels[currentPanel];
−
 
+
var left = $(target).position().left;
−
#homeOne {
+
var perc = left / (total - $(window).width()) * 100;
−
position: relative;
+
var final = ((height - $(window).height())/ 100 * perc);
−
display: block;
+
−
padding-top:90px;
+
$('html, body').stop().animate({scrollTop: final}, 500);
−
padding-left: 20px;
+
event.preventDefault();
−
padding-right: 20px;
+
}
−
width: 100%;
+
−
height: 300px;
+
for(var i = 0; i < buttons.length; i++)
−
background: #7F7F79;
+
{
−
color: #ffffff;
+
$(buttons[i]).attr("class","menuItem");
−
font-family: "RobotoLight";
+
−
+
}
−
}
+
−
 
+
if(currentPanel === 0) {
−
 
+
$("#bHome").attr("class","currentLink");
−
#homeTwo {
+
−
position: relative;
+
} else if(currentPanel === 1 || currentPanel === 2) {
−
display: block;
+
$("#bTeam").attr("class","currentLink");
−
padding-top:90px;
+
−
padding-left: 20px;
+
} else if(currentPanel >= 3 || currentPanel <= 10) {
−
padding-right: 20px;
+
$("#bProject").attr("class","currentLink");
−
width: 100%;
+
}
−
height: 300px;
+
−
background: #4C4C49;
+
if(currentPanel===1)
−
color: #ffffff;
+
{
−
font-family: "RobotoLight";
+
$("#contentBg").fadeOut(0);
−
+
$("#contentBg").css("background","url(img/teamPhoto.png)");
−
}
+
$("#contentBg").fadeIn(500);
−
 
+
}
−
#homeThree {
+
else
−
position: relative;
+
{
−
display: block;
+
$("#contentBg").fadeOut(500);
−
padding-top:90px;
+
}
−
padding-left: 20px;
+
−
padding-right: 20px;
+
−
width: 100%;
+
−
height: 300px;
+
});
−
background: #8A7B65;
+
−
color: #ffffff;
+
if(currentPanel === 0) {
−
font-family: "RobotoLight";
+
$("#bHome").attr("class","currentLink");
−
+
}
−
}
+
−
 
+
−
 
+
}(jQuery));
−
#homethreetext {
+
−
position: absolute;
+
−
display: block;
+
</script>
−
width: 800px;
+
−
margin-left: 500px;
+
−
text-align: justify;
+
−
}
+
−
 
+
−
#homethreeline {
+
−
color: #FFFFFF;
+
−
margin-top: 4px;
+
−
margin-bottom: 8px;
+
−
+
−
}
+
−
 
+
−
#homethreeimage {
+
−
position: absolute;
+
−
+
−
}
+
−
 
+
−
#homeFour {
+
−
position: relative;
+
−
display: block;
+
−
padding-top:90px;
+
−
padding-left: 20px;
+
−
padding-right: 20px;
+
−
width: 100%;
+
−
height: 300px;
+
−
background: #687F7D;
+
−
color: #ffffff;
+
−
font-family: "RobotoLight";
+
−
+
−
}
+
−
 
+
−
/*footer--------------------------------------------------------*/
+
−
#footer {
+
−
position: absolute;
+
−
display: block;
+
−
width: 100%;
+
−
background: #333333;
+
−
height: 450px;
+
−
font-weight: bold;
+
−
 
+
−
}
+
−
 
+
−
#map {
+
−
position: absolute;
+
−
margin-top: 118px;
+
−
margin-left: 30px;
+
−
box-shadow: 8px 8px 50px #000000;
+
−
+
−
}
+
−
 
+
−
#footerWords {
+
−
position: relative;
+
−
width: 805px;
+
−
margin-left: 35%;
+
−
margin-top: 150px;
+
−
font-family: "RobotoThin";
+
−
text-align: justify;
+
−
color: white;
+
−
font-size: 20px;
+
−
}
+
−
 
+
−
#footerLine {
+
−
width: 805px;
+
−
color: #FFFFFF;
+
−
margin-top: 4px;
+
−
margin-bottom: 8px;
+
−
}
+
−
 
+
−
#footerTop {
+
−
position: absolute;
+
−
background: #333333;
+
−
box-shadow: 0px 5px 10px #000000;
+
−
width: 100%;
+
−
margin-bottom: 1000px;
+
−
z-index: 2;
+
−
+
−
 
+
−
}
+
−
 
+
−
#footerText {
+
−
font-family: "RobotoLight";
+
−
margin-top: 1%;
+
−
text-align: center;
+
−
color: white;
+
−
}
+
−
 
+
−
 
+
−
</style>
+
−
 
+
−
</head>
+
−
 
+
−
<body>
+
−
<div class = "headerSticky-scroll">
+
−
  <div id = "CENTER">
+
−
  <div id = "menuText">
+
−
    <div id = "homeText"> 
+
−
   
+
−
        <div id="name">
+
−
                Central iGEM
+
−
        </div>
+
−
        <img src="https://static.igem.org/mediawiki/2015/9/94/IGEMYTLOGO.png" alt="" style="width: ;height: 60px;">
+
−
+
−
    </div>
+
−
        <div class = "parentMenu">
+
−
       
+
−
        <div class="nav">
+
−
       
+
−
        <ul>
+
−
        <li>
+
−
      <a href="products.html">Project <span class="caret"></span></a>
+
−
            <div>
+
−
                <ul>
+
−
                    <li><a href="#">Our Vision</a></li>
+
−
                    <li><a href="#">Construct</a></li>
+
−
                    <li><a href="#">Accomplishments</a></li>
+
−
                </ul>
+
−
            </div>
+
−
        </li>
+
−
        <li><a href="#l">Our Team <span class="caret"></span></a>
+
−
        <div>
+
−
                <ul>
+
−
                    <li><a href="#">Official Profile</a></li>
+
−
                    <li><a href="#">Team Members</a></li>
+
−
                    <li><a href="#">Contact Us</a></li>
+
−
                </ul>
+
−
            </div>
+
−
                        <li><a href="index.html">Home</a></li>
+
−
                           
+
−
        <li><a href="help.html">Notebook <span class="caret"></span></a>
+
−
        <div>
+
−
                <ul>
+
−
                    <li><a href="Protocols">Protocols</a></li>
+
−
                    <li><a href="about.html#table">Lab Work</a></li>
+
−
                    <li><a href="cooker.html">General</a></li>
+
−
                </ul>
+
−
            </div>
+
−
        <li><a href="about.html">Policy & Practices <span class="caret"</span></a>
+
−
        <div>
+
−
            <ul>
+
−
                <li><a href="Protocols">Saftey</a></li>
+
−
                  <li><a href="about.html#table">Ethics</a></li>
+
−
                  <li><a href="cooker.html">General</a></li>
+
−
                </ul>
+
−
            </div>
+
−
           
+
−
 
+
−
    </ul>
+
−
    </div> 
+
−
  </div>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
</nav>
+
−
        </div>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
<div id="bodyContent">
+
−
<div class="content">
+
−
<div id="homeOne">
+
−
                <div id="homeonetext">
+
−
                  <h1>Howdy Chocker!</h1>
+
−
                  <hr id="homeoneline">
+
−
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec purus non eros dapibus pulvinar. Curabitur mollis augue ut congue tempus. Vestibulum ac lobortis sem. Suspendisse tempus, massa ut feugiat dapibus, dui sapien pellentesque risus, sit amet dignissim velit lectus non lectus. Vivamus sagittis sem ante, nec congue est ornare non. Aenean in nibh faucibus, posuere nibh quis, lacinia dolor. Nulla blandit rhoncus convallis. Mauris at massa id sapien suscipit suscipit vel sed dui. Cras euismod purus rutrum metus ullamcorper ullamcorper.</p>
+
−
                  </div>
+
−
          <div id="homeoneimageleft">
+
−
          <img src="https://static.igem.org/mediawiki/2015/5/5b/CentralChocker.png" alt="Map Unavailable" style="width: ;height: 450px; margin-top: -68px;">
+
−
</div>
+
−
        </div>
+
−
        <div id="homeTwo">
+
−
            <div id="hometwotext">
+
−
                  <h1>Bonjour Pete!</h1>
+
−
                    <hr id="hometwoline">
+
−
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec purus non eros dapibus pulvinar. Curabitur mollis augue ut congue tempus. Vestibulum ac lobortis sem. Suspendisse tempus, massa ut feugiat dapibus, dui sapien pellentesque risus, sit amet dignissim velit lectus non lectus. Vivamus sagittis sem ante, nec congue est ornare non. Aenean in nibh faucibus, posuere nibh quis, lacinia dolor. Nulla blandit rhoncus convallis. Mauris at massa id sapien suscipit suscipit vel sed dui. Cras euismod purus rutrum metus ullamcorper ullamcorper.</p>
+
−
                  </div>
+
−
          <div id="hometwoimage">
+
−
          <img src="https://static.igem.org/mediawiki/2015/8/8f/Centralpete.png" alt="Map Unavailable" style="width: ;height: 450px; margin-top: -90px; ">
+
−
</div>
+
−
 
+
−
        </div>
+
−
        <div id="homeThree">
+
−
        <div id="homethreetext">
+
−
                  <h1>Greetings Jar!</h1>
+
−
                    <hr id="homethreeline">
+
−
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec purus non eros dapibus pulvinar. Curabitur mollis augue ut congue tempus. Vestibulum ac lobortis sem. Suspendisse tempus, massa ut feugiat dapibus, dui sapien pellentesque risus, sit amet dignissim velit lectus non lectus. Vivamus sagittis sem ante, nec congue est ornare non. Aenean in nibh faucibus, posuere nibh quis, lacinia dolor. Nulla blandit rhoncus convallis. Mauris at massa id sapien suscipit suscipit vel sed dui. Cras euismod purus rutrum metus ullamcorper ullamcorper.</p>
+
−
                  </div>
+
−
          <div id="homethreeimage">
+
−
          <img src="https://static.igem.org/mediawiki/2015/1/10/CentralJAR.png" alt="Map Unavailable" style="width: ;height: 450px; margin-top: -90px; ">
+
−
</div>
+
−
        </div>
+
−
      <!--  <div id="homeFour">
+
−
        <h1>Hey! This is our construct!</h1>
+
−
            <p>We have worked so hard on it!</p>
+
−
        </div>
+
−
</div> -->
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div id="footer">
+
−
    <div id="map">
+
−
    <img src="https://static.igem.org/mediawiki/2015/1/14/Centralmap.PNG" alt="Map Unavailable" style="width: 400;height: 300px;">
+
−
</div>
+
−
    <div id="footerWords"
+
−
<p>Central iGEM, is a dedicated high school iGEM team based out of Calgary, Alberta, Canada.</p>
+
−
        <hr id="footerLine">
+
−
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec purus non eros dapibus pulvinar. Curabitur mollis augue ut congue tempus. Vestibulum ac lobortis sem. Suspendisse tempus, massa ut feugiat dapibus, dui sapien pellentesque risus, sit amet dignissim velit lectus non lectus. Vivamus sagittis sem ante, nec congue est ornare non. Aenean in nibh faucibus, posuere nibh quis, lacinia dolor. Nulla blandit rhoncus convallis. Mauris at massa id sapien suscipit suscipit vel sed dui. Cras euismod purus rutrum metus ullamcorper ullamcorper. </p>
+
−
    </div>
+
−
</div>
+
−
 
+
−
<div id = 'footerTop'>
+
−
<div id="footerText">"We want to open a new door in the field of pathology. Our goal is to find the next big thing, in cancer treatments; a cure."</div>
+
−
</div>
+
−
</div>
+
−
 
+
−
<!-- bottom footer and connect with us!
+
−
<div id='footerBottom'>
+
−
<div id="socialParent">
+
−
    <div id = 'socialText'>Connect with us!</div>
+
 
          
 
          
−
        <a href="http://www.twitter.com/vladimirtaikov" id="socialLink">
+
</body>
−
        <img src="twitter.png" style="width:64;height:64;" >
+
−
        </a>
+
−
        <a href="http://www.twitter.com/vladimirtaikov" id="socialLink">
+
−
        <img src="you-tube.png" style="width:64;height:64;">
+
−
        </a>
+
−
        <a href="http://www.twitter.com/vladimirtaikov" id="socialLink">
+
−
        <img src="flickr.png" style="width:64;height:64;" >
+
−
        </a></br>
+
−
        <a href="http://www.twitter.com/vladimirtaikov" id="socialLinkOne">
+
−
        <img src="google.png" style="width:64;height:64;">
+
−
        </a>
+
−
        <a href="http://www.twitter.com/vladimirtaikov" id="socialLinkOne">
+
−
        <img src="tumblr.png" style="width:64;height:64;">
+
−
        </a>
+
−
        <a href="http://www.twitter.com/vladimirtaikov" id="socialLinkOne">
+
−
        <img src="facebook.png" style="width:64;height:64;">
+
−
        </a>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
-->
+
−
 
+
−
</body>
+
−
 
+
 
</html>
 
</html>

Revision as of 20:48, 27 August 2015

Central Memorial iGEM

Home Page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

Team Page Main

Jared Pon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem. Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer.

Francis (I forget your last name)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem. Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer.

Alexia Gendron

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem. Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer.

Zenib (I DON'T EVEN KNOW YOU)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem. Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer.

Dunno who this was supposed to be!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum magna eget nulla blandit, at faucibus enim fermentum. Sed malesuada, metus in lobortis rhoncus, nisi orci tempus leo, in finibus justo ligula ac lectus. Sed eu pharetra est. Vestibulum tincidunt nisl ex, placerat placerat dui sagittis at. Suspendisse vel neque non quam porttitor pharetra. Vivamus ac mauris id enim auctor bibendum. Vestibulum vel augue in risus faucibus luctus at ac libero. Sed et faucibus orci, sit amet tincidunt lacus. Pellentesque mattis quis lacus at fringilla. Curabitur ipsum nibh, fermentum at metus et, venenatis ullamcorper lorem. Pellentesque congue sit amet enim eu bibendum. Pellentesque tincidunt consequat magna. Ut eleifend arcu vel massa laoreet, at rutrum lacus dictum. Sed ut lorem ornare, sodales sem quis, imperdiet risus. Integer vitae eros vel dui dapibus gravida nec vel dui. Fusce at nisl interdum, dictum nisi sit amet, aliquam elit. Maecenas efficitur purus nunc, faucibus feugiat nulla vulputate et. Quisque a porttitor velit, nec dictum neque. Integer pretium egestas arcu, nec tempus ligula pharetra fermentum. Nam dapibus leo nec dui iaculis hendrerit. Sed in enim egestas, placerat felis vitae, luctus diam. Praesent non lobortis diam. Mauris pretium maximus enim, et ullamcorper eros suscipit sed. Integer.

Associates

Thank you for you generous sponsorshipAlberta Innovates

For giving us an opportunity and something worth my spare timeCentral Memorial Highschool

Special Thanks to: David Lloyd, our mentor

Iain George our other mentor

Ms.Wyshinski, who is not a biologist but kept us on track

Mr.Klemmer for nothing as he was absolutely worthless and provided nothing but inhibiting progress

The Project; The Dream 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

The Project; The Dream 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

The Project; The Dream 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

The Project; The Dream 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

The Project; The Dream 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

The Project; The Dream 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.

The Project; The Dream 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, mauris vel porta pellentesque, lectus mi aliquam erat, ut ultricies ex orci id massa. Cras ultrices lacinia libero sed porta. Pellentesque tempor vehicula leo, sit amet viverra dui posuere et. Vivamus gravida et felis ut interdum. Phasellus quis quam enim. Nullam suscipit viverra ex, sit amet bibendum massa scelerisque et. Nunc a lorem nisi. Integer ultricies metus sed mi pretium, vitae aliquet mi egestas. Duis gravida tellus quis sem scelerisque varius. Mauris erat lorem, congue sit amet erat eu, bibendum laoreet nisl. Morbi ac massa eu quam pulvinar lacinia lacinia et dui. Aliquam sed ex lobortis, lobortis tellus ut, pretium sem. Aenean id semper lacus. Sed sed mauris lobortis, tincidunt sapien vel, dictum ipsum. Nulla euismod dui at placerat pulvinar.