Team:KAIST Korea/home

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:KAIST_Korea/top_home}}
 
-
{{:Team:KAIST_Korea/navi}}
 
<html>
<html>
<head>
<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" />
<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=Open+Sans:600italic,400,800' rel='stylesheet' type='text/css'>
+
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic' rel='stylesheet' type='text/css'>
-
<script type="text/javascript">
+
-
  WebFontConfig = {
+
-
    google: { families: [ 'Open+Sans:600italic,400,800: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>
+
-
 
+
<style>
<style>
-
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,800);
+
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic);
-
 
+
ul.oe_menu{
-
#kaistcontent
+
list-style:none;
-
{
+
position:relative;
-
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;
background-color:transparent;
-
width:690px;
+
color:#aaa;
-
font-family: 'Open Sans', sans-serif;
+
text-decoration:none;
-
font-size:11pt;
+
text-align:center;
-
line-height:120%;
+
font-size:16px;
-
text-align:justify;
+
font-family:"Trebuchet MS", Helvetica, sans-serif;
-
padding: 0px 15px 0px 15px;
+
width:90px;
-
left:300px;
+
height:30px;
-
top:0px;
+
opacity:0.8;
-
z-index: 2;
+
}
 +
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;
}
}
-
#kaistcontent #starter-grad
+
ul.oe_menu2{
-
{
+
list-style:none;
-
width:17px;
+
position:relative;
-
height:100px;
+
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;
float:left;
-
margin:0px 15px 2px 0px;
+
width: 86px;
 +
margin-right:0px;
}
}
-
#kaistcontent #starter
+
#main
{
{
-
font-family: 'Open Sans', sans-serif;
+
min-height: 100%;
-
font-size:14pt;
+
width: 1024px;
-
color: #08185d;
+
margin: 0 auto;
-
padding:0px 0px 0px 10px;
+
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;
}
}
-
#kaistcontent #sub-title
+
#main #top-img
{
{
-
font-family: 'Open Sans', sans-serif;
+
position: relative;
-
color:#848383;
+
top: -4px;
-
font-size: 15pt;
+
        left:292px;
-
line-height:100%;
+
width:732px;
-
font-weight:bold;
+
height: 250px;
-
font-style:italic;
+
z-index: 0;
 +
opacity:0.9;
}
}
-
#kaistcontent h1
+
div .oe_wrapper{
 +
position:absolute;
 +
z-index:3;
 +
top:275px;
 +
 +
}
 +
div .oe_wrapper2{
 +
position:absolute;
 +
z-index:2;
 +
top:355px;
 +
 +
}
 +
 
 +
#menucontent
{
{
-
font-family: 'Open Sans', sans-serif;
+
        position: absolute;
-
color:#5c5858;
+
        background-color:transparent;
-
font-weight:bold;
+
        width:690px;
-
font-size:24pt;
+
        left:300px;
-
line-height:110%;
+
        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>
</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>
</head>
<body>
<body>
<div id="main">
<div id="main">
-
<img id="top-img" src="https://static.igem.org/mediawiki/2012/6/6d/Back_home.PNG"/>
+
<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">
-
<div id="menucontent">
+
<ul id="oe_menu" class="oe_menu">
-
        <img src="https://static.igem.org/mediawiki/2012/2/20/Home_ico.png"/></a>
+
<li><a href="#">HOME</a>
-
        <a href="#"><img src="https://static.igem.org/mediawiki/2012/e/ee/Intro_ico.png"/></a>
+
<div>
-
        <a href="#"><img src="https://static.igem.org/mediawiki/2012/c/c0/Igem_ico.png"/></a>
+
<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>
</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');
 +
});
-
<div id="kaistcontent">
+
$oe_menu.bind('mouseenter',function(){
-
<img id="starter-grad" src="https://static.igem.org/mediawiki/2012/9/95/Starter_gradient_kaist.png"></img>
+
var $this = $(this);
-
        <h1> Introduction</h1>
+
$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');
 +
});
-
<span id="sub-title">"There have been attempts to reduce atmospheric level of carbon dioxide in various approaches."</span></br></br>
+
$oe_menu2.bind('mouseenter',function(){
-
<span id="starter">S</span>ince the Industrial Revolution, fossil fuels have been used to power industries and machines. As the world gets more industrialized in accordance with population growth, the demand for fossil fuels has grown more than ever. Due to drastic increase of fossil fuel consumption, massive amount of carbon dioxide(<math>CO_2</math>) has been emitted into the atmosphere and the amount is still growing. As carbon dioxide(<math>CO_2</math>) is considered to be a significant factor accelerating global warming, there have been numerous attempts to reduce the atmospheric level of carbon dioxide(<math>CO_2</math>). Administrators have ratified protocols to regulate the emission of carbon dioxide(<math>CO_2</math>). Scientists have endeavored to figure out ways to reduce this greenhouse gas despite several limitations.
+
var $this = $(this);
-
</br></br>
+
$this.addClass('hovered');
-
<span id="starter">W</span>e, Team KAIST, Korea, suggest an idea of carbon dioxide(<math>CO_2</math>) fixation with specially engineered bacterial strain which converts atmospheric carbon dioxide(<math>CO_2</math>) into meaningful biomass as well as consuming it.
+
}).bind('mouseleave',function(){
-
 
+
var $this = $(this);
-
</div>
+
$this.removeClass('hovered');
-
</div>
+
$oe_menu_items2.children('div').hide();
 +
})
 +
            });
 +
        </script>
</body>
</body>
</html>
</html>

Revision as of 18:00, 21 August 2012

Retrieved from "http://2012.igem.org/Team:KAIST_Korea/home"