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

 
(530 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<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="jquery.flexslider.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>
  
Line 48: Line 71:
 
body,td,th {
 
body,td,th {
 
font-size: 14px;
 
font-size: 14px;
−
font-family: Calibri, "新細明體", "Arial Narrow", "Agency FB";
+
font-family: Calibri, "Arial Narrow", "Agency FB", "Raavi";
 
}
 
}
 +
 
#Wrapper {
 
#Wrapper {
 
margin-right: auto;
 
margin-right: auto;
Line 57: Line 81:
 
margin-bottom: 0px;
 
margin-bottom: 0px;
 
width: 90%;
 
width: 90%;
−
height: 2000px;
+
height: 1494px;
 
top: 0px;
 
top: 0px;
 
left: 5%;
 
left: 5%;
Line 75: Line 99:
 
margin-bottom: 0px;
 
margin-bottom: 0px;
 
width: 100%;
 
width: 100%;
−
height: 80px;
+
height: 58px;
 
top: 0px;
 
top: 0px;
−
left:0px;
+
left: 0px;
−
right:0px;
+
right: 0px;
 
position: fixed;
 
position: fixed;
 
bottom: 0px;
 
bottom: 0px;
 
padding-top: 0px;
 
padding-top: 0px;
 
padding-bottom: 0px;
 
padding-bottom: 0px;
−
z-index: 9999;
+
z-index: 9998;
−
border-bottom-style: ridge;
+
border-bottom-style: solid;
−
border-bottom-color: #06F;
+
border-bottom-color: #fe5838;
−
border-bottom-width: 3px;
+
border-bottom-width: 2px;
−
z-index: 9999;
+
z-index: 9998;
 
background-repeat: no-repeat;
 
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;
 +
}
 +
 +
  
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
 
/*-----------------Top icons-----------------*/
 
/*-----------------Top icons-----------------*/
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
−
 
+
#Facebook_icon_pic {
−
#Facebook_icon a {
+
height: 30px;
−
background-image: url(facebook_icon.png);
+
width: 30px;
−
height: 45px;
+
−
width: 45px;
+
−
position: absolute;
+
−
left: auto;
+
−
top: 20px;
+
−
right: 6%;
+
−
bottom: auto;
+
−
z-index: 9999;
+
−
}
+
−
#Facebook_icon a:hover {
+
−
background-image: url(facebook_icon_hover.png);
+
−
height: 45px;
+
−
width: 45px;
+
 
position: absolute;
 
position: absolute;
 
left: auto;
 
left: auto;
−
top: 20px;
+
top: 23px;
−
right: 6%;
+
right: 5.5%;
 
bottom: auto;
 
bottom: auto;
 
z-index: 9999;
 
z-index: 9999;
 
}
 
}
  
−
#iGEM_icon a {
+
#iGEM_icon_pic {
−
background-image: url(iGEM_icon.png);
+
height: 30px;
−
height: 53px;
+
width: 38px;
−
width: 62px;
+
 
position: absolute;
 
position: absolute;
 
left: auto;
 
left: auto;
−
top: 20px;
+
top: 23px;
 
right: 1%;
 
right: 1%;
 
bottom: auto;
 
bottom: auto;
 
z-index: 9999;
 
z-index: 9999;
 
}
 
}
−
#iGEM_icon a:hover {
+
 
−
background-image: url(iGEM_icon_hover.png);
+
#NTU_icon_pic {
−
height: 53px;
+
height: 30px;
−
width: 62px;
+
width: 69px;
 
position: absolute;
 
position: absolute;
 
left: auto;
 
left: auto;
−
top: 20px;
+
top: 23px;
−
right: 1%;
+
right: 9%;
 
bottom: auto;
 
bottom: auto;
 
z-index: 9999;
 
z-index: 9999;
Line 142: Line 171:
  
 
#NTUXLIHPAO_icon {
 
#NTUXLIHPAO_icon {
−
background-image: url(NTUXLIHPAO.png);
+
height: 40px;
−
height: 79px;
+
width: 200px;
−
width: 233px;
+
 
position: absolute;
 
position: absolute;
−
left: 5%;
+
left: 3%;
−
top: 10px;
+
top: 18px;
 
right: auto;
 
right: auto;
 
bottom: auto;
 
bottom: auto;
Line 153: Line 181:
 
}
 
}
  
−
#CareWeights_icon {
+
 
−
background-image: url(CareWeights.png);
+
 
−
height: 56px;
+
/*-------------------------------------------*/
−
width: 561px;
+
/*---------------Bottom icons----------------*/
 +
/*-------------------------------------------*/
 +
 
 +
#NTUschool_logo {
 +
height: 70px;
 +
width: 265px;
 
position: absolute;
 
position: absolute;
 
left: 25%;
 
left: 25%;
−
top: 10px;
+
top: 5px;
 
right: auto;
 
right: auto;
 
bottom: auto;
 
bottom: auto;
 
z-index: 9999;
 
z-index: 9999;
 +
margin-left: -132px;
 
}
 
}
  
−
#NTU_icon a {
+
#LIHPAO_logo {
−
background-image: url(NTU_Logo.png);
+
height: 70px;
−
height: 61px;
+
width: 215px;
−
width: 131px;
+
 
position: absolute;
 
position: absolute;
−
left: auto;
+
left: 75%;
−
top: 14px;
+
top: 5px;
−
right: 10%;
+
right: auto;
 
bottom: auto;
 
bottom: auto;
 
z-index: 9999;
 
z-index: 9999;
 +
margin-left: -107px;
 
}
 
}
  
−
#NTU_icon a:hover {
+
#NTUBST_logo {
−
background-image: url(NTU_Logo2.png);
+
 
height: 70px;
 
height: 70px;
−
width: 131px;
+
width: 70px;
 
position: absolute;
 
position: absolute;
−
left: auto;
+
left: 50%;
−
top: 9px;
+
top: 5px;
−
right: 10%;
+
right: auto;
 
bottom: auto;
 
bottom: auto;
 
z-index: 9999;
 
z-index: 9999;
 +
margin-left: -35px;
 +
}
 +
 +
#Bottom_Text {
 +
color: #767676;
 +
bottom: 0px;
 +
width: 100%;
 +
height: auto;
 +
font-size: 15px;
 +
position: absolute;
 +
text-align: center;
 
}
 
}
  
Line 193: Line 237:
 
/*-----------------Slide Menu----------------*/
 
/*-----------------Slide Menu----------------*/
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
−
.nav {
+
.Slidemenu {
 
z-index: 9999;
 
z-index: 9999;
−
position: fixed;
+
position: absolute;
−
top: 80px;
+
top: 32px;
−
left: 28.5%;
+
bottom: 0px;
−
right: auto;
+
left: 51%;
 +
right: 15%;
 
list-style:none;
 
list-style:none;
 
margin:0;
 
margin:0;
 
padding:0;
 
padding:0;
 +
position: absolute;
 +
margin-left: -350px;
 
/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
 
/*background:rgba(100%,100%,100%,0); 主選單色系選擇*/
 
}
 
}
  
−
.nav ul {
+
.Slidemenu ul {
 
*zoom:1;
 
*zoom:1;
 
list-style:none;
 
list-style:none;
Line 213: Line 260:
 
}
 
}
  
−
.nav ul:before,.nav ul:after {
+
.Slidemenu ul:before,.Slidemenu ul:after {
 
content:"";
 
content:"";
 
display:table;
 
display:table;
 
}
 
}
  
−
.nav ul:after {
+
.Slidemenu ul:after {
 
clear:both;
 
clear:both;
 
}
 
}
  
−
.nav a {
+
.Slidemenu a {
 
text-decoration:none;
 
text-decoration:none;
 
display:block;
 
display:block;
 
padding:4px 4px;
 
padding:4px 4px;
−
line-height:1.2em;
+
line-height:1em;
 
color:#000;
 
color:#000;
 
text-align: center;
 
text-align: center;
Line 233: Line 280:
 
width: auto;
 
width: auto;
 
font-family: "Agency FB";
 
font-family: "Agency FB";
−
font-size: 14px;
+
font-size: 1em;
 
}
 
}
  
−
.nav a:hover {
+
.Slidemenu a:hover {
 
text-decoration:none;
 
text-decoration:none;
−
background:rgba(0,0,0,0.1);
+
background:rgba(0,0,0,0.03);
 
text-align: center;
 
text-align: center;
 
vertical-align: middle;
 
vertical-align: middle;
 
}
 
}
  
−
.nav li ul {
+
.Slidemenu li ul {
 
position:absolute;
 
position:absolute;
 
left:0;
 
left:0;
−
top:24px;
+
top:26px;
 
z-index:1;
 
z-index:1;
 
}
 
}
  
−
.nav li ul li {
+
.Slidemenu li ul li {
 
overflow:hidden;
 
overflow:hidden;
−
height:0;
+
height: 0px;
 +
margin-bottom: 0px;
 
}
 
}
  
−
.nav li ul a {
+
.Slidemenu li ul a {
 
border:none;
 
border:none;
−
background:rgba(255,255,255,0.9); /*--改拉出選單顏色--*/
 
 
-webkit-transition:background 300ms ease-in-out;
 
-webkit-transition:background 300ms ease-in-out;
 
-moz-transition:background 300ms ease-in-out;
 
-moz-transition:background 300ms ease-in-out;
 
-o-transition:background 300ms ease-in-out;
 
-o-transition:background 300ms ease-in-out;
 
transition:background 300ms ease-in-out;
 
transition:background 300ms ease-in-out;
 +
line-height:1.1em;
 
}
 
}
  
−
.nav li ul a:hover {
+
.Slidemenu li ul a:hover {
 
background-color: rgba(240,240,240,1);
 
background-color: rgba(240,240,240,1);
 
}
 
}
  
−
.nav ul > li {
+
.Slidemenu ul > li {
 
text-decoration:none;
 
text-decoration:none;
−
float:left;
+
float: left;
−
position:relative;
+
position: relative;
−
height: 24px; /*--改主要選單高度--*/
+
height: 27px; /*--改主要選單高度--*/
 +
}
 +
 
 +
.width_small {
 
width: 100px; /*--改主要選單寬度--*/
 
width: 100px; /*--改主要選單寬度--*/
 
}
 
}
  
−
.nav ul > li:hover ul.subs {
+
.Slidemenu ul > li:hover ul.subs {
−
background:rgba(0,0,0,0.5);
+
 
height: auto;
 
height: auto;
 
width: 150px; /*--改拉出的選單寬度--*/
 
width: 150px; /*--改拉出的選單寬度--*/
 +
border-left-width: 3px;
 +
border-left-style: solid;
 +
border-left-color: #3300FF;
 +
background:rgba(255,255,255,1); /*--改拉出選單顏色--*/
 
}
 
}
  
−
.nav ul > li:hover ul li {
+
.Slidemenu ul > li:hover ul li {
 
text-decoration:none;
 
text-decoration:none;
−
height: 22px; /*--改拉出的選單高度--*/
+
height: 26px; /*--改拉出的選單高度--*/
 
width: 150px; /*--改拉出的選單寬度--*/
 
width: 150px; /*--改拉出的選單寬度--*/
 
text-align: center;
 
text-align: center;
Line 292: Line 346:
 
-o-transition:height 250ms ease-in;
 
-o-transition:height 250ms ease-in;
 
transition:height 250ms ease-in;
 
transition:height 250ms ease-in;
−
border-left-width: 3px;
 
−
border-left-style: solid;
 
−
border-left-color: #E3E4E5;
 
 
}
 
}
 +
 +
#Position_Now {
 +
background:rgba(0,0,0,0.03);
 +
}
 +
  
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
−
/*----------------flexslider-----------------*/
+
/*----------------Flexslider-----------------*/
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
  
−
.Container_flexslider {
+
#Container_slider {
 
position: absolute;
 
position: absolute;
−
top: 110px;
+
top: 30px;
−
left: 0px;
+
−
right: 0px;
+
−
margin:0px;
+
−
padding:0px;
+
−
height: 600px;
+
 
width: 100%;
 
width: 100%;
−
background-color:#FFF;
+
left: 0%;
−
z-index:9997;
+
right: 0%;
−
}
+
height: 594px;   /*594px*/
−
@font-face {
+
background: #FFF;    /*75B1EC*/
−
font-family: 'flexslider-icon';
+
overflow: hidden;
−
src: url('fonts/flexslider-icon.eot');
+
z-index: 0;
−
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');
+
border: none;
−
font-weight: normal;
+
−
font-style: normal;
+
−
}
+
−
.flex-container a:hover,
+
−
.flex-slider a:hover,
+
−
.flex-container a:focus,
+
−
.flex-slider a:focus {
+
−
outline: none;
+
−
}
+
−
.slides,
+
−
.slides > li,
+
−
.flex-control-nav,
+
−
.flex-direction-nav {
+
−
margin: 0;
+
−
padding: 0;
+
−
list-style: none;
+
 
}
 
}
−
.flex-pauseplay span {
+
 
−
text-transform: capitalize;
+
#pages {
−
}
+
position: absolute;
−
.flexslider {
+
top: 0;
−
margin: 0;
+
left: 0;
−
}
+
−
.flexslider .slides > li {
+
−
display: none;
+
−
-webkit-backface-visibility: hidden;
+
−
}
+
−
.flexslider .slides img {
+
 
width: 100%;
 
width: 100%;
−
display: block;
+
height: 100%;
 +
overflow: hidden;
 
}
 
}
−
.flexslider .slides:after {
+
 
−
content: "\0020";
+
#pages > ul {
−
display: block;
+
width: 1000000px;
−
clear: both;
+
−
visibility: hidden;
+
−
line-height: 0;
+
−
height: 0;
+
 
}
 
}
−
html[xmlns] .flexslider .slides {
+
 
−
display: block;
+
#pages li.page {
−
}
+
−
* html .flexslider .slides {
+
−
height: 1%;
+
−
}
+
−
.no-js .flexslider .slides > li:first-child {
+
−
display: block;
+
−
}
+
−
.flexslider {
+
−
margin: 0 0 60px;
+
−
background: #ffffff;
+
−
border: 4px solid #ffffff;
+
 
position: absolute;
 
position: absolute;
−
zoom: 1;
+
display: inline-block;
−
-webkit-border-radius: 4px;
+
left: 0;
−
-moz-border-radius: 4px;
+
width: 100%;
−
border-radius: 4px;
+
height: 100%;
−
-webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
+
transition: 0.5s cubic-bezier(.19,.11,.4,1);
−
-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;
+
#pages div.page-content {
 +
width: 100%;
 +
height: 100%;
 
}
 
}
−
.flexslider .slides img {
+
 
−
height: auto;
+
#present-prev-page, #present-next-page {
−
}
+
−
.flex-viewport {
+
−
max-height: 2000px;
+
−
-webkit-transition: all 1s ease;
+
−
-moz-transition: all 1s ease;
+
−
-ms-transition: all 1s ease;
+
−
-o-transition: all 1s ease;
+
−
transition: all 1s ease;
+
−
}
+
−
.loading .flex-viewport {
+
−
max-height: 300px;
+
−
}
+
−
.carousel li {
+
−
margin-right: 5px;
+
−
}
+
−
.flex-direction-nav {
+
−
*height: 0;
+
−
}
+
−
.flex-direction-nav a {
+
−
text-decoration: none;
+
−
display: block;
+
−
width: 40px;
+
−
height: 40px;
+
−
margin: -20px 0 0;
+
 
position: absolute;
 
position: absolute;
−
top: 50%;
+
top: 0;
−
z-index: 10;
+
height: 100%;
−
overflow: hidden;
+
width: 3.5rem;
−
opacity: 0;
+
padding: 0 0.5rem;
 +
color: grey;
 
cursor: pointer;
 
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  {
 
−
content: " ";
 
−
display: block;
 
−
background: url('Symbol_P.png') no-repeat;
 
−
width: 40px;
 
−
height: 40px;
 
−
}
 
−
.flex-direction-nav a.flex-next:before  {
 
−
content: " ";
 
−
display: block;
 
−
background: url('Symbol_Y.png') no-repeat;
 
−
width: 40px;
 
−
height: 40px;
 
−
}
 
−
.flex-direction-nav .flex-prev {
 
−
left: 25px;
 
−
}
 
−
.flex-direction-nav .flex-next {
 
−
right: 25px;
 
−
text-align: right;
 
−
}
 
−
.flexslider:hover .flex-direction-nav .flex-prev {
 
 
opacity: 0.7;
 
opacity: 0.7;
−
left: 10px;
+
transition: 0.25s;
 +
text-align: center;
 
}
 
}
−
.flexslider:hover .flex-direction-nav .flex-prev:hover {
+
 
 +
#present-prev-page:hover, #present-next-page:hover {
 
opacity: 1;
 
opacity: 1;
 
}
 
}
−
.flexslider:hover .flex-direction-nav .flex-next {
+
 
−
opacity: 0.7;
+
#present-prev-page {
−
right: 10px;
+
left: 0;
 
}
 
}
−
.flexslider:hover .flex-direction-nav .flex-next:hover {
+
 
−
opacity: 1;
+
#present-next-page {
 +
right: 0;
 
}
 
}
−
.flex-direction-nav .flex-disabled {
+
 
−
opacity: 0!important;
+
.page-Slidemenu-icon {
−
filter: alpha(opacity=0);
+
position: relative;
−
cursor: default;
+
top: 50%;
 
}
 
}
−
.flex-pauseplay a {
+
 
−
display: block;
+
#Flexslider_Pictures1 {
−
width: 20px;
+
position: relative;
−
height: 20px;
+
width: 88%;
−
position: absolute;
+
height: 100%;
−
bottom: 5px;
+
background-image: url(https://static.igem.org/mediawiki/2015/8/8b/NTU-Slider-1.png);
−
left: 10px;
+
background-size: 100% 100%;
−
opacity: 0.8;
+
−
z-index: 10;
+
−
overflow: hidden;
+
−
cursor: pointer;
+
−
color: #000;
+
 
}
 
}
−
.flex-pauseplay a:before {
+
 
−
font-family: "flexslider-icon";
+
#Flexslider_Pictures2 {
−
font-size: 20px;
+
position: relative;
−
display: inline-block;
+
width: 88%;
−
content: '\f004';
+
height: 100%;
 +
background-image: url(https://static.igem.org/mediawiki/2015/8/8a/NTU-Slider-2.png);
 +
background-size: 100% 100%;
 
}
 
}
−
.flex-pauseplay a:hover {
+
 
−
opacity: 1;
+
#Flexslider_Pictures3 {
 +
position: relative;
 +
width: 88%;
 +
height: 100%;
 +
background-image: url(https://static.igem.org/mediawiki/2015/c/cb/NTU-Slider-3.png);
 +
background-size: 100% 100%;
 
}
 
}
−
.flex-pauseplay a.flex-play:before {
+
 
−
content: '\f003';
+
#Flexslider_Pictures4 {
 +
position: relative;
 +
width: 88%;
 +
height: 100%;
 +
background-image: url(https://static.igem.org/mediawiki/2015/2/28/NTU-Slider-4.png);
 +
background-size: 100% 100%;
 
}
 
}
−
.flex-control-nav {
+
 
−
width: 100%;
+
 
 +
/*-------------------------------------------*/
 +
/*-------------------intro-------------------*/
 +
/*-------------------------------------------*/
 +
 
 +
.Container_intro {
 +
width: 99.8%;
 +
left: 0.1%;
 +
right: 0.1%;
 +
height: 380px;
 +
top: 626px;
 
position: absolute;
 
position: absolute;
−
bottom: -40px;
+
background-color: #FFF;
−
text-align: center;
+
 
}
 
}
−
.flex-control-nav li {
+
 
−
margin: 0 6px;
+
.Container_intro_video {
−
display: inline-block;
+
top: 32.5px;
−
zoom: 1;
+
bottom: 32.5px;
−
*display: inline;
+
margin-left: -280px;
 +
left: 30%;
 +
width: 560px;
 +
height: 315px;
 +
position: absolute;
 
}
 
}
−
.flex-control-paging li a {
+
 
−
width: 11px;
+
.Container_intro_text {
−
height: 11px;
+
top: 97px;
−
display: block;
+
bottom: 97px;
−
background: #666;
+
margin-left: -197px;
−
background: rgba(0,0,0,0.5);
+
left: 77%;
−
cursor: pointer;
+
width: 394px;
−
text-indent: -9999px;
+
height: 186px;
−
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 1);
+
background-color: #f6bd32;
−
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 1);
+
position: absolute;
−
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 1);
+
−
box-shadow: inset 0 0 3px rgba(0, 0, 0, 1);
+
−
-webkit-border-radius: 20px;
+
−
-moz-border-radius: 20px;
+
−
border-radius: 20px;
+
 
}
 
}
−
.flex-control-paging li a:hover {
+
 
−
background: #333;
+
.Text_video1 {
−
background: rgba(0, 0, 0, 0.7);
+
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;
 
}
 
}
−
.flex-control-paging li a.flex-active {
+
 
−
background: #000;
+
.Text_video2 {
−
background: rgba(0, 0, 0, 0.9);
+
font-size: 20px;
−
cursor: default;
+
font-family: Calibri;
−
}
+
text-align: justify;
−
.flex-control-thumbs {
+
padding-top: 10px;
−
margin: 5px 0 0;
+
padding-right: 25px;
−
position: static;
+
padding-bottom: 10px;
−
overflow: hidden;
+
padding-left: 25px;
−
}
+
line-height: 26px;
−
.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: 5;
+
−
}
+
−
.flex-control-thumbs .flex-active {
+
−
opacity: 1;
+
−
cursor: default;
+
−
}
+
−
@media screen and (max-width: 860px) {
+
−
.flex-direction-nav .flex-prev {
+
−
opacity: 1;
+
−
left: 10px;
+
−
}
+
−
.flex-direction-nav .flex-next {
+
−
opacity: 1;
+
−
right: 10px;
+
−
}
+
 
}
 
}
  
  
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
−
/*-------------------intro-------------------*/
+
/*-----------------IntroFast-----------------*/
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
  
−
.Container_intro {
+
.Container_IntroFast {
−
width: 1150px;
+
width: 99.8%;
−
height: 590px;
+
left: 0.1%;
−
top: 580px;
+
right: 0.1%;
−
right: 0px;
+
height: 380px;
−
left: 0px;
+
top: 1008px;
 
position: absolute;
 
position: absolute;
−
background-color: rgba(0,0,0,0);
+
background-color: #FFF;
 
}
 
}
−
.Container_intro_title {
+
 
−
width: 1150px;
+
.SubContainer_IntroFast1 {
−
height: 100px;
+
top: 40px;
−
top: 0px;
+
bottom: 40px;
−
right: 0px;
+
margin-left: -150px;
−
left: 0px;
+
left: 18%;
 +
width: 300px;
 +
height: 300px;
 
position: absolute;
 
position: absolute;
−
background-color: rgba(0,0,0,0);
 
 
}
 
}
−
.Container_intro_video {
+
 
−
padding-left: 50px;
+
.SubContainer_IntroFast1 img {
−
padding-top: 50px;
+
width: 300px;
−
padding-bottom: 50px;
+
−
width: 520px;
+
−
height: 390px;
+
−
top: 100px;
+
−
right: 0px;
+
−
left: 0px;
+
−
position: absolute;
+
−
background-color: rgba(0,0,0,0);
+
 
}
 
}
−
.Container_intro_text {
+
 
−
padding-left: 50px;
+
.SubContainer_IntroFast2 {
−
width: 530px;
+
top: 40px;
−
height: 490px;
+
bottom: 40px;
−
top: 100px;
+
margin-left: -150px;
−
right: 0px;
+
left: 50%;
−
left: 570px;
+
width: 300px;
 +
height: 300px;
 
position: absolute;
 
position: absolute;
−
background-color: rgba(0,0,0,0);
 
 
}
 
}
  
 +
.SubContainer_IntroFast2 img {
 +
width: 300px;
 +
}
  
−
h1 {
+
.SubContainer_IntroFast3 {
−
font-size: 1.6em;
+
top: 40px;
 +
bottom: 40px;
 +
margin-left: -150px;
 +
left: 82%;
 +
width: 300px;
 +
height: 300px;
 +
position: absolute;
 
}
 
}
−
h2 {
+
 
−
font-size: 1.4em;
+
.SubContainer_IntroFast3 img {
 +
width: 300px;
 
}
 
}
−
h3 {
+
 
−
font-size: 1.2em;
+
 
 +
/*-------------------------------------------*/
 +
/*-------------------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>
 
</head>
 
</head>
Line 634: Line 732:
 
<div id="Wrapper">
 
<div id="Wrapper">
 
<div id="Wrapper_TopPic">
 
<div id="Wrapper_TopPic">
−
    <div id="Facebook_icon"><a href="https://www.facebook.com/NationalTaiwanUniversityiGEM"></a></div>
+
<div id="NTUXLIHPAO_icon"><img src="https://static.igem.org/mediawiki/2015/c/c7/NTU-Top-NTUXLIHPAO.png"  height="40" /></div>
−
    <div id="iGEM_icon"><a href="https://igem.org/Main_Page"></a></div>
+
<div id="Facebook_icon_pic">
−
        <div id="NTU_icon"><a href="http://www.ntu.edu.tw/english/index.html"></a></div>
+
<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="NTUXLIHPAO_icon"></div>
+
<div id="iGEM_icon_pic">
−
<div class="nav">
+
<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>
−
    <ul>
+
<div id="NTU_icon_pic">
−
        <li><a href="#">Home</a>
+
<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>
−
            <ul class="subs">
+
 
−
              <li><a href="#">Subnav Item</a></li>
+
<div class="Slidemenu">
−
                <li><a href="#">Subnav Item</a></li>
+
<ul>
−
                <li><a href="#">Subnav Item</a></li>
+
<li><div class=width_small><div id=Position_Now><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan">Home</a></div></div>
−
            </ul>
+
</li>
−
        </li>
+
 
−
       
+
<li><div class=width_small span style="cursor:default"><a>Team</a></div>
−
        <li><a href="#">Team</a>
+
<ul class="subs">
−
            <ul class="subs">
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Team">Team</a></li>
−
                <li><a href="#">Subnav Item</a></li>
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Attributions">Attributions</a></li>
−
                <li><a href="#">Subnav Item</a></li>
+
</ul>
−
                <li><a href="#">Subnav Item</a></li>
+
</li>
−
            </ul>
+
−
        </li>
+
<li><div class=width_small span style="cursor:default"><a>Project</a></div>
−
       
+
<ul class="subs">
−
        <li><a href="#">Project</a>
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Description">Description</a></li>
−
            <ul class="subs">
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Design">Design</a></li>
−
                <li><a href="#">Subnav Item</a></li>
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Results">Results</a></li>
−
                <li><a href="#">Subnav Item</a></li>
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Modeling">Modeling</a></li>
−
                <li><a href="#">Subnav Item</a></li>
+
<li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Experiments">Protocols</a></li>
−
            </ul>
+
</ul>
−
        </li>
+
</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="#">Results</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>
−
                <li><a href="#">Modeling</a>
+
</ul>
−
<ul class="subs">
+
</li>
−
                <li><a href="#">Subnav Item</a></li>
+
</ul>
−
                <li><a href="#">Subnav Item</a></li>
+
−
                <li><a href="#">Subnav Item</a></li>
+
−
            </ul>
+
−
        </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>
+
 
</div>
 
</div>
−
    </div>
+
</div>
−
   
+
−
<div class="Container_flexslider">
+
<div id="Container_slider">
−
<div class="flexslider">
+
<div id="pages">
−
<ul class="slides">
+
<ul>
−
<li><img src="slide4.jpg"></li>
+
<style>
−
<li><img src="slide4.jpg"></li>
+
.vertical-align-wrapper {
−
<li><img src="slide4.jpg"></li>
+
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>
 
</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>
 
</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">
−
<div class="Container_intro_title">
+
<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>
 
</div>
 
          
 
          
−
        <div class="Container_intro_video">
+
<div class="Container_intro_text">
−
        <video width="520" height="390" controls>
+
<div class="Text_video1">
−
<source src="#" type="video/ogg">
+
<b>Healthy, thin and keep fit!</b>
−
<source src="#" type="video/mp4">
+
</div>
−
        </div>
+
<div class="Text_video2">
−
       
+
Global obesity problem is raising people's concern, and we aim to provide a new solution! Learn more about our project "Healthin".
−
        <div class="Container_intro_text">
+
</div>
−
       
+
</div>
−
        </div>    
+
</div>
−
    </div>
+
 +
<div class="Container_IntroFast">
 +
<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>
 +
<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>
 +
<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>
 +
</div>
 +
 
 +
<div id="Wrapper_Bottom">
 +
<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>
 +
<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>
 +
<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>
 +
<div id="Bottom_Text">
 +
Maintained by the iGEM team NTU-LIHPAO-Taiwan&nbsp;&nbsp;&nbsp;&nbsp;©2015 NTU-LIHPAO-Taiwan
 +
</div>
 +
</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