Difference between revisions of "Team:NTU-LIHPAO-Taiwan"
(541 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
− | |||
<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 type="text/javascript" charset="utf-8"> | <script type="text/javascript" charset="utf-8"> | ||
− | + | ||
− | + | //-----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 | + | 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: | + | 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: | + | 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: | + | z-index: 9998; |
− | border-bottom-style: | + | border-bottom-style: solid; |
− | border-bottom-color: # | + | border-bottom-color: #fe5838; |
− | border-bottom-width: | + | border-bottom-width: 2px; |
− | z-index: | + | 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 { | |
− | # | + | height: 30px; |
− | + | width: 30px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | height: | + | |
− | width: | + | |
position: absolute; | position: absolute; | ||
left: auto; | left: auto; | ||
− | top: | + | top: 23px; |
− | right: | + | right: 5.5%; |
bottom: auto; | bottom: auto; | ||
z-index: 9999; | z-index: 9999; | ||
} | } | ||
− | # | + | #iGEM_icon_pic { |
− | + | height: 30px; | |
− | height: | + | width: 38px; |
− | width: | + | |
position: absolute; | position: absolute; | ||
left: auto; | left: auto; | ||
− | top: | + | top: 23px; |
right: 1%; | right: 1%; | ||
bottom: auto; | bottom: auto; | ||
z-index: 9999; | z-index: 9999; | ||
} | } | ||
− | # | + | |
− | + | #NTU_icon_pic { | |
− | height: | + | height: 30px; |
− | width: | + | width: 69px; |
position: absolute; | position: absolute; | ||
left: auto; | left: auto; | ||
− | top: | + | top: 23px; |
− | right: | + | right: 9%; |
bottom: auto; | bottom: auto; | ||
z-index: 9999; | z-index: 9999; | ||
Line 142: | Line 171: | ||
#NTUXLIHPAO_icon { | #NTUXLIHPAO_icon { | ||
− | + | height: 40px; | |
− | height: | + | width: 200px; |
− | width: | + | |
position: absolute; | position: absolute; | ||
− | left: | + | left: 3%; |
− | top: | + | top: 18px; |
right: auto; | right: auto; | ||
bottom: auto; | bottom: auto; | ||
Line 153: | Line 181: | ||
} | } | ||
− | + | ||
− | + | ||
− | height: | + | /*-------------------------------------------*/ |
− | width: | + | /*---------------Bottom icons----------------*/ |
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | #NTUschool_logo { | ||
+ | height: 70px; | ||
+ | width: 265px; | ||
position: absolute; | position: absolute; | ||
left: 25%; | left: 25%; | ||
− | top: | + | top: 5px; |
right: auto; | right: auto; | ||
bottom: auto; | bottom: auto; | ||
z-index: 9999; | z-index: 9999; | ||
+ | margin-left: -132px; | ||
} | } | ||
− | # | + | #LIHPAO_logo { |
− | + | height: 70px; | |
− | height: | + | width: 215px; |
− | width: | + | |
position: absolute; | position: absolute; | ||
− | left: | + | left: 75%; |
− | top: | + | top: 5px; |
− | right: | + | right: auto; |
bottom: auto; | bottom: auto; | ||
z-index: 9999; | z-index: 9999; | ||
+ | margin-left: -107px; | ||
} | } | ||
− | # | + | #NTUBST_logo { |
− | + | ||
height: 70px; | height: 70px; | ||
− | width: | + | width: 70px; |
position: absolute; | position: absolute; | ||
− | left: | + | left: 50%; |
− | top: | + | top: 5px; |
− | right: | + | 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----------------*/ | ||
/*-------------------------------------------*/ | /*-------------------------------------------*/ | ||
− | . | + | .Slidemenu { |
z-index: 9999; | z-index: 9999; | ||
− | position: | + | position: absolute; |
− | top: | + | top: 32px; |
− | left: | + | bottom: 0px; |
− | right: | + | 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); 主選單色系選擇*/ | ||
} | } | ||
− | . | + | .Slidemenu ul { |
*zoom:1; | *zoom:1; | ||
list-style:none; | list-style:none; | ||
Line 213: | Line 260: | ||
} | } | ||
− | . | + | .Slidemenu ul:before,.Slidemenu ul:after { |
content:""; | content:""; | ||
display:table; | display:table; | ||
} | } | ||
− | . | + | .Slidemenu ul:after { |
clear:both; | clear:both; | ||
} | } | ||
− | . | + | .Slidemenu a { |
text-decoration:none; | text-decoration:none; | ||
display:block; | display:block; | ||
Line 233: | Line 280: | ||
width: auto; | width: auto; | ||
font-family: "Agency FB"; | font-family: "Agency FB"; | ||
− | font-size: | + | font-size: 1em; |
} | } | ||
− | . | + | .Slidemenu a:hover { |
text-decoration:none; | text-decoration:none; | ||
− | background:rgba(0,0,0,0. | + | background:rgba(0,0,0,0.03); |
text-align: center; | text-align: center; | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
− | . | + | .Slidemenu li ul { |
position:absolute; | position:absolute; | ||
left:0; | left:0; | ||
− | top: | + | top:26px; |
z-index:1; | z-index:1; | ||
} | } | ||
− | . | + | .Slidemenu li ul li { |
overflow:hidden; | overflow:hidden; | ||
− | height: | + | height: 0px; |
+ | margin-bottom: 0px; | ||
} | } | ||
− | . | + | .Slidemenu li ul a { |
border:none; | border:none; | ||
− | |||
-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; | ||
} | } | ||
− | . | + | .Slidemenu li ul a:hover { |
background-color: rgba(240,240,240,1); | background-color: rgba(240,240,240,1); | ||
} | } | ||
− | . | + | .Slidemenu ul > li { |
text-decoration:none; | text-decoration:none; | ||
− | float:left; | + | float: left; |
− | position:relative; | + | position: relative; |
height: 27px; /*--改主要選單高度--*/ | height: 27px; /*--改主要選單高度--*/ | ||
+ | } | ||
+ | |||
+ | .width_small { | ||
width: 100px; /*--改主要選單寬度--*/ | width: 100px; /*--改主要選單寬度--*/ | ||
} | } | ||
− | . | + | .Slidemenu ul > li:hover ul.subs { |
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); /*--改拉出選單顏色--*/ | ||
} | } | ||
− | . | + | .Slidemenu ul > li:hover ul li { |
text-decoration:none; | text-decoration:none; | ||
− | height: | + | height: 26px; /*--改拉出的選單高度--*/ |
width: 150px; /*--改拉出的選單寬度--*/ | width: 150px; /*--改拉出的選單寬度--*/ | ||
text-align: center; | text-align: center; | ||
Line 291: | Line 346: | ||
-o-transition:height 250ms ease-in; | -o-transition:height 250ms ease-in; | ||
transition:height 250ms ease-in; | transition:height 250ms ease-in; | ||
− | |||
− | |||
− | |||
} | } | ||
+ | |||
+ | #Position_Now { | ||
+ | background:rgba(0,0,0,0.03); | ||
+ | } | ||
+ | |||
/*-------------------------------------------*/ | /*-------------------------------------------*/ | ||
− | /*---------------- | + | /*----------------Flexslider-----------------*/ |
/*-------------------------------------------*/ | /*-------------------------------------------*/ | ||
− | + | #Container_slider { | |
position: absolute; | position: absolute; | ||
− | top: | + | top: 30px; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
width: 100%; | width: 100%; | ||
− | + | left: 0%; | |
− | + | right: 0%; | |
− | + | height: 594px; /*594px*/ | |
− | + | background: #FFF; /*75B1EC*/ | |
− | + | overflow: hidden; | |
− | + | z-index: 0; | |
− | + | border: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | #pages { | |
− | + | position: absolute; | |
− | + | top: 0; | |
− | + | left: 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
width: 100%; | width: 100%; | ||
− | + | height: 100%; | |
+ | overflow: hidden; | ||
} | } | ||
− | + | ||
− | + | #pages > ul { | |
− | + | width: 1000000px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | #pages li.page { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
position: absolute; | position: absolute; | ||
− | + | display: inline-block; | |
− | + | left: 0; | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | transition: 0.5s cubic-bezier(.19,.11,.4,1); | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | |
− | + | #pages div.page-content { | |
+ | width: 100%; | ||
+ | height: 100%; | ||
} | } | ||
− | + | ||
− | + | #present-prev-page, #present-next-page { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
position: absolute; | position: absolute; | ||
− | top: | + | top: 0; |
− | + | height: 100%; | |
− | + | width: 3.5rem; | |
− | + | padding: 0 0.5rem; | |
+ | color: grey; | ||
cursor: pointer; | cursor: pointer; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
opacity: 0.7; | opacity: 0.7; | ||
− | + | transition: 0.25s; | |
+ | text-align: center; | ||
} | } | ||
− | + | ||
+ | #present-prev-page:hover, #present-next-page:hover { | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
− | + | ||
− | + | #present-prev-page { | |
− | + | left: 0; | |
} | } | ||
− | + | ||
− | + | #present-next-page { | |
+ | right: 0; | ||
} | } | ||
− | . | + | |
− | + | .page-Slidemenu-icon { | |
− | + | position: relative; | |
− | + | top: 50%; | |
} | } | ||
− | + | ||
− | + | #Flexslider_Pictures1 { | |
− | width: | + | position: relative; |
− | height: | + | width: 88%; |
− | + | height: 100%; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2015/8/8b/NTU-Slider-1.png); | |
− | + | background-size: 100% 100%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | #Flexslider_Pictures2 { | |
− | + | position: relative; | |
− | + | width: 88%; | |
− | + | height: 100%; | |
+ | background-image: url(https://static.igem.org/mediawiki/2015/8/8a/NTU-Slider-2.png); | ||
+ | background-size: 100% 100%; | ||
} | } | ||
− | + | ||
− | + | #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%; | ||
} | } | ||
− | + | ||
− | + | #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%; | ||
} | } | ||
− | + | ||
− | width: | + | |
+ | /*-------------------------------------------*/ | ||
+ | /*-------------------intro-------------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | .Container_intro { | ||
+ | width: 99.8%; | ||
+ | left: 0.1%; | ||
+ | right: 0.1%; | ||
+ | height: 380px; | ||
+ | top: 626px; | ||
position: absolute; | position: absolute; | ||
− | + | background-color: #FFF; | |
− | + | ||
} | } | ||
− | . | + | |
− | + | .Container_intro_video { | |
− | + | top: 32.5px; | |
− | + | bottom: 32.5px; | |
− | + | margin-left: -280px; | |
+ | left: 30%; | ||
+ | width: 560px; | ||
+ | height: 315px; | ||
+ | position: absolute; | ||
} | } | ||
− | . | + | |
− | + | .Container_intro_text { | |
− | + | top: 97px; | |
− | + | bottom: 97px; | |
− | + | margin-left: -197px; | |
− | + | left: 77%; | |
− | + | width: 394px; | |
− | + | height: 186px; | |
− | + | background-color: #f6bd32; | |
− | + | position: absolute; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | |
− | + | .Text_video1 { | |
− | + | 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; | ||
} | } | ||
− | + | ||
− | + | .Text_video2 { | |
− | + | font-size: 20px; | |
− | + | font-family: Calibri; | |
− | + | text-align: justify; | |
− | + | padding-top: 10px; | |
− | + | padding-right: 25px; | |
− | + | padding-bottom: 10px; | |
− | + | padding-left: 25px; | |
− | + | line-height: 26px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | - | + | |
− | - | + | |
− | - | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
/*-------------------------------------------*/ | /*-------------------------------------------*/ | ||
− | /*----------------- | + | /*-----------------IntroFast-----------------*/ |
/*-------------------------------------------*/ | /*-------------------------------------------*/ | ||
− | . | + | .Container_IntroFast { |
− | width: | + | width: 99.8%; |
− | + | left: 0.1%; | |
− | + | right: 0.1%; | |
− | + | height: 380px; | |
− | + | top: 1008px; | |
position: absolute; | position: absolute; | ||
− | background-color: | + | background-color: #FFF; |
} | } | ||
− | . | + | |
− | + | .SubContainer_IntroFast1 { | |
− | + | top: 40px; | |
− | + | bottom: 40px; | |
− | + | margin-left: -150px; | |
− | + | left: 18%; | |
+ | width: 300px; | ||
+ | height: 300px; | ||
position: absolute; | position: absolute; | ||
− | |||
} | } | ||
− | . | + | |
− | + | .SubContainer_IntroFast1 img { | |
− | + | width: 300px; | |
− | + | ||
− | width: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | |
− | + | .SubContainer_IntroFast2 { | |
− | + | top: 40px; | |
− | + | bottom: 40px; | |
− | + | margin-left: -150px; | |
− | + | left: 50%; | |
− | + | width: 300px; | |
+ | height: 300px; | ||
position: absolute; | position: absolute; | ||
− | |||
} | } | ||
+ | .SubContainer_IntroFast2 img { | ||
+ | width: 300px; | ||
+ | } | ||
− | + | .SubContainer_IntroFast3 { | |
− | + | top: 40px; | |
+ | bottom: 40px; | ||
+ | margin-left: -150px; | ||
+ | left: 82%; | ||
+ | width: 300px; | ||
+ | height: 300px; | ||
+ | position: absolute; | ||
} | } | ||
− | + | ||
− | + | .SubContainer_IntroFast3 img { | |
+ | width: 300px; | ||
} | } | ||
− | + | ||
− | font-size: | + | |
+ | /*-------------------------------------------*/ | ||
+ | /*-------------------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 633: | Line 732: | ||
<div id="Wrapper"> | <div id="Wrapper"> | ||
<div id="Wrapper_TopPic"> | <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 class="Slidemenu"> | |
− | + | <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> | |
− | + | ||
− | + | <li><div class=width_small span style="cursor:default"><a>Team</a></div> | |
− | + | <ul class="subs"> | |
− | + | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Team">Team</a></li> | |
− | + | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Attributions">Attributions</a></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><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Safety">Safety</a></div> | |
− | + | </li> | |
− | + | ||
− | + | <li><div class=width_small span style="cursor:default"><a>Society</a></div> | |
− | + | <ul class="subs"> | |
− | + | <li><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan/Practices">Human Practices</a></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> | |
− | + | ||
− | <div | + | <div id="Container_slider"> |
− | <div | + | <div id="pages"> |
− | <ul class=" | + | <ul> |
− | <li>< | + | <style> |
− | <li>< | + | .vertical-align-wrapper { |
− | <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=" | + | <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_text"> | |
− | + | <div class="Text_video1"> | |
− | < | + | <b>Healthy, thin and keep fit!</b> |
− | + | </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> | |
− | + | </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 ©2015 NTU-LIHPAO-Taiwan | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 03:27, 19 September 2015