Difference between revisions of "Team:WLC-Milwaukee/Notebook"

Line 12: Line 12:
  
  
−
<section id="cd-timeline">
+
<ol id="timeline">
−
<div class="cd-timeline-block">
+
−
<div class="cd-timeline-img">
+
−
<img src="img/cd-icon-picture.svg" alt="Picture">
+
−
</div> <!-- cd-timeline-img -->
+
−
+
−
<div class="cd-timeline-content">
+
−
<h2>Title of section 1</h2>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
+
−
<a href="#0" class="cd-read-more">Read more</a>
+
−
<span class="cd-date">Jan 14</span>
+
−
</div> <!-- cd-timeline-content -->
+
−
</div> <!-- cd-timeline-block -->
+
−
+
−
<div class="cd-timeline-block">
+
−
<!-- ... -->
+
−
</div>
+
−
</section>
+
  
 +
  <li>
 +
    <time datetime="1990-07-04">July 1990</time>
 +
    <p>Born</p>
 +
  </li>
  
 +
  <li>
 +
    <time>September 1994</time>
 +
    <p>Started first school</p>
 +
  </li>
  
−
#cd-timeline {
+
   <li>
−
   position: relative;
+
    <time>September 1999</time>
−
  padding: 2em 0;
+
    <p>Started middle school</p>
−
  margin-top: 2em;
+
   </li>
−
  margin-bottom: 2em;
+
−
}
+
−
#cd-timeline::before {
+
−
   /* this is the vertical line */
+
−
  content: '';
+
−
  position: absolute;
+
−
  top: 0;
+
−
  left: 18px;
+
−
  height: 100%;
+
−
  width: 4px;
+
−
  background: #d7e4ed;
+
−
}
+
  
−
.cssanimations .cd-timeline-img.is-hidden {
+
   <li>
−
   visibility: hidden;
+
     <time>September 2003</time>
−
}
+
     <p>Started high school</p>
−
.cssanimations .cd-timeline-img.bounce-in {
+
   </li>
−
  visibility: visible;
+
−
  animation: cd-bounce-1 0.6s;
+
−
}
+
−
+
−
@keyframes cd-bounce-1 {
+
−
  0% {
+
−
     opacity: 0;
+
−
     transform: scale(0.5);
+
−
   }
+
−
+
−
  60% {
+
−
    opacity: 1;
+
−
    transform: scale(1.2);
+
−
  }
+
−
+
−
  100% {
+
−
    transform: scale(1);
+
−
  }
+
−
}
+
  
 +
  <li>
 +
    <time>September 2006</time>
 +
    <p>Started 6th Form</p>
 +
  </li>
 +
 +
  <li>
 +
    <time datetime="2007-11-19">November 2007</time>
 +
    <p>Registered csswizardry.com</p>
 +
  </li>
 +
 +
  <li>
 +
    <time datetime="2008-07-14">July 2008</time>
 +
    <p>Joined Sense Internet as Web Developer</p>
 +
  </li>
 +
 +
  <li>
 +
    <time datetime="2009-03-16">March 2009</time>
 +
    <p>Joined Twitter</p>
 +
  </li>
 +
 +
  <li>
 +
    <time datetime="2010-01-11">January 2010</time>
 +
    <p>Joined Venturelab as Web Developer</p>
 +
  </li>
 +
 +
  <li>
 +
    <time>January 2011</time>
 +
    <p>Became a member of the Smashing Magazine Experts Panel</p>
 +
  </li>
 +
 +
  <li>
 +
    <time datetime="2011-03-21">March 2011</time>
 +
    <p>Joined Sky as Senior UI Developer</p>
 +
  </li>
 +
 +
</ol>
  
−
2
 
−
3
 
−
4
 
−
5
 
−
6
 
−
7
 
−
$(window).on('scroll', function(){
 
−
$timeline_block.each(function(){
 
−
if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
 
−
$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
 
−
}
 
−
});
 
−
});
 
  
  
 
</div>
 
</div>
 
</html>
 
</html>

Revision as of 07:21, 22 August 2015




Documentation

  1. Born

  2. Started first school

  3. Started middle school

  4. Started high school

  5. Started 6th Form

  6. Registered csswizardry.com

  7. Joined Sense Internet as Web Developer

  8. Joined Twitter

  9. Joined Venturelab as Web Developer

  10. Became a member of the Smashing Magazine Experts Panel

  11. Joined Sky as Senior UI Developer