Biomod/2014/NTU: Difference between revisions
Jimmy Shih (talk | contribs) No edit summary |
Jimmy Shih (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
<!DOCTYPE HTML> | |||
<html> | |||
<head> | |||
<title>Moonlight Website Template | Home :: w3layouts</title> | |||
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> | |||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |||
<script src="js/jquery.min.js"></script> | |||
<!-- Custom Theme files --> | |||
<link href="css/style.css" rel='stylesheet' type='text/css' /> | |||
<!-- Custom Theme files --> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> | |||
</script> | |||
<!---- animated-css ----> | |||
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all"> | |||
<script src="js/wow.min.js"></script> | |||
<script> | |||
new WOW().init(); | |||
</script> | |||
<!---- animated-css ----> | |||
<!---- start-smoth-scrolling----> | |||
<script type="text/javascript" src="js/move-top.js"></script> | |||
<script type="text/javascript" src="js/easing.js"></script> | |||
<script type="text/javascript"> | |||
jQuery(document).ready(function($) { | |||
$(".scroll").click(function(event){ | |||
event.preventDefault(); | |||
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000); | |||
}); | |||
}); | |||
</script> | |||
<!---- start-smoth-scrolling----> | |||
<!----webfonts---> | |||
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'> | |||
<!---//webfonts---> | |||
</head> | |||
<body> | |||
<!---- container ----> | |||
<!---- header ----> | |||
<div class="header"> | |||
<div class="container"> | |||
<!--- beanner-info----> | |||
<div class="banner-info text-center wow fadeIn" data-wow-delay="0.5s"> | |||
<h1>NANOJELLYFISH</h1> | |||
<p>We are NTUBIOMOD</span></p> | |||
<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><span> </span></a><br /> | |||
</div> | |||
<!--- beanner-info----> | |||
<!---- video ----> | |||
<!---pop-up-box----> | |||
<script type="text/javascript" src="js/modernizr.custom.min.js"></script> | |||
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/> | |||
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script> | |||
<div id="small-dialog" class="mfp-hide"> | |||
<iframe src="//player.vimeo.com/video/38584262" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe> | |||
</div> | |||
<script> | |||
$(document).ready(function() { | |||
$('.popup-with-zoom-anim').magnificPopup({ | |||
type: 'inline', | |||
fixedContentPos: false, | |||
fixedBgPos: true, | |||
overflowY: 'auto', | |||
closeBtnInside: true, | |||
preloader: false, | |||
midClick: true, | |||
removalDelay: 300, | |||
mainClass: 'my-mfp-zoom-in' | |||
}); | |||
}); | |||
</script> | |||
</div> | |||
<!----//fea-video----> | |||
</div> | |||
</div> | |||
<!---- header ----> | |||
<!---- content ----> | |||
<div class="content"> | |||
<div class="top-grids"> | |||
<div class="col-md-7 top-left-grid wow fadeInLeft" data-wow-delay="0.4s"> | |||
<h3 id="abstracttitle">Abstract</h3> | |||
<p id="abstract">The immune system is not fail-safe and sometimes requires a booster during an infection. Here we design a versatile jellyfish-like device/nano-robot that is able to enhance the immune system. We have chosen the hemagglutinin type 5 protein (H5) of influenza virus as our target because current treatment faces problems of drug resistance and lengthy vaccine production. The device, initially a ball-shaped dimer, contains two types of tentacles, one being H5 aptamer, and the other being either poly-cytosine (poly-C) or poly-guanine (poly-G) sequences. Upon binding H5, the dimer dissociates, releasing the packaged immuno-stimulatory molecule and exposing poly-C and poly-G. Binding between poly-C and poly-G allows aggregation of the virus-bound monomer. The device/nano-robot is versatile since targets could be modified by changing the attached aptamers. It could potentially provide better treatment for diseases such as HIV/AIDS and malaria, as well as enhance experimental techniques such as bioassays and protein purification. </p> | |||
</div> | |||
<div class="col-md-5 top-right-grid wow fadeInRight" data-wow-delay="0.4s"> | |||
</div> | |||
<div class="clearfix"> </div> | |||
</div> | |||
<script type="text/javascript"> | |||
$(document).ready(function() { | |||
$("#test1").hover(function(){ $("#testslide1").animate({left: '+0px'},500);}, | |||
function(){ $("#testslide1").animate({left: '-300px'},500);}); | |||
$("#test1").hover(function(){ $("#testslide11").animate({left: '+0px'},500);}, | |||
function(){ $("#testslide11").animate({left: '-300px'},500);}); | |||
$("#test2").hover(function(){ $("#testslide2").animate({right: '+0px'},500);}, | |||
function(){ $("#testslide2").animate({right: '-300px'},500);}); | |||
$("#test2").hover(function(){ $("#testslide22").animate({right: '+0px'},500);}, | |||
function(){ $("#testslide22").animate({right: '-300px'},500);}); | |||
$("#test4").hover(function(){ $("#testslide4").animate({right: '+0px'},500);}, | |||
function(){ $("#testslide4").animate({right: '-300px'},500);}); | |||
$("#test4").hover(function(){ $("#testslide44").animate({right: '+0px'},500);}, | |||
function(){ $("#testslide44").animate({right: '-300px'},500);}); | |||
$("#test5").hover(function(){ $("#testslide5").animate({left: '+0px'},500);}, | |||
function(){ $("#testslide5").animate({left: '-300px'},500);}); | |||
$("#test5").hover(function(){ $("#testslide55").animate({left: '+0px'},500);}, | |||
function(){ $("#testslide55").animate({left: '-300px'},500);}); | |||
}); | |||
</script> | |||
<!---- content-bottom-grids -----> | |||
<div class="content-bottom-grids"> | |||
<div class="container"> | |||
<div class="col-md-6 content-bottom-grids-left wow fadeInLeft" data-wow-delay="0.4s"> | |||
<div class="content-bottom-grids-left-grid frist-grid"> | |||
<div id="test1"> | |||
<div id="testslide1"> | |||
</div> | |||
<div id="testslide11"> | |||
<h1><a href="slideides.html"/>Idea</h1> | |||
<h1><a href="slidedesign.html"/>Design</h1> | |||
<h1><a href="slideorigami.html"/>Origami</h1> | |||
</div> | |||
<img src="images/pic01.jpg"height="200px" width="300px"/> | |||
<div class="testleft"><h1>Project</h1></div> | |||
</div> | |||
</div> | |||
<div class="content-bottom-grids-left-grid first"> | |||
<div id="test2"> | |||
<div id="testslide2"> | |||
</div> | |||
<div id="testslide22"> | |||
<h1><a href="slidemethod.html"/>Method</h1> | |||
<h1><a href="slideresult.html"/>Result</h1> | |||
</div> | |||
<img src="images/experiment.JPG" height="200px" width="300px"/> | |||
<div class="testright"><h1>Experiment</h1></div> | |||
</div> | |||
</div> | |||
<div class="content-bottom-grids-left-grid"> | |||
<div id="test3"> | |||
<img src="images/pic02.jpg" height="200px" width="300px"/> | |||
<div class="testleft"><h1><a href="slidemember.html"/>Member</h1></div> | |||
</div> | |||
</div> | |||
<span class="right-border"> </span> | |||
</div> | |||
<div class="col-md-6 content-bottom-grids-right wow fadeInRight" data-wow-delay="0.4s"> | |||
<div class="content-bottom-grids-left-grid frist-grid"> | |||
<div id="test4"> | |||
<div id="testslide4"> | |||
</div> | |||
<div id="testslide44"> | |||
<h1><a href="slidereview.html"/>Review</h1> | |||
<h1><a href="slidefuture.html"/>Future</h1> | |||
</div> | |||
<img src="images/pic03.jpg" height="200px" width="300px"/> | |||
<div class="testright"><h1>Discussion</h1></div> | |||
</div> | |||
</div> | |||
<div class="content-bottom-grids-left-grid"> | |||
<div id="test5"> | |||
<div id="testslide5"> | |||
</div> | |||
<div id="testslide55"> | |||
<h1><a href="slideprotocol.html"/>Protocol</h1> | |||
<h1><a href="slidematerial.html"/>Material</h1> | |||
<h1><a href="slideequipment.html"/>Equipment</h1> | |||
</div> | |||
<img src="images/supplement.JPG" height="200px" width="300px"/> | |||
<div class="testleft"><h1>Supplement</h1></div> | |||
</div> | |||
</div> | |||
<div class="content-bottom-grids-left-grid"> | |||
<div id="test6"> | |||
<img src="images/pic03.jpg" height="200px" width="300px"/> | |||
<div class="testright"><h1><a href="slideacknowledge.html">Acknowledge</h1></div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="clearfix"> </div> | |||
</div> | |||
</div> | |||
<div class="footer"> | |||
<div class="container"> | |||
<div class="footer-grids"> | |||
<div class="footer-left"> | |||
<div class="footer-left-grids"> | |||
<div class="clearfix"> </div> | |||
</div> | |||
</div> | |||
<div class="clearfix"> </div> | |||
<!---- footer-logo ----> | |||
<div class="footer-logo text-center"> | |||
<a href="#"><img src="images/logo1.png" style=" width:20%;" /></a> | |||
<p>Design by <a href="#">ntubiomod</a></p> | |||
<script type="text/javascript"> | |||
$(document).ready(function() { | |||
/* | |||
var defaults = { | |||
containerID: 'toTop', // fading element id | |||
containerHoverID: 'toTopHover', // fading element hover id | |||
scrollSpeed: 1200, | |||
easingType: 'linear' | |||
}; | |||
*/ | |||
$().UItoTop({ easingType: 'easeOutQuart' }); | |||
}); | |||
</script> | |||
</div> | |||
<!---- footer-logo ----> | |||
</div> | |||
</div> | |||
<!--- footer ----> | |||
</div> | |||
<!---- container ----> | |||
</body> | |||
</html> |
Revision as of 05:59, 19 October 2014
<!DOCTYPE HTML> <html> <head> <title>Moonlight Website Template | Home :: w3layouts</title> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery.min.js"></script> <!-- Custom Theme files --> <link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> </script> <!---- animated-css ----> <link href="css/animate.css" rel="stylesheet" type="text/css" media="all"> <script src="js/wow.min.js"></script> <script> new WOW().init(); </script> <!---- animated-css ----> <!---- start-smoth-scrolling----> <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1000); }); }); </script> <!---- start-smoth-scrolling----> <!----webfonts---> <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'> <!---//webfonts---> </head> <body> <!---- container ----> <!---- header ----> <div class="header"> <div class="container"> <!--- beanner-info----> <div class="banner-info text-center wow fadeIn" data-wow-delay="0.5s"> <h1>NANOJELLYFISH</h1> <p>We are NTUBIOMOD</span></p> <a class="play-icon popup-with-zoom-anim" href="#small-dialog"><span> </span></a><br /> </div> <!--- beanner-info----> <!---- video ----> <!---pop-up-box----> <script type="text/javascript" src="js/modernizr.custom.min.js"></script> <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/> <script src="js/jquery.magnific-popup.js" type="text/javascript"></script> <div id="small-dialog" class="mfp-hide"> <iframe src="//player.vimeo.com/video/38584262" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe> </div> <script> $(document).ready(function() { $('.popup-with-zoom-anim').magnificPopup({ type: 'inline', fixedContentPos: false, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: 'my-mfp-zoom-in' });
}); </script> </div> <!----//fea-video----> </div> </div> <!---- header ----> <!---- content ----> <div class="content"> <div class="top-grids"> <div class="col-md-7 top-left-grid wow fadeInLeft" data-wow-delay="0.4s"> <h3 id="abstracttitle">Abstract</h3> <p id="abstract">The immune system is not fail-safe and sometimes requires a booster during an infection. Here we design a versatile jellyfish-like device/nano-robot that is able to enhance the immune system. We have chosen the hemagglutinin type 5 protein (H5) of influenza virus as our target because current treatment faces problems of drug resistance and lengthy vaccine production. The device, initially a ball-shaped dimer, contains two types of tentacles, one being H5 aptamer, and the other being either poly-cytosine (poly-C) or poly-guanine (poly-G) sequences. Upon binding H5, the dimer dissociates, releasing the packaged immuno-stimulatory molecule and exposing poly-C and poly-G. Binding between poly-C and poly-G allows aggregation of the virus-bound monomer. The device/nano-robot is versatile since targets could be modified by changing the attached aptamers. It could potentially provide better treatment for diseases such as HIV/AIDS and malaria, as well as enhance experimental techniques such as bioassays and protein purification. </p> </div> <div class="col-md-5 top-right-grid wow fadeInRight" data-wow-delay="0.4s"> </div> <div class="clearfix"> </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#test1").hover(function(){ $("#testslide1").animate({left: '+0px'},500);}, function(){ $("#testslide1").animate({left: '-300px'},500);}); $("#test1").hover(function(){ $("#testslide11").animate({left: '+0px'},500);}, function(){ $("#testslide11").animate({left: '-300px'},500);});
$("#test2").hover(function(){ $("#testslide2").animate({right: '+0px'},500);}, function(){ $("#testslide2").animate({right: '-300px'},500);}); $("#test2").hover(function(){ $("#testslide22").animate({right: '+0px'},500);}, function(){ $("#testslide22").animate({right: '-300px'},500);});
$("#test4").hover(function(){ $("#testslide4").animate({right: '+0px'},500);}, function(){ $("#testslide4").animate({right: '-300px'},500);}); $("#test4").hover(function(){ $("#testslide44").animate({right: '+0px'},500);}, function(){ $("#testslide44").animate({right: '-300px'},500);});
$("#test5").hover(function(){ $("#testslide5").animate({left: '+0px'},500);}, function(){ $("#testslide5").animate({left: '-300px'},500);}); $("#test5").hover(function(){ $("#testslide55").animate({left: '+0px'},500);}, function(){ $("#testslide55").animate({left: '-300px'},500);});
}); </script>
<!---- content-bottom-grids -----> <div class="content-bottom-grids"> <div class="container"> <div class="col-md-6 content-bottom-grids-left wow fadeInLeft" data-wow-delay="0.4s"> <div class="content-bottom-grids-left-grid frist-grid"> <div id="test1"> <div id="testslide1"> </div> <div id="testslide11"> <h1><a href="slideides.html"/>Idea</h1> <h1><a href="slidedesign.html"/>Design</h1> <h1><a href="slideorigami.html"/>Origami</h1> </div> <img src="images/pic01.jpg"height="200px" width="300px"/> <div class="testleft"><h1>Project</h1></div> </div> </div> <div class="content-bottom-grids-left-grid first"> <div id="test2"> <div id="testslide2"> </div> <div id="testslide22"> <h1><a href="slidemethod.html"/>Method</h1> <h1><a href="slideresult.html"/>Result</h1> </div> <img src="images/experiment.JPG" height="200px" width="300px"/> <div class="testright"><h1>Experiment</h1></div> </div> </div> <div class="content-bottom-grids-left-grid"> <div id="test3"> <img src="images/pic02.jpg" height="200px" width="300px"/> <div class="testleft"><h1><a href="slidemember.html"/>Member</h1></div> </div> </div> <span class="right-border"> </span> </div> <div class="col-md-6 content-bottom-grids-right wow fadeInRight" data-wow-delay="0.4s"> <div class="content-bottom-grids-left-grid frist-grid"> <div id="test4"> <div id="testslide4"> </div> <div id="testslide44"> <h1><a href="slidereview.html"/>Review</h1> <h1><a href="slidefuture.html"/>Future</h1> </div> <img src="images/pic03.jpg" height="200px" width="300px"/> <div class="testright"><h1>Discussion</h1></div> </div> </div> <div class="content-bottom-grids-left-grid"> <div id="test5"> <div id="testslide5"> </div> <div id="testslide55"> <h1><a href="slideprotocol.html"/>Protocol</h1> <h1><a href="slidematerial.html"/>Material</h1> <h1><a href="slideequipment.html"/>Equipment</h1> </div> <img src="images/supplement.JPG" height="200px" width="300px"/> <div class="testleft"><h1>Supplement</h1></div> </div> </div> <div class="content-bottom-grids-left-grid"> <div id="test6"> <img src="images/pic03.jpg" height="200px" width="300px"/> <div class="testright"><h1><a href="slideacknowledge.html">Acknowledge</h1></div> </div> </div>
</div> <div class="clearfix"> </div> </div> </div> <div class="footer"> <div class="container"> <div class="footer-grids"> <div class="footer-left"> <div class="footer-left-grids"> <div class="clearfix"> </div> </div> </div>
<div class="clearfix"> </div> <!---- footer-logo ----> <div class="footer-logo text-center"> <a href="#"><img src="images/logo1.png" style=" width:20%;" /></a> <p>Design by <a href="#">ntubiomod</a></p> <script type="text/javascript"> $(document).ready(function() { /* var defaults = { containerID: 'toTop', // fading element id containerHoverID: 'toTopHover', // fading element hover id scrollSpeed: 1200, easingType: 'linear' }; */
$().UItoTop({ easingType: 'easeOutQuart' });
}); </script> </div> <!---- footer-logo ----> </div> </div> <!--- footer ----> </div> <!---- container ----> </body> </html>