Difference between revisions of "Team:NYMU-Taipei"

Line 3: Line 3:
  
 
<html>
 
<html>
 +
 +
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 +
<script>
 +
 +
var main = function(){
 +
 
 +
    $('.article').click(function(){
 +
    $('.article').removeClass('current');
 +
        $('.description').hide();
 +
        $(this).addClass('current');
 +
        $(this).children('.description').show();
 +
    });
 +
 +
 +
    $(document).keypress(function(event)
 +
    {
 +
        if(event.which===111)
 +
        {
 +
            $('.current').children('.description').toggle();
 +
        }
 +
        else if(event.which===110)
 +
        {
 +
            var currentArticle = $('.current');
 +
            var nextArticle = currentArticle.next();
 +
          if(nextArticle.length===0)nextArticle =  $('.current').first();
 +
 +
            currentArticle.removeClass('current');
 +
            nextArticle.addClass('current');
 +
           
 +
           
 +
        }
 +
    }
 +
    );
 +
 +
    $('.dropdown-toggle').click(function() {
 +
    $('.dropdown-menu').toggle();
 +
    });
 +
 +
    $('.dropdown-toggleo').click(function() {
 +
    //$('.dropdown-menu').toggle();
 +
    $('.OVERVIEW').toggle();
 +
    });
 +
 +
 
 +
 +
 +
 +
 +
 +
  $('.arrow-next').click(function() {
 +
    var currentSlide = $('.active-slide');
 +
    var nextSlide = currentSlide.next();
 +
 +
    var currentDot = $('.active-dot');
 +
    var nextDot = currentDot.next();
 +
 +
    if(nextSlide.length === 0) {
 +
      nextSlide = $('.slide').first();
 +
      nextDot = $('.dot').first();
 +
    }
 +
   
 +
    currentSlide.fadeOut(600).removeClass('active-slide');
 +
    nextSlide.fadeIn(600).addClass('active-slide');
 +
 +
    currentDot.removeClass('active-dot');
 +
    nextDot.addClass('active-dot');
 +
  });
 +
 +
 +
  $('.arrow-prev').click(function() {
 +
    var currentSlide = $('.active-slide');
 +
    var prevSlide = currentSlide.prev();
 +
 +
    var currentDot = $('.active-dot');
 +
    var prevDot = currentDot.prev();
 +
 +
    if(prevSlide.length === 0) {
 +
      prevSlide = $('.slide').last();
 +
      prevDot = $('.dot').last();
 +
    }
 +
   
 +
    currentSlide.fadeOut(600).removeClass('active-slide');
 +
    prevSlide.fadeIn(600).addClass('active-slide');
 +
 +
    currentDot.removeClass('active-dot');
 +
    prevDot.addClass('active-dot');
 +
  });
 +
 +
 +
 +
 +
};
 +
 +
$(document).ready(main);
 +
 +
//$(document).ready(main);
 +
 +
 +
</script>
 +
  
 
<style type="text/css">
 
<style type="text/css">
  
−
body{ background-color: #666666; }
+
body{ background-color: #666666;}
 
*{ padding:0; margin:0; font:13px/1.5em Arial, Helvetica, sans-serif;}
 
*{ padding:0; margin:0; font:13px/1.5em Arial, Helvetica, sans-serif;}
  
Line 31: Line 132:
 
.box22 p{ z-index: 1; position:absolute; color:#FFFFFF; font-size:16px; font:"Arial Black", Gadget, sans-serif; margin-top:50px;}
 
.box22 p{ z-index: 1; position:absolute; color:#FFFFFF; font-size:16px; font:"Arial Black", Gadget, sans-serif; margin-top:50px;}
 
.box23 p{ z-index: 1; position:absolute; color:#FFFFFF; font-size:16px; font:"Arial Black", Gadget, sans-serif; margin-top:50px;}
 
.box23 p{ z-index: 1; position:absolute; color:#FFFFFF; font-size:16px; font:"Arial Black", Gadget, sans-serif; margin-top:50px;}
−
.box24 p{ z-index: 1; position:absolute; color:#FFFFFF; font-size:16px; font:"Arial Black", Gadget, sans-serif; margin-top:50px;}</style>
+
.box24 p{ z-index: 1; position:absolute; color:#FFFFFF; font-size:16px; font:"Arial Black", Gadget, sans-serif; margin-top:50px;}
 +
 
 +
#P1{
 +
    position:absolute;
 +
    top:0px;
 +
    left:0px;
 +
    z-index:-1;
 +
}
 +
#P2{
 +
    position:absolute;
 +
    top:20px;
 +
    left:20px;
 +
    z-index:0;
 +
}
 +
#P3{
 +
    position:absolute;
 +
    top:40px;
 +
    left:40px;
 +
    z-index:1;
 +
}
 +
 
 +
#B1
 +
{
 +
  width:100%;
 +
  height:100%;
 +
}
 +
#B2
 +
{
 +
  top:5%;
 +
  left:60%;
 +
  z-index:1;
 +
  position:absolute;
 +
  width:40%;
 +
  height:40%;
 +
  //transform: scaleX(-1);
 +
 
 +
}
 +
 
 +
.header .menu {
 +
  position:absolute;
 +
  top:5%;
 +
  left:20%;
 +
  float: right;
 +
  list-style: none;
 +
 
 +
  /*margin-top: 5px;*/
 +
}
 +
 
 +
.menu > li {
 +
  display: inline;
 +
  padding-left: 20px;
 +
  padding-right: 20px;
 +
}
 +
 
 +
.menu a {
 +
  //color: #898989;
 +
  color: #FFFFFF;
 +
  font-family: impact;
 +
  font-size:150%;
 +
}
 +
 
 +
.dropdown-menu {
 +
  font-size: 16px;
 +
  margin-top: 5px;
 +
  min-width: 105px;
 +
}
 +
 
 +
.dropdown-menu li a {
 +
  color: #898989;
 +
  padding: 6px 20px;
 +
  font-weight: 300;
 +
}
 +
 
 +
.OVERVIEW {
 +
  display: inline;
 +
}
 +
 
 +
.dropdown-menu-OVERVIEW li a {
 +
  color: #898989;
 +
  padding: 6px 20px;
 +
  font-weight: 300;
 +
}
 +
 
 +
.slider {
 +
  position:absolute;
 +
  top:10%;
 +
  left:10%;
 +
  width: 40%;
 +
  height: 40%;
 +
  //border-bottom: 1px solid #ddd;
 +
}
 +
 
 +
.slide {
 +
  //background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
 +
  background-size: cover;
 +
  display: none;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 50%;
 +
  height: 50%;
 +
}
 +
 
 +
.active-slide {
 +
    display: block;
 +
}
 +
 
 +
.slide-copy h1 {
 +
  color: #FF0000;  //red
 +
 
 +
  font-family: 'Oswald', sans-serif;
 +
  font-weight: 400;
 +
 
 +
  font-size: 40px;
 +
  margin-top: 105px;
 +
  margin-bottom: 0px;
 +
}
 +
 
 +
.slide-copy h2 {
 +
  color: #FFFF00;  //yellow
 +
 
 +
  font-family: 'Oswald', sans-serif;
 +
  font-weight: 400;
 +
 
 +
  font-size: 40px;
 +
  margin: 5px;
 +
}
 +
 
 +
.slide-copy p {
 +
  color: #0000CC;  //blue
 +
  font-family: Georgia, "Times New Roman", serif;
 +
  font-size: 3.15em;
 +
  line-height: 1.75em;
 +
  margin-bottom: 15px;
 +
  margin-top: 16px;
 +
}
 +
 
 +
.slide-img {
 +
  text-align: right;
 +
}
 +
 
 +
/* Slide feature */
 +
 
 +
.slide-feature {
 +
  //text-align: center;
 +
//margin-left: 10%;
 +
  //background-image: url("https://static.igem.org/mediawiki/2016/3/3c/YM-LOGO1.png");
 +
  //height: 300px;
 +
  //width: 300px;
 +
  //display: block;
 +
  //background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
 +
  background-size: cover;
 +
  display: none;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 50%;
 +
  height: 50%;
 +
}
 +
 
 +
.slide-feature img {
 +
  margin-top: 112px;
 +
  margin-bottom: 28px;
 +
}
 +
 
 +
.slide-feature a {
 +
  display: block;
 +
  color: #6fc5e0;
 +
 
 +
  font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
 +
  font-family: 'Oswald', sans-serif;
 +
  font-weight: 400;
 +
 
 +
  font-size: 20px;
 +
}
 +
 
 +
.slider-nav {
 +
  position:absolute;
 +
  top:70%;
 +
  left:15%;
 +
  //text-align: center;
 +
 
 +
  //margin-top: 20px;
 +
}
 +
 
 +
.arrow-prev {
 +
  margin-right: 45px;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
  margin-top: 9px;
 +
}
 +
 
 +
.arrow-next {
 +
  margin-left: 45px;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
  margin-top: 9px;
 +
}
 +
 
 +
.slider-dots {
 +
  list-style: none;
 +
  display: inline-block;
 +
  padding-left: 0;
 +
  margin-bottom: 0;
 +
}
 +
.slide-img col-xs-7
 +
{
 +
  margin-left: 45px;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
  margin-top: 9px;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
.slider-dots li {
 +
  color: #bbbcbc;
 +
  display: inline;
 +
  font-size: 30px;
 +
  margin-right: 5px;
 +
}
 +
 
 +
.slider-dots li.active-dot {
 +
  color: #363636;
 +
}
 +
 
 +
/* App links */
 +
 
 +
.get-app {
 +
  list-style: none;
 +
  padding-bottom: 9px;
 +
  padding-left: 0px;
 +
  padding-top: 9px;
 +
}
 +
 
 +
.get-app li {
 +
  float: left;
 +
  margin-bottom: 5px;
 +
  margin-right: 5px;
 +
}
 +
 
 +
.get-app img {
 +
  height: 40px;
 +
}
 +
 
 +
#demo {
 +
        //margin: 30px 0 50px 0;
 +
        position:absolute;
 +
        top:5%;
 +
        left:20%;
 +
        float: right;
 +
        list-style: none;
 +
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 +
    }
 +
   
 +
    #demo .wrapper {
 +
        display: inline-block;
 +
        width: 180px;
 +
        //margin: 0 10px 0 0;
 +
        height: 20px;
 +
        position: relative;
 +
    }
 +
   
 +
    #demo .parent {
 +
        height: 100%;
 +
        width: 100%;
 +
        display: block;
 +
        cursor: pointer;
 +
        line-height: 30px;
 +
        height: 30px;
 +
        border-radius: 5px;
 +
        background: #F9F9F9;
 +
        border: 1px solid #AAA;
 +
        border-bottom: 1px solid #777;
 +
        color: #282D31;
 +
        font-weight: bold;
 +
        z-index: 2;
 +
        position: relative;
 +
        -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
 +
        -webkit-transition-delay: .8s;
 +
        text-align: center;
 +
    }
 +
    #demo .parent a {
 +
        height: 100%;
 +
        width: 100%;
 +
        display: block;
 +
        cursor: pointer;
 +
        line-height: 30px;
 +
        height: 30px;
 +
        border-radius: 5px;
 +
        background: #F9F9F9;
 +
        border: 1px solid #AAA;
 +
        border-bottom: 1px solid #777;
 +
        color: #282D31;
 +
        font-weight: bold;
 +
        z-index: 2;
 +
        position: relative;
 +
        -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
 +
        -webkit-transition-delay: .8s;
 +
        text-align: center;
 +
        border: 1px solid #777;
 +
        border-radius: 5px;
 +
        border-radius: 5px;
 +
        box-shadow: 0 1px 2px rgba(0,0,0,.4);
 +
    }
 +
   
 +
    #demo .parent:hover,
 +
    #demo .content:hover ~ .parent {
 +
        background: #fff;
 +
        -webkit-transition-delay: 0s, 0s, 0s;
 +
    }
 +
   
 +
    #demo .content:hover ~ .parent {
 +
        border-bottom-left-radius: 0;
 +
        border-bottom-right-radius: 0;
 +
        z-index: 0;
 +
    }
 +
   
 +
    #demo .content {
 +
        position: absolute;
 +
        top: 0;
 +
        display: block;
 +
        z-index: 1;
 +
        height: 0;
 +
        width: 180px;
 +
        padding-top: 30px;
 +
        -webkit-transition: height .5s ease;
 +
        -webkit-transition-delay: .4s;
 +
        border: 1px solid #777;
 +
        border-radius: 5px;
 +
        box-shadow: 0 1px 2px rgba(0,0,0,.4);
 +
    }
 +
   
 +
    #demo .wrapper:active .content {
 +
        height: 123px;
 +
        z-index: 3;
 +
        -webkit-transition-delay: 0s;
 +
    }
 +
   
 +
    #demo .content:hover {
 +
        height: 123px;
 +
        z-index: 3;
 +
        -webkit-transition-delay: 0s;
 +
    }
 +
   
 +
   
 +
    #demo .content ul {
 +
        background: #fff;
 +
        margin: 0;
 +
        padding: 0;
 +
        overflow: hidden;
 +
        height: 100%;
 +
        border-bottom-left-radius: 5px;
 +
        border-bottom-right-radius: 5px;
 +
    }
 +
    #demo .content ul li a{
 +
        list-style: none;
 +
        text-align: left;
 +
        color: #888;
 +
        font-size: 14px;
 +
        line-height: 30px;
 +
        height: 30px;
 +
        padding-left: 10px;
 +
        //border-top: 1px solid #ccc;
 +
    }//
 +
    #demo .content a li{
 +
       
 +
    }//
 +
 
 +
 
 +
 
 +
    #demo .content ul a {
 +
        text-decoration: none;
 +
    }
 +
   
 +
    #demo .content li:hover {
 +
        background: #eee;
 +
        color: #333;
 +
    }
 +
   
 +
    #demo .content li {
 +
        list-style: none;
 +
        text-align: left;
 +
        color: #888;
 +
        font-size: 14px;
 +
        line-height: 30px;
 +
        height: 30px;
 +
        padding-left: 10px;
 +
        border-top: 1px solid #ccc;
 +
    }
 +
   
 +
   
 +
    #demo .content li:last-of-type {
 +
        border-bottom-left-radius: 5px;
 +
        border-bottom-right-radius: 5px;
 +
    }
 +
 
 +
 
 +
 
 +
</style>
  
 
</html>
 
</html>
Line 41: Line 542:
 
<div>
 
<div>
  
−
<img src="https://static.igem.org/mediawiki/2016/1/17/27yang-1.jpg" width="100%" >
+
<img src="https://static.igem.org/mediawiki/2016/d/d0/T-NYMU-Taipei-photo-BK3.png" id = "B1">
  
 
</div>
 
</div>
 +
 +
<div class="slider">
 +
 +
      <div class="slide active-slide">
 +
        <div class="container">
 +
          <div class="row">
 +
            <div class="slide-copy col-xs-5">
 +
              <h1>First Title</h1>
 +
              <p>農業經濟損失，科學家研究基改真菌，我們要把兩者連接在一起</p>
 +
              <!--
 +
              <ul class="get-app">
 +
                <li><a href="###"><img src="https://static.igem.org/mediawiki/2016/5/59/T-NYMU-Taipei-photo-med.png"></a></li>
 +
                <li><a href="###"><img src="https://static.igem.org/mediawiki/2016/0/0f/T-NYMU_Taipei--photo_medb.png"></a></li>
 +
                <li><a href="###"><img src="https://static.igem.org/mediawiki/2016/f/f8/T-NYMU-Taipei-photo-mede.png"></a></li>
 +
                <li><a href="###"><img src="https://static.igem.org/mediawiki/2016/5/53/T-NYMU-Taipei-photo-medi.png"></a></li>
 +
              -->
 +
 +
 +
              </ul>
 +
            </div>
 +
           
 +
          </div>
 +
        </div>     
 +
      </div>
 +
 +
      <div class="slide slide-feature">
 +
        <div class="container">
 +
          <div class="row">
 +
            <div class="slide-copy col-xs-12">
 +
              <h1>Senond Title</h1>
 +
              <p>陽明大學!!!!!!</p>
 +
             
 +
            </div>
 +
           
 +
          </div>
 +
        </div>     
 +
      </div>
 +
 +
      <div class="slide">
 +
        <div class="container">
 +
          <div class="row">
 +
            <div class="slide-copy col-xs-5">
 +
              <h1>THE BEST ROOM</h1>
 +
              <h2>THE BEST STUDENT </h2>
 +
              <p>Yang-Mimg University</p>
 +
             
 +
            </div>
 +
            <div class="slide-img col-xs-7">
 +
              <img src="">
 +
            </div>
 +
          </div>
 +
        </div>     
 +
      </div>
 +
 +
 +
      <div class="slide">
 +
        <div class="container">
 +
          <div class="row">
 +
            <div class="slide-copy col-xs-5">
 +
              <h1>THE BEST ROOM</h1>
 +
              <p>Yang-Mimg University!!!!!</p>
 +
              <!--
 +
              <ul class="get-app">
 +
                <li><a href="###"><img src="https://static.igem.org/mediawiki/2016/5/59/T-NYMU-Taipei-photo-med.png"></a></li>
 +
                <li><a href="###"><img src="https://static.igem.org/mediawiki/2016/0/0f/T-NYMU_Taipei--photo_medb.png"></a></li>
 +
                <li><a href="###"><img src="https://static.igem.org/mediawiki/2016/f/f8/T-NYMU-Taipei-photo-mede.png"></a></li>
 +
                <li><a href="###"><img src="https://static.igem.org/mediawiki/2016/5/53/T-NYMU-Taipei-photo-medi.png"></a></li>
 +
              </ul>
 +
              -->
 +
            </div>
 +
            <div class="slide-img col-xs-7">
 +
             
 +
            </div>
 +
 +
          </div>
 +
        </div>     
 +
      </div>
 +
 +
    </div>
 +
    <div class="slider-nav">
 +
      <a href="###" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
 +
      <ul class="slider-dots">
 +
        <li class="dot active-dot">&bull;</li>
 +
        <li class="dot">&bull;</li>
 +
        <li class="dot">&bull;</li>
 +
        <li class="dot">&bull;</li>
 +
      </ul>
 +
      <a href="###" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
 +
  </div>
 +
<div>
  
  

Revision as of 10:00, 2 August 2016

First Title

農業經濟損失，科學家研究基改真菌，我們要把兩者連接在一起

Senond Title

陽明大學!!!!!!

THE BEST ROOM

THE BEST STUDENT

Yang-Mimg University

THE BEST ROOM

Yang-Mimg University!!!!!

  • •
  • •
  • •
  • •

OVERVIEW

農業經濟損失，科學家研究基改真菌，我們要把兩者連接在一起

Photoshop

農業經濟損失，科學家研究基改真菌，我們要把兩者連接在一起

ActionScript 3.0

農業經濟損失，科學家研究基改真菌，我們要把兩者連接在一起

Android APP

農業經濟損失，科學家研究基改真菌，我們要把兩者連接在一起