|
|
(12 intermediate revisions by 4 users not shown) |
Line 1: |
Line 1: |
| {{Team:NCTU_Formosa/navigation}} | | {{Team:NCTU_Formosa/navigation}} |
| + | |
| <html> | | <html> |
| <head> | | <head> |
− |
| + | <style tpe=text/css> |
− | <style type=text/css> | + | |
| /* v1.0 | 20080212 */ | | /* v1.0 | 20080212 */ |
| | | |
Line 10: |
Line 10: |
| a, abbr, acronym, address, big, cite, code, | | a, abbr, acronym, address, big, cite, code, |
| del, dfn, em, font, img, ins, kbd, q, s, samp, | | del, dfn, em, font, img, ins, kbd, q, s, samp, |
− | small, strike, strong, sub, sup, tt, var, | + | small, strike, strong, sub, tt, var, |
| b, u, i, center, | | b, u, i, center, |
| dl, dt, dd, ol, ul, li, | | dl, dt, dd, ol, ul, li, |
Line 55: |
Line 55: |
| border-spacing: 0; | | border-spacing: 0; |
| } | | } |
| + | |
| .p01{ | | .p01{ |
− | background-color:#40E0D0; | + | background-color: #FF3333; |
| position:relative; | | position:relative; |
| height:70vh; | | height:70vh; |
| width:100%; | | width:100%; |
| left:0vw; | | left:0vw; |
− | opacity:0.9; | + | opacity:0.7; |
| } | | } |
| .p02{ | | .p02{ |
Line 69: |
Line 70: |
| } | | } |
| .background1{ | | .background1{ |
− | background-image:url("https://static.igem.org/mediawiki/2015/a/a1/NCTU_Formosa_E.cotector8.png"); | + | background-image:url("https://static.igem.org/mediawiki/2015/8/8d/NCTU_Formosa_E.cotector1.png"); |
| background-repeat:no-repeat; | | background-repeat:no-repeat; |
| background-position:center 13vh; | | background-position:center 13vh; |
Line 75: |
Line 76: |
| height:70vh; | | height:70vh; |
| width:40vw; | | width:40vw; |
− | background-size:60%; | + | background-size:55%; |
| top:0vh; | | top:0vh; |
| left:10vw; | | left:10vw; |
− | opacity:0.9; | + | opacity:1.0; |
| float:left; | | float:left; |
| } | | } |
| + | |
| + | .background2{ |
| + | background-image:url("https://static.igem.org/mediawiki/2015/5/59/Policy_and_Practice.png"); |
| + | background-repeat:no-repeat; |
| + | background-position:center; |
| + | position:relative; |
| + | height:100vh; |
| + | width:80vw; |
| + | margin:0 auto; |
| + | background-size:80%; |
| + | top:0vh; |
| + | left:0vw; |
| + | opacity:0.9; |
| + | } |
| + | |
| .title{ | | .title{ |
| font-family:Arial; | | font-family:Arial; |
Line 106: |
Line 122: |
| padding-bottom:8vh; | | padding-bottom:8vh; |
| } | | } |
| + | .goto{ |
| + | position:relative; |
| + | padding-left:20vw; |
| + | padding-top:3vh; |
| + | float:left; |
| + | z-index:100; |
| + | } |
| + | .goto a{ |
| + | text-decoration:none; |
| + | color:#000; |
| + | } |
| + | .goto1{ |
| + | position:relative; |
| + | padding-left:76vw; |
| + | padding-top:3vh; |
| + | } |
| + | .goto1 a{ |
| + | text-decoration:none; |
| + | color:#000; |
| + | } |
| p{ | | p{ |
| text-indent: 40px; | | text-indent: 40px; |
Line 117: |
Line 153: |
| h1{ | | h1{ |
| font-size:25pt; | | font-size:25pt; |
| + | text-align: center; |
| } | | } |
| h2{ | | h2{ |
| font-size:20pt; | | font-size:20pt; |
− | padding-top:2vh;} | + | padding-top:2vh; |
− | .footlogo{
| + | text-align: center;} |
− | background-image:url(https://static.igem.org/mediawiki/2015/8/8c/Nctu_formosa_footer_logo.png);
| + | .image{ |
− | background-repeat: repeat-x;
| + | mragin:0 auto; |
− | width:100%;
| + | width:auto; |
− | height:15vh;
| + | |
− | background-size:55%;
| + | |
− | z-index:999999999999;
| + | |
− | background-color:#FCFCDE;
| + | |
− | } | + | |
− | | + | |
− | | + | |
− | .topback{ | + | |
− | background-color:#FCFCDE; | + | |
− | position:adsolute;
| + | |
− | top:0vh;
| + | |
− | width:100vw; | + | |
− | height:14vh;
| + | |
− | }
| + | |
− | .photo1{
| + | |
− |
| + | |
− | position:relative;
| + | |
− | height:70vh;
| + | |
− | width:70vw;
| + | |
− | left:6vw;
| + | |
− | background-size:80%;
| + | |
− | background-repeat: no-repeat;
| + | |
− | top:15vh;
| + | |
− | }
| + | |
− | .content1{
| + | |
− | color:#000;
| + | |
− | font-family:Arial;
| + | |
− | font-size:18pt;
| + | |
− | height:40vh;
| + | |
− | width:30vw;
| + | |
− | position:relative;
| + | |
− | left:63vw;
| + | |
− | top:-80vh;
| + | |
| text-align:center; | | text-align:center; |
| + | font-size:11pt; |
| + | padding-top:50px; |
| + | padding-bottom:50px; |
| } | | } |
− | .icon1{ | + | .reference{ |
− | background-image:url("https://static.igem.org/mediawiki/2015/a/a5/NCTU-Formosa-homepage_icon1.png");
| + | font-size:10pt; |
− | position:relative;
| + | position:relative; |
− | width:15vw;
| + | border-top:#999 1px solid; |
− | height:25vh;
| + | text-align:left; |
− | left:63vw;
| + | |
− | background-repeat:no-repeat;
| + | |
− | background-size:50%;
| + | |
− | top:-55vh;
| + | |
− | }
| + | |
− | .iconcon{
| + | |
− | font-family:Arial;
| + | |
− | font-size:26pt;
| + | |
− | position:relative;
| + | |
− | width:15vw;
| + | |
− | height:20vh;
| + | |
− | left:73vw;
| + | |
− | top:-75vh;
| + | |
− | a{text-decoration:none;}
| + | |
− | a:hover{text-decoration:underline;}
| + | |
− | a {color:#000;}
| + | |
− | }
| + | |
− | .photo2{
| + | |
− | position:relative;
| + | |
− | height:70vh;
| + | |
− | width:70vw;
| + | |
− | left:37vw;
| + | |
− | background-size:80%;
| + | |
− | background-repeat: no-repeat;
| + | |
− | top:15vh;
| + | |
− | }
| + | |
− | .content2{
| + | |
− | color:#000;
| + | |
− | font-family:Arial;
| + | |
− | font-size:16pt;
| + | |
− | height:40vh;
| + | |
− | width:30vw;
| + | |
− | position:relative;
| + | |
− | left:6vw;
| + | |
− | top:-30vh;
| + | |
− | text-align:center;
| + | |
| } | | } |
− | .icon2{ | + | .text_pro{ |
− | background-image:url("https://static.igem.org/mediawiki/2015/c/c5/NCTU_formosa_Homepage_icon2.png");
| + | width:20vw; |
− | position:relative;
| + | position:absolute; |
− | width:15vw;
| + | top:10vh; |
− | height:25vh;
| + | left:52vw; |
− | left:6vw;
| + | font-size:1.8em; |
− | background-repeat:no-repeat;
| + | text-align:center; |
− | background-size:50%;
| + | |
− | top:-90vh;
| + | |
− |
| + | |
− | }
| + | |
− | .iconcon2{
| + | |
− | font-family:Arial;
| + | |
− | font-size:20pt;
| + | |
− | position:relative;
| + | |
− | width:20vw;
| + | |
− | height:20vh;
| + | |
− | left:16vw;
| + | |
− | top:-110vh;
| + | |
− | a{text-decoration:none;}
| + | |
− | a:hover{text-decoration:underline;}
| + | |
− | a {color:#000;}
| + | |
− | }
| + | |
− | .photo3{
| + | |
− | background-image:url("https://static.igem.org/mediawiki/2015/a/a4/NCTU_Formosa_hp_newsletter.png");
| + | |
− | position:relative;
| + | |
− | height:70vh;
| + | |
− | width:70vw;
| + | |
− | left:9vw;
| + | |
− | background-size:80%;
| + | |
− | background-repeat: no-repeat;
| + | |
− | top:20vh;
| + | |
− | }
| + | |
− | .content3{ | + | |
− | color:#000;
| + | |
− | font-family:Arial;
| + | |
− | font-size:16pt;
| + | |
− | height:40vh;
| + | |
− | width:30vw;
| + | |
− | position:absolute;
| + | |
− | left:66vw;
| + | |
− | top:190vh;
| + | |
− | background-color:#FCFCDE;
| + | |
| } | | } |
− | .icon3{ | + | .text_exch{ |
− | background-image:url("https://static.igem.org/mediawiki/2015/d/d5/NCTU_formosa_Homepage_icon3.png");
| + | width:22vw; |
− | position:absolute;
| + | position:absolute; |
− | width:15vw;
| + | top:52vh; |
− | height:25vh;
| + | left:-5vw; |
− | left:65vw;
| + | font-size:1.8em; |
− | background-repeat:no-repeat;
| + | text-align:center; |
− | background-size:50%;
| + | |
− | top:170vh;
| + | |
− | }
| + | |
− | .iconcon3{ | + | |
− | font-family:Arial;
| + | |
− | font-size:20pt;
| + | |
− | position:absolute;
| + | |
− | width:20vw;
| + | |
− | height:20vh;
| + | |
− | left:75vw;
| + | |
− | top:175vh;
| + | |
− |
| + | |
− | }
| + | |
− | .page{
| + | |
− | width:100%;
| + | |
− | height:100vh;
| + | |
| } | | } |
− | ul, li {
| + | .text_con{ |
− | margin: 0;
| + | width:20vw; |
− | padding: 0;
| + | position:absolute; |
− | list-style: none;
| + | top:61vh; |
− | }
| + | left:65vw; |
− | .slideshow { | + | font-size:1.8em; |
− | position: relative;
| + | text-align:center; |
− | height: 160px;
| + | |
− | width: 210px;
| + | |
− | float: left;
| + | |
− | margin: 0 10px;
| + | |
− | }
| + | |
− | .slideshow li {
| + | |
− | position: absolute;
| + | |
− | }
| + | |
− | .slideshow a img{
| + | |
− | display: block;
| + | |
− | padding: 0;
| + | |
− | margin: 0 auto;
| + | |
− | border: none;
| + | |
− | width:50vw;
| + | |
− | height:70vh;
| + | |
− | }
| + | |
− | .slideshow li a{
| + | |
− | display: block;
| + | |
− | }
| + | |
− | .slideshowController {
| + | |
− | position: absolute;
| + | |
− | right: 0;
| + | |
− | bottom: 0;
| + | |
− | }
| + | |
− | .slideshowController a {
| + | |
− | background: transparent url(images/arrows.png) no-repeat left top;
| + | |
− | display: block;
| + | |
− | width: 30px;
| + | |
− | height: 30px;
| + | |
− | position: absolute;
| + | |
− | right: 60px;
| + | |
− | bottom: 0;
| + | |
− | z-index: 9999;
| + | |
− | outline: none; /* 去除超連結虛線 */
| + | |
− | }
| + | |
− | .slideshowController .next{ | + | |
− | background-position: -30px 0;
| + | |
− | right: 0;
| + | |
− | }
| + | |
− | .slideshowController .play{
| + | |
− | background-position: -60px 0;
| + | |
− | right: 30px;
| + | |
− | }
| + | |
− | .slideshowController .pause{
| + | |
− | background-position: -90px 0;
| + | |
| } | | } |
| | | |
− |
| |
− | .goto{
| |
− | position:relative;
| |
− | padding-left:20vw;
| |
− | padding-top:3vh;
| |
− | float:left;
| |
− | z-index:100;
| |
− | }
| |
− | .goto a{
| |
− | text-decoration:none;
| |
− | color:#000;
| |
− | }
| |
− | .goto1{
| |
− | position:relative;
| |
− | padding-left:76vw;
| |
− | padding-top:3vh;
| |
− | }
| |
− | .goto1 a{
| |
− | text-decoration:none;
| |
− | color:#000;
| |
− | }
| |
| </style> | | </style> |
− | <script type="text/javascript">
| |
− | $(function(){
| |
− | // 預設圖片淡出淡入的動畫時間
| |
− | var _fadeSpeed = 600;
| |
− |
| |
− | // 把每一個 .slideshow 取出來做處理
| |
− | $('.slideshow').each(function(){
| |
− | // 先取得相關的 ul , li
| |
− | // 並產生控制器
| |
− | var $this = $(this),
| |
− | $ul = $this.find('ul'),
| |
− | $li = $ul.find('li'),
| |
− | $controller = $('<div class="slideshowController"><a href="#"></a><a href="#" class="play"></a><a href="#" class="next"></a></div>').css('opacity', 0),
| |
− | _len = $li.length,
| |
− | _index = 0, timer, _speed = 2000;
| |
− |
| |
− | // 先把第一張圖片之外的都透明度設成 0
| |
− | $li.eq(_index).css('z-index', 2).siblings().css('opacity', 0);
| |
− |
| |
− | // 加入控制器並當滑鼠移入時顯示; 滑鼠移出時隱藏
| |
− | $this.append($controller).hover(function(){
| |
− | $controller.stop().animate({
| |
− | opacity: 1
| |
− | });
| |
− | }, function(){
| |
− | $controller.stop().animate({
| |
− | opacity: 0
| |
− | });
| |
− | });
| |
− |
| |
− | // 當點擊到控制器上面的按鈕時
| |
− | $controller.delegate('a', 'click', function(){
| |
− | // 先取得按鈕的 class
| |
− | var $a = $(this),
| |
− | _className = $a.attr('class');
| |
− |
| |
− | // 如果按的是 play 或是 pause 鈕
| |
− | if(('play pause').indexOf(_className) > -1){
| |
− | // 切換目前按鈕圖案
| |
− | // 並依狀態來啟動或停止計時器
| |
− | $a.toggleClass('pause').hasClass('pause') ? timer = setTimeout(autoClickNext, _fadeSpeed + _speed) : clearTimeout(timer);
| |
− | return false;
| |
− | }
| |
− |
| |
− | // 停止計時器
| |
− | clearTimeout(timer);
| |
− | // 移除 pause 鈕
| |
− | $a.siblings('.pause').removeClass('pause');
| |
− | // 依按鈕功能來決定上下張圖片索引
| |
− | _index = ('next' == _className ? _index + 1 : _index - 1 + _len) % _len;
| |
− | // 切換圖片
| |
− | show();
| |
− |
| |
− | return false;
| |
− | });
| |
− |
| |
− | // 自動播放下一張
| |
− | function autoClickNext() {
| |
− | _index = (_index + 1) % _len;
| |
− | show();
| |
− | timer = setTimeout(autoClickNext, _fadeSpeed + _speed);
| |
− | }
| |
− |
| |
− | // 淡入淡出圖片
| |
− | function show() {
| |
− | $li.eq(_index).animate({
| |
− | opacity: 1,
| |
− | zIndex: 2
| |
− | }, _fadeSpeed).siblings(':visible').animate({
| |
− | opacity: 0,
| |
− | zIndex: 1
| |
− | }, _fadeSpeed);
| |
− | }
| |
− | // 如果有設定預設自動播放的話
| |
− | if($this.hasClass('autoPlay')){
| |
− | $controller.find('.play').click();
| |
− | }
| |
− | });
| |
− | });
| |
− | </script>
| |
| </head> | | </head> |
| <body> | | <body> |
− | <div><!-- #wrapper -->
| |
| <div class="p01"> | | <div class="p01"> |
| <div class="background1"></div> | | <div class="background1"></div> |
− | <div class="title">Human Practice</div> | + | <div class="title">Policy and Practices</div> |
| </div> | | </div> |
| <div class="p02"> | | <div class="p02"> |
− | <div class="logo"></div>
| + | <div class="background2"> |
− |
| + | <div class="text_pro"> |
− | <div class="page" style="background-color:#FCFCDE;" > | + | Be Bald !<br><br> |
− |
| + | BioCamp<br><br> |
− | <div class="photo1">
| + | Questionnaire<br><br> |
− | <div class="slideshow autoPlay">
| + | <a href="https://2015.igem.org/Team:NCTU_Formosa/Promotion" style="font-size:1.2em;">See more</a> |
− | <ul> | + | </div> |
− | <li>
| + | <div class="text_exch"> |
− | <a href="#">
| + | |
− | <img src="https://static.igem.org/mediawiki/2015/a/a4/NCTU_Formosa_hp_newsletter.png" title="" alt="" />
| + | Participate Newsletter<br><br> |
− | </a>
| + | Mini Conference<br><br> |
− | </li>
| + | Skype Meetup<br><br> |
− |
| + | Held 2015 iGEM Asian Conference<br><br> |
− | </ul> | + | <a href="https://2015.igem.org/Team:NCTU_Formosa/Teamexchange" style="font-size:1.2em;">See more</a> |
| + | </div> |
| + | <div class="text_con"> |
| + | Economical: ApexBio<br><br> |
| + | Legal: The institute of technology science<br><br> |
| + | Clinical: Doctors and Patients <br><br> |
| + | <a href="https://2015.igem.org/Team:NCTU_Formosa/ApexBio" style="font-size:1.2em;">See more</a> |
| + | </div> |
| </div> | | </div> |
− | </div>
| |
− | <div class="icon1"></div>
| |
− | <div class="iconcon">About Project</div>
| |
− | <div class="content1">
| |
− | <font color="#AC1F4A";>Experience the side effect of chemotherapy- Bald</font><br>
| |
− | <font color="#AC1F4A";> <a href="https://2015.igem.org/Team:NCTU_Formosa/Bald" style="color:#000;font-size:12pt;">See more!</a></font><br><br>
| |
− | <font color="#AC1F4A";>Took part in Amoy Newsletter </font><br><br>
| |
− | <font color="#AC1F4A";>ApexBio Consultation</font><br>
| |
− | <font color="#AC1F4A";> <a href="https://2015.igem.org/Team:NCTU_Formosa/ApexBio"style="color:#000;font-size:12pt;">See more!</a></font><br><br>
| |
− | <font color="#AC1F4A";>Questionnaire:Public’s Recognition of Cancer and Targeted Therapy</font><br>
| |
− | <font color="#AC1F4A";> <a href="https://2015.igem.org/Team:NCTU_Formosa/Questionnaire"style="color:#000;font-size:12pt;">See more!</a></font>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | <div class="page" style="background-color:#FCFCDE;">
| |
− | <div class="photo2">
| |
− | <div class="slideshow autoPlay">
| |
− | <ul>
| |
− | <li>
| |
− | <a href="#">
| |
− | <img src="https://static.igem.org/mediawiki/2015/4/4e/NCTU_Formosa_HP1.jpg" title="" alt="" />
| |
− | </a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="#">
| |
− | <img src="https://static.igem.org/mediawiki/2015/2/22/NCTU_Formosa_HP7.jpg" title="" alt="" />
| |
− | </a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="#">
| |
− | <img src="https://static.igem.org/mediawiki/2015/8/8d/NCTU_Formosa_HP8.jpg" title="" alt="" />
| |
− | </a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="#">
| |
− | <img src="https://static.igem.org/mediawiki/2015/0/0b/NCTU_Formosa_HP2.jpg" title="" alt="" />
| |
− | </a>
| |
− | </li>
| |
| | | |
− | </ul>
| |
− | </div>
| |
− | </div>
| |
− | <div class="content2"><font color="#AC1F4A";>Educationally</font><br>Give lectures of iGEM and Synthetic Biology in Biocamp <br><br> <font color="#AC1F4A";>Legally</font><br>Inquire of expert about the patent in Science and Tech Law <br><br> <font color="#AC1F4A">Clinically</font><br>Visit Doctor majoring in cancer study and inquire of Recovered Patient <br> </div>
| |
− | <div class="icon2"> </div>
| |
− | <div class="iconcon2">iGEM, Synthetic Biology and Project Promoting><a href="https://2015.igem.org/Team:NCTU_Formosa/Promoting" style="font-size:12pt;"See more!</a></div>
| |
− | </div>
| |
− | <div class="page"style="background-color:#FCFCDE;">
| |
− | <div class="photo1">
| |
− | <div class="slideshow autoPlay">
| |
− | <ul>
| |
− | <li>
| |
− | <a href="#">
| |
− | <img src="https://static.igem.org/mediawiki/2015/0/01/NCTU_Formosa_HP4.jpg" title="" alt="" />
| |
− | </a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="#">
| |
− | <img src="https://static.igem.org/mediawiki/2015/1/1d/NCTU_Formosa_HP3.jpg" title="" alt="" />
| |
− | </a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="#">
| |
− | <img src="https://static.igem.org/mediawiki/2015/d/d2/NCTU_Formosa_HP10.jpg" title="" alt="" />
| |
− | </a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="#">
| |
− | <img src="https://static.igem.org/mediawiki/2015/c/cf/NCTU_Formosa_HP13.jpg" title="" alt="" />
| |
− | </a>
| |
− | </li>
| |
− | <li>
| |
− | <a href="#">
| |
− | <img src="https://static.igem.org/mediawiki/2015/thumb/7/75/NCTU_Formosa_HP14.jpg/800px-NCTU_Formosa_HP14.jpg" title="" alt="" />
| |
− | </a>
| |
− | </li>
| |
| | | |
− | </ul>
| |
− | </div>
| |
− | </div>
| |
− | <div class="icon1"></div>
| |
− | <div class="iconcon">Team exchange<br><a href="https://2015.igem.org/Team:NCTU_Formosa/Teamexchange" style="font-size:12pt;">See more!</a></div>
| |
− | <div class="content1"> <font color="#AC1F4A";>Host iGEM Asia Meetup<br><a href="https://2015.igem.org/Team:NCTU_Formosa/iGEM_Asia_Conference" style="color:#000;font-size:12pt;">See more!</a> </font><br> 27teams 210 participants <br><br> <font color="#AC1F4A";>Skype Meetups </font> <br> KAIT_ Japan, Amoy_ China, TU Delft, and Oxford <br><br> <font color="#AC1F4A";>Host mini conference for iGEM high school team</font> Mingdao & HSNU <br><br> <font color="#AC1F4A";>Conference with iGEMers and Professors</font></div>
| |
| | | |
− |
| |
| | | |
− | </div>
| + | <div class="goto"> |
− | | + | |
− | | + | |
− | </div>
| + | |
− | | + | |
− | <div class="goto" style="background-color:#FCFCDE;"> | + | |
| <a href="https://2015.igem.org/Team:NCTU_Formosa/Project"><img src="https://static.igem.org/mediawiki/2015/3/3c/%E7%AE%AD%E9%A0%AD1.png"; width=50vw;><br><br>Back to project</a> | | <a href="https://2015.igem.org/Team:NCTU_Formosa/Project"><img src="https://static.igem.org/mediawiki/2015/3/3c/%E7%AE%AD%E9%A0%AD1.png"; width=50vw;><br><br>Back to project</a> |
| </div> | | </div> |
− | <div class="goto1" style="background-color:#FCFCDE;"> | + | <div class="goto1"> |
− | <a href="https://2015.igem.org/Team:NCTU_Formosa/Collaborations"><img src="https://static.igem.org/mediawiki/2015/c/c2/%E7%AE%AD%E9%A0%AD2.png"; width=50vw;><br><br>Go to Collaborations</a> | + | <a href="https://2015.igem.org/Team:NCTU_Formosa/Design"><img src="https://static.igem.org/mediawiki/2015/c/c2/%E7%AE%AD%E9%A0%AD2.png"; width=50vw;><br><br>Go to Design</a> |
− | </div>
| + | |
− | | + | |
| </div> | | </div> |
| + | </div> |
| | | |
| </body> | | </body> |
− | </html>{{Team:NCTU_Formosa/footer}} | + | </html> |
| + | {{Team:NCTU_Formosa/footer}} |