Difference between revisions of "Team:WashU StLouis"

 
(36 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{WashU_StLouis}}
 
{{WashU_StLouis}}
 
<html>
 
<html>
−
<head>
+
 
−
<link href="https://fonts.googleapis.com/css?family=Lato|Rubik+One" rel="stylesheet">
+
−
<link href="https://fonts.googleapis.com/css?family=Bangers|Boogaloo" rel="stylesheet">
+
−
</head>
+
 
<style>
 
<style>
−
@import 'https://fonts.googleapis.com/css?family=Martel|Martel+Sans:400,900';
+
 
 +
#myImg {
 +
    border-radius: 5px;
 +
    cursor: pointer;
 +
    transition: 0.3s;
 +
    position: absolute;
 +
    left: 80vw;
 +
    top: 20vh;
 +
}
 +
 
 +
#myImg:hover {opacity: 0.7;}
 +
 
 +
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 100; /* Sit on top */
 +
    padding-top: 100px; /* Location of the box */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
    height: 100%; /* Full height */
 +
    overflow: auto; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 +
}
 +
 
 +
/* Modal Content (image) */
 +
.modal-content {
 +
    margin: auto;
 +
    display: block;
 +
    width: 80%;
 +
    max-width: 700px;
 +
}
 +
 
 +
/* Caption of Modal Image */
 +
#caption {
 +
    margin: auto;
 +
    display: block;
 +
    width: 80%;
 +
    max-width: 700px;
 +
    text-align: center;
 +
    color: #ccc;
 +
    padding: 10px 0;
 +
    height: 150px;
 +
}
 +
 
 +
/* Add Animation */
 +
.modal-content, #caption {
 +
    -webkit-animation-name: zoom;
 +
    -webkit-animation-duration: 0.6s;
 +
    animation-name: zoom;
 +
    animation-duration: 0.6s;
 +
}
 +
 
 +
@-webkit-keyframes zoom {
 +
    from {-webkit-transform:scale(0)}
 +
    to {-webkit-transform:scale(1)}
 +
}
 +
 
 +
@keyframes zoom {
 +
    from {transform:scale(0)}
 +
    to {transform:scale(1)}
 +
}
 +
 
 +
/* The Close Button */
 +
.close {
 +
    position: absolute;
 +
    top: 15px;
 +
    right: 35px;
 +
    color: #f1f1f1;
 +
    font-size: 40px;
 +
    font-weight: bold;
 +
    transition: 0.3s;
 +
}
 +
 
 +
.close:hover,
 +
.close:focus {
 +
    color: #bbb;
 +
    text-decoration: none;
 +
    cursor: pointer;
 +
}
 +
 
 +
 
 
img {
 
img {
 
   display: inline-block;
 
   display: inline-block;
Line 42: Line 122:
 
     line-height: normal;
 
     line-height: normal;
 
     color: #f7f7f7 !important;
 
     color: #f7f7f7 !important;
 +
    text-shadow:
 +
    -1px -1px 0 #000,
 +
    1px -1px 0 #000,
 +
    -1px 1px 0 #000,
 +
    1px 1px 0 #000;
 +
 
}
 
}
  
Line 55: Line 141:
 
     line-height: normal;
 
     line-height: normal;
 
   // color: #2F4F4F !important;
 
   // color: #2F4F4F !important;
−
  /*-webkit-text-stroke: 0.5px black;
+
    text-shadow:
−
  text-shadow:
+
    -1px -1px 0 #000,
−
      3px 3px 0 #000,
+
    1px -1px 0 #000,
−
    -1px -1px 0 #000,
+
    -1px 1px 0 #000,
−
      1px -1px 0 #000,
+
    1px 1px 0 #000;  
−
      -1px 1px 0 #000,
+
−
      1px 1px 0 #000;*/
+
 
}
 
}
  
Line 89: Line 173:
  
 
.quotes {
 
.quotes {
−
     font-family: 'Lato', sans-serif !important;
+
     font-family: 'MartelReg';
 
     font-weight: normal;
 
     font-weight: normal;
 
     font-size: 30px !important;;
 
     font-size: 30px !important;;
Line 107: Line 191:
  
 
.black_grad {
 
.black_grad {
−
     background: rgba(0, 0, 0, .4);
+
     background: rgba(0, 0, 0, .6);
 
}
 
}
  
 
.white_grad {
 
.white_grad {
−
     background: rgba(255, 255, 255, .4);
+
     background: rgba(255, 255, 255, .6);
 
}
 
}
  
Line 132: Line 216:
 
}
 
}
  
−
.sponsor_div{
+
.my_div{
 
  width: 100vw;
 
  width: 100vw;
 
  background: #4EACCC;
 
  background: #4EACCC;
Line 144: Line 228:
 
     height: 300px;
 
     height: 300px;
 
     margin: 0;
 
     margin: 0;
−
     padding: 200px 0 260px 0;
+
     padding: 200px 0 260px 0px;
 
     background-size: cover;
 
     background-size: cover;
 
     width: 100vw;
 
     width: 100vw;
Line 155: Line 239:
 
     margin: 0 auto;
 
     margin: 0 auto;
 
     overflow: hidden;
 
     overflow: hidden;
−
     padding: 300px 0;
+
     padding: 200px 0px 260px 0px;
 
     background-size: cover;
 
     background-size: cover;
 
     background-position: 0% -60%;
 
     background-position: 0% -60%;
Line 164: Line 248:
 
     background: url('https://s-media-cache-ak0.pinimg.com/originals/32/70/bd/3270bda3f910e240cae6ed68fe3348f9.jpg') 50% 0 no-repeat fixed;
 
     background: url('https://s-media-cache-ak0.pinimg.com/originals/32/70/bd/3270bda3f910e240cae6ed68fe3348f9.jpg') 50% 0 no-repeat fixed;
 
     color: #fff;
 
     color: #fff;
−
     height: 650px;
+
     height: 300px;
−
     padding: 170px 0px 0px 0px;
+
     padding: 200px 0px 260px 0px;
 
     background-size: cover;
 
     background-size: cover;
 
     background-position: 0% 42%;
 
     background-position: 0% 42%;
Line 178: Line 262:
 
     //overflow: hidden;
 
     //overflow: hidden;
 
     background-size: cover;
 
     background-size: cover;
−
     padding: 300px 0;
+
     padding: 200px 0px 260px 0px;
 
     width: 100vw;
 
     width: 100vw;
 
}
 
}
Line 184: Line 268:
 
#slide5 {
 
#slide5 {
 
     background: url('http://media.dcentertainment.com/sites/default/files/GalleryComics_1900x900_20140521_Show-Super-Friends-v1-cvr_5345ca7956e312.24267667.jpg') 50% 0 no-repeat fixed;
 
     background: url('http://media.dcentertainment.com/sites/default/files/GalleryComics_1900x900_20140521_Show-Super-Friends-v1-cvr_5345ca7956e312.24267667.jpg') 50% 0 no-repeat fixed;
−
     height: 600px;
+
     min-height: 780px;
 
     margin: 0 auto;
 
     margin: 0 auto;
−
     //padding: 250px 0;
+
     //padding: 200px 0px 260px 0px;
 
     color: #fff;
 
     color: #fff;
 
     background-position: 0% -300%;
 
     background-position: 0% -300%;
Line 201: Line 285:
  
 
<div class="parawrapper">
 
<div class="parawrapper">
 +
 +
 +
 +
 +
  
 
     <div id="slide1">
 
     <div id="slide1">
Line 208: Line 297:
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 +
 +
 +
<!-- Trigger the Modal -->
 +
<a href = "https://static.igem.org/mediawiki/2016/b/b6/T--WashU_StLouis--appinfo.pdf">
 +
<img id="myImg" src="https://static.igem.org/mediawiki/2016/d/d6/T--WashU_StLouis--joinhere.png" alt="You should definitely join" width="200" height="200">
 +
</a>
 +
<!-- The Modal -->
 +
<div id="myModal" class="modal">
 +
 +
  <!-- The Close Button -->
 +
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
 +
 +
  <!-- Modal Content (The Image) -->
 +
  <img class="modal-content" id="img01">
 +
 +
  <!-- Modal Caption (Image Text) -->
 +
  <div id="caption"></div>
 +
</div>
 +
 +
 +
  
 
     <div id="slide2">
 
     <div id="slide2">
 
         <div class="content">
 
         <div class="content">
 
             <div class="quotes_container white_grad">
 
             <div class="quotes_container white_grad">
−
                 <p class="quotes ">In his famous comic series, Superman’s exposure to Earth’s yellow sun caused his cells to produce and store vast amounts of energy, thus giving him superhuman strength and abilities. All earth-bound organisms are made of cells, and they all store energy with the same simple molecule: ATP. Our team designed plasmids that would cause bacteria to overproduce ATP and other important metabolic cofactors. Our hope is that these mutant “Super Cells” can be used in a variety of fields, from protein biosynthesis to agriculture.</p>
+
                 <p class="quotes ">In the famous comic series, exposure to Earth’s yellow sun causes Superman's cells to produce and store vast amounts of energy, giving him superhuman strength and abilities. All earth-bound organisms are made of cells, and all cells store energy with the same simple molecule: ATP. Our team designed plasmids that would cause bacteria to overproduce ATP and other important metabolic cofactors. Our hope is that these mutant “Super Cells” can be used in a variety of fields, from protein biosynthesis to agriculture.</p>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
Line 221: Line 331:
 
         <div class="content">
 
         <div class="content">
 
             <div class="quotes_container black_grad">
 
             <div class="quotes_container black_grad">
−
                 <p class="quotes ">As a subsidiary team of The Nitrogen Project, a multi-university initiative to solve nitrate runoff through genetic engineering, the primary long term goal of our project was to design crops that require less chemical fertilizer. We met with local St. Louis farmers and environmental activists to get their impressions on genetically modified plants and learn about other solutions to the runoff problem. In the end, their input led us to search for other, wider applications of our research.  </p>
+
                 <p class="quotes ">As a subsidiary of The Nitrogen Project, a multi-university initiative to solve nitrate runoff through genetic engineering, the primary long term goal of our project is to design crops that require less chemical fertilizer. We met with local St. Louis farmers and environmental activists to get their impressions on genetically modified plants and learn about other solutions to the runoff problem. In the end, their input inspired us to search for other, wider applications of our research.  </p>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
Line 230: Line 340:
 
         <div class="content">
 
         <div class="content">
 
             <div class="quotes_container white_grad">
 
             <div class="quotes_container white_grad">
−
                 <p class="quotes">Ultimately, our project culminated in data that strongly suggested that our plasmids increased both intracellular ATP concentration and the concentration of reduced electron-transport proteins. We demonstrated that the latter could be useful for the manufacture of interesting biological products. We registered two working parts – one for ATP and one for electron transport. </p>
+
                 <p class="quotes">Ultimately, our project culminated in data that strongly suggested that our plasmids increased intracellular concentrations of ATP and reduced electron-transport proteins. We demonstrated that the latter could be useful for the manufacture of interesting biological products. We submitted three working parts – one for ATP, one for electron transport proteins, and one for an inducible promoter. </p>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
Line 237: Line 347:
  
 
     <div id="slide5">
 
     <div id="slide5">
−
         <div class="content">
+
         <div class="content"style="padding-top: 200px;">
−
             <div class="quotes_container black_grad">
+
             <div class="quotes_container black_grad" >
−
                 <p class="quotes">Throughout the summer, we communicated with other iGEM teams to talk about our project and exchange advice. We even met up in person with some Midwest teams! We made invaluable connections, learned an incredible amount about synthetic biology, and created lifelong friendships, leading to a summer research experience that we will never forget.</p>
+
                 <p class="quotes">Throughout the summer, we communicated with other iGEM teams to talk about our project and exchange advice. We even met up with some Midwest teams! We made invaluable connections, learned an incredible amount about synthetic biology, and created lifelong friendships, contributing to a summer research experience that we will never forget.</p>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
  </div>
  
 +
</div>
  
  
−
    </div>
+
<div class = "my_div"style = "margin: 0px 0px -10px 0px";>
−
 
+
−
<div class = "sponsor_div"style = "margin: 0px 0px -60px 0px";>
+
  
 
<div class = "imgwrapper" >
 
<div class = "imgwrapper" >
Line 267: Line 377:
 
</div>
 
</div>
  
−
</div>
 
  
  
  
 
<script>
 
<script>
 +
 +
// Get the modal
 +
var modal = document.getElementById('myModal');
 +
 +
// Get the image and insert it inside the modal - use its "alt" text as a caption
 +
var img = document.getElementById('myImg');
 +
var modalImg = document.getElementById("img01");
 +
//var captionText = document.getElementById("caption");
 +
img.onclick = function(){
 +
    //document.getElementById("myImg").src="https://static.igem.org/mediawiki/2016/3/30/T--WashU_StLouis--appinfo.png";
 +
    //modal.style.display = "block";
 +
    modalImg.src = this.src;
 +
    captionText.innerHTML = this.alt;
 +
}
 +
 +
// Get the <span> element that closes the modal
 +
var span = document.getElementsByClassName("close")[0];
 +
 +
// When the user clicks on <span> (x), close the modal
 +
/*span.onclick = function() {
 +
    modal.style.display = "none";
 +
    document.getElementById("myImg").src="https://static.igem.org/mediawiki/2016/d/d6/T--WashU_StLouis--joinhere.png";
 +
 +
}*/
 +
 +
 +
 
/*
 
/*
 
$(window).scroll(function () {
 
$(window).scroll(function () {

Latest revision as of 21:11, 17 December 2016

MENU ▤

SUPER CELLS

WashU and Penn State

You should definitely join

In the famous comic series, exposure to Earth’s yellow sun causes Superman's cells to produce and store vast amounts of energy, giving him superhuman strength and abilities. All earth-bound organisms are made of cells, and all cells store energy with the same simple molecule: ATP. Our team designed plasmids that would cause bacteria to overproduce ATP and other important metabolic cofactors. Our hope is that these mutant “Super Cells” can be used in a variety of fields, from protein biosynthesis to agriculture.

As a subsidiary of The Nitrogen Project, a multi-university initiative to solve nitrate runoff through genetic engineering, the primary long term goal of our project is to design crops that require less chemical fertilizer. We met with local St. Louis farmers and environmental activists to get their impressions on genetically modified plants and learn about other solutions to the runoff problem. In the end, their input inspired us to search for other, wider applications of our research.

Ultimately, our project culminated in data that strongly suggested that our plasmids increased intracellular concentrations of ATP and reduced electron-transport proteins. We demonstrated that the latter could be useful for the manufacture of interesting biological products. We submitted three working parts – one for ATP, one for electron transport proteins, and one for an inducible promoter.

Throughout the summer, we communicated with other iGEM teams to talk about our project and exchange advice. We even met up with some Midwest teams! We made invaluable connections, learned an incredible amount about synthetic biology, and created lifelong friendships, contributing to a summer research experience that we will never forget.