Difference between revisions of "Team:CGU Taiwan/Experiments"

(Prototype team page)
 
Line 1: Line 1:
−
{{CGU_Taiwan}}
 
 
<html>
 
<html>
−
 
+
<section class="cd-horizontal-timeline">
−
<div class="column full_size">
+
  <div class="timeline">
−
 
+
    <div class="events-wrapper">
−
 
+
      <div class="events">
−
<p>Describe the experiments, research and protocols you used in your iGEM project.</p>
+
        <ol>
−
 
+
          <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
−
</div>
+
          <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
−
 
+
          <!-- other dates here -->
−
<div class="column half_size">
+
        </ol>
−
<h5>What should this page contain?</h5>
+
 
−
<ul>
+
        <span class="filling-line" aria-hidden="true"></span>
−
<li> Protocols </li>
+
      </div> <!-- .events -->
−
<li> Experiments </li>
+
    </div> <!-- .events-wrapper -->
−
<li>Documentation of the development of your project </li>
+
     
−
</ul>
+
    <ul class="cd-timeline-navigation">
−
 
+
      <li><a href="#0" class="prev inactive">Prev</a></li>
−
</div>
+
      <li><a href="#0" class="next">Next</a></li>
−
 
+
    </ul> <!-- .cd-timeline-navigation -->
−
<div class="column half_size">
+
  </div> <!-- .timeline -->
−
<h5>Inspiration</h5>
+
 
−
<ul>
+
  <div class="events-content">
−
<li><a href="https://2014.igem.org/Team:Colombia/Protocols">2014 Colombia </a></li>
+
    <ol>
−
<li><a href="https://2014.igem.org/Team:Imperial/Protocols">2014 Imperial </a></li>
+
      <li class="selected" data-date="16/01/2014">
−
<li><a href="https://2014.igem.org/Team:Caltech/Project/Experiments">2014 Caltech </a></li>
+
        <h2>Horizontal Timeline</h2>
−
</ul>
+
        <em>January 16th, 2014</em>
−
</div>
+
        <p>
−
 
+
          ......
−
 
+
        </p>
−
<div class="clear"></div>
+
      </li>
−
 
+
 
−
 
+
      <li data-date="28/02/2014">
−
<div class="column half_size">
+
        <!-- event description here -->
−
 
+
      </li>
−
 
+
 
−
 
+
      <!-- other descriptions here -->
−
</div>
+
    </ol>
−
 
+
  </div> <!-- .events-content -->
 +
</section>
 +
.cd-horizontal-timeline .events-content {
 +
  position: relative;
 +
}
 +
.cd-horizontal-timeline .events-content li {
 +
  position: absolute;
 +
  z-index: 1;
 +
  width: 100%;
 +
  left: 0;
 +
  top: 0;
 +
  transform: translateX(-100%);
 +
  opacity: 0;
 +
  animation-duration: 0.4s;
 +
  animation-timing-function: ease-in-out;
 +
}
 +
.cd-horizontal-timeline .events-content li.selected {
 +
  /* visible event content */
 +
  position: relative;
 +
  z-index: 2;
 +
  opacity: 1;
 +
  transform: translateX(0);
 +
}
 +
.cd-horizontal-timeline .events-content li.enter-right,
 +
.cd-horizontal-timeline .events-content li.leave-right {
 +
  animation-name: cd-enter-right;
 +
}
 +
.cd-horizontal-timeline .events-content li.enter-left,
 +
.cd-horizontal-timeline .events-content li.leave-left {
 +
  animation-name: cd-enter-left;
 +
}
 +
.cd-horizontal-timeline .events-content li.leave-right,
 +
.cd-horizontal-timeline .events-content li.leave-left {
 +
  animation-direction: reverse;
 +
}
 +
@keyframes cd-enter-right {
 +
  0% {
 +
    opacity: 0;
 +
    transform: translateX(100%);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    transform: translateX(0%);
 +
  }
 +
}
 +
@keyframes cd-enter-left {
 +
  0% {
 +
    opacity: 0;
 +
    transform: translateX(-100%);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    transform: translateX(0%);
 +
  }
 +
}
 
</html>
 
</html>

Revision as of 16:34, 9 July 2016

  1. 16 Jan
  2. 28 Feb

  1. Horizontal Timeline

    January 16th, 2014

    ......

.cd-horizontal-timeline .events-content { position: relative; } .cd-horizontal-timeline .events-content li { position: absolute; z-index: 1; width: 100%; left: 0; top: 0; transform: translateX(-100%); opacity: 0; animation-duration: 0.4s; animation-timing-function: ease-in-out; } .cd-horizontal-timeline .events-content li.selected { /* visible event content */ position: relative; z-index: 2; opacity: 1; transform: translateX(0); } .cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right { animation-name: cd-enter-right; } .cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left { animation-name: cd-enter-left; } .cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left { animation-direction: reverse; } @keyframes cd-enter-right { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0%); } } @keyframes cd-enter-left { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0%); } }