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

 
(82 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>
−
#bodyContent h1, h2.scroll{
+
.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
 
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: 350px;
+
     width: 280px;
 
     float: right;
 
     float: right;
 
     padding-top: 50px;
 
     padding-top: 50px;
 +
    padding:20px;
 
     font-size: 24px;
 
     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-right">
+
<div class="tour-centered" style="width:900px;">
−
<p>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?</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>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>Then change the pages with mouse or up and down keys!</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">At first, it will be acid ressistant, 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>
  
 
<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">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 47: Line 127:
 
<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">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 55: Line 135:
 
<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">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 63: Line 143:
 
<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">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 71: 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="">
+
<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 79: 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="">
+
<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>-the end-</p>
 
 
</div>
 
</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 99: 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 111: 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 -