|
|
Line 1: |
Line 1: |
| {{Team:NCTU_Formosa/navigation}} | | {{Team:NCTU_Formosa/navigation}} |
| + | |
| <html> | | <html> |
| <head> | | <head> |
− |
| |
| <style type=text/css> | | <style type=text/css> |
| /* v1.0 | 20080212 */ | | /* v1.0 | 20080212 */ |
Line 46: |
Line 46: |
| text-decoration: none; | | text-decoration: none; |
| } | | } |
| + | |
| del { | | del { |
| text-decoration: line-through; | | text-decoration: line-through; |
Line 56: |
Line 57: |
| } | | } |
| .p01{ | | .p01{ |
− | background-color:#4040CC; | + | background-color:#1599EA; |
| position:relative; | | position:relative; |
| height:70vh; | | height:70vh; |
Line 105: |
Line 106: |
| 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 120: |
Line 141: |
| font-size:20pt; | | font-size:20pt; |
| padding-top:2vh;} | | padding-top:2vh;} |
− | .footlogo{
| |
− | background-image:url(https://static.igem.org/mediawiki/2015/8/8c/Nctu_formosa_footer_logo.png);
| |
− | background-repeat: repeat-x;
| |
− | width:100%;
| |
− | height:15vh;
| |
− | background-size:55%;
| |
− | z-index:999999999999;
| |
− | background-color:#FCFCDE;
| |
− | }
| |
| | | |
| + | </style> |
| | | |
− | .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:16pt;
| |
− | height:40vh;
| |
− | width:30vw;
| |
− | position:relative;
| |
− | left:63vw;
| |
− | top:-80vh;
| |
− | text-align:center;
| |
− | }
| |
− | .icon1{
| |
− | background-image:url("https://static.igem.org/mediawiki/2015/a/a5/NCTU-Formosa-homepage_icon1.png");
| |
− | position:relative;
| |
− | width:15vw;
| |
− | height:25vh;
| |
− | left:63vw;
| |
− | background-repeat:no-repeat;
| |
− | background-size:50%;
| |
− | top:-55vh;
| |
− | }
| |
− | .iconcon{
| |
− | font-family:Arial;
| |
− | font-size:24px;
| |
− | 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{
| |
− | background-image:url("https://static.igem.org/mediawiki/2015/c/c5/NCTU_formosa_Homepage_icon2.png");
| |
− | position:relative;
| |
− | width:15vw;
| |
− | height:25vh;
| |
− | left:6vw;
| |
− | background-repeat:no-repeat;
| |
− | 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{
| |
− | background-image:url("https://static.igem.org/mediawiki/2015/d/d5/NCTU_formosa_Homepage_icon3.png");
| |
− | position:absolute;
| |
− | width:15vw;
| |
− | height:25vh;
| |
− | left:65vw;
| |
− | background-repeat:no-repeat;
| |
− | background-size:50%;
| |
− | top:170vh;
| |
− | }
| |
− | .iconcon3{
| |
− | font-family:Arial;
| |
− | font-size:20pt;
| |
− | position:absolute;
| |
− | width:20vw;
| |
− | height:20vh;
| |
− | left:75vw;
| |
− | top:175vh;
| |
− |
| |
− | }
| |
− | .page{
| |
− | width:100vw;
| |
− | height:100vh;
| |
− | }
| |
− | ul, li {
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | list-style: none;
| |
− | }
| |
− | .slideshow {
| |
− | position: relative;
| |
− | 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;
| |
− | }
| |
− |
| |
− | </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">Basic Parts</div> |
| </div> | | </div> |
| <div class="p02"> | | <div class="p02"> |
− | <div class="logo"></div>
| + | <div class="content"></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/a/a4/NCTU_Formosa_hp_newsletter.png" title="" alt="" />
| + | |
− | </a>
| + | |
− | </li>
| + | |
− |
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="icon1"></div>
| + | |
− | <div class="iconcon">About Project</div>
| + | |
− | <div class="content1">
| + | |
− | <font color="#AC1F4A";> <a href="https://2015.igem.org/Team:NCTU_Formosa/Bald" style="color:#AC1F4A;">Experince side effect of chemotherapy- Bald</a>
| + | |
− | </font><br><br>
| + | |
− | <font color="#AC1F4A";>Took part in Amoy Newsletter </font><br><br>
| + | |
− | <font color="#AC1F4A";> <a href="https://2015.igem.org/Team:NCTU_Formosa/ApexBio"style="color:#AC1F4A;">ApexBio Consultation</a></font><br><br>
| + | |
− | </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";>Edcationaly</font><br>Lecture iGEM and Sythentic Biology in Biocamp <br><br> <font color="#AC1F4A";>Legally</font><br>Inqure Science and Tech Law expert with patent <br><br> <font color="#AC1F4A">Clinically</font><br>Visit Cancer Doctor and Recovered Patient <br> </div>
| |
− | <div class="icon2"> </div>
| |
− | <div class="iconcon2"> <a href="https://2015.igem.org/Team:NCTU_Formosa/Promoting">iGEM, Sythentic Biology and Project Promoting </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 class="goto"> |
− | </div>
| + | <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="icon1"></div>
| + | <div class="goto1"> |
− | <div class="iconcon"><a href="https://2015.igem.org/Team:NCTU_Formosa/Teamexchange">Team exchange</a></div>
| + | <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> |
− | <div class="content1"> <font color="#AC1F4A";><a href="https://2015.igem.org/Team:NCTU_Formosa/iGEM_Asia_Conference" style="color:#AC1F4A;">Host iGEM Asia Meetup</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> |
− |
| |
− |
| |
| </div> | | </div> |
− |
| |
− | </div>
| |
− |
| |
| </body> | | </body> |
| </html> | | </html> |
| {{Team:NCTU_Formosa/footer}} | | {{Team:NCTU_Formosa/footer}} |