Difference between revisions of "Team:WashU StLouis"

m
 
(95 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{WashU_StLouis}}
 
{{WashU_StLouis}}
 
<html>
 
<html>
 +
 
<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 {
 +
  display: inline-block;
 +
  margin: 0 auto;
 +
}
 +
.center_img {
 +
  width: 400px;
 +
}
 +
 
 +
.imgwrapper {
 +
  text-align: center;
 +
}
  
 
body {
 
body {
Line 18: Line 113:
  
 
h1 {
 
h1 {
 +
    font-family: 'Bangers', sans-serif;
 
     font-weight: normal;
 
     font-weight: normal;
−
     font-size: 35px;
+
     font-size: 200px;
 
     text-align: center;
 
     text-align: center;
−
     color: #fff;
+
    margin: 0px;
−
     margin: 0;
+
    padding:0px;
−
     padding:0px 16px;
+
    overflow: visible;
 +
    line-height: normal;
 +
     color: #f7f7f7 !important;
 +
     text-shadow:
 +
    -1px -1px 0 #000,
 +
    1px -1px 0 #000,
 +
    -1px 1px 0 #000,
 +
    1px 1px 0 #000;
 +
 
 +
}
 +
 
 +
h2 {
 +
    font-family: 'Bangers', sans-serif;
 +
    font-weight: normal;
 +
    font-size: 100px;
 +
    text-align: center;
 +
    color: #f7f7f7 !important;
 +
    margin: 0px;
 +
     padding:0px;
 +
    overflow: visible;
 +
    line-height: normal;
 +
  // color: #2F4F4F !important;
 +
    text-shadow:
 +
    -1px -1px 0 #000,
 +
    1px -1px 0 #000,
 +
    -1px 1px 0 #000,
 +
    1px 1px 0 #000;  
 
}
 
}
  
−
h3 {
+
p {
 
     font-weight: normal;
 
     font-weight: normal;
 
     font-size: 16px;
 
     font-size: 16px;
Line 51: Line 173:
  
 
.quotes {
 
.quotes {
 +
    font-family: 'MartelReg';
 
     font-weight: normal;
 
     font-weight: normal;
−
     font-size: 30px;
+
     font-size: 30px !important;;
−
     text-align: left;
+
     //text-align: center;
−
     margin: 50px auto;
+
     margin: -20px auto;
 +
    display: block;
 
}
 
}
  
 
.quotes_container {
 
.quotes_container {
−
    width: 800px;
 
 
     margin: 0 auto;
 
     margin: 0 auto;
 +
    padding: 100px 0px 100px 0px;
 +
    width: 95vw;
 +
    background-color: yellow;
 +
    background: rgba(225, 225, 225, .4);
 +
    //border-radius: 25px;
 +
}
 +
 +
.black_grad {
 +
    background: rgba(0, 0, 0, .6);
 +
}
 +
 +
.white_grad {
 +
    background: rgba(255, 255, 255, .6);
 +
}
 +
 +
 +
.left_bar {
 +
  position: fixed;
 +
  top: 0;
 +
  left: 0;
 +
  width: 2.5vw;
 +
  height: 100vh;
 +
  background: #000000;
 +
}
 +
.right_bar {
 +
  position: fixed;
 +
  top: 0;
 +
  right: 0;
 +
  width: 2.5vw;
 +
  height: 100vh;
 +
  background: #000000;
 +
}
 +
 +
.my_div{
 +
width: 100vw;
 +
background: #4EACCC;
 +
padding: 0px 0px 100px 0px;
 
}
 
}
  
  
 
#slide1 {
 
#slide1 {
−
     background: url('https://aos.iacpublishinglabs.com/question/aq/1400px-788px/the-oxygen-released-in-photosynthesis-comes-from_b1b40b62-fee3-4971-8a2e-a2d2983b8c41.jpg?domain=cx.aos.ask.com') 50% 0 no-repeat fixed;
+
     background: url('http://il8.picdn.net/shutterstock/videos/16264294/thumb/1.jpg') 50% 0 no-repeat fixed;
 
     color: #fff;
 
     color: #fff;
−
     height: 600px;
+
     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 74: Line 234:
  
 
#slide2 {
 
#slide2 {
−
     background-color: #fff;
+
     background: url('http://media.dcentertainment.com/sites/default/files/GalleryChar_1900x900_allstarSuperman_52ab8fc670d367.92768430.jpg') 50% 0 no-repeat fixed;
 
     color: #333333;
 
     color: #333333;
 
     height: 300px;
 
     height: 300px;
 
     margin: 0 auto;
 
     margin: 0 auto;
 
     overflow: hidden;
 
     overflow: hidden;
−
     padding: 200px 0;
+
     padding: 200px 0px 260px 0px;
 +
    background-size: cover;
 +
    background-position: 0% -60%;
 
     width: 100vw;
 
     width: 100vw;
 
}
 
}
  
 
#slide3 {
 
#slide3 {
−
     background: url('http://static1.squarespace.com/static/54dd65cfe4b08d0767b376fa/t/551c04aee4b002dbe1fe6541/1427899568784/images-for-gt-microbiology-desktop-wallpaper-green-wallpapers-for-desktop-wallpaper-feature-wall-uk-home-homebase-border-design-free-download-next.jpg?format=1500w') 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: 600px;
+
     height: 300px;
−
     padding: 170px 0px 0px 0px;
+
     padding: 200px 0px 260px 0px;
 
     background-size: cover;
 
     background-size: cover;
 +
    background-position: 0% 42%;
 
     width: 100vw;
 
     width: 100vw;
 
}
 
}
  
 
#slide4 {
 
#slide4 {
−
     background-color: #fff;
+
     background: url('http://static.srcdn.com/slir/w1000-h500-q90-c1000:500/wp-content/uploads/Superman-Genius-Intelligence-Comics.jpg')50% 0 no-repeat fixed;
−
     color: #333333;
+
     //color: #333333;
 
     height: 300px;
 
     height: 300px;
−
     padding: 200px 0;
+
    margin: 0 auto;
 +
    //overflow: hidden;
 +
    background-size: cover;
 +
     padding: 200px 0px 260px 0px;
 
     width: 100vw;
 
     width: 100vw;
 
}
 
}
  
 
#slide5 {
 
#slide5 {
−
     background: url('http://www.westernbass.com/shared/managedfiles/articles/images/algal_bloom_20040615_1_.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: 200px;
+
     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-size: cover;
 
     background-size: cover;
 
     width: 100vw;
 
     width: 100vw;
Line 113: Line 280:
 
</style>
 
</style>
  
 +
 +
<div class ="left_bar"></div>
 +
<div class ="right_bar"></div>
  
 
<div class="parawrapper">
 
<div class="parawrapper">
 +
 +
 +
 +
 +
  
 
     <div id="slide1">
 
     <div id="slide1">
 
         <div class="content">
 
         <div class="content">
−
             <h1>LOREM</h1>
+
             <h1>SUPER CELLS</h1>
−
             <h1>IPSUM</h1>
+
             <h2>WashU and Penn State</h2>
 
         </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">
+
             <div class="quotes_container white_grad">
−
                 <h3 class="quotes">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</h3>
+
                 <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 134: Line 330:
 
     <div id="slide3">
 
     <div id="slide3">
 
         <div class="content">
 
         <div class="content">
−
             <div class="quotes_container">
+
             <div class="quotes_container black_grad">
−
                 <h3 class="quotes">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." </h3>
+
                 <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 143: Line 339:
 
     <div id="slide4">
 
     <div id="slide4">
 
         <div class="content">
 
         <div class="content">
−
             <div class="quotes_container">
+
             <div class="quotes_container white_grad">
−
                 <h3 class="quotes">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." </h3>
+
                 <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 151: Line 347:
  
 
     <div id="slide5">
 
     <div id="slide5">
−
         <div class="content">
+
         <div class="content"style="padding-top: 200px;">
−
             <div class="quotes_container">
+
             <div class="quotes_container black_grad" >
−
                 <h3 class="quotes">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." </h3>
+
                 <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 = "imgwrapper" >
 +
<img src = "https://static.igem.org/mediawiki/2016/1/1e/T--WashU_StLouis--WashUlogo.png"  class = "center_img">
 +
<img src = "https://static.igem.org/mediawiki/2016/7/7c/T--WashU_StLouis--PSUlogo.png"  class = "center_img">
 
</div>
 
</div>
 +
 +
<div class = "imgwrapper" style = "padding: 0px 0px 50px 0px;">
 +
<img src = "https://static.igem.org/mediawiki/2016/3/33/T--WashU_StLouis--Monsantologo.png" class = "center_img">
 +
<img src = "https://static.igem.org/mediawiki/2016/a/af/T--WashU_StLouis--Intrexonlogo.png" class = "center_img">
 +
 +
<img src = "https://static.igem.org/mediawiki/2016/0/0d/T--WashU_StLouis--IDTlogo.png"  class = "center_img">
 +
<img src = "https://static.igem.org/mediawiki/2016/9/97/T--WashU_StLouis--SnapGenelogo.png" class = "center_img">
 +
 +
<img src = "https://static.igem.org/mediawiki/2016/d/d9/T--WashU_StLouis--ICARESlogo.png" class = "center_img">
 +
<img src = "https://static.igem.org/mediawiki/2016/4/4a/T--WashU_StLouis--SIGMAlogo.png" class = "center_img">
 +
</div>
 +
 +
</div>
 +
 +
 +
 +
 +
<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 () {
 +
    $('[class^="quotes_container"]').each(function () {
 +
                //console.log($(window).scrollTop() + $(window).height() - $(this).offset().top - $(this).height());
 +
var bottomMargin = ($(window).scrollTop() + $(window).height() - $(this).offset().top);
 +
var topMargin = (-$(window).scrollTop() + $(this).offset().top + $(this).height());
 +
//console.log($(window).scrollTop());
 +
//console.log($(window).height());
 +
//console.log($(this).offset().top);
 +
console.log("top: " + topMargin + "  bottom: " + bottomMargin);
 +
        var fade = false;
 +
        if((topMargin > 0)) {
 +
            if((topMargin < 300)) {
 +
                $(this).stop().fadeTo(0, topMargin/500.0);
 +
                fade = true;
 +
            }
 +
        }
 +
      if((bottomMargin > 0)) {
 +
              if((bottomMargin < 300)) {
 +
                $(this).stop().fadeTo(0, bottomMargin/500.0);
 +
                fade = true;
 +
              }
 +
        }
 +
        //if (($(this).offset().top - $(window).scrollTop()) < 500) {
 +
        //  $(this).stop().fadeTo(0, ($(this).offset().top -$(window).scrollTop())/100.0);
 +
        //}
 +
        if(!fade){
 +
        $(this).css("opacity", 1);
 +
  //              //console.log($(window).scroll().top);
 +
//                //console.log($(window).height());
 +
  //              //console.log($(this).height());
 +
        }
 +
    });
 +
     
 +
});*/
  
  
 +
</script>
  
  

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.