Difference between revisions of "Team:Lethbridge HS"

 
(334 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{Lethbridge_HS}}
 
 
{{Lethbridge_HS/normalizecss}}
 
{{Lethbridge_HS/normalizecss}}
 +
{{Lethbridge_HS/jquery}}
 +
{{Lethbridge_HS/bootstrapcss}}
 
{{Lethbridge_HS/reset}}
 
{{Lethbridge_HS/reset}}
−
{{Lethbridge_HS/bootstrapcss}}
+
{{Lethbridge_HS/bootstrapjs}}
 +
{{Lethbridge_HS/navbar}}
 
{{Lethbridge_HS/css}}
 
{{Lethbridge_HS/css}}
−
<!DOCTYPE html>
+
<html>
−
<html lang="en" dir="ltr">
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
 
 
<head>
 
<head>
−
  <meta charset="utf-8">
 
  
−
    <title>
 
−
  HS iGEM 2018
 
−
    </title>
 
−
  <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;
−
.navbar{
+
−
margin-top: 9px;
+
−
opacity: .9;
+
−
 
+
 
}
 
}
 +
p{font-family:'open sans', sans-serif; font-size: 18px;}
  
−
.navbar-brand{
 
  
  
 +
.downArrow{
 +
position: absolute;
 +
bottom:0%;
 +
left:20vh;
 +
right:20vh;
 +
}
  
 +
.bounce {
 +
-moz-animation: bounce 3s infinite;
 +
-webkit-animation: bounce 3s infinite;
 +
animation: bounce 3s infinite;
 
}
 
}
  
−
.navbar-collapse collapse{
+
@-moz-keyframes bounce {
−
display:block;
+
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);
 +
}
 
}
 
}
  
Line 42: Line 89:
  
 
</style>
 
</style>
−
 
−
 
  
 
</head>
 
</head>
−
<body>
+
 +
 +
<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(); background-size: cover; background-position: center;  background-size: 100% 100%;
 +
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:;
 +
    background-size: cover; background-position: center; opacity: ; background-size:100% 100% ; height: 100vh;
 +
    overflow: hidden;
 +
    margin: 0;
 +
    background-repeat: no-repeat; border-bottom:solid 0px #5B5B5B;"class="jumbotron jumbotron-fluid">
 +
  <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>
  
  
  
−
<!--navbar-->
 
−
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 
−
    <a class="navbar-brand" href="#">Navbar</a>
 
−
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 
−
      <span class="navbar-toggler-icon"></span>
 
−
    </button>
 
  
−
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+
</div>
−
      <ul class="navbar-nav mr-auto">
+
  </section>
−
        <li class="nav-item active">
+
</div>
−
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+
−
        </li>
+
−
        <li class="nav-item">
+
−
          <a class="nav-link" href="#">Link</a>
+
−
        </li>
+
−
        <li class="nav-item dropdown">
+
−
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
−
            Dropdown
+
−
          </a>
+
−
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
−
            <a class="dropdown-item" href="#">Action</a>
+
−
            <a class="dropdown-item" href="#">Another action</a>
+
−
            <div class="dropdown-divider"></div>
+
−
            <a class="dropdown-item" href="#">Something else here</a>
+
−
          </div>
+
−
        </li>
+
−
        <li class="nav-item">
+
−
          <a class="nav-link disabled" href="#">Disabled</a>
+
−
        </li>
+
−
      </ul>
+
−
      <form class="form-inline my-2 my-lg-0">
+
−
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+
−
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+
−
      </form>
+
−
    </div>
+
−
  </nav>
+
  
 +
<a name="firstSlide"> 
 +
<div style="background-color: "#">
 +
<div class="container-fluid;" style=" margin-left:17%; margin-right:17%;">
  
  
  
−
<div style="background-color:#789173;"class="jumbotron jumbotron-fluid">
+
           
−
  <div class="container">
+
<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>
−
    <center><h1 class="display-4"><b>Ctrl-SAlt-Delete</b></h1></center>
+
</a>
−
    <center><h2><i>Capture and Removal of metal ions</i> </h2></center>
+
−
    <center><h3><b>Lethbridge HS iGEM</b></h3></center>
+
−
  </div>
+
 
</div>
 
</div>
  
−
 
−
<!--carousel!-->
 
−
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
 
−
  <ol class="carousel-indicators">
 
−
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
 
−
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
 
−
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
 
−
  </ol>
 
−
  <div class="carousel-inner">
 
−
    <div class="carousel-item active">
 
−
      <img class="d-block w-100" src="https://newevolutiondesigns.com/images/freebies/nature-hd-background-4.jpg" alt="First slide">
 
−
    </div>
 
−
    <div class="carousel-item">
 
−
      <img class="d-block w-100" src="http://wallpaperheart.com/wp-content/uploads/2018/04/Cool-nature-backgrounds-hd-resolution-natural-background-hd.jpg" alt="Second slide">
 
−
    </div>
 
−
    <div class="carousel-item">
 
−
      <img class="d-block w-100" src="https://images3.alphacoders.com/823/thumb-1920-82317.jpg" alt="Third slide">
 
−
    </div>
 
−
  </div>
 
−
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
 
−
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 
−
    <span class="sr-only">Previous</span>
 
−
  </a>
 
−
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
 
−
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
 
−
    <span class="sr-only">Next</span>
 
−
  </a>
 
 
</div>
 
</div>
  
−
<div>
 
−
  <img style="width:100%"src="https://newevolutiondesigns.com/images/freebies/nature-hd-background-4.jpg"
 
 
</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.
−
<div class="container-fluid">
+
</p>
−
  <div class="row">
+
−
    <div class="col-sm-9" style="background-color:">
+
−
        <h1>Lorem ipsum</h1>
+
−
        <p> Maecenas ac eros sed metus ultricies gravida vitae vitae felis. Aliquam elit arcu, hendrerit laoreet enim vitae, pharetra posuere ligula. Cras aliquam, ex eu bibendum tempus, eros mi convallis ipsum, rutrum iaculis quam neque eget neque. Nam vehicula ipsum id consequat finibus. In vestibulum convallis enim, id imperdiet dui elementum eget. Fusce posuere metus purus, non egestas metus interdum id. Cras eget semper ante, a tristique ligula. In hac habitasse platea dictumst. Sed tincidunt porttitor volutpat. Aliquam nunc erat, faucibus eget est malesuada, dictum commodo erat. Donec maximus volutpat augue, id bibendum dolor elementum vitae. In et mauris id quam pretium fermentum non ac justo. Etiam mi leo, scelerisque venenatis mollis sit amet, porta id ex. Mauris non elit a enim semper tempor. Vestibulum molestie mi risus, eu fringilla ex pretium ac.</p>
+
−
    </div>
+
−
    <div class="col-sm-3"style="background-color:">
+
−
        <h1>Col 2 </h1>
+
−
    </div>
+
−
 
+
−
  </div>
+
 
</div>
 
</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>
  
  
Line 160: Line 169:
 
     <!-- Include all compiled plugins (below), or include individual files as needed -->
 
     <!-- Include all compiled plugins (below), or include individual files as needed -->
 
     <script src="js/bootstrap.min.js"></script>
 
     <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>
 
<script src="https://2018.igem.org/Template:Lethbridge_HS/bootstrapjs" type="text/javascript"> </script>
 
<script src="https://2018.igem.org/Template:Lethbridge_HS/bootstrapjs" type="text/javascript"> </script>
 +
</body>
  
−
</body>
 
  
 
</html>
 
</html>

Latest revision as of 02:51, 18 October 2018



The Problem

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.