Difference between revisions of "Team:NCTU Formosa/HumanPractice"

Line 1: Line 1:
−
{{NCTU_Formosa}}
+
{{NCTU_Formosa/test}}
−
<html>
+
<html lang="en" >
  
 
<head>
 
<head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
−
   <title>HP</title>
+
   <title>HP-homepage2</title>
 +
 
 
   <style>
 
   <style>
−
    @keyframes ani1 {
+
  @keyframes ani {
−
      0% {
+
0% {
−
        opacity: 0;
+
  opacity: 0;
−
      }
+
}
−
      100% {
+
100% {
−
        opacity: 1;
+
  opacity: 1;
−
      }
+
}
−
    }
+
}
 +
* {
 +
/*border: solid 1px;*/
 +
font-family: Franklin Gothic Medium Cond, Levenim MT;
 +
}
  
−
    @keyframes ani2 {
+
body {
−
      0% {
+
padding: 0px;
−
        opacity: 0;
+
margin: 0px;
−
      }
+
font-size: 0;
−
      100% {
+
}
−
        opacity: 1;
+
−
      }
+
−
    }
+
  
−
    * {
+
.wrapper {
−
      font-family: Levenim MT;
+
width: 100%;
−
    }
+
margin: 0px;
 +
position: absolute;
 +
padding: 0px;
 +
background: #E1F5FE;
 +
}
  
−
    body {
+
.cover {
−
      padding: 0px;
+
width: 100%;
−
      margin: 0px;
+
position: relative;
−
    }
+
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 100px;
 +
animation: ani 5s 1;
 +
animation-fill-mode: forwards;
 +
}
  
−
    .wrapper {
+
.nav_bg {
−
      width: 100%;
+
background-color: #4F9FB7;
−
      margin: 0px;
+
height: 60px;
−
      position: absolute;
+
}
−
      padding: 0px;
+
−
      background: #E1F5FE;
+
−
    }
+
  
−
    .title {
+
.title ul {
−
      width: 100%;
+
list-style-type: none;
−
      height: 650px;
+
/*position: relative;*/
−
      position: relative;
+
float: right;
−
      margin-left: auto;
+
}
−
      margin-right: auto;
+
−
      margin-top: -50px;
+
−
      margin-bottom: 150px;
+
−
      animation: ani1 5s 1;
+
−
      animation-fill-mode: forwards;
+
−
      background-image: url("https://i.imgur.com/DCyUlMO.jpg");
+
−
      background-size: cover;
+
−
    }
+
−
    .title ul {
+
−
      list-style-type: none;
+
−
      position: absolute;
+
−
      float: right;
+
−
      right: 30px;
+
−
      bottom: 25px;
+
−
    }
+
  
−
    .title ul li {
+
.title ul li {
−
      position: relative;
+
/*position: relative;*/
−
      float: left;
+
float: left;
−
      padding-top: 4px;
+
padding-top: 4px;
−
      padding-bottom: 2px;
+
padding-bottom: 4px;
−
      padding-right: 5px;
+
padding-right: 10px;
−
      padding-left: 5px;
+
padding-left: 10px;
−
      margin-right: 20px;
+
cursor: pointer;
−
      cursor: pointer;
+
transition-duration: 0.75s;
−
      //animation-play-state: paused;
+
border: solid 2px;
−
      //animation: ani2 5s 1;
+
right: 20px;
−
      //animation-delay: 3s;
+
bottom: 20px;
−
      animation-fill-mode: forwards;
+
}
−
      transition-duration: 0.75s;
+
−
      border: solid 2px #00255A;
+
−
      border-radius: 10px;
+
−
      text-align: center;
+
−
      font-size: 18px;
+
−
      color: #00255A !important;
+
−
    }
+
  
−
    .title ul li:hover{
+
.edu {
−
      background-color: #00255A;
+
width: 100%;
−
      color: white !important;
+
max-width: 1150px;
−
    }
+
position: relative;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 100px;
 +
text-align: center;
 +
overflow: hidden;
 +
}
  
−
    .edu {
+
.bg_edu {
−
      width: 80%;
+
width: 85%;
−
      height: 680px;
+
}
−
      position: relative;
+
−
      margin-left: auto;
+
−
      margin-right: auto;
+
−
      background-image: url("https://i.imgur.com/O0vYeCB.png");
+
−
      background-size: cover;
+
−
      overflow: auto;
+
  
−
    }
+
.silver {
 +
position: relative;
 +
max-width: 1150px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 100px;
 +
text-align: center;
 +
overflow: hidden;
 +
}
  
−
    .silver {
+
.bg_silver {
−
      width: 80%;
+
width: 85%;
−
      height: 680px;
+
}
−
      position: relative;
+
−
      margin-left: auto;
+
−
      margin-right: auto;
+
−
      margin-top: 150px;
+
−
      background-image: url("https://i.imgur.com/O0vYeCB.png");
+
−
      background-size: cover;
+
−
    }
+
  
−
    .gold {
+
.gold {
−
      width: 80%;
+
position: relative;
−
      height: 680px;
+
max-width: 1150px;
−
      position: relative;
+
margin-left: auto;
−
      margin-left: auto;
+
margin-right: auto;
−
      margin-right: auto;
+
margin-bottom: 100px;
−
      margin-top: 150px;
+
text-align: center;
−
      margin-bottom: 200px;
+
overflow: hidden;
−
      background-image: url("https://i.imgur.com/O0vYeCB.png");
+
}
−
      background-size: cover;
+
−
    }
+
−
   
+
−
    .button {
+
−
      width: 250px;
+
−
      height: 55px;
+
−
      background-image: url("https://i.imgur.com/edYfy3G.png");
+
−
      background-size: cover;
+
−
      position: absolute;
+
−
      right: 70px;
+
−
      bottom: 70px;
+
−
      cursor: pointer;
+
−
      transition-duration: 0.5s;
+
−
    }
+
−
    .button:hover {
+
−
      background-image: url("https://i.imgur.com/hI8Q6vk.png");
+
−
      width: 250px;
+
−
      height: 55px;
+
−
    }
+
  
−
    h1 {
+
.bg_gold {
−
      position: absolute;
+
width: 85%;
−
      margin-top: 40px;
+
}
−
      left: 50px;
+
−
      top: 25px;
+
−
      font-size: 60px;
+
−
    }
+
  
−
    p {
+
.col {
 +
width: 100%;
 +
max-width: 1150px;
 +
position: relative;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 200px;
 +
text-align: center;
 +
overflow: hidden;
 +
}
 +
 
 +
.bg_col {
 +
width: 85%;
 +
}
 +
 
 +
.button {
 +
position: absolute;
 +
width: 100%;
 +
left: 40%;
 +
bottom: 6%;
 +
}
 +
 
 +
.button img {
 +
width: 25%;
 +
position: relative;
 +
/* 淡出淡入效果0.5秒 */
 +
transition: opacity 0.5s ease-in-out;
 +
cursor: pointer;
 +
}
 +
 
 +
.button img:last-child:hover {
 +
/* 滑入時第一張透明度設0 */
 +
  opacity:0;
 +
}
 +
 
 +
.button_2{
 +
left: -25%;
 +
}
 +
 
 +
h1 {
 +
position: absolute;
 +
left: 12%;
 +
top: 4%;
 +
margin: 0;
 +
font-size: 9vmin;
 +
}
 +
 
 +
p {
 +
position: absolute;
 +
font-size: 5vmin;
 +
}
 +
 
 +
.e_1, .g_1 {
 +
left: 13%;
 +
top: 20%;
 +
}
 +
 
 +
.s_1 {
 +
left: 13%;
 +
top: 25%;
 +
}
 +
 
 +
.s_2 {
 +
left: 13%;
 +
top: 50%;
 +
}
 +
 
 +
.coverflow{
 +
      width: 37%;
 +
      height: auto;
 
       position: absolute;
 
       position: absolute;
−
       font-size: 32px;
+
       top: 21.5%;
−
    }
+
      left: 50%;
 +
  }
 +
  .coverflow>a{
 +
      display: block;
 +
      position: absolute;
 +
      top:0;
 +
      left:0;
 +
      opacity: 0;
 +
  filter: alpha(opacity=0);
 +
  /*當圖片數量增加，影片長度需更改，變為5s*圖片數量*/
 +
  -webkit-animation: silder 15s linear infinite;
 +
                  animation: silder 15s linear infinite;
 +
  }
 +
  .coverflow>a>img{
 +
      max-width: 100%;
 +
  }
  
−
    .e_1, .g_1 {
+
/*動畫關鍵影格*/
−
       left: 80px;
+
  @-webkit-keyframes silder {
−
       top: 140px;
+
       3% {
−
    }
+
          opacity: 1;
 +
          filter: alpha(opacity=100);
 +
       }
 +
      27% {
 +
          opacity: 1;
 +
          filter: alpha(opacity=100);
 +
      }
 +
      30% {
 +
          opacity: 0;
 +
          filter: alpha(opacity=0);
 +
      }
 +
  }
 +
  @keyframes silder {
 +
      3% {
 +
          opacity: 1;
 +
          filter: alpha(opacity=100);
 +
      }
 +
      27% {
 +
          opacity: 1;
 +
          filter: alpha(opacity=100);
 +
      }
 +
      30% {
 +
          opacity: 0;
 +
          filter: alpha(opacity=0);
 +
      }
 +
  }
  
−
    .s_1 {
+
/*每個圖片各延遲5秒*/
−
       left: 100px;
+
  .coverflow>a:nth-child(3) {
−
      top: 300px;
+
       -webkit-animation-delay: 10s;
−
    }
+
              animation-delay: 10s;
 +
  }
  
−
    .s_2 {
+
  .coverflow>a:nth-child(2) {
−
       left: 100px;
+
       -webkit-animation-delay: 5s;
−
       top: 600px;
+
              animation-delay: 5s;
−
    }
+
  }
 +
 
 +
  .coverflow>a:nth-child(1) {
 +
       -webkit-animation-delay: 0s;
 +
              animation-delay: 0s;
 +
  }
 +
/*滑入時停止播放*/
 +
  .coverflow:hover>a{
 +
  -webkit-animation-play-state: paused;
 +
          animation-play-state: paused;
 +
}
  
 
   </style>
 
   </style>
−
 
+
 
 +
 
 
</head>
 
</head>
  
 
<body>
 
<body>
  
−
 
+
 
 
<div class="wrapper">
 
<div class="wrapper">
−
   <div class="title">
+
  <div class="nav_bg"></div>
−
     <ul>
+
   <div class="title"><img class="cover" src="https://static.igem.org/mediawiki/2018/1/10/T--NCTU_Formosa--hp_cover.jpg"/>
−
       <li><a href="">Education</a></li>
+
     <!--ul
−
       <li><a href="">HP Silver</a></li>
+
    li
−
       <li><a href="">HP Gold</a></li>
+
       a(href="") Education
−
       <li><a href="">Collaboration</a></li>
+
    li
−
     </ul>
+
       a(href="") HP Silver
 +
    li
 +
       a(href="") HP Gold
 +
    li
 +
       a(href="") Collaboration
 +
     -->
 
   </div>
 
   </div>
−
   <div class="edu">
+
   <div class="edu"><img class="bg_edu" src="https://i.imgur.com/O0vYeCB.png"/>
 
     <h1>Education</h1>
 
     <h1>Education</h1>
−
     <p class="e_1">● NCTU Annual br Biotechnology Fair</p>
+
     <p class="e_1">● NCTU Annual<br> Biotechnology Fair</p>
−
     <div class="pic1"></div>
+
     <div class="coverflow"><a><img src="https://static.igem.org/mediawiki/2018/1/1b/T--NCTU_Formosa--0408NCTU3.jpg"/></a><a><img src="https://static.igem.org/mediawiki/2018/b/b0/T--NCTU_Formosa--DBT5.jpg"/></a><a><img src="https://static.igem.org/mediawiki/2018/c/cd/T--NCTU_Formosa--LTSH2.jpg"/></a></div>
−
     <div class="button"></div>
+
     <div class="button"><img class="button_1" src="https://static.igem.org/mediawiki/2018/9/9a/T--NCTU_Formosa--button_yellow.png"/><img class="button_2" src="https://static.igem.org/mediawiki/2018/c/c3/T--NCTU_Formosa--button_white.png"/></div>
 
   </div>
 
   </div>
−
   <div class="silver">
+
   <div class="silver"><img class="bg_silver" src="https://i.imgur.com/O0vYeCB.png"/>
 
     <h1>HP Silver</h1>
 
     <h1>HP Silver</h1>
 
     <p class="s_1">● Conferences (6th Asia-Pacific)</p>
 
     <p class="s_1">● Conferences (6th Asia-Pacific)</p>
 
     <p class="s_2">● Skype Meetup </p>
 
     <p class="s_2">● Skype Meetup </p>
−
     <div class="pic2"></div>
+
     <div class="coverflow"><a><img src="https://static.igem.org/mediawiki/2018/4/4c/T--NCTU_Formosa--NCHUconference16.jpg"/></a><a><img src="https://static.igem.org/mediawiki/2018/0/0f/T--NCTU_Formosa--mingdao1.JPG"/></a><a><img src="https://static.igem.org/mediawiki/2018/9/9c/T--NCTU_Formosa--meetuponline1.png"/></a></div>
−
     <div class="button"></div>
+
     <div class="button"><img class="button_1" src="https://static.igem.org/mediawiki/2018/9/9a/T--NCTU_Formosa--button_yellow.png"/><img class="button_2" src="https://static.igem.org/mediawiki/2018/c/c3/T--NCTU_Formosa--button_white.png"/></div>
 
   </div>
 
   </div>
−
   <div class="gold">
+
   <div class="gold"><img class="bg_gold" src="https://i.imgur.com/O0vYeCB.png"/>
 
     <h1>HP Gold</h1>
 
     <h1>HP Gold</h1>
−
     <p class="g_1">● Agriculture Improvement Station</p>
+
     <p class="g_1"> ● Agriculture Improvement Station</p>
−
     <div class="pic3"></div>
+
     <div class="coverflow"><a><img src="https://static.igem.org/mediawiki/2018/e/e6/T--NCTU_Formosa--NCHUprof1.jpg"/></a><a><img src="https://static.igem.org/mediawiki/2018/0/0d/T--NCTU_Formosa--taoyuan1.jpg"/></a><a><img src="https://static.igem.org/mediawiki/2018/1/1d/T--NCTU_Formosa--agritech8.jpg"/></a></div>
−
     <div class="button"></div>
+
     <div class="button"><img class="button_1" src="https://static.igem.org/mediawiki/2018/9/9a/T--NCTU_Formosa--button_yellow.png"/><img class="button_2" src="https://static.igem.org/mediawiki/2018/c/c3/T--NCTU_Formosa--button_white.png"/></div>
 +
  </div>
 +
  <div class="col"><img class="bg_col" src="https://i.imgur.com/O0vYeCB.png"/>
 +
    <h1>Collaboration</h1>
 +
    <p class="e_1">● NCTU Annual<br> Biotechnology Fair</p>
 +
    <div class="coverflow"><a><img src="https://static.igem.org/mediawiki/2018/1/1b/T--NCTU_Formosa--0408NCTU3.jpg"/></a><a><img src="https://static.igem.org/mediawiki/2018/b/b0/T--NCTU_Formosa--DBT5.jpg"/></a><a><img src="https://static.igem.org/mediawiki/2018/c/cd/T--NCTU_Formosa--LTSH2.jpg"/></a></div>
 +
    <div class="button"><img class="button_1" src="https://static.igem.org/mediawiki/2018/9/9a/T--NCTU_Formosa--button_yellow.png"/><img class="button_2" src="https://static.igem.org/mediawiki/2018/c/c3/T--NCTU_Formosa--button_white.png"/></div>
 
   </div>
 
   </div>
 
</div>
 
</div>
−
 
+
 
−
 
+
 
 +
 
 +
    <script  src="js/index.js"></script>
 +
 
 +
 
 +
 
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 15:53, 9 September 2018

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM
Navigation Bar HP-homepage2

Education

● NCTU Annual
Biotechnology Fair

HP Silver

● Conferences (6th Asia-Pacific)

● Skype Meetup

HP Gold

● Agriculture Improvement Station

Collaboration

● NCTU Annual
Biotechnology Fair