Team:HKU HK

From 2012.igem.org

(Difference between revisions)
Line 122: Line 122:
<head>
<head>
 +
<style type="text/css">
 +
 +
/*
 +
Design by Metamorphosis Design
 +
http://www.metamorphozis.com
 +
Released for free under a Creative Commons Attribution 2.5 License
 +
*/
 +
 +
*
 +
{
 +
border: 0;
 +
margin: 0;
 +
}
 +
 +
img
 +
{
 +
border: 0px;
 +
}
 +
 +
body{
 +
font: 12px Arial, Helvetica, sans-serif;
 +
color: #000000;
 +
/*background: url(images/bg.jpg) top center no-repeat #FFF1F0; --- background image */
 +
line-height: 18px;
 +
padding-bottom: 23px;
 +
}
 +
 +
#main {
 +
width: 1014px;
 +
margin: 0px auto;
 +
}
 +
 +
#header {
 +
width:100%;
 +
background: url(images/header.jpg) left top no-repeat;
 +
height: 183px;
 +
}
 +
 +
#logo { font-family: Arial, Helvetica, sans-serif;
 +
color:#FFFFFF;
 +
font-size:18px;
 +
font-style:italic;
 +
padding: 62px 0px 0px 667px;
 +
background: url(images/big_img.jpg) left top no-repeat;
 +
height: 60px;
 +
}
 +
 +
#logo a {
 +
text-decoration: none;
 +
text-transform: lowercase;
 +
font-style: italic;
 +
font-size: 18px;
 +
color: #FFFFFF;
 +
}
 +
 +
 +
#logo H2 a{
 +
font-size: 12px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
text-transform: none;
 +
font-weight:100;
 +
}
 +
 +
#buttons{
 +
width: 990px;
 +
/*background: url(images/bg_but.jpg) left top no-repeat;*/
 +
text-align:center;
 +
height: 46px;
 +
margin-left: 50px;
 +
}
 +
 +
#buttons a {
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 18px;
 +
display: block;
 +
float: left;
 +
height: 34px;
 +
text-decoration: none;
 +
color: #FFFFFF;
 +
padding-top: 12px;
 +
padding-left: 0px;
 +
text-align: center;
 +
}
 +
 +
.but1 { background: url(images/but1.png) left top no-repeat;
 +
width: 134px;
 +
}
 +
#buttons a:hover {
 +
text-decoration: underline;
 +
}
 +
 +
.scroll_header
 +
{
 +
width: 1014px;
 +
height: 229px;
 +
background: url(images/header.png) no-repeat;
 +
margin-bottom: 10px;
 +
padding-top: 10px;
 +
}
 +
 +
#box_all {
 +
height: 10px;
 +
background:url(https://static.igem.org/mediawiki/2012/f/f6/HKU_box_top.png) left top no-repeat;
 +
margin-top: 30px;
 +
}
 +
 +
#box_all h1 {
 +
text-align:center;
 +
font-size:18px;
 +
color:#FFFFFF;
 +
font-weight:100;
 +
padding: 12px 0px 23px 0px;}
 +
 +
#box_all .text {
 +
padding: 0px 10px 0px 20px;}
 +
 +
.box_munth {
 +
float: left;
 +
width: 132px;
 +
padding: 0px 0px 0px 13px}
 +
 +
.munth {
 +
color:#FFFFFF;
 +
font-weight:bold;
 +
background: url(https://static.igem.org/mediawiki/2012/f/f6/HKU_box_fish.png) 0px 11px no-repeat;
 +
padding: 7px  0px 7px 28px;
 +
text-decoration:none;}
 +
 +
.munth a{color:#FFFFFF;
 +
font-weight:bold;
 +
text-decoration:none;}
 +
 +
.munth:hover {
 +
text-decoration: none;
 +
background: url(https://static.igem.org/mediawiki/2012/f/f6/HKU_box_fish.png) 0px 11px no-repeat;
 +
}
 +
 +
h5 {
 +
font-weight: 100;
 +
font-size:18px;
 +
color:#10156F;
 +
padding: 13px 0px 5px 0px}
 +
 +
.box {
 +
width: 206px;
 +
height: 240px;
 +
float: left;
 +
}
 +
 +
.box_razd {float:left; width: 10px; height: 10px;}
 +
 +
.box1 { background:url(images/box1.png) ;}
 +
.box2 { background:url(images/box2.png) ;}
 +
.box3 { background:url(images/box3.png) ;
 +
width: 211px}
 +
.box4 { background:url(images/box4.png) ;}
 +
 +
.b { color: #0E76BD;
 +
font-weight:100;
 +
font-style:italic;}
 +
.g { color: #0D748A;
 +
font-weight:100;
 +
font-style:italic;}
 +
.gr { color: #0E9A40;
 +
font-weight:100;
 +
font-style:italic;}
 +
.o { color: #DE7C09;
 +
font-weight:100;
 +
font-style:italic;}
 +
 +
.img_box { float:left;
 +
margin: 6px 7px 3px 0px;
 +
}
 +
 +
#top_tb {
 +
width: 1014px;
 +
height: 10px;
 +
background: url(https://static.igem.org/mediawiki/2012/f/f1/HKU_tb_top.jpg) right bottom no-repeat #FFFFFF;
 +
}
 +
 +
#bot_tb {
 +
width: 1014px;
 +
height: 19px;
 +
background: url(https://static.igem.org/mediawiki/2012/f/f7/HKU_tb_bot.jpg) right top no-repeat #FFFFFF;
 +
}
 +
 +
#tb{
 +
width: 1014px;
 +
padding: 0px 0px 0px 0px;
 +
background: url(https://static.igem.org/mediawiki/2012/6/68/HKU_tb_bg.gif) right repeat-y #FFFFFF;
 +
margin: 0px 0px 0px 0px;
 +
}
 +
 +
#left{
 +
width: 330px;
 +
margin: 0px 0px 0px 12px;
 +
float: left;
 +
color:#000000;
 +
}
 +
 +
.right_b {
 +
padding-left: 52px;
 +
padding-right: 5px;
 +
}
 +
 +
.text{
 +
padding: 0px 0px 0px 0px;
 +
}
 +
 +
.img { float:left;
 +
margin: 7px 16px 3px 0px;
 +
}
 +
 +
.img_r { float: right;
 +
margin: 7px 0px 3px 16px;
 +
}
 +
 +
span {font-weight:bold;}
 +
 +
#left span { color:#000000;
 +
font-weight:bold;
 +
font-size:14px;
 +
}
 +
 +
#right span {
 +
font-weight:bold;
 +
}
 +
.bl {color:#34902D;}
 +
 +
#left H1{
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size:18px;
 +
font-weight: 100;
 +
color: #34902D;
 +
text-align:left;
 +
padding: 5px 0px 10px 0px;
 +
}
 +
 +
#right H1{
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size:18px;
 +
font-weight: 100;
 +
color: #34902D;
 +
text-align:left;
 +
padding: 5px 0px 10px 0px;
 +
}
 +
 +
.read{
 +
text-align:right;
 +
padding-right:5px;
 +
padding-top: 6px;
 +
font-weight:bold;
 +
}
 +
 +
.pad_view {padding-right:15px;}
 +
 +
 +
 +
.read a{
 +
color: #0056CC;
 +
text-decoration: underline;}
 +
 +
.read a:hover {
 +
text-decoration:none;}
 +
 +
#right{
 +
float: right;
 +
width: 620px;
 +
margin-right: 18px;
 +
padding: 0px 0px 0px 0px;
 +
}
 +
 +
.col { width: 620px;}
 +
 +
.col_left { float:left;
 +
width: 203px;}
 +
 +
.images {
 +
height: 200px;
 +
padding-top: 3px;}
 +
 +
.img_col { float:left;
 +
margin: 7px 7px 0px 0px;}
 +
 +
.col_right { float: right;
 +
width: 417px;
 +
padding-top: 8px;}
 +
 +
#footer{
 +
height: 50px;
 +
width: 100%;
 +
font-size: 12px;
 +
color: #FFFFFF;
 +
text-align: center;
 +
clear:both;
 +
padding: 13px 0px 0px 0px;
 +
background: url(https://static.igem.org/mediawiki/2012/4/45/HKU.PNG_footer.png) 0px 0px  no-repeat;
 +
}
 +
 +
#footer a{
 +
color: #FFFFFF;
 +
font-size: 12px;
 +
text-decoration: none;
 +
}
 +
 +
#footer a:hover{
 +
color: #FFFFFF;
 +
font-size: 12px;
 +
text-decoration: underline;
 +
}
 +
 +
/*=================================*/
 +
/* Nivo Slider Demo
 +
/* November 2010
 +
/* By: Gilbert Pellegrom
 +
/* http://dev7studios.com
 +
/*=================================*/
 +
 +
 +
#slider-wrapper {
 +
    background:url(https://static.igem.org/mediawiki/2012/c/c8/HKU_top1.jpg) no-repeat;
 +
    width: 995px;
 +
    height: 239px;
 +
    margin:0 auto;
 +
}
 +
 +
#slider {
 +
position:relative;
 +
    width: 995px;
 +
    height: 239px;
 +
background:url(images/loading.gif) no-repeat 50% 50%;
 +
}
 +
#slider img {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
display:none;
 +
}
 +
#slider a {
 +
border:0;
 +
display:block;
 +
}
 +
 +
.nivo-controlNav {
 +
position:absolute;
 +
left: 440px;
 +
bottom: -16px;
 +
 +
}
 +
.nivo-controlNav a {
 +
display:block;
 +
width:22px;
 +
height:22px;
 +
background:url(https://static.igem.org/mediawiki/2012/3/35/HKU_circl.png) no-repeat;
 +
text-indent:-9999px;
 +
border:0;
 +
margin-right:3px;
 +
float:left;
 +
}
 +
.nivo-controlNav a.active, .nivo-controlNav a:hover {
 +
background:url(https://static.igem.org/mediawiki/2012/5/5e/Circl_hover.png) no-repeat;
 +
}
 +
 +
.nivo-directionNav a {
 +
display:block;
 +
width:30px;
 +
height:30px;
 +
background:url(https://static.igem.org/mediawiki/2012/9/99/HKU_arr12.png) no-repeat;
 +
text-indent:-9999px;
 +
border:0;
 +
}
 +
a.nivo-nextNav {
 +
background-position:-30px 0;
 +
right:15px;
 +
}
 +
a.nivo-prevNav {
 +
left:15px;
 +
}
 +
 +
.nivo-caption {
 +
    text-shadow:none;
 +
    font-family: Helvetica, Arial, sans-serif;
 +
}
 +
.nivo-caption a {
 +
    color:#efe9d1;
 +
    text-decoration:underline;
 +
}
 +
 +
/* The Nivo Slider styles */
 +
 +
.nivoSlider {
 +
position:relative;
 +
}
 +
.nivoSlider img {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
}
 +
/* If an image is wrapped in a link */
 +
.nivoSlider a.nivo-imageLink {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
width:100%;
 +
height:100%;
 +
border:0;
 +
padding:0;
 +
margin:0;
 +
z-index:60;
 +
display:none;
 +
}
 +
/* The slices in the Slider */
 +
.nivo-slice {
 +
display:block;
 +
position:absolute;
 +
z-index:50;
 +
height:100%;
 +
}
 +
/* Caption styles */
 +
.nivo-caption {
 +
position:absolute;
 +
left:0px;
 +
bottom:0px;
 +
background:#000;
 +
color:#fff;
 +
opacity:0.8; /* Overridden by captionOpacity setting */
 +
width:100%;
 +
z-index:89;
 +
}
 +
.nivo-caption p {
 +
padding:5px;
 +
margin:0;
 +
}
 +
.nivo-caption a {
 +
display:inline !important;
 +
}
 +
.nivo-html-caption {
 +
    display:none;
 +
}
 +
/* Direction nav styles (e.g. Next & Prev) */
 +
.nivo-directionNav a {
 +
position:absolute;
 +
top:45%;
 +
z-index:99;
 +
cursor:pointer;
 +
}
 +
.nivo-prevNav {
 +
left:0px;
 +
}
 +
.nivo-nextNav {
 +
right:0px;
 +
}
 +
/* Control nav styles (e.g. 1,2,3...) */
 +
.nivo-controlNav a {
 +
position:relative;
 +
z-index:99;
 +
cursor:pointer;
 +
}
 +
.nivo-controlNav a.active {
 +
font-weight:bold;
 +
}
 +
 +
#main #header #buttons p {
 +
color: #0033CC;
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 18px;
 +
}
 +
 +
ul#css3menu2,ul#css3menu2 ul{
 +
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
 +
ul#css3menu2 ul{
 +
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
 +
ul#css3menu2 li:hover>*{
 +
display:block;}
 +
ul#css3menu2 li{
 +
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
 +
ul#css3menu2 li:hover{
 +
z-index:1;}
 +
ul#css3menu2{
 +
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
 +
*display:inline;}
 +
* html ul#css3menu2 li a{
 +
display:inline-block;}
 +
ul#css3menu2>li{
 +
margin:0;}
 +
ul#css3menu2 a:active, ul#css3menu2 a:focus{
 +
outline-style:none;}
 +
ul#css3menu2 a{
 +
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 20px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("https://static.igem.org/mediawiki/2012/0/0c/HKU_mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
 +
ul#css3menu2 ul li{
 +
float:none;margin:10px 0 0;}
 +
ul#css3menu2 ul a{
 +
text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#000;text-decoration:none;}
 +
ul#css3menu2 li:hover>a,ul#css3menu2 li a.pressed{
 +
background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("https://static.igem.org/mediawiki/2012/0/0c/HKU_mainbk.png");background-position:0 100px;text-decoration:none;}
 +
ul#css3menu2 span{
 +
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
 +
ul#css3menu2 ul li:hover>a,ul#css3menu2 ul li a.pressed{
 +
background-color:#FFFFFF;background-image:none;color:#868686;text-decoration:none;}
 +
ul#css3menu2 li.topfirst>a{
 +
border-radius:10px 0 0 10px;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
 +
ul#css3menu2 li.toplast>a{
 +
border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:10px;-webkit-border-bottom-right-radius:10px;}
 +
 +
</style>
</head>
</head>
 +
<body>
 +
<div id="main">
 +
<!-- header begins -->
 +
  <div id="header">
 +
<div id="buttons">
 +
      <p><img src="https://static.igem.org/mediawiki/2012/0/0e/HKU_logo.fw.jpg" alt="logo_HKU" width="859" height="160" /></p>
 +
      <p>&nbsp;</p>
 +
      <p>&nbsp;</p>
 +
      <p>&nbsp;</p>
 +
 +
<!-- Start css3menu.com BODY section id=2 -->
 +
<ul id="css3menu2" class="topmenu">
 +
<li class="topfirst"><a href="#" style="height:26px;line-height:26px;">&nbsp;&nbsp;Home&nbsp;&nbsp;</a></li>
 +
<li class="topmenu"><a href="#" style="height:26px;line-height:26px;">&nbsp;&nbsp;Team&nbsp;&nbsp;</a>
 +
<ul>
 +
<li><font size="10"><a href="#">About Us</a></li></font>
 +
<li><font size="10"><a href="#">Profiles</a></li></font>
 +
</ul>
 +
    </li>
 +
    <li class="topmenu"><a href="#" style="height:26px;line-height:26px;">&nbsp;&nbsp;Project&nbsp;&nbsp;</a>
 +
    <ul>
 +
<li><font size="10"><a href="#">Background</a></li></font>
 +
<li><font size="10"><a href="#">Future Implications</a></li></font>
 +
        </ul>
 +
    </li>
 +
    <li class="topmenu"><a href="#" style="height:26px;line-height:26px;">&nbsp;&nbsp;Data&nbsp;&nbsp;</a>
 +
    <ul>
 +
    <li><font size="10"><a href="#">Protocols</a></li></font>
 +
<li><font size="10"><a href="#">Weekly Notebook</a></li></font>
 +
      <li><font size="10"><a href="#">Bio bricks</a></li></font>
 +
<li><font size="10"><a href="#">Results</a></li></font>
 +
        </ul>
 +
    </li>
 +
<li class="topmenu"><a href="#" style="height:26px;line-height:26px;">&nbsp;&nbsp;Safety&nbsp;&nbsp;</a></li>   
 +
    <li class="topmenu"><a href="#" style="height:26px;line-height:26px;">&nbsp;&nbsp;Attributions&nbsp;&nbsp;</a></li>
 +
    <li class="toplast"><a href="#" style="height:26px;line-height:26px;">&nbsp;&nbsp;Human Practise&nbsp;&nbsp;</a></li>
 +
</ul>
 +
<p>&nbsp;</p>
 +
 +
<div class="scroll_header">
 +
  <div id="wrapper">
 +
        <div id="slider-wrapper">       
 +
            <div id="slider" class="nivoSlider">
 +
                <img src="https://static.igem.org/mediawiki/2012/c/c8/HKU_top1.jpg" alt="" />
 +
                <img src="https://static.igem.org/mediawiki/2012/c/c8/HKU_top1.jpg" alt=""/>
 +
                <img src="https://static.igem.org/mediawiki/2012/c/c8/HKU_top1.jpg" alt="" />
 +
            </div>
 +
            <p>&nbsp;</p>
 +
            <p>&nbsp;</p>
 +
            <p>&nbsp;</p>       
 +
      </div>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 +
    <script type="text/javascript" src="lib/jquery.nivo.slider.pack.js"></script>
 +
    <script type="text/javascript">
 +
    $(window).load(function() {
 +
        $('#slider').nivoSlider();
 +
    });
 +
    </script>
 +
 +
</div> <div style="clear: both"></div>
 +
 +
</div>
 +
<div style="clear: both"></div>
 +
<!-- header ends -->
 +
    <!-- table begins -->
 +
  <div id="tb">
 +
    <div id="right">
 +
      <p>&nbsp;</p>
 +
      <p>&nbsp;</p>
 +
      <div class="text">
 +
        <div class="col">
 +
            <div class="col_left">
 +
                <div class="images" ><br />
 +
                <br />
 +
<br />
 +
          </div>
 +
                    <div class="read pad_view"><a href="#">view more</a></div>
 +
            </div>
 +
                <div class="col_right"></div>
 +
                    <div class="read"><a href="#"> read more</a></div>
 +
            </div>
 +
          </div>
 +
             
 +
             
 +
  </div> 
 +
          <p>&nbsp;</p>
 +
          <p>&nbsp;</p>
 +
          <p>&nbsp;</p>
 +
          <p>&nbsp;</p>
 +
            <div id="left">
 +
        <h1> News</h1>
 +
              <div class="right_b fish_10"><br />
 +
                <br />
 +
              </div>
 +
              <div class="right_b fish_11"><br />
 +
              </div>               
 +
            </div>
 +
            <div style="clear: both"><img src="images/spaser.gif" alt="" width="1" height="1" /></div>
 +
  </div>
 +
        <div id="bot_tb"></div>
 +
    <!-- table ends -->
 +
<!-- footer begins -->
 +
            <div id="footer">
 +
              <p>&nbsp;</p>
 +
              <p>&nbsp;</p>
 +
              <p>&nbsp;</p>
 +
              <p>&nbsp;</p>
 +
              <p>Copyright  2012. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a><br />
 +
                <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
 +
            </div>
 +
        <!-- footer ends -->
 +
</div>
 +
</body>
</html>
</html>

Revision as of 18:23, 9 September 2012

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Team:HKU Hong Kong - 2012

 

Team:HKU HK

From 2011.igem.org