Team:KAIST Korea
From 2013.igem.org
(Difference between revisions)
m |
|||
Line 2: | Line 2: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <title>iGEM Team : KAIST_Korea</title> | ||
+ | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
+ | <meta name="description" content="" /> | ||
+ | <meta name="keywords" content="" /> | ||
+ | <noscript> | ||
+ | <link rel="stylesheet" href="css/5grid/core.css" /> | ||
+ | <link rel="stylesheet" href="css/5grid/core-desktop.css" /> | ||
+ | <link rel="stylesheet" href="css/5grid/core-1200px.css" /> | ||
+ | <link rel="stylesheet" href="css/5grid/core-noscript.css" /> | ||
+ | <link rel="stylesheet" href="css/style.css" /> | ||
+ | <link rel="stylesheet" href="css/style-desktop.css" /> | ||
+ | </noscript> | ||
+ | <script src="css/5grid/jquery.js"></script> | ||
+ | <script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none"></script> | ||
+ | <!--[if IE 9]><link rel="stylesheet" href="css/style-ie9.css" /><![endif]--> | ||
+ | </head><body> | ||
- | </ | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
+ | <script type="text/javascript" src="jquery.easing.1.3.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(function() { | ||
+ | /** | ||
+ | * for each menu element, on mouseenter, | ||
+ | * we enlarge the image, and show both sdt_active span and | ||
+ | * sdt_wrap span. If the element has a sub menu (sdt_box), | ||
+ | * then we slide it - if the element is the last one in the menu | ||
+ | * we slide it to the left, otherwise to the right | ||
+ | */ | ||
+ | $('#sdt_menu > li').bind('mouseenter',function(){ | ||
+ | var $elem = $(this); | ||
+ | $elem.find('img') | ||
+ | .stop(true) | ||
+ | .animate({ | ||
+ | 'width':'170px', | ||
+ | 'height':'170px', | ||
+ | 'left':'0px' | ||
+ | },400,'easeOutBack') | ||
+ | .andSelf() | ||
+ | .find('.sdt_wrap') | ||
+ | .stop(true) | ||
+ | .animate({'top':'140px'},500,'easeOutBack') | ||
+ | .andSelf() | ||
+ | .find('.sdt_active') | ||
+ | .stop(true) | ||
+ | .animate({'height':'170px'},300,function(){ | ||
+ | var $sub_menu = $elem.find('.sdt_box'); | ||
+ | if($sub_menu.length){ | ||
+ | var left = '170px'; | ||
+ | if($elem.parent().children().length == $elem.index()+1) | ||
+ | left = '-170px'; | ||
+ | $sub_menu.show().animate({'left':left},200); | ||
+ | } | ||
+ | }); | ||
+ | }).bind('mouseleave',function(){ | ||
+ | var $elem = $(this); | ||
+ | var $sub_menu = $elem.find('.sdt_box'); | ||
+ | if($sub_menu.length) | ||
+ | $sub_menu.hide().css('left','0px'); | ||
+ | |||
+ | $elem.find('.sdt_active') | ||
+ | .stop(true) | ||
+ | .animate({'height':'0px'},300) | ||
+ | .andSelf().find('img') | ||
+ | .stop(true) | ||
+ | .animate({ | ||
+ | 'width':'0px', | ||
+ | 'height':'0px', | ||
+ | 'left':'85px'},400) | ||
+ | .andSelf() | ||
+ | .find('.sdt_wrap') | ||
+ | .stop(true) | ||
+ | .animate({'top':'25px'},500); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
- | |||
- | |||
- | |||
- | + | <!-- logo --> | |
- | + | <header id="header" class="5grid-layout"> | |
+ | <div class="row"> | ||
+ | <div class="12u" id="logo"> <!-- Logo --> | ||
+ | |||
+ | <img height="130" src="images/logo.png" alt=""/> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
- | + | <!-- menu bar --> | |
- | |||
+ | <div class="content"> | ||
+ | |||
+ | <ul id="sdt_menu" class="sdt_menu"> | ||
+ | <li> | ||
+ | <a href="index.html"> | ||
+ | <img src="images/2.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">HOME</span> | ||
+ | <!--<span class="sdt_descr">Human Practice</span> --> | ||
+ | </span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="team.html"> | ||
+ | <img src="images/1.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">TEAM</span> | ||
+ | <!--<span class="sdt_descr">Human Practice</span> --> | ||
+ | </span> | ||
+ | </a> | ||
+ | |||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <img src="images/3.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">project</span> | ||
+ | <!--<span class="sdt_descr">Human Practice</span> --> | ||
+ | </span> | ||
+ | </a> | ||
+ | <div class="sdt_box"> | ||
+ | <a href="#">Overview</a> | ||
+ | <a href="#">Background</a> | ||
+ | |||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="data.html"> | ||
+ | <img src="images/4.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">LabNote</span> | ||
+ | <!--<span class="sdt_descr">Human Practice</span> --> | ||
+ | </span> | ||
+ | </a> | ||
+ | <div class="sdt_box"> | ||
+ | <a href="#">Result</a> | ||
+ | <a href="#">Modeling</a> | ||
+ | |||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | <img src="images/5.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Human <br>Practice</span> | ||
+ | <!--<span class="sdt_descr">Human Practice</span> --> | ||
+ | </span> | ||
+ | </a> | ||
+ | <div class="sdt_box"> | ||
+ | <a href="#">Protocol</a> | ||
+ | <a href="#">LabNote</a> | ||
+ | |||
+ | </div> | ||
+ | </li> | ||
- | <!-- | + | <li> |
+ | <a href="#"> | ||
+ | <img src="images/5.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Safety</span> | ||
+ | <!--<span class="sdt_descr">Human Practice</span> --> | ||
+ | </span> | ||
+ | </a> | ||
+ | <div class="sdt_box"> | ||
+ | <a href="#">Protocol</a> | ||
+ | <a href="#">LabNote</a> | ||
+ | |||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | </header> | ||
- | + | <!-- body --> | |
- | + | ||
- | + | <div id="page-wrapper"> | |
- | + | <div class="5grid-layout"> | |
- | + | <div id="feature-content"> | |
- | + | <section> | |
- | + | <h2>iGEm_KAIST TITLE</h2> | |
- | + | </section> | |
- | ! | + | |
- | + | ||
- | + | <div class="row"> | |
+ | <div class="12u"> | ||
+ | <div class="row"> | ||
+ | <div class="6u"> | ||
+ | <section id="content"> | ||
+ | <div class="image-style1"><a href="#"><iframe &autoplay=1 width="570" height="315" src="http://www.youtube.com/embed/KHhswxo6xow"frameborder="0" allowfullscreen ></iframe></a></div> | ||
+ | </section> | ||
+ | </div> | ||
+ | <div class="3u"> | ||
+ | <section id = "sidebar"> | ||
+ | <div class="image-style1", align="right"><a href="#"><img src="images/pics13.jpg" alt=""></a></div> | ||
+ | <p>iGEM is International Genetic Engineering M?</p> | ||
+ | <p class="button-style"><a href="#">GO TO ABSTRACT</a></p> | ||
+ | </section> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div id="page"> | ||
+ | <div class="row"> | ||
+ | <div class="12u"> | ||
+ | <div class="row"> | ||
+ | <div class="8u"> | ||
+ | <section id="content"> | ||
+ | <h2>WhAT IS CRISPR?</h2> | ||
+ | <p class="subtitle">...</p> | ||
+ | <p><a href="#"><img src="images/pics02.jpg" alt=""></a></p> | ||
+ | <p>Welcome to<strong> iGEM_KIAST</strong>, ... | ||
+ | <br><br><br><br><br><br><br><br> | ||
+ | </section> | ||
+ | </div> | ||
+ | <div class="4u"> | ||
+ | <section id="sidebar"> | ||
+ | <h2>OUR TEAM PROJECT...</h2> | ||
+ | <p class="subtitle">genome editing using CRISPR</p> | ||
+ | <p>Pathway............ | ||
+ | <br><br></p> | ||
+ | |||
+ | </section> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--<div id="footer-wrapper"> | ||
+ | <div id="footer-content" class="5grid-layout"> | ||
+ | <div class="row"> | ||
+ | |||
+ | <div class="3u"> | ||
+ | |||
+ | </div> | ||
+ | <div class="6u"> | ||
+ | <section> | ||
+ | <h2>footer site</h2> | ||
+ | <p>iGEM logo </p> | ||
+ | |||
+ | </section> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> --> | ||
+ | <div class="5grid-layout"> | ||
+ | <div id="copyright"> | ||
+ | <section> | ||
+ | <p>© Your Site Name | Images: <a href="http://fotogrph.com/">Fotogrph</a> | Design: <a href="http://html5templates.com/">HTML5Templates.com</a></p> | ||
+ | </section> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> |
Revision as of 08:57, 13 August 2013
© Your Site Name | Images: Fotogrph | Design: HTML5Templates.com