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

 
(47 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 {
 
div#content {
−
     padding-bottom: 150px;
+
     margin-top: -12px;
 +
}
 +
#headerWrapper {
 +
    margin-top:-67px !important;
 
}
 
}
 
h2.scroll{
 
h2.scroll{
 
display:none
 
display:none
 +
}
 +
.scroll-nav{
 +
    margin-top:17px
 
}
 
}
 
#content-div{
 
#content-div{
−
     height:520px;
+
     height:500px;
−
     padding:5px;
+
     padding:15px;
−
     padding-right:30px;
+
     /*padding-right:30px;*/
 
     width:1065px;
 
     width:1065px;
 
}
 
}
 
.tour-right, .tour-right p{
 
.tour-right, .tour-right p{
 
     font-family:'SegoePrint-Regular';
 
     font-family:'SegoePrint-Regular';
−
     width: 250px;
+
     width: 280px;
 
     float: right;
 
     float: right;
 
     padding-top: 50px;
 
     padding-top: 50px;
Line 23: Line 56:
 
     line-height:2em;
 
     line-height:2em;
 
     padding-bottom: 30px;
 
     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{
 
.tour-centered, .tour-centered p{
Line 33: Line 76:
 
     line-height:2em;
 
     line-height:2em;
 
     padding-bottom: 30px;
 
     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{
 
.img-center{
−
     height:510px;
+
     width:1065px;
 
     float:left;
 
     float:left;
 
         -webkit-border-radius: 2px;
 
         -webkit-border-radius: 2px;
Line 43: Line 96:
 
     border-radius: 2px;
 
     border-radius: 2px;
 
}
 
}
−
#footer{bottom:-240px}
+
#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:100%;width:1040px;padding:30px;padding-top:90px;padding-bottom:10px">
+
<div id="content-div" style="height:100%;width:1035px;padding:30px;padding-top:90px;padding-bottom:10px">
−
<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;">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;">
 
<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>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>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? Then change the pages with mouse or up and down keys!</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>
 
</div>
Line 61: Line 113:
 
<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="https://static.igem.org/mediawiki/2015/0/06/ATOMS-Turkiye_tour1.jpg">
+
<img class="img-left" src="https://static.igem.org/mediawiki/2015/0/06/ATOMS-Turkiye_tour1.jpg">
 
<div class="tour-right">At first, it will be acid resistant, to survive in stomach’s acidic microenvironment!</div>
 
<div class="tour-right">At first, it will be acid resistant, to survive in stomach’s acidic microenvironment!</div>
 
</div>
 
</div>
Line 67: Line 119:
 
<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="https://static.igem.org/mediawiki/2015/c/c5/ATOMS-Turkiye_tour2.jpg">
+
<img class="img-left" src="https://static.igem.org/mediawiki/2015/c/c5/ATOMS-Turkiye_tour2.jpg">
 
<div class="tour-right">Secondly, as Wile E. coli needed to find its way properly, he now has a part for targeting Helico  
 
<div class="tour-right">Secondly, as Wile E. coli needed to find its way properly, he now has a part for targeting Helico  
  
Line 76: Line 128:
 
<div id="content-div">
 
<div id="content-div">
 
<img class="img-center" src="https://static.igem.org/mediawiki/2015/c/cf/ATOMS-Turkiye_tour3.jpg">
 
<img class="img-center" src="https://static.igem.org/mediawiki/2015/c/cf/ATOMS-Turkiye_tour3.jpg">
−
<div class="tour-right">Thirdly, we had to make sure Wile E. Coli reached to Helico Runner, so now it can penetrate into the   
+
<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>
 
mucos layer  with its faster flagellas!</div>
Line 84: Line 136:
 
<div id="content-div">
 
<div id="content-div">
 
<img class="img-center" src="https://static.igem.org/mediawiki/2015/a/ad/ATOMS-Turkiye_tour4.jpg">
 
<img class="img-center" src="https://static.igem.org/mediawiki/2015/a/ad/ATOMS-Turkiye_tour4.jpg">
−
<div class="tour-right">The fourth part And gate, is designed to make Wile E. Coli sensing Helico Runner. Look! It’s not  
+
<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>
 
chasing the fake Helico Runner anymore!</div>
Line 92: Line 144:
 
<div id="content-div">
 
<div id="content-div">
 
<img class="img-center" src="https://static.igem.org/mediawiki/2015/6/61/ATOMS-Turkiye_tour5.jpg">
 
<img class="img-center" src="https://static.igem.org/mediawiki/2015/6/61/ATOMS-Turkiye_tour5.jpg">
−
<div class="tour-right">Thanks to our fifth part, Wile E. Coli can destroy Helico Runner with the antimicrobial peptide  
+
<div class="tour-bottom">Thanks to our fifth part, Wile E. Coli can destroy Helico Runner with the antimicrobial peptide  
  
 
Pexiganan.  Revenge time!</div>
 
Pexiganan.  Revenge time!</div>
Line 99: Line 151:
 
<h2 class="scroll">Cancer</h2>
 
<h2 class="scroll">Cancer</h2>
 
<div id="content-div">
 
<div id="content-div">
−
<img class="img-center" src="https://static.igem.org/mediawiki/2015/0/00/ATOMS-Turkiye_tour6.jpg">
+
<img class="img-left" src="https://static.igem.org/mediawiki/2015/0/00/ATOMS-Turkiye_tour6.jpg">
 
<div class="tour-right">Oh wait, what if gastric ulcer causes gastric cancer? How will we open this cancer door to reach and  
 
<div class="tour-right">Oh wait, what if gastric ulcer causes gastric cancer? How will we open this cancer door to reach and  
  
Line 107: Line 159:
 
<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="https://static.igem.org/mediawiki/2015/f/fb/ATOMS-Turkiye_tour7.jpg">
+
<img class="img-left" src="https://static.igem.org/mediawiki/2015/f/fb/ATOMS-Turkiye_tour7.jpg">
 
<div class="tour-right">Here is the solution; miRNA switch! Mr. exosome has a key to open the door now. Just like key  
 
<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!
 
matches the lock, if miRNAs match the switch we can target cancer more specifically now!
−
<p style="position:relative;bottom:48px;margin:auto;left:0px;right:0px;background-color:#ECF7FF;box-shadow: black 0px 0px 5px;">-the end-</p>
 
 
</div>
 
</div>
 
</div>
 
</div>
  
 
<h2 class="scroll">...</h2>
 
<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 128: 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 140: 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 -