Difference between revisions of "Team:NTU-LIHPAO-Taiwan/Practices"
(Prototype team page) |
|||
(31 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <head> | ||
− | < | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> |
− | < | + | <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> | |
− | + | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | <title>NTU-LIHPAO-Taiwan</title> | ||
+ | <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 { | ||
+ | background-color: #FFF; | ||
+ | } | ||
+ | body,td,th { | ||
+ | font-size: 14px; | ||
+ | font-family: Calibri, "Arial Narrow", "Agency FB", "Raavi"; | ||
+ | } | ||
+ | |||
+ | #Wrapper { | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | background-color: #FFF; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | width: 90%; | ||
+ | height: auto; | ||
+ | top: 0px; | ||
+ | left: 5%; | ||
+ | right: 5%; | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | #Wrapper_Left { | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | background-color: #F0F0F0; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | width: 5%; | ||
+ | height: 100%; | ||
+ | top: 0px; | ||
+ | left: 0%; | ||
+ | right: auto; | ||
+ | position: fixed; | ||
+ | bottom: 0px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | #Wrapper_Right { | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | background-color: #F0F0F0; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | width: 5%; | ||
+ | height: 100%; | ||
+ | top: 0px; | ||
+ | left: auto; | ||
+ | right: 0%; | ||
+ | position: fixed; | ||
+ | bottom: 0px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | #Wrapper_TopPic { | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | background-color: #FFF; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | width: 100%; | ||
+ | height: 58px; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*-----------------Top icons-----------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | #Facebook_icon_pic { | ||
+ | height: 30px; | ||
+ | width: 30px; | ||
+ | position: absolute; | ||
+ | left: auto; | ||
+ | top: 23px; | ||
+ | right: 5.5%; | ||
+ | bottom: auto; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | #iGEM_icon_pic { | ||
+ | height: 30px; | ||
+ | width: 38px; | ||
+ | position: absolute; | ||
+ | left: auto; | ||
+ | top: 23px; | ||
+ | right: 1%; | ||
+ | bottom: auto; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | #NTU_icon_pic { | ||
+ | height: 30px; | ||
+ | width: 69px; | ||
+ | position: absolute; | ||
+ | left: auto; | ||
+ | top: 23px; | ||
+ | right: 9%; | ||
+ | bottom: auto; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | #NTUXLIHPAO_icon { | ||
+ | height: 40px; | ||
+ | width: 200px; | ||
+ | position: absolute; | ||
+ | left: 3%; | ||
+ | top: 18px; | ||
+ | right: auto; | ||
+ | bottom: auto; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*-----------------Slide Menu----------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | .Slidemenu { | ||
+ | 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); 主選單色系選擇*/ | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul { | ||
+ | *zoom:1; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | /*background:rgba(100%,100%,100%,0); 主選單色系選擇*/ | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul:before,.Slidemenu ul:after { | ||
+ | content:""; | ||
+ | display:table; | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul:after { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | .Slidemenu a { | ||
+ | text-decoration:none; | ||
+ | display:block; | ||
+ | padding:4px 4px; | ||
+ | line-height:1em; | ||
+ | color:#000; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | height: auto; | ||
+ | width: auto; | ||
+ | font-family: "Agency FB"; | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | |||
+ | .Slidemenu a:hover { | ||
+ | text-decoration:none; | ||
+ | background:rgba(0,0,0,0.03); | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .Slidemenu li ul { | ||
+ | position:absolute; | ||
+ | left:0; | ||
+ | top:26px; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | .Slidemenu li ul li { | ||
+ | overflow:hidden; | ||
+ | height: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | .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; | ||
+ | } | ||
+ | |||
+ | .Slidemenu li ul a:hover { | ||
+ | background-color: rgba(240,240,240,1); | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul > li { | ||
+ | text-decoration:none; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | height: 27px; /*--改主要選單高度--*/ | ||
+ | } | ||
+ | |||
+ | .width_small { | ||
+ | width: 100px; /*--改主要選單寬度--*/ | ||
+ | } | ||
+ | |||
+ | .Slidemenu ul > li:hover ul.subs { | ||
+ | height: auto; | ||
+ | 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; | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | #Position_Now { | ||
+ | background:rgba(0,0,0,0.03); | ||
+ | } | ||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*------------------Content------------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | #Content * { | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | #Content_Container { | ||
+ | position: fixed; | ||
+ | width: 17.8%; | ||
+ | height: 100%; | ||
+ | left: 5.2%; | ||
+ | right: auto; | ||
+ | background: #f7fbff; | ||
+ | z-index: 5; | ||
+ | } | ||
+ | |||
+ | #Content { | ||
+ | position: absolute; | ||
+ | top: 60px; | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | transition: 0.5s; | ||
+ | font-size: 0.8rem; | ||
+ | font-family: Calibri; | ||
+ | } | ||
+ | |||
+ | #Content-title { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | top: 0.5rem; | ||
+ | font-size: 1.5rem; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #Content ul { | ||
+ | margin: 0.5rem 0rem 0.5rem; | ||
+ | } | ||
+ | |||
+ | .main-Content { | ||
+ | position: absolute; | ||
+ | top: 5rem; | ||
+ | left: 10%; | ||
+ | width: 90%; | ||
+ | } | ||
+ | |||
+ | .main-Content #title { | ||
+ | color: #ABCDEF; | ||
+ | } | ||
+ | |||
+ | .main-Content > li { | ||
+ | cursor: pointer; | ||
+ | color: #369CF5; | ||
+ | font-size: 25px; | ||
+ | padding-top: 5px; | ||
+ | padding-bottom: 5px; | ||
+ | line-height: 30px; | ||
+ | } | ||
+ | |||
+ | .sub-Content { | ||
+ | font-size: 18px; | ||
+ | overflow-y: auto; | ||
+ | transition: 0.5s; | ||
+ | width: 85%; | ||
+ | left: 15%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .sub-Content > li { | ||
+ | padding-top: 10px; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .sub-Content > li a{ | ||
+ | display: block; | ||
+ | color: #0791DB; | ||
+ | text-decoration: none; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | |||
+ | .sub-Content > li a:hover { | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | |||
+ | #Healthin_Logo_Content { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | #Healthin_Logo { | ||
+ | top: 55px; | ||
+ | padding-left: 3%; | ||
+ | padding-right: 3%; | ||
+ | position: absolute; | ||
+ | width: 94%; | ||
+ | height: 94%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*---------------Introduction----------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | .Container_Bottom1 { | ||
+ | height: 70px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .Container_Bottom2 { | ||
+ | height: 70px; | ||
+ | width: 100%; | ||
+ | padding-top: 10px; | ||
+ | border-top-style: solid; | ||
+ | border-top-color: #079235; | ||
+ | border-top-width: 3px; | ||
+ | } | ||
+ | |||
+ | .Intro_Picture { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | background-color: #FFF; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #NTUschool_logo { | ||
+ | background-color: #FFF; | ||
+ | padding-left: 9.6%; | ||
+ | padding-right: 60.4%; | ||
+ | position: absolute; | ||
+ | width: 30%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #LIHPAO_logo { | ||
+ | background-color: #FFF; | ||
+ | padding-left: 66.4%; | ||
+ | padding-right: 9.6%; | ||
+ | position: absolute; | ||
+ | width: 24%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #NTUBST_logo { | ||
+ | background-color: #FFF; | ||
+ | padding-left: 49.2%; | ||
+ | padding-right: 43.2%; | ||
+ | position: absolute; | ||
+ | width: 7.6%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .Text_Sponsor { | ||
+ | color: #767676; | ||
+ | font-size: 15px; | ||
+ | font-family: Calibri; | ||
+ | text-align: center; | ||
+ | line-height: 20px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*---------------Article Picture-------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | .Container_Article_Picture1 { | ||
+ | height: 430px; | ||
+ | width: 100%; | ||
+ | padding-top: 25px; | ||
+ | padding-bottom: 25px; | ||
+ | } | ||
+ | |||
+ | .Article_Picture1 { | ||
+ | width: 550px; | ||
+ | height: auto; | ||
+ | left: 50%; | ||
+ | right: auto; | ||
+ | background-color: #FFF; | ||
+ | margin: 0 0 0 -275px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .Article_Spacing1 { | ||
+ | width: 100%; | ||
+ | height: 5px; | ||
+ | } | ||
+ | |||
+ | .Article_PictureText1 { | ||
+ | width: 500px; | ||
+ | height: auto; | ||
+ | padding-left: 25px; | ||
+ | padding-right: 25px; | ||
+ | border-top-width: 2px; | ||
+ | border-top-style: dashed; | ||
+ | border-top-color: #fe5838; | ||
+ | } | ||
+ | |||
+ | .Container_Article_Picture2 { | ||
+ | height: 445px; | ||
+ | width: 100%; | ||
+ | padding-top: 25px; | ||
+ | padding-bottom: 25px; | ||
+ | } | ||
+ | |||
+ | .Article_Picture2 { | ||
+ | width: 300px; | ||
+ | height: auto; | ||
+ | left: 50%; | ||
+ | right: auto; | ||
+ | background-color: #FFF; | ||
+ | margin: 0 0 0 -150px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .Article_Spacing2 { | ||
+ | width: 100%; | ||
+ | height: 5px; | ||
+ | } | ||
+ | |||
+ | .Article_PictureText2 { | ||
+ | width: 250px; | ||
+ | height: auto; | ||
+ | padding-left: 25px; | ||
+ | padding-right: 25px; | ||
+ | border-top-width: 2px; | ||
+ | border-top-style: dashed; | ||
+ | border-top-color: #fe5838; | ||
+ | } | ||
+ | |||
+ | .Text_Picture { | ||
+ | font-size: 18px; | ||
+ | font-family: Calibri; | ||
+ | text-align: justify; | ||
+ | line-height: 26px; | ||
+ | color: #08923a; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*-----------------Articles------------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | #Articles { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | top: -10px; | ||
+ | position: absolute; | ||
+ | background-color: #FFF; | ||
+ | z-index: 1; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | .ContentBox { | ||
+ | width: 76%; | ||
+ | height: auto; | ||
+ | left: 22%; | ||
+ | right: 2%; | ||
+ | position: absolute; | ||
+ | background-color: #FFF; | ||
+ | } | ||
+ | |||
+ | .Text1 { | ||
+ | font-size: 28px; | ||
+ | font-family: Calibri; | ||
+ | left: 20px; | ||
+ | right: 20px; | ||
+ | padding-top: 80px; | ||
+ | padding-right: 20px; | ||
+ | padding-bottom: 10px; | ||
+ | padding-left: 20px; | ||
+ | border-bottom-width: 2px; | ||
+ | border-bottom-style: dashed; | ||
+ | border-bottom-color: #fe5838; | ||
+ | color: #c00000; | ||
+ | } | ||
+ | |||
+ | .Text2 { | ||
+ | font-size: 24px; | ||
+ | font-family: Calibri; | ||
+ | padding-top: 30px; | ||
+ | padding-right: 50px; | ||
+ | padding-bottom: 10px; | ||
+ | padding-left: 50px; | ||
+ | color: #00b050; | ||
+ | } | ||
+ | |||
+ | .Text3 { | ||
+ | font-size: 20px; | ||
+ | font-family: Calibri; | ||
+ | text-align: justify; | ||
+ | padding-top: 10px; | ||
+ | padding-right: 80px; | ||
+ | padding-bottom: 10px; | ||
+ | padding-left: 80px; | ||
+ | line-height: 26px; | ||
+ | } | ||
+ | |||
+ | .Text4 { | ||
+ | font-size: 20px; | ||
+ | font-family: Calibri; | ||
+ | text-align: justify; | ||
+ | padding-top: 10px; | ||
+ | padding-right: 110px; | ||
+ | padding-bottom: 10px; | ||
+ | padding-left: 110px; | ||
+ | line-height: 26px; | ||
+ | } | ||
+ | |||
+ | .Text_TitleUnderline { | ||
+ | font-size: 22px; | ||
+ | font-family: Calibri; | ||
+ | text-align: justify; | ||
+ | padding-top: 10px; | ||
+ | padding-bottom: 0px; | ||
+ | line-height: 26px; | ||
+ | color: #0070c0; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | .Text_italic { | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | ol.part1 { | ||
+ | list-style-type: none; | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | |||
+ | ol.part2 { | ||
+ | list-style-type: decimal; | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | |||
+ | ol.part2 li { | ||
+ | padding-top: 10px; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | ol.part3 { | ||
+ | list-style-type: lower-alpha; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*-------------------------------------------*/ | ||
+ | /*-------------------Media-------------------*/ | ||
+ | /*-------------------------------------------*/ | ||
+ | |||
+ | @media screen and (min-width: 0px) and (max-width: 1200px) { | ||
+ | |||
+ | #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); 主選單色系選擇*/ | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (min-width: 901px) and (max-width: 1050px) { | ||
+ | |||
+ | .Container_Bottom2 { | ||
+ | height: 60px; | ||
+ | width: 100%; | ||
+ | padding-top: 10px; | ||
+ | border-top-style: solid; | ||
+ | border-top-color: #079235; | ||
+ | border-top-width: 3px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (min-width: 0px) and (max-width: 900px) { | ||
+ | |||
+ | .Container_Bottom2 { | ||
+ | height: 50px; | ||
+ | width: 100%; | ||
+ | padding-top: 10px; | ||
+ | border-top-style: solid; | ||
+ | border-top-color: #079235; | ||
+ | border-top-width: 3px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | |||
+ | <!----------------------------------------> | ||
+ | <!----------------------------------------> | ||
+ | <!------------------BODY------------------> | ||
+ | <!----------------------------------------> | ||
+ | <!----------------------------------------> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | <div id="Wrapper_Left"></div> | ||
+ | <div id="Wrapper_Right"></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 class="Slidemenu"> | ||
+ | <ul> | ||
+ | <li><div class=width_small><a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan">Home</a></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"><div id=Position_Now><a>Society</a></div></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 id="Content_Container"> | ||
+ | <div id="Healthin_Logo_Content"><div id="Healthin_Logo"><img src="https://static.igem.org/mediawiki/2015/6/69/Healthin_White.png" style="max-width: 100%; height: auto"/></div></div> | ||
+ | <div id="Content"> | ||
+ | <ul class="main-Content"> | ||
+ | <li> | ||
+ | <span class="title">Human Practices</span> | ||
+ | <ul class="sub-Content"> | ||
+ | <li><a href="#First1">Dig out</a></li> | ||
+ | <li><a href="#First2">Publicize</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <span class="title">Project Cooperated With Lihpao</span> | ||
+ | <ul class="sub-Content"> | ||
+ | <li><a href="#Second1">Identity Identification and Paternity Testing by MHC</a></li> | ||
+ | <li><a href="#Second2">Preliminary Screening of the Compatibility of Organ Transplantation by MHC</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | (function() { | ||
+ | var main_Contents = document.querySelectorAll("ul.main-Content>li"); | ||
+ | function ContentOpen(index) { | ||
+ | for (var i = 0; i < main_Contents.length; i++) { | ||
+ | var sub_Content = main_Contents[i].querySelector(".sub-Content"); | ||
+ | if (i === index) { | ||
+ | sub_Content.style.height = '13rem'; | ||
+ | } else { | ||
+ | sub_Content.style.height = '0'; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | function makeContentOpenFunc(index) { | ||
+ | return function() { | ||
+ | ContentOpen(index); | ||
+ | }; | ||
+ | } | ||
+ | for (var i = 0; i < main_Contents.length; i++) { | ||
+ | main_Contents[i].onclick = makeContentOpenFunc(i); | ||
+ | } | ||
+ | ContentOpen(0); | ||
+ | })(); | ||
+ | </script> | ||
+ | |||
+ | <div id="Articles"> | ||
+ | <div class="ContentBox"> | ||
+ | <div class="ContentHolder"> | ||
+ | <div class="Text1">Human Practices</div> | ||
+ | |||
+ | <div class="Text2" id="First1">Dig out</div> | ||
+ | <div class="Text3"> | ||
+ | At the very beginning of our project, we set our minds on solving real life problems in modern society. It took some time, but we finally reached a consensus. We all agreed that everyone wants to live better, especially healthier lives. However, it seems strange that practically everyone does harm to their own health. So, what is the real problem? What's the appeal in harming oneself? Or is the public simply underinformed? We had absolutely no idea which was true, so we performed a random street survey. | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | This survey is quite simple and has only two purposes: to find out in what aspects of health we can help to improve and if possible, to give out some information about health. After standing on street for several days, we collected over 100 questionnaires and finally had a result. | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="Text4"> | ||
+ | <a href="https://static.igem.org/mediawiki/2015/9/91/NTU_Questionnaire1.jpg"><b>[Click on here to see the Questionnaire (part 1)]</b></a> | ||
+ | </div> | ||
+ | <div class="Text4"> | ||
+ | <a href="https://static.igem.org/mediawiki/2015/c/c7/NTU_Questionnaire2.jpg"><b>[Click on here to see the Questionnaire (part 2)]</b></a> | ||
+ | </div> | ||
+ | <div class="Text4"> | ||
+ | <a href="https://static.igem.org/mediawiki/2015/8/8d/NTU_Questionnaire3.jpg"><b>[Click on here to see the Questionnaire (part 3)]</b></a> | ||
+ | </div> | ||
+ | <div class="Text4"> | ||
+ | <a href="https://static.igem.org/mediawiki/2015/3/38/NTU_Questionnaire4.jpg"><b>[Click on here to see the Questionnaire (part 4)]</b></a> | ||
+ | </div> | ||
+ | |||
+ | <div class="Text3"> | ||
+ | In our design, we ask our subjects to sequence the importance and feasibility of the four aspects of health, namely proper diets, regular workouts, positive minds, and well habits. Then, after providing specific information about these aspects, ask again to sequence their importance and feasibility. One can imagine, that most people treasure regular workouts and well habits the most, and that they think to have proper diets is the most feasible thing among them. | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | However, it turns out quite astonishing that, after providing further information, like how many fruits and meat you should take every day, proper diets’ importance goes up, and feasibility down. Furthermore, by looking into the feedbacks about proper diets, one can find out that practically everyone’s meat and oil intake is too much, and vegetable, fruits, and dairy products too less. Hence, we saw a problem that, people are not aware of how much, or how less, they should take, therefore not able to eat in balance, not to tell to control their appetites. | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="Text4"> | ||
+ | <a href="https://static.igem.org/mediawiki/2015/7/72/NTU_Survey_Result1.jpg"><b>[Click on here to see the Survey Result (part 1)]</b></a> | ||
+ | </div> | ||
+ | <div class="Text4"> | ||
+ | <a href="https://static.igem.org/mediawiki/2015/b/bf/NTU_Survey_Result2.jpg"><b>[Click on here to see the Survey Result (part 2)]</b></a> | ||
+ | </div> | ||
+ | <div class="Text4"> | ||
+ | <a href="https://static.igem.org/mediawiki/2015/1/1e/NTU_Survey_Result3.jpg"><b>[Click on here to see the Survey Result (part 3)]</b></a> | ||
+ | </div> | ||
+ | <div class="Text4"> | ||
+ | <a href="https://static.igem.org/mediawiki/2015/1/1b/NTU_Survey_Result4.jpg"><b>[Click on here to see the Survey Result (part 4)]</b></a> | ||
+ | </div> | ||
+ | |||
+ | <div class="Text3"> | ||
+ | Therefore, after a few debates, we set our project this year on helping obese patients, especially those who suffer in morbid obesity and cannot control their own appetite. <b>To understand how we apply all these problems to our project design, and what the overall concept of our project is, please go back to our <a href="https://2015.igem.org/Team:NTU-LIHPAO-Taiwan">[Home]</a> and watch the introducing video for an overview.</b> Also, we realized that most people are ignorant of right things to do to keep in health, which pose a health risk to themselves. Thus, we planed to publicize a better lifestyle. | ||
+ | </div> | ||
+ | |||
+ | <div class="Text2" id="First2">Publicize</div> | ||
+ | <div class="Text3"> | ||
+ | By feeding information of health on our Facebook fan page, we successfully promote the right things to do to keep in health, and thus, we grow quite an amount of people concerning health issue on our fan page. But we were not satisfied through this, hence, we held an event to further promote a healthful lifestyle, face to face. | ||
+ | It was a fantastic event, and we gained a lot of feedbacks, like: 63% said they gained some knowledge through this event, over 36% said they gained a lot; and there was one saying he cannot help but going back home instantly and share the knowledge he gained today to his family and friends! We’re all glad to get those feedbacks and happy that we have done something, though it is small, to impact and educate people. | ||
+ | </div> | ||
+ | <div class="Container_Article_Picture1"> | ||
+ | <div class="Article_Picture1"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/3a/NTU_Lecture.jpg" width="550px"/> | ||
+ | <div class="Article_Spacing1"></div> | ||
+ | <div class="Article_PictureText1"><div class="Text_Picture">[Fig.1-2] Lecture gave to student</div></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="Text1">Project Cooperated With Lihpao</div> | ||
+ | <div class="Text2" id="Second1">Identity Identification and Paternity Testing by Major Histocompatibility Complex (MHC)</div> | ||
+ | <div class="Text3"> | ||
+ | In human being, the major histocompatibility complex (MHC) is also called the human leukocyte antigen (HLA), which resides on chromosome 6 and is composed of 3.6 million of base pairs. It is also known as the region with highest gene density and with most abundant diversity in human chromosome. Therefore, it is called the chemistry fingerprints in human being. With the features mentioned above, we try to pick out several SNPs from HLA and consider the chromosomal crossover and mutation in order to construct an algorithm for identity and paternity testing. | ||
+ | </div> | ||
+ | <div class="Container_Article_Picture2"> | ||
+ | <div class="Article_Picture2"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/e/e8/NTU_human_chromosome.png" width="300px"/> | ||
+ | <div class="Article_Spacing2"></div> | ||
+ | <div class="Article_PictureText2"><div class="Text_Picture">[Fig.2-1] Human chromosome</div></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="Text2" id="Second2">Preliminary Screening of the Compatibility of Organ Transplantation by MHC</div> | ||
+ | <div class="Text3"> | ||
+ | Since organ transplantation has become more and more crucial in medical treatments, in order to provide fast and low-antibody-needed screening, we hope to reach the goal of excluding donors with high differences by gene sequence screening before conducting antibody detection. This can not only reduce the samples, but also save a lot of time and money. | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | Possible ways in considered: | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | (1) Reverse transcription from mRNA to cDNA to predict peptide sequence, though not totally correct, it still can cross out some incompatible samples. | ||
+ | </div> | ||
+ | <div class="Text3"> | ||
+ | (2) By predicting the peptide sequence directly from DNA sequence, we can also reach the goal in (1). This is more complicated, for we have to know the cutting site of intron and exon. However, we can strike out the step of reverse transcription from mRNA. | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="Container_Bottom1"></div> | ||
+ | <div class="Container_Bottom2"> | ||
+ | <div class="Intro_Picture"> | ||
+ | <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" style="max-width: 100%; max-height: 70px"/></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" style="max-width: 100%; max-height: 70px"/></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" style="max-width: 100%; max-height: 70px"/></a></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="Text_Sponsor"> | ||
+ | Maintained by the iGEM team NTU-LIHPAO-Taiwan ©2015 NTU-LIHPAO-Taiwan | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | $('.sub-Content>li a').click(function() { | ||
+ | console.log(this.hash); | ||
+ | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { | ||
+ | var target = $('[id="'+this.hash.substring(1)+'"]'); | ||
+ | target = target.length ? target : $('[name="' + this.hash.slice(1) +'"]'); | ||
+ | if (target.length) { | ||
+ | $('html,body').animate({ | ||
+ | scrollTop: target.offset().top-55 | ||
+ | }, 700); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $('.title').click(function() { | ||
+ | console.log(this.hash); | ||
+ | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { | ||
+ | var target = $('[id="'+this.hash.substring(1)+'"]'); | ||
+ | target = target.length ? target : $('[name="' + this.hash.slice(1) +'"]'); | ||
+ | if (target.length) { | ||
+ | $('html,body').animate({ | ||
+ | scrollTop: target.offset().top-55 | ||
+ | }, 700); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $('.Text3 > a').click(function() { | ||
+ | console.log(this.hash); | ||
+ | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { | ||
+ | var target = $('[id="'+this.hash.substring(1)+'"]'); | ||
+ | target = target.length ? target : $('[name="' + this.hash.slice(1) +'"]'); | ||
+ | if (target.length) { | ||
+ | $('html,body').animate({ | ||
+ | scrollTop: target.offset().top-55 | ||
+ | }, 700); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
</div> | </div> | ||
+ | |||
+ | </body> | ||
</html> | </html> |
Latest revision as of 19:13, 18 September 2015
- Human Practices
- Project Cooperated With Lihpao
Human Practices
Dig out
At the very beginning of our project, we set our minds on solving real life problems in modern society. It took some time, but we finally reached a consensus. We all agreed that everyone wants to live better, especially healthier lives. However, it seems strange that practically everyone does harm to their own health. So, what is the real problem? What's the appeal in harming oneself? Or is the public simply underinformed? We had absolutely no idea which was true, so we performed a random street survey.
This survey is quite simple and has only two purposes: to find out in what aspects of health we can help to improve and if possible, to give out some information about health. After standing on street for several days, we collected over 100 questionnaires and finally had a result.
In our design, we ask our subjects to sequence the importance and feasibility of the four aspects of health, namely proper diets, regular workouts, positive minds, and well habits. Then, after providing specific information about these aspects, ask again to sequence their importance and feasibility. One can imagine, that most people treasure regular workouts and well habits the most, and that they think to have proper diets is the most feasible thing among them.
However, it turns out quite astonishing that, after providing further information, like how many fruits and meat you should take every day, proper diets’ importance goes up, and feasibility down. Furthermore, by looking into the feedbacks about proper diets, one can find out that practically everyone’s meat and oil intake is too much, and vegetable, fruits, and dairy products too less. Hence, we saw a problem that, people are not aware of how much, or how less, they should take, therefore not able to eat in balance, not to tell to control their appetites.
Therefore, after a few debates, we set our project this year on helping obese patients, especially those who suffer in morbid obesity and cannot control their own appetite. To understand how we apply all these problems to our project design, and what the overall concept of our project is, please go back to our [Home] and watch the introducing video for an overview. Also, we realized that most people are ignorant of right things to do to keep in health, which pose a health risk to themselves. Thus, we planed to publicize a better lifestyle.
Publicize
By feeding information of health on our Facebook fan page, we successfully promote the right things to do to keep in health, and thus, we grow quite an amount of people concerning health issue on our fan page. But we were not satisfied through this, hence, we held an event to further promote a healthful lifestyle, face to face.
It was a fantastic event, and we gained a lot of feedbacks, like: 63% said they gained some knowledge through this event, over 36% said they gained a lot; and there was one saying he cannot help but going back home instantly and share the knowledge he gained today to his family and friends! We’re all glad to get those feedbacks and happy that we have done something, though it is small, to impact and educate people.
[Fig.1-2] Lecture gave to student
Project Cooperated With Lihpao
Identity Identification and Paternity Testing by Major Histocompatibility Complex (MHC)
In human being, the major histocompatibility complex (MHC) is also called the human leukocyte antigen (HLA), which resides on chromosome 6 and is composed of 3.6 million of base pairs. It is also known as the region with highest gene density and with most abundant diversity in human chromosome. Therefore, it is called the chemistry fingerprints in human being. With the features mentioned above, we try to pick out several SNPs from HLA and consider the chromosomal crossover and mutation in order to construct an algorithm for identity and paternity testing.
[Fig.2-1] Human chromosome
Preliminary Screening of the Compatibility of Organ Transplantation by MHC
Since organ transplantation has become more and more crucial in medical treatments, in order to provide fast and low-antibody-needed screening, we hope to reach the goal of excluding donors with high differences by gene sequence screening before conducting antibody detection. This can not only reduce the samples, but also save a lot of time and money.
Possible ways in considered:
(1) Reverse transcription from mRNA to cDNA to predict peptide sequence, though not totally correct, it still can cross out some incompatible samples.
(2) By predicting the peptide sequence directly from DNA sequence, we can also reach the goal in (1). This is more complicated, for we have to know the cutting site of intron and exon. However, we can strike out the step of reverse transcription from mRNA.
Maintained by the iGEM team NTU-LIHPAO-Taiwan ©2015 NTU-LIHPAO-Taiwan