View source for Team:ATOMS-Turkiye/Tour

{{ATOMS-Turkiye/Test}}
<html>
<div id="page-wrapper">
<style>
.img-right{
   
    padding:0px !important;
}
.img-left{
   padding:0px !important;
}
.img-center{
     padding:0px !important;
}
</style>
<script>
  $(document).ready(function(){
    $("#headerWrapper").sticky({topSpacing:34});
      $("nav.scroll-nav").sticky({topSpacing:57});
        
  });
</script>
<style>
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{
    height:500px;
    padding:15px;
    /*padding-right:30px;*/
    width:1065px;
}
.tour-right, .tour-right p{
    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>
<div class="main"> 
<article class="post__article">

<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;">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>

<h2 class="scroll">1 Resistance</h2>
<div id="content-div">
<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>

<h2 class="scroll">2 Repellency</h2>
<div id="content-div">
<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 

Runner;  chemotaxis part!</div>
</div>

<h2 class="scroll">3 Motility</h2>
<div id="content-div">
<img class="img-center" src="https://static.igem.org/mediawiki/2015/c/cf/ATOMS-Turkiye_tour3.jpg">
<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>

<h2 class="scroll">4 Sensing</h2>
<div id="content-div">
<img class="img-center" src="https://static.igem.org/mediawiki/2015/a/ad/ATOMS-Turkiye_tour4.jpg">
<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>

<h2 class="scroll">5 Killing</h2>
<div id="content-div">
<img class="img-center" src="https://static.igem.org/mediawiki/2015/6/61/ATOMS-Turkiye_tour5.jpg">
<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>

<h2 class="scroll">Cancer</h2>
<div id="content-div">
<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 

cure it?</div>
</div>

<h2 class="scroll">miRNA Switch</h2>
<div id="content-div">
<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 

matches the lock, if miRNAs match the switch we can target cancer more specifically now!
</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>
</div>

<script>
 $('.post__article').scrollNav({
    sections: 'h2.scroll',
    subSections: true,
    sectionElem: 'div',
    showHeadline: false,
    headlineText: 'Scroll To',
    showTopLink: true,
    topLinkText: 'Top',
    fixedMargin: 40,
    scrollOffset: 110,
    animated: true,
    speed: 500,
    insertTarget: this.selector,
    insertLocation: 'insertBefore',
    arrowKeys: true,
    scrollToHash: true,
    onInit: null,
    onRender: 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>

</div>
</html>