Difference between revisions of "Team:Lethbridge HS"

 
(314 intermediate revisions by 5 users not shown)
Line 4: Line 4:
 
{{Lethbridge_HS/reset}}
 
{{Lethbridge_HS/reset}}
 
{{Lethbridge_HS/bootstrapjs}}
 
{{Lethbridge_HS/bootstrapjs}}
 +
{{Lethbridge_HS/navbar}}
 
{{Lethbridge_HS/css}}
 
{{Lethbridge_HS/css}}
 
<html>
 
<html>
 
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
 
<head>
 
<head>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
+
 
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" rel="stylesheet">
+
 
  <script src="js/bootstrap.js"></script>
+
 
<style>
 
<style>
h1,h2,h3{font-family: 'Montserrat', sans-serif;}
+
*{font-family: 'Montserrat', sans-serif;}
p{font-family:'open sans', sans-serif;}
+
.w100 {
 +
font-weight: 100;
 +
}
 +
p{font-family:'open sans', sans-serif; font-size: 18px;}
 +
 
 +
 
 +
 
 +
.downArrow{
 +
position: absolute;
 +
bottom:0%;
 +
left:20vh;
 +
right:20vh;
 +
}
 +
 
 +
.bounce {
 +
-moz-animation: bounce 3s infinite;
 +
-webkit-animation: bounce 3s infinite;
 +
animation: bounce 3s infinite;
 +
}
 +
 
 +
@-moz-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {
 +
-moz-transform: translateY(0);
 +
transform: translateY(0);
 +
}
 +
40% {
 +
-moz-transform: translateY(-30px);
 +
transform: translateY(-30px);
 +
}
 +
60% {
 +
-moz-transform: translateY(-15px);
 +
transform: translateY(-15px);
 +
}
 +
}
 +
@-webkit-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {
 +
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 +
}
 +
40% {
 +
-webkit-transform: translateY(-30px);
 +
transform: translateY(-30px);
 +
}
 +
60% {
 +
-webkit-transform: translateY(-15px);
 +
transform: translateY(-15px);
 +
}
 +
}
 +
@keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {
 +
-moz-transform: translateY(0);
 +
-ms-transform: translateY(0);
 +
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 +
}
 +
40% {
 +
-moz-transform: translateY(-30px);
 +
-ms-transform: translateY(-30px);
 +
-webkit-transform: translateY(-30px);
 +
transform: translateY(-30px);
 +
}
 +
60% {
 +
-moz-transform: translateY(-15px);
 +
-ms-transform: translateY(-15px);
 +
-webkit-transform: translateY(-15px);
 +
transform: translateY(-15px);
 +
}
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
  
 
</style>
 
</style>
  
 
</head>
 
</head>
 +
 +
 +
<div id="goDown"> <div class="downArrow bounce">
 +
                            <center><a href="#firstSlide"><img src="https://static.igem.org/mediawiki/2018/5/5a/T--Lethbridge_HS--arrowbetter.png" width="100" height="100" class="img-responsive downImg"></a><center>
 +
                            </div>
 +
</div>
  
<body style="background-image: url(https://static.igem.org/mediawiki/2017/f/fa/T--Lethbridge_HS--black.jpg); background-size: cover; background-position: center;  background-size: 100% 100%;
+
<body style="background-image: url(); background-size: cover; background-position: center;  background-size: 100% 100%;
width: 100%; margin: 0;">
+
width: 100%; margin: 0; ">
  
 
+
<div style= "background-color:; background:;background-image: url(https://static.igem.org/mediawiki/2018/b/bd/T--Lethbridge_HS--background3.png);text-align:;
<div style="background-color:#789173;"class="jumbotron jumbotron-fluid">
+
    background-size: cover; background-position: center; opacity: ; background-size:100% 100% ; height: 100vh;
   <div class="container">
+
    overflow: hidden;
     <center><h1 class="display-4"><b>Ctrl-SAlt-Del</b></h1></center>
+
    margin: 0;
     <center><h2><i>Capture and Removal of metal ions</i> </h2></center>
+
    background-repeat: no-repeat; border-bottom:solid 0px #5B5B5B;"class="jumbotron jumbotron-fluid">
     <center><h3><b>Lethbridge HS iGEM</b></h3></center>
+
   <div style="margin-top:10%;"class="container">
 +
<div class="container">
 +
<div class="top-right"></div>
 +
     <center><h1 style="font-family: 'Montserrat', sans-serif;"class="display-4"><b></b></h1></center>
 +
     <center><h2><i></i> </h2></center>
 +
     <center><h3><b></b></h3></center>
 
   </div>
 
   </div>
 
</div>
 
</div>
  
<div class="container-fluid;" style="margin-left:10%; margin-right:10%;"><br><center><h1> Lethbridge HS iGEM 2018!!! </h1> </center>
+
 
<h3>Project Description</h3>
+
 
<p>Tailings ponds, lakes that hold the toxic by-products of oil sands mining, cover an area of 176 square kilometers in Alberta and contain enough liquid to fill 390,000 Olympic-sized pools. Tailings ponds are extremely detrimental to the environment and pose challenges for improving extraction processes used by oil and mining industries. If left untreated, tailings ponds have the potential to pollute water sources, damage ecosystems, eliminate biodiversity and kill a variety of living organisms. An example of tailings ponds pollution includes harmful ions such as lead and mercury which affect the environment.The removal of heavy metals in tailings ponds as well as wastewater is appealing yet challenging. In addition to benefiting the environment, the extraction of these metals creates value out of what would otherwise be waste. </p>
+
 
<p>To address these issues, we propose a system using engineered bacteria and bacteriophage-- viruses that infect and reproduce within the host bacteria-- to capture and remove ions from solution using novel capsid composition and inducible precipitation. Utilizing biological systems and local infrastructure will both purify contaminated water and extract reusable metals renewably. To better understand the feasibility of our project, we plan on using a mixture of kinetic, agent-based and spatial modelling. Kinetic modelling will allow us to mathematically understand the trend of our system as well as how our system will react to specific parameters. Agent-based modelling will display the different components of our system. This allows for a more accurate visualization of the system as a whole with the different agent interactions. Finally, spatial modelling will help us demonstrate our unique system to the general public. Additionally, we plan to contact the head of the Water  Treatment Plant in Lethbridge to see how our project could be integrated into their facility, as well as to understand how our project would function in their system. Our system of engineered bacteria and bacteriophage will provide a solution to the issue of metal contaminants present in water.</p>
+
 
</div>
 
</div>
 +
  </section>
 +
</div>
 +
 +
<a name="firstSlide"> 
 +
<div style="background-color: "#">
 +
<div class="container-fluid;" style=" margin-left:17%; margin-right:17%;">
 +
 +
 +
 +
           
 +
<br><br><center><h2 class="w100" style= "font-size: 7vw; margin:0">The Problem</h2></center><p style="font-size: 20px; font-family: 'Open Sans'">Tailings ponds, lakes that hold the toxic by-products of oil sands mining, cover an area of 176 square kilometers in Alberta and contain enough liquid to fill 390,000 Olympic-sized pools. Tailings ponds are extremely detrimental to the environment and pose challenges for improving extraction processes used by oil and mining industries. If left untreated, tailings ponds have the potential to pollute water sources, damage ecosystems, eliminate biodiversity and kill a variety of living organisms. An example of tailings ponds pollution includes harmful ions such as lead and mercury which affect the environment.The removal of heavy metals in tailings ponds as well as wastewater is appealing yet challenging. In addition to benefiting the environment, the extraction of these metals creates value out of what would otherwise be waste. </p>
 +
</a>
 +
</div>
 +
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<br>
 +
 +
  <div style="background-color: #CFE2F3;">
 +
<div style="background-color: #;">
 +
<div class="container-fluid;" style=" margin-left:17%; margin-right:17%;">
 +
 +
<br><center><h2 class="w100"style="font-size: 7vw; margin:0" >Our Solution</h2></center><p style= " font-size: 20px; font-family: 'Open Sans', sans-serif; text-align:justify">To address these issues, we propose a system using engineered bacteria and bacteriophage-- viruses that infect and reproduce within the host bacteria-- to capture and remove ions from solution using novel capsid composition and inducible precipitation. Utilizing biological systems and local infrastructure will both purify contaminated water and extract reusable metals renewably. To better understand the feasibility of our project, we plan on using a mixture of kinetic, agent-based and spatial modelling. Kinetic modelling will allow us to mathematically understand the trend of our system as well as how our system will react to specific parameters. Agent-based modelling will display the different components of our system. This allows for a more accurate visualization of the system as a whole with the different agent interactions. Finally, spatial modelling will help us demonstrate our unique system to the general public. Additionally, we plan to contact the head of the Water  Treatment Plant in Lethbridge to see how our project could be integrated into their facility, as well as to understand how our project would function in their system. Our system of engineered bacteria and bacteriophage will provide a solution to the issue of metal contaminants present in water.
 +
</p>
 +
</div>
 +
<br>
 +
 +
<div class="container-fluid" style="text-align:left; background-image: url(https://static.igem.org/mediawiki/2018/f/fa/T--Lethbridge_HS--footer.png);background-color: white; background-size: cover; background-position: center;  background-size: 100% 100%;
 +
width: 100%; margin: 0; border-bottom: ; opacity: 0.9;
 +
      ">
 +
<center><br> <h1 style="color:white; font-family:Montserrat" class="w100">And a big thank you to our sponsors! </h1>
 +
<img style="height: 600px;"src="https://static.igem.org/mediawiki/2018/a/a8/T--Lethbridge_HS--spom.png" class="img-fluid" alt="Responsive image">
 +
 +
 +
 +
</center>
 +
</div>
 +
 +
 +
  
  
 +
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 +
    <!-- Include all compiled plugins (below), or include individual files as needed -->
 +
    <script src="js/bootstrap.min.js"></script>
  
 
<script src="https://2018.igem.org/Template:Lethbridge_HS/jquery" type="text/javascript"> </script>
 
<script src="https://2018.igem.org/Template:Lethbridge_HS/jquery" type="text/javascript"> </script>

Latest revision as of 02:51, 18 October 2018