Difference between revisions of "Team:Hong Kong UCCKE/Notebook"

Line 8: Line 8:
 
<link rel="stylesheet" href="https://codyhouse.co/demo/horizontal-timeline/css/style.css"> <!-- Resource style -->
 
<link rel="stylesheet" href="https://codyhouse.co/demo/horizontal-timeline/css/style.css"> <!-- Resource style -->
 
<script src="https://codyhouse.co/demo/horizontal-timeline/js/modernizr.js"></script> <!-- Modernizr -->
 
<script src="https://codyhouse.co/demo/horizontal-timeline/js/modernizr.js"></script> <!-- Modernizr -->
−
 
+
<style>
 +
.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%);
 +
  }
 +
}
 +
</style>
  
 
<section class="cd-horizontal-timeline">
 
<section class="cd-horizontal-timeline">

Revision as of 14:56, 13 August 2016

MENU ▤

  1. 16 Jan
  2. 28 Feb

  1. Horizontal Timeline

    January 16th, 2014

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

Document the dates you worked on your project.

What should this page have?
  • Chronological notes of what your team is doing.
  • Brief descriptions of daily important events.
  • Pictures of your progress.
  • Mention who participated in what task.
Inspiration

You can see what others teams have done to organize their notes: