Difference between revisions of "Team:ATOMS-Turkiye/Tour"

 
(86 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{ATOMS-Turkiye/Test}}
 
{{ATOMS-Turkiye/Test}}
 
<html>
 
<html>
 +
<div id="page-wrapper">
 +
<script>
 +
  $(document).ready(function(){
 +
    $("#headerWrapper").sticky({topSpacing:34});
 +
      $("nav.scroll-nav").sticky({topSpacing:57});
 +
       
 +
  });
 +
</script>
 
<style>
 
<style>
 +
.img-right{
 +
 
 +
    padding:0px !important;
 +
}
 +
.img-left{
 +
  padding:0px !important;
 +
}
 +
.img-center{
 +
    padding:0px !important;
 +
}
  
 +
h2.scroll{
 +
    margin-top: 0px !important;
 +
 +
}
 +
@media (max-width: 1185px) {
 +
#footer{
 +
      margin-bottom: -285px;}
 +
}
 +
div#content {
 +
    margin-top: -12px;
 +
}
 +
#headerWrapper {
 +
    margin-top:-67px !important;
 +
}
 +
h2.scroll{
 +
display:none
 +
}
 +
.scroll-nav{
 +
    margin-top:17px
 +
}
 
#content-div{
 
#content-div{
−
     height:520px;
+
     height:500px;
−
     padding:5px;
+
     padding:15px;
−
     width:1090px
+
    /*padding-right:30px;*/
 +
     width:1065px;
 
}
 
}
−
.tour-right{
+
.tour-right, .tour-right p{
−
     font-family:'SegoePrint-Regular'
+
     font-family:'SegoePrint-Regular';
 +
    width: 280px;
 +
    float: right;
 +
    padding-top: 50px;
 +
    padding:20px;
 +
    font-size: 24px;
 +
    line-height:2em;
 +
    padding-bottom: 30px;
 
}
 
}
−
 
+
.tour-bottom, .tour-bottom p{
 +
    font-family:'SegoePrint-Regular';
 +
    width: 1000px;
 +
    /*float: right;*/
 +
    padding-top: 20px;
 +
    padding:20px;
 +
    font-size: 24px;
 +
    line-height:2em;
 +
    padding-bottom: 20px;
 +
}
 +
.tour-centered, .tour-centered p{
 +
    font-family:'SegoePrint-Regular';
 +
    width:900px;
 +
    right:0px;
 +
    left:0px;
 +
    margin:auto;
 +
    font-size: 24px;
 +
    line-height:2em;
 +
    padding-bottom: 30px;
 +
}
 +
.img-left{
 +
    height:500px;
 +
    width:auto;
 +
    float:left;
 +
        -webkit-border-radius: 2px;
 +
    -moz-border-radius: 2px;
 +
    -ms-border-radius: 2px;
 +
    -o-border-radius: 2px;
 +
    border-radius: 2px;
 +
}
 +
.img-center{
 +
    width:1065px;
 +
    float:left;
 +
        -webkit-border-radius: 2px;
 +
    -moz-border-radius: 2px;
 +
    -ms-border-radius: 2px;
 +
    -o-border-radius: 2px;
 +
    border-radius: 2px;
 +
}
 +
#footer{/*bottom:-240px*/}
 
</style>
 
</style>
−
<div id="page-wrapper">
 
 
<div class="main">  
 
<div class="main">  
 
<article class="post__article">
 
<article class="post__article">
  
−
<div id="content-div" style="height:200px">
+
<div id="content-div" style="height:100%;width:1035px;padding:30px;padding-top:90px;padding-bottom:10px">
−
<h1 style="left:0px; right: 230px; padding-top:50px;color:black;font-size:25px;position:absolute;left:0px;right:0px;margin-right:480px;">Introduction</h1>
+
<h1 style="font-family:'SegoePrint-Regular';left:0px; right: 230px; padding-top:0px;color:black;font-size:25px;position:absolute;left:0px;right:0px;margin-right:480px;">Welcome to Tour Section</h1>
 +
<div class="tour-centered" style="width:900px;">
 +
 +
<p>As there is a resistance developing against H. Pylori, we aimed to eradicate it with synthetic biology. Meet Wile E. Coli! He had some modifications to cure ulcer, the ulcer made by Helico Runner(beep-beep!)</p>
 +
<p>Here are our project’s parts in a little fast tour! </p>
 +
<p>Are you ready to learn the journey of Wile E. Coli and Helico Runner? <b>Then change the frames with mouse or up and down keys!</b></p>
 +
</div>
 
</div>
 
</div>
  
 
<h2 class="scroll">1 Resistance</h2>
 
<h2 class="scroll">1 Resistance</h2>
 
<div id="content-div">
 
<div id="content-div">
−
<img class="img-center" src="">
+
<img class="img-left" src="https://static.igem.org/mediawiki/2015/0/06/ATOMS-Turkiye_tour1.jpg">
−
<div class="tour-right"></div>
+
<div class="tour-right">At first, it will be acid resistant, to survive in stomach’s acidic microenvironment!</div>
 
</div>
 
</div>
  
 
<h2 class="scroll">2 Repellency</h2>
 
<h2 class="scroll">2 Repellency</h2>
 
<div id="content-div">
 
<div id="content-div">
−
<img class="img-center" src="">
+
<img class="img-left" src="https://static.igem.org/mediawiki/2015/c/c5/ATOMS-Turkiye_tour2.jpg">
−
<div class="tour-right"></div>
+
<div class="tour-right">Secondly, as Wile E. coli needed to find its way properly, he now has a part for targeting Helico
 +
 
 +
Runner;  chemotaxis part!</div>
 
</div>
 
</div>
  
 
<h2 class="scroll">3 Motility</h2>
 
<h2 class="scroll">3 Motility</h2>
 
<div id="content-div">
 
<div id="content-div">
−
<img class="img-center" src="">
+
<img class="img-center" src="https://static.igem.org/mediawiki/2015/c/cf/ATOMS-Turkiye_tour3.jpg">
−
<div class="tour-right"></div>
+
<div class="tour-bottom">Thirdly, we had to make sure Wile E. Coli reached to Helico Runner, so now it can penetrate into the 
 +
 
 +
mucos layer  with its faster flagellas!</div>
 
</div>
 
</div>
  
 
<h2 class="scroll">4 Sensing</h2>
 
<h2 class="scroll">4 Sensing</h2>
 
<div id="content-div">
 
<div id="content-div">
−
<img class="img-center" src="">
+
<img class="img-center" src="https://static.igem.org/mediawiki/2015/a/ad/ATOMS-Turkiye_tour4.jpg">
−
<div class="tour-right"></div>
+
<div class="tour-bottom">The fourth part And gate, is designed to make Wile E. Coli sensing Helico Runner. Look! It’s not
 +
 
 +
chasing the fake Helico Runner anymore!</div>
 
</div>
 
</div>
  
 
<h2 class="scroll">5 Killing</h2>
 
<h2 class="scroll">5 Killing</h2>
 
<div id="content-div">
 
<div id="content-div">
−
<img class="img-center" src="">
+
<img class="img-center" src="https://static.igem.org/mediawiki/2015/6/61/ATOMS-Turkiye_tour5.jpg">
−
<div class="tour-right">Try asşfdkjhg sjdkföavs</div>
+
<div class="tour-bottom">Thanks to our fifth part, Wile E. Coli can destroy Helico Runner with the antimicrobial peptide
 +
 
 +
Pexiganan.  Revenge time!</div>
 
</div>
 
</div>
  
 
<h2 class="scroll">Cancer</h2>
 
<h2 class="scroll">Cancer</h2>
 
<div id="content-div">
 
<div id="content-div">
−
<img class="img-center" src="">
+
<img class="img-left" src="https://static.igem.org/mediawiki/2015/0/00/ATOMS-Turkiye_tour6.jpg">
−
<div class="tour-right"></div>
+
<div class="tour-right">Oh wait, what if gastric ulcer causes gastric cancer? How will we open this cancer door to reach and
 +
 
 +
cure it?</div>
 
</div>
 
</div>
  
 
<h2 class="scroll">miRNA Switch</h2>
 
<h2 class="scroll">miRNA Switch</h2>
 
<div id="content-div">
 
<div id="content-div">
−
<img class="img-center" src="">
+
<img class="img-left" src="https://static.igem.org/mediawiki/2015/f/fb/ATOMS-Turkiye_tour7.jpg">
−
<div class="tour-right"></div>
+
<div class="tour-right">Here is the solution; miRNA switch! Mr. exosome has a key to open the door now. Just like key
 +
 
 +
matches the lock, if miRNAs match the switch we can target cancer more specifically now!
 +
</div>
 
</div>
 
</div>
  
 +
<h2 class="scroll">...</h2>
 +
<div id="content-div" style="width:140px;height:60px;font-size:24px;">
 +
<p style="padding-top:15px;font-family:'SegoePrint-Regular';margin-left: -15px;
 +
    font-weight: 600;">- The End -</p>
 +
</div>
 
</article>
 
</article>
 
</div>
 
</div>
−
</div>
+
 
 
<script>
 
<script>
−
  $('.post__article').scrollNav({
+
$('.post__article').scrollNav({
 
     sections: 'h2.scroll',
 
     sections: 'h2.scroll',
−
     subSections: false,
+
     subSections: true,
 
     sectionElem: 'div',
 
     sectionElem: 'div',
 
     showHeadline: false,
 
     showHeadline: false,
Line 75: Line 183:
 
     showTopLink: true,
 
     showTopLink: true,
 
     topLinkText: 'Top',
 
     topLinkText: 'Top',
−
     fixedMargin: 100,
+
     fixedMargin: 40,
−
     scrollOffset: 105,
+
     scrollOffset: 110,
 
     animated: true,
 
     animated: true,
 
     speed: 500,
 
     speed: 500,
Line 87: Line 195:
 
     onDestroy: null
 
     onDestroy: null
 
});
 
});
 +
var $;
 +
var observer_target = document.querySelector('.post__article');
 +
var observer = new MutationObserver(function(mutations) {
 +
  mutations.forEach(function() {
 +
    $.fn.scrollNav('resetPos');
 +
  });
 +
});
 +
var observer_config = {
 +
  attributes: true,
 +
  childList: true,
 +
  characterData: true,
 +
  subtree: true
 +
};
 +
observer.observe(observer_target, observer_config);
 +
 +
 +
$('.box').hide();
 +
 +
// Make sure all the elements with a class of "clickme" are visible and bound
 +
// with a click event to toggle the "box" state
 +
$('.clickme').each(function() {
 +
    $(this).show(0).on('click', function(e) {
 +
        // This is only needed if your using an anchor to target the "box" elements
 +
        e.preventDefault();
 +
       
 +
        // Find the next "box" element in the DOM
 +
        $(this).next('.box').slideToggle('fast');
 +
    });
 +
});
 +
 +
  function toggle_visibility(id) {
 +
      var e = document.getElementById(id);
 +
      if(e.style.display == 'none')
 +
          e.style.display = 'inline';
 +
      else
 +
          e.style.display = 'none';
 +
    }
 +
 +
 +
 +
function scrollOpen(id){if($(id)==undefined)return;
 +
$('html, body').animate({
 +
        scrollTop: $(id).offset().top-100
 +
    },0);
 +
$(id).click();}
 +
 +
$(function(){
 +
    scrollOpen(window.location.hash);
 +
});
 +
 
</script>
 
</script>
  
 +
</div>
 
</html>
 
</html>

Latest revision as of 03:52, 5 October 2015


Welcome to Tour Section

As there is a resistance developing against H. Pylori, we aimed to eradicate it with synthetic biology. Meet Wile E. Coli! He had some modifications to cure ulcer, the ulcer made by Helico Runner(beep-beep!)

Here are our project’s parts in a little fast tour!

Are you ready to learn the journey of Wile E. Coli and Helico Runner? Then change the frames with mouse or up and down keys!

1 Resistance

At first, it will be acid resistant, to survive in stomach’s acidic microenvironment!

2 Repellency

Secondly, as Wile E. coli needed to find its way properly, he now has a part for targeting Helico Runner; chemotaxis part!

3 Motility

Thirdly, we had to make sure Wile E. Coli reached to Helico Runner, so now it can penetrate into the mucos layer with its faster flagellas!

4 Sensing

The fourth part And gate, is designed to make Wile E. Coli sensing Helico Runner. Look! It’s not chasing the fake Helico Runner anymore!

5 Killing

Thanks to our fifth part, Wile E. Coli can destroy Helico Runner with the antimicrobial peptide Pexiganan. Revenge time!

Cancer

Oh wait, what if gastric ulcer causes gastric cancer? How will we open this cancer door to reach and cure it?

miRNA Switch

Here is the solution; miRNA switch! Mr. exosome has a key to open the door now. Just like key matches the lock, if miRNAs match the switch we can target cancer more specifically now!

...

- The End -