|
|
(25 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html>
| |
- | <head>
| |
- | <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1, maximum-scale=1, user-scalable=yes, target-densitydpi=medium-dpi" />
| |
- | <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic' rel='stylesheet' type='text/css'>
| |
- | <style>
| |
- | @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic);
| |
- | ul.oe_menu{
| |
- | list-style:none;
| |
- | position:relative;
| |
- | width:300px;
| |
- | float:left;
| |
- | clear:both;
| |
- | margin:5px 0px 0px 8px;
| |
- | }
| |
- | ul.oe_menu > li{
| |
- | width:91px;
| |
- | height:30px;
| |
- | padding:auto;
| |
- | float:left;
| |
- | position:relative;
| |
- | }
| |
- | ul.oe_menu > li > a{
| |
- | display:block;
| |
- | background-color:transparent;
| |
- | color:#aaa;
| |
- | text-decoration:none;
| |
- | text-align:center;
| |
- | font-size:16px;
| |
- | font-family:"Trebuchet MS", Helvetica, sans-serif;
| |
- | width:90px;
| |
- | height:30px;
| |
- | opacity:0.8;
| |
- | }
| |
- | ul.oe_menu > li > a:hover,
| |
- | ul.oe_menu > li.selected > a{
| |
- | color:#fff;
| |
- | opacity:1.0;
| |
- | }
| |
- | .oe_wrapper ul.hovered > li > a{
| |
- | background:transparent;
| |
- |
| |
- | }
| |
- | ul.oe_menu div{
| |
- | position:absolute;
| |
- | left:0px;
| |
- | background:transparent;
| |
- | width:268px;
| |
- | height:36px;
| |
- | padding:2px;
| |
- | display:none;
| |
- | }
| |
- | ul.oe_menu div ul li a{
| |
- | text-decoration:none;
| |
- | color:#cbcbcb;
| |
- | padding:2px 2px 2px 4px;
| |
- | margin:2px;
| |
- | display:block;
| |
- | font-family:"Trebuchet MS", Helvetica, sans-serif;
| |
- | text-align:center;
| |
- | font-size:14px;
| |
- | }
| |
- | ul.oe_menu div ul.oe_full{
| |
- | width:100%;
| |
- | }
| |
- | ul.oe_menu div ul li a:hover{
| |
- | background:#8583bf;/*이걸로 색상 조절*/
| |
- | color:#fff;
| |
- | }
| |
- | ul.oe_menu li ul{
| |
- | list-style:none;
| |
- | float:left;
| |
- | width: 90px;
| |
- | margin-right:10px;
| |
- | }
| |
| | | |
- | ul.oe_menu2{
| |
- | list-style:none;
| |
- | position:relative;
| |
- | width:300px;
| |
- | float:left;
| |
- | clear:both;
| |
- | margin:5px 0px 0px 8px;
| |
- | }
| |
- | ul.oe_menu2 > li{
| |
- | width:90px;
| |
- | height:30px;
| |
- | padding:auto;
| |
- | float:left;
| |
- | position:relative;
| |
- | }
| |
- | ul.oe_menu2 > li > a{
| |
- | display:block;
| |
- | background-color:transparent;
| |
- | color:#eee;
| |
- | text-decoration:none;
| |
- | text-align:center;
| |
- | font-size:16px;
| |
- | font-family:"Trebuchet MS", Helvetica, sans-serif;
| |
- | width:90px;
| |
- | height:30px;
| |
- | opacity:0.8;
| |
- | }
| |
- | ul.oe_menu2 > li > a:hover,
| |
- | ul.oe_menu2 > li.selected > a{
| |
- | color:#fff;
| |
- | opacity:1.0;
| |
- | }
| |
- | .oe_wrapper2 ul.hovered > li > a{
| |
- | background:transparent;
| |
- |
| |
- | }
| |
- | ul.oe_menu2 div{
| |
- | position:absolute;
| |
- | left:0px;
| |
- | background:transparent;
| |
- | width:268px;
| |
- | height:36px;
| |
- | padding:2px;
| |
- | display:none;
| |
- | }
| |
- | ul.oe_menu2 div ul li a{
| |
- | text-decoration:none;
| |
- | color:#ffffff;
| |
- | padding:2px 2px 2px 2px;
| |
- | margin:2px;
| |
- | display:block;
| |
- | font-family:"Trebuchet MS", Helvetica, sans-serif;
| |
- | text-align:center;
| |
- | font-size:14px;
| |
- | }
| |
- | ul.oe_menu2 div ul.oe_full2{
| |
- | width:100%;
| |
- | }
| |
- | ul.oe_menu2 div ul li a:hover{
| |
- | background:#d37c62;/*이걸로 색상 조절*/
| |
- | color:#fff;
| |
- | }
| |
- | ul.oe_menu2 li ul{
| |
- | list-style:none;
| |
- | float:left;
| |
- | width: 86px;
| |
- | margin-right:0px;
| |
- | }
| |
- |
| |
- | #main
| |
- | {
| |
- | min-height: 100%;
| |
- | width: 1024px;
| |
- | margin: 0 auto;
| |
- | background-color: transparent;
| |
- | }
| |
- | #main #main-img
| |
- | {
| |
- | position: absolute;
| |
- | width: 1024px;
| |
- | top: -30px;
| |
- | z-index:0;
| |
- | }
| |
- | #main a #main-logo
| |
- | {
| |
- | position: absolute;
| |
- | top: -30px;
| |
- | width: 336px;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #main #top-img
| |
- | {
| |
- | position: relative;
| |
- | top: -4px;
| |
- | left:292px;
| |
- | width:732px;
| |
- | height: 250px;
| |
- | z-index: 0;
| |
- | opacity:0.9;
| |
- | }
| |
- |
| |
- | div .oe_wrapper{
| |
- | position:absolute;
| |
- | z-index:3;
| |
- | top:275px;
| |
- |
| |
- | }
| |
- | div .oe_wrapper2{
| |
- | position:absolute;
| |
- | z-index:2;
| |
- | top:355px;
| |
- |
| |
- | }
| |
- |
| |
- | #menucontent
| |
- | {
| |
- | position: absolute;
| |
- | background-color:transparent;
| |
- | width:690px;
| |
- | left:300px;
| |
- | top:-70px;
| |
- | z-index:2;
| |
- | text-align: right;
| |
- | opacity:0.8;
| |
- | }
| |
- |
| |
- | div .contact-us{
| |
- | position: absolute;
| |
- | z-index:2;
| |
- | top:425px;
| |
- | padding:4px 0px 0px 10px;
| |
- | width:268px;
| |
- | }
| |
- |
| |
- | div .contact-us #contact-us-information{
| |
- | font-family: 'Source Sans Pro', sans-serif;
| |
- | font-size:12px;
| |
- | font-style: italic;
| |
- | }
| |
- | div .contact-us #contact-us-title{
| |
- | font-family: 'Source Sans Pro', sans-serif;
| |
- | font-size:22px;
| |
- | line-height:130%;
| |
- | color:#444444;
| |
- | font-style: normal;
| |
- | }
| |
- |
| |
- | </style>
| |
- | <script type="text/javascript">
| |
- | WebFontConfig = {
| |
- | google: { families: [ 'Source+Sans+Pro:300,400,300italic:latin' ] }
| |
- | };
| |
- | (function() {
| |
- | var wf = document.createElement('script');
| |
- | wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
| |
- | '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
| |
- | wf.type = 'text/javascript';
| |
- | wf.async = 'true';
| |
- | var s = document.getElementsByTagName('script')[0];
| |
- | s.parentNode.insertBefore(wf, s);
| |
- | })(); </script>
| |
- | </head>
| |
- |
| |
- | <body>
| |
- | <div id="main">
| |
- | <a href="https://2012.igem.org/Team:KAIST_Korea/enter"><img id="main-logo" src="https://static.igem.org/mediawiki/2012/5/59/Logopart_Kaist.png"/></a>
| |
- | <img id="main-img" src="https://static.igem.org/mediawiki/2012/6/61/Home_kaist_background.png"/>
| |
- | <div class="oe_wrapper">
| |
- | <ul id="oe_menu" class="oe_menu">
| |
- | <li><a href="#">HOME</a>
| |
- | <div>
| |
- | <ul>
| |
- | <li><a href="https://igem.org/Main_Page">2012 iGEM</a></li>
| |
- | </ul>
| |
- | <ul>
| |
- | <li><a href="https://2012.igem.org/Team:KAIST_Korea/home">KAIST Korea</a></li>
| |
- | </ul>
| |
- | </div>
| |
- | </li>
| |
- | <li><a href="#">TEAM</a>
| |
- | <div style="left:-91px;"><!-- -112px -->
| |
- | <ul>
| |
- |
| |
- | <li><a href="#">Team Profile</a></li>
| |
- | </ul>
| |
- | <ul>
| |
- | <li><a href="#">Gallery</a></li>
| |
- | </ul>
| |
- | </div>
| |
- | </li>
| |
- | <li><a href="#">PART</a>
| |
- | <div style="left:-182px;">
| |
- | <ul>
| |
- | <li><a href="#">Bio Brick</a></li>
| |
- | </ul>
| |
- | <ul>
| |
- | <li><a href="#">About Bricks</a></li>
| |
- | </ul>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | </ul>
| |
- | </div>
| |
- | <div class="oe_wrapper2">
| |
- | <ul id="oe_menu2" class="oe_menu2">
| |
- | <li><a href="#">PROJECT</a>
| |
- | <div style="top:24px;left:32px;">
| |
- | <ul style="width:100px">
| |
- | <li><a style="font-size:12px;margin:0px;" href="#">Background</a></li>
| |
- | </ul>
| |
- | <ul style="width:100px">
| |
- | <li><a style="font-size:12px;margin:0px;" href="#">Results</a></li>
| |
- | </ul>
| |
- | <ul style="width:100px">
| |
- | <li><a style="font-size:12px;margin:0px;" href="#">Future Plan</a></li>
| |
- | </ul>
| |
- | <ul style="width:100px">
| |
- | <li><a style="font-size:12px;margin:0px;" href="#">Modeling</a></li>
| |
- | </ul>
| |
- | </div>
| |
- | </li>
| |
- | <li><a href="#">NOTEBOOK</a>
| |
- | <div style="left:-91px;"><!-- -112px -->
| |
- | <ul>
| |
- | <li><a href="#">Protocol</a></li>
| |
- | </ul>
| |
- | <ul>
| |
- | <li><a href="#">Labnote</a></li>
| |
- | </ul>
| |
- | <ul>
| |
- | <li><a href="#">Overview</a></li>
| |
- | </ul>
| |
- | </div>
| |
- | </li>
| |
- | <li><a href="#">PLUS</a>
| |
- | <div style="left:-182px;">
| |
- | <ul>
| |
- | <li><a href="#">Safety</a></li>
| |
- | </ul>
| |
- | <ul>
| |
- | <li><a href="#">Attribution</a></li>
| |
- | </ul>
| |
- | <ul>
| |
- | <li><a href="#">Sponsor</a></li>
| |
- | </ul>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | </ul>
| |
- | </div>
| |
- | <div class="contact-us">
| |
- | <div id="contact-us-title">2012 KAIST Korea</div>
| |
- | <div id="contact-us-information">
| |
- | Mail : <a href="mailto:kaist.igem.2012@gmail.com">kaist.igem.2012@gmail.com</a></br>
| |
- | Twitter : <a href="http://twitter.com/KAIST_iGEM_2012">twitter.com/KAIST_iGEM_2012</a></br>
| |
- | Facebook : <a href="http://www.facebook.com/KAISTiGEM2012">www.facebook.com/KAISTiGEM2012</a>
| |
- | </div>
| |
- | </div>
| |
- | </div>
| |
- | <!-- The JavaScript -->
| |
- | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
| |
- | <script type="text/javascript">
| |
- | $(function() {
| |
- | var $oe_menu = $('#oe_menu');
| |
- | var $oe_menu_items = $oe_menu.children('li');
| |
- |
| |
- | $oe_menu_items.bind('mouseenter',function(){
| |
- | var $this = $(this);
| |
- | $this.addClass('slided selected');
| |
- | $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
| |
- | $oe_menu_items.not('.slided').children('div').hide();
| |
- | $this.removeClass('slided');
| |
- | });
| |
- | }).bind('mouseleave',function(){
| |
- | var $this = $(this);
| |
- | $this.removeClass('selected').children('div').css('z-index','1');
| |
- | });
| |
- |
| |
- | $oe_menu.bind('mouseenter',function(){
| |
- | var $this = $(this);
| |
- | $this.addClass('hovered');
| |
- | }).bind('mouseleave',function(){
| |
- | var $this = $(this);
| |
- | $this.removeClass('hovered');
| |
- | $oe_menu_items.children('div').hide();
| |
- | })
| |
- | });
| |
- | </script>
| |
- | <script type="text/javascript">
| |
- |
| |
- | $(function() {
| |
- | var $oe_menu2 = $('#oe_menu2');
| |
- | var $oe_menu_items2 = $oe_menu2.children('li');
| |
- |
| |
- | $oe_menu_items2.bind('mouseenter',function(){
| |
- | var $this = $(this);
| |
- | $this.addClass('slided selected');
| |
- | $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
| |
- | $oe_menu_items2.not('.slided').children('div').hide();
| |
- | $this.removeClass('slided');
| |
- | });
| |
- | }).bind('mouseleave',function(){
| |
- | var $this = $(this);
| |
- | $this.removeClass('selected').children('div').css('z-index','1');
| |
- | });
| |
- |
| |
- | $oe_menu2.bind('mouseenter',function(){
| |
- | var $this = $(this);
| |
- | $this.addClass('hovered');
| |
- | }).bind('mouseleave',function(){
| |
- | var $this = $(this);
| |
- | $this.removeClass('hovered');
| |
- | $oe_menu_items2.children('div').hide();
| |
- | })
| |
- | });
| |
- | </script>
| |
- | </body>
| |
- | </html>
| |