Difference between revisions of "Team:NTU-LIHPAO-Taiwan"

 
(562 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{NTU-LIHPAO-Taiwan}}
+
<html>
−
<html>
+
 
<head>
 
<head>
  
−
<link rel="stylesheet" href="flexslider.css" type="text/css">
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
−
<script src="https://2011.igem.org/wiki/index.php?title=Team:Alberta/application.js"></script>
 
  
 
<script type="text/javascript" charset="utf-8">
 
<script type="text/javascript" charset="utf-8">
−
  $(window).load(function() {
+
 
−
    $('.flexslider').flexslider();
+
//-----Hover Facebook Icon-----//
−
  });
+
$(document).ready(function(){
 +
$('#Facebook_icon_hover').hover(function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/3/35/NTU-Top-Facebook_icon2.png";
 +
}, function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/9/98/NTU-Top-Facebook_icon1.png";
 +
});
 +
});
 +
 
 +
//-----Hover iGem Icon-----//
 +
$(document).ready(function(){
 +
$('#iGEM_icon_hover').hover(function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/0/0a/NTU-Top-iGEM_icon2.png";
 +
}, function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/1/1d/NTU-Top-iGEM_icon1.png";
 +
});
 +
});
 +
 
 +
//-----Hover NTU Icon-----//
 +
$(document).ready(function(){
 +
$('#NTU_icon_hover').hover(function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/6/6e/NTU-Top-NTU_icon2.png";
 +
}, function () {
 +
this.src = "https://static.igem.org/mediawiki/2015/1/14/NTU-Top-NTU_icon1.png";
 +
});
 +
});
 +
 
 
</script>
 
</script>
  
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
<title>無標題文件</title>
+
<title>NTU-LIHPAO-Taiwan</title>
 
<style type="text/css">
 
<style type="text/css">
 +
 +
/*-------------------------------------------*/
 +
/*--------------Wiki Page Reset--------------*/
 +
/*-------------------------------------------*/
 +
 +
#contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {
 +
display: none;
 +
}
 +
 +
#globalWrapper, #content {
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
 +
html, body, .wrapper {
 +
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 +
}
 +
 +
/*-------------------------------------------*/
 +
/*-------------------Body--------------------*/
 +
/*-------------------------------------------*/
 +
 
body {
 
body {
 
background-color: #F0F0F0;
 
background-color: #F0F0F0;
 
}
 
}
 
body,td,th {
 
body,td,th {
−
font-family: Calibri, "新細明體", serif;
+
font-size: 14px;
 +
font-family: Calibri, "Arial Narrow", "Agency FB", "Raavi";
 
}
 
}
 +
 
#Wrapper {
 
#Wrapper {
 
margin-right: auto;
 
margin-right: auto;
Line 28: Line 80:
 
margin-top: 0px;
 
margin-top: 0px;
 
margin-bottom: 0px;
 
margin-bottom: 0px;
−
width: 1150px;
+
width: 90%;
−
height: 1000px;
+
height: 1494px;
 
top: 0px;
 
top: 0px;
−
left: 100px;
+
left: 5%;
−
right: auto;
+
right: 5%;
 
position: absolute;
 
position: absolute;
 
bottom: 0px;
 
bottom: 0px;
 
padding-top: 0px;
 
padding-top: 0px;
 
padding-bottom: 0px;
 
padding-bottom: 0px;
 +
z-index: 0;
 
}
 
}
−
#Wrapper_TOP {
+
 
 +
#Wrapper_TopPic {
 +
margin-right: auto;
 +
margin-left: auto;
 
background-color: #FFF;
 
background-color: #FFF;
−
height: 20px;
+
margin-top: 0px;
−
width: 1150px;
+
margin-bottom: 0px;
−
position: absolute;
+
width: 100%;
 +
height: 58px;
 
top: 0px;
 
top: 0px;
−
left: 100px;
+
left: 0px;
−
right: auto;
+
right: 0px;
 +
position: fixed;
 +
bottom: 0px;
 +
padding-top: 0px;
 +
padding-bottom: 0px;
 +
z-index: 9998;
 +
border-bottom-style: solid;
 +
border-bottom-color: #fe5838;
 +
border-bottom-width: 2px;
 +
z-index: 9998;
 +
background-repeat: no-repeat;
 
}
 
}
 +
 +
#Wrapper_Bottom {
 +
width: 100%;
 +
height: 100px;
 +
bottom: 0px;
 +
top: auto;
 +
background-color: #FFF;
 +
border-top-style: solid;
 +
border-top-color: #079235;
 +
border-top-width: 3px;
 +
margin-right: auto;
 +
margin-left: auto;
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
z-index: 9998;
 +
position: absolute;
 +
}
 +
 +
  
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
−
/*----------------flexslider-----------------*/
+
/*-----------------Top icons-----------------*/
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
 +
#Facebook_icon_pic {
 +
height: 30px;
 +
width: 30px;
 +
position: absolute;
 +
left: auto;
 +
top: 23px;
 +
right: 5.5%;
 +
bottom: auto;
 +
z-index: 9999;
 +
}
  
−
@font-face {
+
#iGEM_icon_pic {
−
  font-family: 'flexslider-icon';
+
height: 30px;
−
  src: url('fonts/flexslider-icon.eot');
+
width: 38px;
−
  src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
+
position: absolute;
−
  font-weight: normal;
+
left: auto;
−
  font-style: normal;
+
top: 23px;
 +
right: 1%;
 +
bottom: auto;
 +
z-index: 9999;
 
}
 
}
−
/* ====================================================================================================================
+
 
−
* RESETS
+
#NTU_icon_pic {
−
* ====================================================================================================================*/
+
height: 30px;
−
.flex-container a:hover,
+
width: 69px;
−
.flex-slider a:hover,
+
position: absolute;
−
.flex-container a:focus,
+
left: auto;
−
.flex-slider a:focus {
+
top: 23px;
−
  outline: none;
+
right: 9%;
 +
bottom: auto;
 +
z-index: 9999;
 
}
 
}
−
.slides,
+
 
−
.slides > li,
+
#NTUXLIHPAO_icon {
−
.flex-control-nav,
+
height: 40px;
−
.flex-direction-nav {
+
width: 200px;
−
  margin: 0;
+
position: absolute;
−
  padding: 0;
+
left: 3%;
−
  list-style: none;
+
top: 18px;
 +
right: auto;
 +
bottom: auto;
 +
z-index: 9999;
 
}
 
}
−
.flex-pauseplay span {
+
 
−
  text-transform: capitalize;
+
 
 +
 
 +
/*-------------------------------------------*/
 +
/*---------------Bottom icons----------------*/
 +
/*-------------------------------------------*/
 +
 
 +
#NTUschool_logo {
 +
height: 70px;
 +
width: 265px;
 +
position: absolute;
 +
left: 25%;
 +
top: 5px;
 +
right: auto;
 +
bottom: auto;
 +
z-index: 9999;
 +
margin-left: -132px;
 
}
 
}
−
/* ====================================================================================================================
+
 
−
* BASE STYLES
+
#LIHPAO_logo {
−
* ====================================================================================================================*/
+
height: 70px;
−
.flexslider {
+
width: 215px;
−
  margin: 0;
+
position: absolute;
−
  padding: 0;
+
left: 75%;
 +
top: 5px;
 +
right: auto;
 +
bottom: auto;
 +
z-index: 9999;
 +
margin-left: -107px;
 
}
 
}
−
.flexslider .slides > li {
+
 
−
  display: none;
+
#NTUBST_logo {
−
  -webkit-backface-visibility: hidden;
+
height: 70px;
 +
width: 70px;
 +
position: absolute;
 +
left: 50%;
 +
top: 5px;
 +
right: auto;
 +
bottom: auto;
 +
z-index: 9999;
 +
margin-left: -35px;
 
}
 
}
−
.flexslider .slides img {
+
 
−
  width: 100%;
+
#Bottom_Text {
−
  display: block;
+
color: #767676;
 +
bottom: 0px;
 +
width: 100%;
 +
height: auto;
 +
font-size: 15px;
 +
position: absolute;
 +
text-align: center;
 
}
 
}
−
.flexslider .slides:after {
+
 
−
  content: "\0020";
+
 
−
  display: block;
+
/*-------------------------------------------*/
−
  clear: both;
+
/*-----------------Slide Menu----------------*/
−
  visibility: hidden;
+
/*-------------------------------------------*/
−
  line-height: 0;
+
.Slidemenu {
−
  height: 0;
+
z-index: 9999;
 +
position: absolute;
 +
top: 32px;
 +
bottom: 0px;
 +
left: 51%;
 +
right: 15%;
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
position: absolute;
 +
margin-left: -350px;
 +
/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
 
}
 
}
−
html[xmlns] .flexslider .slides {
+
 
−
  display: block;
+
.Slidemenu ul {
 +
*zoom:1;
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
 
}
 
}
−
* html .flexslider .slides {
+
 
−
  height: 1%;
+
.Slidemenu ul:before,.Slidemenu ul:after {
 +
content:"";
 +
display:table;
 
}
 
}
−
.no-js .flexslider .slides > li:first-child {
+
 
−
  display: block;
+
.Slidemenu ul:after {
 +
clear:both;
 
}
 
}
−
/* ====================================================================================================================
+
 
−
* DEFAULT THEME
+
.Slidemenu a {
−
* ====================================================================================================================*/
+
text-decoration:none;
−
.flexslider {
+
display:block;
−
  margin: 0 0 60px;
+
padding:4px 4px;
−
  background: #ffffff;
+
line-height:1em;
−
  border: 4px solid #ffffff;
+
color:#000;
−
  position: relative;
+
text-align: center;
−
  zoom: 1;
+
vertical-align: middle;
−
  -webkit-border-radius: 4px;
+
height: auto;
−
  -moz-border-radius: 4px;
+
width: auto;
−
  border-radius: 4px;
+
font-family: "Agency FB";
−
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
+
font-size: 1em;
−
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
+
−
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
+
−
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
+
 
}
 
}
−
.flexslider .slides {
+
 
−
  zoom: 1;
+
.Slidemenu a:hover {
 +
text-decoration:none;
 +
background:rgba(0,0,0,0.03);
 +
text-align: center;
 +
vertical-align: middle;
 
}
 
}
−
.flexslider .slides img {
+
 
−
  height: auto;
+
.Slidemenu li ul {
 +
position:absolute;
 +
left:0;
 +
top:26px;
 +
z-index:1;
 
}
 
}
−
.flex-viewport {
+
 
−
  max-height: 2000px;
+
.Slidemenu li ul li {
−
  -webkit-transition: all 1s ease;
+
overflow:hidden;
−
  -moz-transition: all 1s ease;
+
height: 0px;
−
  -ms-transition: all 1s ease;
+
margin-bottom: 0px;
−
  -o-transition: all 1s ease;
+
−
  transition: all 1s ease;
+
 
}
 
}
−
.loading .flex-viewport {
+
 
−
  max-height: 300px;
+
.Slidemenu li ul a {
 +
border:none;
 +
-webkit-transition:background 300ms ease-in-out;
 +
-moz-transition:background 300ms ease-in-out;
 +
-o-transition:background 300ms ease-in-out;
 +
transition:background 300ms ease-in-out;
 +
line-height:1.1em;
 
}
 
}
−
.carousel li {
+
 
−
  margin-right: 5px;
+
.Slidemenu li ul a:hover {
 +
background-color: rgba(240,240,240,1);
 
}
 
}
−
.flex-direction-nav {
+
 
−
  *height: 0;
+
.Slidemenu ul > li {
 +
text-decoration:none;
 +
float: left;
 +
position: relative;
 +
height: 27px; /*--改主要選單高度--*/
 
}
 
}
−
.flex-direction-nav a {
+
 
−
  text-decoration: none;
+
.width_small {
−
  display: block;
+
width: 100px; /*--改主要選單寬度--*/
−
  width: 40px;
+
−
  height: 40px;
+
−
  margin: -20px 0 0;
+
−
  position: absolute;
+
−
  top: 50%;
+
−
  z-index: 10;
+
−
  overflow: hidden;
+
−
  opacity: 0;
+
−
  cursor: pointer;
+
−
  color: rgba(0, 0, 0, 0.8);
+
−
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
+
−
  -webkit-transition: all 0.3s ease-in-out;
+
−
  -moz-transition: all 0.3s ease-in-out;
+
−
  -ms-transition: all 0.3s ease-in-out;
+
−
  -o-transition: all 0.3s ease-in-out;
+
−
  transition: all 0.3s ease-in-out;
+
 
}
 
}
−
.flex-direction-nav a:before {
+
 
−
  font-family: "flexslider-icon";
+
.Slidemenu ul > li:hover ul.subs {
−
  font-size: 40px;
+
height: auto;
−
  display: inline-block;
+
width: 150px; /*--改拉出的選單寬度--*/
−
  content: '\f001';
+
border-left-width: 3px;
−
  color: rgba(0, 0, 0, 0.8);
+
border-left-style: solid;
−
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
+
border-left-color: #3300FF;
 +
background:rgba(255,255,255,1); /*--改拉出選單顏色--*/
 
}
 
}
−
.flex-direction-nav a.flex-next:before {
+
 
−
  content: '\f002';
+
.Slidemenu ul > li:hover ul li {
 +
text-decoration:none;
 +
height: 26px; /*--改拉出的選單高度--*/
 +
width: 150px; /*--改拉出的選單寬度--*/
 +
text-align: center;
 +
vertical-align: middle;
 +
-webkit-transition:height 250ms ease-in;
 +
-moz-transition:height 250ms ease-in;
 +
-o-transition:height 250ms ease-in;
 +
transition:height 250ms ease-in;
 
}
 
}
−
.flex-direction-nav .flex-prev {
+
 
−
  left: -50px;
+
#Position_Now {
−
}
+
background:rgba(0,0,0,0.03);
−
.flex-direction-nav .flex-next {
+
−
  right: -50px;
+
−
  text-align: right;
+
−
}
+
−
.flexslider:hover .flex-direction-nav .flex-prev {
+
−
  opacity: 0.7;
+
−
  left: 10px;
+
−
}
+
−
.flexslider:hover .flex-direction-nav .flex-prev:hover {
+
−
  opacity: 1;
+
−
}
+
−
.flexslider:hover .flex-direction-nav .flex-next {
+
−
  opacity: 0.7;
+
−
  right: 10px;
+
−
}
+
−
.flexslider:hover .flex-direction-nav .flex-next:hover {
+
−
  opacity: 1;
+
−
}
+
−
.flex-direction-nav .flex-disabled {
+
−
  opacity: 0!important;
+
−
  filter: alpha(opacity=0);
+
−
  cursor: default;
+
−
}
+
−
.flex-pauseplay a {
+
−
  display: block;
+
−
  width: 20px;
+
−
  height: 20px;
+
−
  position: absolute;
+
−
  bottom: 5px;
+
−
  left: 10px;
+
−
  opacity: 0.8;
+
−
  z-index: 10;
+
−
  overflow: hidden;
+
−
  cursor: pointer;
+
−
  color: #000;
+
−
}
+
−
.flex-pauseplay a:before {
+
−
  font-family: "flexslider-icon";
+
−
  font-size: 20px;
+
−
  display: inline-block;
+
−
  content: '\f004';
+
−
}
+
−
.flex-pauseplay a:hover {
+
−
  opacity: 1;
+
−
}
+
−
.flex-pauseplay a.flex-play:before {
+
−
  content: '\f003';
+
−
}
+
−
.flex-control-nav {
+
−
  width: 100%;
+
−
  position: absolute;
+
−
  bottom: -40px;
+
−
  text-align: center;
+
−
}
+
−
.flex-control-nav li {
+
−
  margin: 0 6px;
+
−
  display: inline-block;
+
−
  zoom: 1;
+
−
  *display: inline;
+
−
}
+
−
.flex-control-paging li a {
+
−
  width: 11px;
+
−
  height: 11px;
+
−
  display: block;
+
−
  background: #666;
+
−
  background: rgba(0, 0, 0, 0.5);
+
−
  cursor: pointer;
+
−
  text-indent: -9999px;
+
−
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+
−
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+
−
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+
−
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+
−
  -webkit-border-radius: 20px;
+
−
  -moz-border-radius: 20px;
+
−
  border-radius: 20px;
+
−
}
+
−
.flex-control-paging li a:hover {
+
−
  background: #333;
+
−
  background: rgba(0, 0, 0, 0.7);
+
−
}
+
−
.flex-control-paging li a.flex-active {
+
−
  background: #000;
+
−
  background: rgba(0, 0, 0, 0.9);
+
−
  cursor: default;
+
−
}
+
−
.flex-control-thumbs {
+
−
  margin: 5px 0 0;
+
−
  position: static;
+
−
  overflow: hidden;
+
−
}
+
−
.flex-control-thumbs li {
+
−
  width: 25%;
+
−
  float: left;
+
−
  margin: 0;
+
−
}
+
−
.flex-control-thumbs img {
+
−
  width: 100%;
+
−
  height: auto;
+
−
  display: block;
+
−
  opacity: .7;
+
−
  cursor: pointer;
+
−
  -webkit-transition: all 1s ease;
+
−
  -moz-transition: all 1s ease;
+
−
  -ms-transition: all 1s ease;
+
−
  -o-transition: all 1s ease;
+
−
  transition: all 1s ease;
+
−
}
+
−
.flex-control-thumbs img:hover {
+
−
  opacity: 1;
+
−
}
+
−
.flex-control-thumbs .flex-active {
+
−
  opacity: 1;
+
−
  cursor: default;
+
−
}
+
−
/* ====================================================================================================================
+
−
* RESPONSIVE
+
−
* ====================================================================================================================*/
+
−
@media screen and (max-width: 860px) {
+
−
  .flex-direction-nav .flex-prev {
+
−
    opacity: 1;
+
−
    left: 10px;
+
−
  }
+
−
  .flex-direction-nav .flex-next {
+
−
    opacity: 1;
+
−
    right: 10px;
+
−
  }
+
 
}
 
}
−
 
  
  
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
−
/*--------------------nav--------------------*/
+
/*----------------Flexslider-----------------*/
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
−
.nav {
+
 
 +
#Container_slider {
 
position: absolute;
 
position: absolute;
−
top: 200px;
+
top: 30px;
−
left: 0px;
+
width: 100%;
−
right: auto;
+
left: 0%;
−
    list-style:none;
+
right: 0%;
−
    margin:0;
+
height: 594px;   /*594px*/
−
    padding:0;
+
background: #FFF;   /*75B1EC*/
 +
overflow: hidden;
 +
z-index: 0;
 +
border: none;
 
}
 
}
  
−
.nav ul {
+
#pages {
−
    *zoom:1;
+
position: absolute;
−
    list-style:none;
+
top: 0;
−
    margin:0;
+
left: 0;
−
    padding:0;
+
width: 100%;
−
    background:#FFF;
+
height: 100%;
 +
overflow: hidden;
 
}
 
}
  
−
.nav ul:before,.nav ul:after {
+
#pages > ul {
−
    content:"";
+
width: 1000000px;
−
    display:table;
+
 
}
 
}
  
−
.nav ul:after {
+
#pages li.page {
−
    clear:both;
+
position: absolute;
 +
display: inline-block;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
transition: 0.5s cubic-bezier(.19,.11,.4,1);
 
}
 
}
  
−
.nav a {
+
#pages div.page-content {
−
text-decoration:none;
+
width: 100%;
−
display:block;
+
height: 100%;
−
padding:10px 10px;
+
−
line-height:1.2em;
+
−
color:#000;
+
−
text-align: center;
+
−
vertical-align: middle;
+
 
}
 
}
  
−
.nav a:hover {
+
#present-prev-page, #present-next-page {
−
text-decoration:none;
+
position: absolute;
−
background:#FFF;
+
top: 0;
 +
height: 100%;
 +
width: 3.5rem;
 +
padding: 0 0.5rem;
 +
color: grey;
 +
cursor: pointer;
 +
opacity: 0.7;
 +
transition: 0.25s;
 
text-align: center;
 
text-align: center;
−
vertical-align: middle;
 
 
}
 
}
  
−
.nav li ul {
+
#present-prev-page:hover, #present-next-page:hover {
−
    position:absolute;
+
opacity: 1;
−
    left:0;
+
−
    top:36px;
+
−
    z-index:1;
+
 
}
 
}
  
−
.nav li ul li {
+
#present-prev-page {
−
    overflow:hidden;
+
left: 0;
−
    height:0;
+
 
}
 
}
  
−
.nav li ul a {
+
#present-next-page {
−
    border:none;
+
right: 0;
−
    background:rgba(0,0,0,0.05);
+
−
-webkit-transition:background 500ms ease-in-out;
+
−
    -moz-transition:background 500ms ease-in-out;
+
−
    -o-transition:background 500ms ease-in-out;
+
−
    transition:background 500ms ease-in-out;
+
 
}
 
}
  
−
.nav li ul a:hover {
+
.page-Slidemenu-icon {
−
    background:rgba(0,0,0,0.2);
+
position: relative;
 +
top: 50%;
 
}
 
}
  
−
.nav ul > li {
+
#Flexslider_Pictures1 {
−
text-decoration:none;
+
position: relative;
−
    float:left;
+
width: 88%;
−
    position:relative;
+
height: 100%;
−
height:36px;
+
background-image: url(https://static.igem.org/mediawiki/2015/8/8b/NTU-Slider-1.png);
−
width: 125px;
+
background-size: 100% 100%;
 
}
 
}
  
−
.nav ul > li:hover ul.subs {
+
#Flexslider_Pictures2 {
−
    height:auto;
+
position: relative;
−
    width:300px;
+
width: 88%;
 +
height: 100%;
 +
background-image: url(https://static.igem.org/mediawiki/2015/8/8a/NTU-Slider-2.png);
 +
background-size: 100% 100%;
 
}
 
}
  
−
.nav ul > li:hover ul li {
+
#Flexslider_Pictures3 {
−
line-height: 24px;
+
position: relative;
−
text-decoration:none;
+
width: 88%;
−
height:36px;
+
height: 100%;
−
width: 300px;
+
background-image: url(https://static.igem.org/mediawiki/2015/c/cb/NTU-Slider-3.png);
−
text-align: center;
+
background-size: 100% 100%;
−
vertical-align: middle;
+
}
−
    border-left:1px solid #6E67A6;
+
 
−
    -webkit-transition:height 250ms ease-in;
+
#Flexslider_Pictures4 {
−
    -moz-transition:height 250ms ease-in;
+
position: relative;
−
    -o-transition:height 250ms ease-in;
+
width: 88%;
−
    transition:height 250ms ease-in;
+
height: 100%;
 +
background-image: url(https://static.igem.org/mediawiki/2015/2/28/NTU-Slider-4.png);
 +
background-size: 100% 100%;
 
}
 
}
  
  
−
/*--------------------------------------------*/
+
/*-------------------------------------------*/
−
/*--------------------nav2--------------------*/
+
/*-------------------intro-------------------*/
−
/*--------------------------------------------*/
+
/*-------------------------------------------*/
−
.nav2 {
+
 
 +
.Container_intro {
 +
width: 99.8%;
 +
left: 0.1%;
 +
right: 0.1%;
 +
height: 380px;
 +
top: 626px;
 
position: absolute;
 
position: absolute;
−
top: 200px;
+
background-color: #FFF;
−
left: auto;
+
−
right: 0px;
+
−
    list-style:none;
+
−
    margin:0;
+
−
    padding:0;
+
 
}
 
}
  
−
.nav2 ul {
+
.Container_intro_video {
−
    *zoom:1;
+
top: 32.5px;
−
    list-style:none;
+
bottom: 32.5px;
−
    margin:0;
+
margin-left: -280px;
−
    padding:0;
+
left: 30%;
−
    background:#FFF;
+
width: 560px;
 +
height: 315px;
 +
position: absolute;
 
}
 
}
  
−
.nav2 ul:before,.nav ul:after {
+
.Container_intro_text {
−
    content:"";
+
top: 97px;
−
    display:table;
+
bottom: 97px;
 +
margin-left: -197px;
 +
left: 77%;
 +
width: 394px;
 +
height: 186px;
 +
background-color: #f6bd32;
 +
position: absolute;
 
}
 
}
  
−
.nav2 ul:after {
+
.Text_video1 {
−
    clear:both;
+
font-size: 31px;
 +
font-family: Calibri;
 +
text-align: justify;
 +
padding-top: 15px;
 +
padding-right: 25px;
 +
padding-bottom: 10px;
 +
padding-left: 25px;
 +
line-height: 26px;
 +
color: #0a3571;
 
}
 
}
  
−
.nav2 a {
+
.Text_video2 {
−
text-decoration:none;
+
font-size: 20px;
−
display:block;
+
font-family: Calibri;
−
padding:10px 10px;
+
text-align: justify;
−
line-height:1.2em;
+
padding-top: 10px;
−
color:#000;
+
padding-right: 25px;
−
text-align: center;
+
padding-bottom: 10px;
−
vertical-align: middle;
+
padding-left: 25px;
 +
line-height: 26px;
 
}
 
}
  
−
.nav2 a:hover {
 
−
text-decoration:none;
 
−
background:#FFF;
 
−
text-align: center;
 
−
vertical-align: middle;
 
−
}
 
  
−
.nav2 li ul {
+
/*-------------------------------------------*/
−
    position:absolute;
+
/*-----------------IntroFast-----------------*/
−
    right:0;
+
/*-------------------------------------------*/
−
    top:36px;
+
 
−
    z-index:1;
+
.Container_IntroFast {
 +
width: 99.8%;
 +
left: 0.1%;
 +
right: 0.1%;
 +
height: 380px;
 +
top: 1008px;
 +
position: absolute;
 +
background-color: #FFF;
 
}
 
}
  
−
.nav2 li ul li {
+
.SubContainer_IntroFast1 {
−
    overflow:hidden;
+
top: 40px;
−
    height:0;
+
bottom: 40px;
 +
margin-left: -150px;
 +
left: 18%;
 +
width: 300px;
 +
height: 300px;
 +
position: absolute;
 
}
 
}
  
−
.nav2 li ul a {
+
.SubContainer_IntroFast1 img {
−
    border:none;
+
width: 300px;
−
    background:rgba(0,0,0,0.05);
+
−
-webkit-transition:background 500ms ease-in-out;
+
−
    -moz-transition:background 500ms ease-in-out;
+
−
    -o-transition:background 500ms ease-in-out;
+
−
    transition:background 500ms ease-in-out;
+
 
}
 
}
  
−
.nav2 li ul a:hover {
+
.SubContainer_IntroFast2 {
−
    background:rgba(0,0,0,0.2);
+
top: 40px;
 +
bottom: 40px;
 +
margin-left: -150px;
 +
left: 50%;
 +
width: 300px;
 +
height: 300px;
 +
position: absolute;
 
}
 
}
  
−
.nav2 ul > li {
+
.SubContainer_IntroFast2 img {
−
text-decoration:none;
+
width: 300px;
−
    float:right;
+
−
    position:relative;
+
−
height:36px;
+
−
width: 125px;
+
 
}
 
}
  
−
.nav2 ul > li:hover ul.subs {
+
.SubContainer_IntroFast3 {
−
    height:auto;
+
top: 40px;
−
    width:300px;
+
bottom: 40px;
 +
margin-left: -150px;
 +
left: 82%;
 +
width: 300px;
 +
height: 300px;
 +
position: absolute;
 
}
 
}
  
−
.nav2 ul > li:hover ul li {
+
.SubContainer_IntroFast3 img {
−
line-height: 24px;
+
−
text-decoration:none;
+
−
height:36px;
+
 
width: 300px;
 
width: 300px;
−
text-align: center;
 
−
vertical-align: middle;
 
−
    border-right:1px solid #6E67A6;
 
−
    -webkit-transition:height 250ms ease-in;
 
−
    -moz-transition:height 250ms ease-in;
 
−
    -o-transition:height 250ms ease-in;
 
−
    transition:height 250ms ease-in;
 
 
}
 
}
  
 +
 +
/*-------------------------------------------*/
 +
/*-------------------Media-------------------*/
 +
/*-------------------------------------------*/
 +
 +
@media screen and (min-width: 0px) and (max-width: 1200px) {
 +
 +
.Container_IntroFast {
 +
width: 99.8%;
 +
left: 0.1%;
 +
right: 0.1%;
 +
height: 310px;
 +
top: 1003px;
 +
position: absolute;
 +
background-color: #FFF;
 +
}
 +
 +
.SubContainer_IntroFast1 {
 +
top: 30px;
 +
bottom: 30px;
 +
margin-left: -125px;
 +
left: 18%;
 +
width: 250px;
 +
height: 250px;
 +
position: absolute;
 +
}
 +
 +
.SubContainer_IntroFast1 img {
 +
width: 250px;
 +
}
 +
 +
.SubContainer_IntroFast2 {
 +
top: 30px;
 +
bottom: 30px;
 +
margin-left: -125px;
 +
left: 50%;
 +
width: 250px;
 +
height: 250px;
 +
position: absolute;
 +
}
 +
 +
.SubContainer_IntroFast2 img {
 +
width: 250px;
 +
}
 +
 +
.SubContainer_IntroFast3 {
 +
top: 30px;
 +
bottom: 30px;
 +
margin-left: -125px;
 +
left: 82%;
 +
width: 250px;
 +
height: 250px;
 +
position: absolute;
 +
}
 +
 +
.SubContainer_IntroFast3 img {
 +
width: 250px;
 +
}
 +
 +
#Wrapper {
 +
margin-right: auto;
 +
margin-left: auto;
 +
background-color: #FFF;
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
width: 90%;
 +
height: 1419px;
 +
top: 0px;
 +
left: 5%;
 +
right: 5%;
 +
position: absolute;
 +
bottom: 0px;
 +
padding-top: 0px;
 +
padding-bottom: 0px;
 +
z-index: 0;
 +
}
 +
 +
#NTUXLIHPAO_icon {
 +
height: 40px;
 +
width: 200px;
 +
position: absolute;
 +
left: 1%;
 +
top: 18px;
 +
right: auto;
 +
bottom: auto;
 +
z-index: 9999;
 +
}
 +
 +
 +
#width_small {
 +
width: 95px; /*--改主要選單寬度--*/
 +
}
 +
 +
.Slidemenu {
 +
z-index: 9999;
 +
position: absolute;
 +
top: 32px;
 +
bottom: 0px;
 +
left: 49%;
 +
right: auto;
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
position: absolute;
 +
margin-left: -320px;
 +
/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
 +
}
 +
 +
.Container_intro_text {
 +
top: 104px;
 +
bottom: 104px;
 +
margin-left: -150px;
 +
left: 80%;
 +
width: 300px;
 +
height: 172px;
 +
background-color: #f6bd32;
 +
position: absolute;
 +
}
 +
 +
.Text_video1 {
 +
font-size: 25px;
 +
font-family: Calibri;
 +
text-align: justify;
 +
padding-top: 15px;
 +
padding-right: 15px;
 +
padding-bottom: 5px;
 +
padding-left: 15px;
 +
line-height: 26px;
 +
color: #0a3571;
 +
}
 +
 +
.Text_video2 {
 +
font-size: 18px;
 +
font-family: Calibri;
 +
text-align: justify;
 +
padding-top: 5px;
 +
padding-right: 15px;
 +
padding-bottom: 10px;
 +
padding-left: 15px;
 +
line-height: 26px;
 +
}
 +
}
  
 
</style>
 
</style>
Line 527: Line 730:
 
<body>
 
<body>
  
−
<div id="Wrapper_TOP"></div>
+
<div id="Wrapper">
 +
<div id="Wrapper_TopPic">
 +
<div id="NTUXLIHPAO_icon"><img src="https://static.igem.org/mediawiki/2015/c/c7/NTU-Top-NTUXLIHPAO.png"  height="40" /></div>
 +
<div id="Facebook_icon_pic">
 +
<a href="https://www.facebook.com/NationalTaiwanUniversityiGEM"><img id="Facebook_icon_hover" src="https://static.igem.org/mediawiki/2015/9/98/NTU-Top-Facebook_icon1.png" /></a></div>
 +
<div id="iGEM_icon_pic">
 +
<a href="https://igem.org/Main_Page"><img id="iGEM_icon_hover" src="https://static.igem.org/mediawiki/2015/1/1d/NTU-Top-iGEM_icon1.png" /></a></div>
 +
<div id="NTU_icon_pic">
 +
<a href="http://www.ntu.edu.tw/english/index.html"><img id="NTU_icon_hover" src="https://static.igem.org/mediawiki/2015/1/14/NTU-Top-NTU_icon1.png" /></a></div>
  
−
<div id="Wrapper">
+
<div class="Slidemenu">
−
<nav class="nav">
+
<ul>
−
    <ul>
+
<li><div class=width_small><div id=Position_Now><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan">Home</a></div></div>
−
        <li><a href="#">Home</a>
+
</li>
−
            <ul class="subs">
+
 
−
                <li><a href="#">Subnav Item</a></li>
+
<li><div class=width_small span style="cursor:default"><a>Team</a></div>
−
                <li><a href="#">Subnav Item</a></li>
+
<ul class="subs">
−
                <li><a href="#">Subnav Item</a></li>
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Team">Team</a></li>
−
            </ul>
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Attributions">Attributions</a></li>
−
        </li>
+
</ul>
 +
</li>
 +
 +
<li><div class=width_small span style="cursor:default"><a>Project</a></div>
 +
<ul class="subs">
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Description">Description</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Design">Design</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Results">Results</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Modeling">Modeling</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Experiments">Protocols</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><div class=width_small span style="cursor:default"><a>Parts</a></div>
 +
<ul class="subs">
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Parts">Team Parts</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Basic_Part">Basic Parts</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Composite_Part">Composite Parts</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Notebook">Notebook</a></div>
 +
</li>
 
          
 
          
−
        <li><a href="#">Team</a>
+
<li><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Safety">Safety</a></div>
−
            <ul class="subs">
+
</li>
−
                <li><a href="#">Subnav Item</a></li>
+
−
                <li><a href="#">Subnav Item</a></li>
+
<li><div class=width_small span style="cursor:default"><a>Society</a></div>
−
                <li><a href="#">Subnav Item</a></li>
+
<ul class="subs">
−
            </ul>
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Practices">Human Practices</a></li>
−
        </li>
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Collaborations">Collaborations</a></li>
 +
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Entrepreneurship">Entrepreneurship</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
<div id="Container_slider">
 +
<div id="pages">
 +
<ul>
 +
<style>
 +
.vertical-align-wrapper {
 +
position: absolute;
 +
height: 100%;
 +
width: 100%;
 +
left: 0;
 +
top: 0;
 +
font-size: 0;
 +
text-align: center;
 +
}
 +
.vertical-align-wrapper:before {
 +
content: '';
 +
display: inline-block;
 +
vertical-align: middle ;
 +
height: 100%;
 +
}
 +
.vertical-align {
 +
text-align: center;
 +
line-height: 100%;
 +
display: inline-block;
 +
vertical-align: middle;
 +
}
 +
</style>
 +
<li class="page">
 +
<div class="page-content">
 +
<div class="vertical-align-wrapper">
 +
<div id="Flexslider_Pictures1" style="max-width:100%; max-height:100%" class="vertical-align"></div>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="page">
 +
<div class="page-content">
 +
<div class="vertical-align-wrapper">
 +
<div id="Flexslider_Pictures2" style="max-width:100%; max-height:100%" class="vertical-align"></div>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="page">
 +
<div class="page-content">
 +
<div class="vertical-align-wrapper">
 +
<div id="Flexslider_Pictures3" style="max-width:100%; max-height:100%" class="vertical-align"></div>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="page">
 +
<div class="page-content">
 +
<div class="vertical-align-wrapper">
 +
<div id="Flexslider_Pictures4" style="max-width:100%; max-height:100%" class="vertical-align"></div>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
<div id="present-prev-page">
 +
<span class="page-Slidemenu-icon"><img src="https://static.igem.org/mediawiki/2015/c/c2/Symbol_P.png" width="55px"/></span>
 +
</div>
 +
<div id="present-next-page">
 +
<span class="page-Slidemenu-icon"><img src="https://static.igem.org/mediawiki/2015/8/82/Symbol_Y.png" width="55px"/></span>
 +
</div>
 +
</div>
 +
 
 +
<script>
 +
(function() {
 +
function AND(a,b) {
 +
if (a) {
 +
if (b) {
 +
return true;
 +
}
 +
}
 +
return false;
 +
}
 +
var pages = document.querySelectorAll(".page");
 +
var page_current = 0;
 +
function pageJumpTo(to_page) {
 +
if (AND(to_page >= 0, to_page < pages.length)) {
 +
for (var i = 0; i < pages.length; i++) {
 +
pages[i].style.left = 100*(i-to_page) + '%';
 +
}
 +
page_current = to_page;
 +
}
 +
}
 +
document.querySelector("#present-prev-page").onclick = function() {
 +
pageJumpTo(page_current - 1);
 +
};
 +
document.querySelector("#present-next-page").onclick = function() {
 +
pageJumpTo(page_current + 1);
 +
};
 +
pageJumpTo(0);
 +
})();
 +
</script>
 +
 +
<div class="Container_intro">
 +
<div class="Container_intro_video">
 +
<video width="560" height="315" controls>
 +
<source src="https://static.igem.org/mediawiki/2015/8/8e/NTU_igem_video.mp4" type="video/ogg">
 +
<source src="https://static.igem.org/mediawiki/2015/8/8e/NTU_igem_video.mp4" type="video/mp4">
 +
</div>
 
          
 
          
−
        <li><a href="#">Project</a>
+
<div class="Container_intro_text">
−
            <ul class="subs">
+
<div class="Text_video1">
−
                <li><a href="#">Subnav Item</a></li>
+
<b>Healthy, thin and keep fit!</b>
−
                <li><a href="#">Subnav Item</a></li>
+
</div>
−
                <li><a href="#">Subnav Item</a></li>
+
<div class="Text_video2">
−
            </ul>
+
Global obesity problem is raising people's concern, and we aim to provide a new solution! Learn more about our project "Healthin".
−
        </li>
+
</div>
−
       
+
</div>
−
        <li><a href="#">Results</a>
+
</div>
−
            <ul class="subs">
+
−
                <li><a href="#">Subnav Item</a></li>
+
<div class="Container_IntroFast">
−
                <li><a href="#">Subnav Item</a></li>
+
<div class="SubContainer_IntroFast1"><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Description"><img src="https://static.igem.org/mediawiki/2015/7/7d/IntroFast_Project.png" /></a></div>
−
                <li><a href="#">Subnav Item</a></li>
+
<div class="SubContainer_IntroFast2"><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Modeling"><img src="https://static.igem.org/mediawiki/2015/f/f3/IntroFast_Modeling.png" /></a></div>
−
            </ul>
+
<div class="SubContainer_IntroFast3"><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Practices"><img src="https://static.igem.org/mediawiki/2015/7/76/IntroFast_Human_Practice.png" /></a></div>
−
        </li>
+
</div>
−
    </ul>
+
−
</nav>
+
  
−
<nav class="nav2">
+
<div id="Wrapper_Bottom">
−
    <ul>
+
<div id="NTUschool_logo"><a href="http://www.ntu.edu.tw/english/index.html"><img src="https://static.igem.org/mediawiki/2015/d/de/NTUschool_icon.png" height="70" /></a></div>
−
        <li><a href="#">Modeling</a>
+
<div id="LIHPAO_logo"><a href="http://www.llsc.com.tw/"><img src="https://static.igem.org/mediawiki/2015/d/d4/LIHPAO_logo.png" height="70" /></a></div>
−
            <ul class="subs">
+
<div id="NTUBST_logo"><a href="http://www.bst.ntu.edu.tw/BST-new/NTUBST.html"><img src="https://static.igem.org/mediawiki/2015/6/68/NTUBST_logo.png" height="70" /></a></div>
−
                <li><a href="#">Subnav Item</a></li>
+
<div id="Bottom_Text">
−
                <li><a href="#">Subnav Item</a></li>
+
Maintained by the iGEM team NTU-LIHPAO-Taiwan&nbsp;&nbsp;&nbsp;&nbsp;©2015 NTU-LIHPAO-Taiwan
−
                <li><a href="#">Subnav Item</a></li>
+
</div>
−
            </ul>
+
</div>
−
        </li>
+
−
       
+
−
        <li><a href="#">Notebook</a>
+
−
            <ul class="subs">
+
−
                <li><a href="#">Subnav Item</a></li>
+
−
                <li><a href="#">Subnav Item</a></li>
+
−
                <li><a href="#">Subnav Item</a></li>
+
−
            </ul>
+
−
        </li>
+
−
       
+
−
        <li><a href="#">Safety</a>
+
−
            <ul class="subs">
+
−
                <li><a href="#">Subnav Item</a></li>
+
−
                <li><a href="#">Subnav Item</a></li>
+
−
                <li><a href="#">Subnav Item</a></li>
+
−
            </ul>
+
−
        </li>
+
−
       
+
−
        <li><a href="#">Human Practice</a>
+
−
            <ul class="subs">
+
−
                <li><a href="#">Subnav Item</a></li>
+
−
                <li><a href="#">Subnav Item</a></li>
+
−
                <li><a href="#">Subnav Item</a></li>
+
−
            </ul>
+
−
        </li>
+
−
    </ul>
+
−
</nav>
+
−
   
+
−
    <div class="flexslider">
+
−
  <ul class="slides">
+
−
    <li>
+
−
      <img src="slide1.jpg" />
+
−
    </li>
+
−
    <li>
+
−
      <img src="slide2.jpg" />
+
−
    </li>
+
−
    <li>
+
−
      <img src="slide3.jpg" />
+
−
    </li>
+
−
  </ul>
+
 
</div>
 
</div>
−
   
 
−
</div>
 
−
 
−
 
−
 
−
 
−
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 03:27, 19 September 2015

NTU-LIHPAO-Taiwan

Healthy, thin and keep fit!
Global obesity problem is raising people's concern, and we aim to provide a new solution! Learn more about our project "Healthin".
Maintained by the iGEM team NTU-LIHPAO-Taiwan    ©2015 NTU-LIHPAO-Taiwan