Difference between revisions of "Team:CCA SanDiego/Notebook"

Line 1: Line 1:
−
<html>
+
<!doctype html>
 +
<html lang="en" class="no-js">
 
<head>
 
<head>
−
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
    <style>html *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{color:#7f8c97;background-color:#e9f0f5}a{color:#acb7c0;text-decoration:none}img{max-width:100%}.cd-container{width:90%;max-width:1170px;margin:0 auto}.cd-container::after{content:'';display:table;clear:both}header{height:200px;line-height:200px;text-align:center;background:#303e49}header h1{color:#fff;font-size:18px;font-size:1.125rem}@media only screen and (min-width:1170px){header{height:300px;line-height:300px}header h1{font-size:24px;font-size:1.5rem}}#cd-timeline{position:relative;padding:2em 0;margin-top:2em;margin-bottom:2em}#cd-timeline::before{content:'';position:absolute;top:0;left:18px;height:100%;width:4px;background:#d7e4ed}.cd-timeline-block:after,.cd-timeline-content:after{content:"";clear:both}@media only screen and (min-width:1170px){#cd-timeline{margin-top:3em;margin-bottom:3em}#cd-timeline::before{left:50%;margin-left:-2px}}.cd-timeline-block{position:relative;margin:2em 0}.cd-timeline-block:after{display:table}.cd-timeline-block:first-child{margin-top:0}.cd-timeline-block:last-child{margin-bottom:0}@media only screen and (min-width:1170px){.cd-timeline-block{margin:4em 0}.cd-timeline-block:first-child{margin-top:0}.cd-timeline-block:last-child{margin-bottom:0}}.cd-timeline-img{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 4px #fff,inset 0 2px 0 rgba(0,0,0,.08),0 3px 0 4px rgba(0,0,0,.05)}.cd-timeline-img img{display:block;width:24px;height:24px;position:relative;left:50%;top:50%;margin-left:-12px;margin-top:-12px}.cd-timeline-img.cd-picture{background:#75ce66}.cd-timeline-img.cd-movie{background:#c03b44}.cd-timeline-img.cd-location{background:#f0ca45}@media only screen and (min-width:1170px){.cd-timeline-img{width:60px;height:60px;left:50%;margin-left:-30px;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden}.cssanimations .cd-timeline-img.is-hidden{visibility:hidden}.cssanimations .cd-timeline-img.bounce-in{visibility:visible;-webkit-animation:cd-bounce-1 .6s;-moz-animation:cd-bounce-1 .6s;animation:cd-bounce-1 .6s}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(.5)}60%{opacity:1;-webkit-transform:scale(1.2)}100%{-webkit-transform:scale(1)}}@-moz-keyframes cd-bounce-1{0%{opacity:0;-moz-transform:scale(.5)}60%{opacity:1;-moz-transform:scale(1.2)}100%{-moz-transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(.5);-moz-transform:scale(.5);-ms-transform:scale(.5);-o-transform:scale(.5);transform:scale(.5)}60%{opacity:1;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.cd-timeline-content{position:relative;margin-left:60px;background:#fff;border-radius:.25em;padding:1em;box-shadow:0 3px 0 #d7e4ed}.cd-timeline-content:after{display:table}.cd-timeline-content h2{color:#303e49}.cd-timeline-content .cd-date,.cd-timeline-content .cd-read-more,.cd-timeline-content p{font-size:13px;font-size:.8125rem}.cd-timeline-content .cd-date,.cd-timeline-content .cd-read-more{display:inline-block}.cd-timeline-content p{margin:1em 0;line-height:1.6}.cd-timeline-content .cd-read-more{float:right;padding:.8em 1em;background:#acb7c0;color:#fff;border-radius:.25em}.no-touch .cd-timeline-content .cd-read-more:hover{background-color:#bac4cb}.cd-timeline-content .cd-date{float:left;padding:.8em 0;opacity:.7}.cd-timeline-content::before{content:'';position:absolute;top:16px;right:100%;height:0;width:0;border:7px solid transparent;border-right:7px solid #fff}@media only screen and (min-width:768px){.cd-timeline-content h2{font-size:20px;font-size:1.25rem}.cd-timeline-content p{font-size:16px;font-size:1rem}.cd-timeline-content .cd-date,.cd-timeline-content .cd-read-more{font-size:14px;font-size:.875rem}}@media only screen and (min-width:1170px){.cd-timeline-content{margin-left:0;padding:1.6em;width:45%}.cd-timeline-content::before{top:24px;left:100%;border-color:transparent transparent transparent #fff}.cd-timeline-content .cd-read-more{float:left}.cd-timeline-block:nth-child(even) .cd-timeline-content,.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more{float:right}.cd-timeline-content .cd-date{position:absolute;width:100%;left:122%;top:6px;font-size:16px;font-size:1rem}.cd-timeline-block:nth-child(even) .cd-timeline-content::before{top:24px;left:auto;right:100%;border-color:transparent #fff transparent transparent}.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date{left:auto;right:122%;text-align:right}.cssanimations .cd-timeline-content.is-hidden{visibility:hidden}.cssanimations .cd-timeline-content.bounce-in{visibility:visible;-webkit-animation:cd-bounce-2 .6s;-moz-animation:cd-bounce-2 .6s;animation:cd-bounce-2 .6s}.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in{-webkit-animation:cd-bounce-2-inverse .6s;-moz-animation:cd-bounce-2-inverse .6s;animation:cd-bounce-2-inverse .6s}}@-webkit-keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes cd-bounce-2{0%{opacity:0;-moz-transform:translateX(-100px)}60%{opacity:1;-moz-transform:translateX(20px)}100%{-moz-transform:translateX(0)}}@keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px);-moz-transform:translateX(-100px);-ms-transform:translateX(-100px);-o-transform:translateX(-100px);transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);-o-transform:translateX(20px);transform:translateX(20px)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes cd-bounce-2-inverse{0%{opacity:0;-moz-transform:translateX(100px)}60%{opacity:1;-moz-transform:translateX(-20px)}100%{-moz-transform:translateX(0)}}@keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px);-moz-transform:translateX(100px);-ms-transform:translateX(100px);-o-transform:translateX(100px);transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);-o-transform:translateX(-20px);transform:translateX(-20px)}100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style>
−
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
+
    <title>Responsive Vertical Timeline</title>
−
<script src="https://static.igem.org/mediawiki/2015/4/47/Cca_sanDiego_bootstrap.txt"></script>
+
</head>
 +
<body>
 +
    <header>
 +
        <h1>Responsive Vertical Timeline</h1>
 +
    </header>
 +
 
 +
    <section id="cd-timeline" class="cd-container">
 +
        <div class="cd-timeline-block">
 +
            <div class="cd-timeline-img cd-picture">
 +
                <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 class="cd-timeline-img cd-movie">
 +
                <img src="img/cd-icon-movie.svg" alt="Movie">
 +
            </div> <!-- cd-timeline-img -->
 +
 
 +
            <div class="cd-timeline-content">
 +
                <h2>Title of section 2</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?</p>
 +
                <a href="#0" class="cd-read-more">Read more</a>
 +
                <span class="cd-date">Jan 18</span>
 +
            </div> <!-- cd-timeline-content -->
 +
        </div> <!-- cd-timeline-block -->
 +
 
 +
        <div class="cd-timeline-block">
 +
            <div class="cd-timeline-img cd-picture">
 +
                <img src="img/cd-icon-picture.svg" alt="Picture">
 +
            </div> <!-- cd-timeline-img -->
 +
 
 +
            <div class="cd-timeline-content">
 +
                <h2>Title of section 3</h2>
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
 +
                <a href="#0" class="cd-read-more">Read more</a>
 +
                <span class="cd-date">Jan 24</span>
 +
            </div> <!-- cd-timeline-content -->
 +
        </div> <!-- cd-timeline-block -->
 +
 
 +
        <div class="cd-timeline-block">
 +
            <div class="cd-timeline-img cd-location">
 +
                <img src="img/cd-icon-location.svg" alt="Location">
 +
            </div> <!-- cd-timeline-img -->
 +
 
 +
            <div class="cd-timeline-content">
 +
                <h2>Title of section 4</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">Feb 14</span>
 +
            </div> <!-- cd-timeline-content -->
 +
        </div> <!-- cd-timeline-block -->
 +
 
 +
        <div class="cd-timeline-block">
 +
            <div class="cd-timeline-img cd-location">
 +
                <img src="img/cd-icon-location.svg" alt="Location">
 +
            </div> <!-- cd-timeline-img -->
 +
 
 +
            <div class="cd-timeline-content">
 +
                <h2>Title of section 5</h2>
 +
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
 +
                <a href="#0" class="cd-read-more">Read more</a>
 +
                <span class="cd-date">Feb 18</span>
 +
            </div> <!-- cd-timeline-content -->
 +
        </div> <!-- cd-timeline-block -->
 +
 
 +
        <div class="cd-timeline-block">
 +
            <div class="cd-timeline-img cd-movie">
 +
                <img src="img/cd-icon-movie.svg" alt="Movie">
 +
            </div> <!-- cd-timeline-img -->
 +
 
 +
            <div class="cd-timeline-content">
 +
                <h2>Final Section</h2>
 +
                <p>This is the content of the last section</p>
 +
                <span class="cd-date">Feb 26</span>
 +
            </div> <!-- cd-timeline-content -->
 +
        </div> <!-- cd-timeline-block -->
 +
    </section> <!-- cd-timeline -->
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
<script>
 
<script>
 +
jQuery(document).ready(function($){
 +
    var timelineBlocks = $('.cd-timeline-block'),
 +
        offset = 0.8;
  
 +
    //hide timeline blocks which are outside the viewport
 +
    hideBlocks(timelineBlocks, offset);
  
−
$(document).ready(function(){
+
    //on scolling, show/animate timeline blocks when enter the viewport
−
$(".firstHeading").remove();
+
    $(window).on('scroll', function(){
−
// navigation click actions
+
        (!window.requestAnimationFrame)  
−
}
+
            ? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
−
);
+
            : window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
 +
    });
  
−
</script>
+
    function hideBlocks(blocks, offset) {
−
<style>
+
        blocks.each(function(){
−
#content{
+
            ( $(this).offset().top > $(window).scrollTop()+$(window).height()*offset ) && $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
−
width:100%
+
        });
−
}
+
    }
−
#bodyContent{
+
−
width:100%
+
  
−
2
+
     function showBlocks(blocks, offset) {
−
3
+
        blocks.each(function(){
−
4
+
            ( $(this).offset().top <= $(window).scrollTop()+$(window).height()*offset && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) && $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
−
5
+
        });
−
6
+
    }
−
7
+
−
8
+
−
9
+
−
10
+
−
11
+
−
12
+
−
13
+
−
14
+
−
15
+
−
16
+
−
#cd-timeline {
+
−
  position: relative;
+
−
  padding: 2em 0;
+
−
  margin-top: 2em;
+
−
  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 {
+
−
  visibility: hidden;
+
−
}
+
−
.cssanimations .cd-timeline-img.bounce-in {
+
−
  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);
+
−
  }
+
−
}
+
−
}
+
−
</style>
+
−
</head>
+
−
<body>
+
−
<div id ="mainContainer" class="container">
+
−
<div class="row">
+
−
<div class="twelve columns">
+
−
<nav class="navbar navbar-default">
+
−
<div class="container-fluid">
+
−
<div class="navbar-header">
+
−
<a class="navbar-brand" href="https://2015.igem.org/Team:CCA_SanDiego">CCA San Diego iGEM</a>
+
−
</div>
+
−
<div>
+
−
<ul class="nav navbar-nav">
+
−
<li><a href="https://2015.igem.org/Team:CCA_SanDiego/Project">Project</a></li>
+
−
<li><a href="https://2015.igem.org/Team:CCA_SanDiego/Team">Team</a></li>
+
−
<li><a href="https://2015.igem.org/Team:CCA_SanDiego/Notebook">Notebook</a></li>
+
−
<li><a href="https://2015.igem.org/Team:CCA_SanDiego/Attributions">Attributions</a></li>
+
−
<li><a href="https://2015.igem.org/Team:CCA_SanDiego/HumanPractice">Human Practice</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
</nav>
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<!-- Start of content -->
+
−
<div id="contentContainer" class="twelve columns">
+
−
<!-- PUT YOUR CONTENT HERE -->
+
−
<section id="cd-timeline">
+
−
<div class="cd-timeline-block">
+
−
<div class="cd-timeline-img">
+
−
<img src="" 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>
+
−
<!-- END OF CONTENT -->
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<script type="javascript">
+
−
$(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');
+
−
}
+
−
});
+
 
});
 
});
−
</script>
+
</script>  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 22:15, 8 September 2015

<!doctype html> Responsive Vertical Timeline

Responsive Vertical Timeline

Picture

Title of section 1

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.

Read more Jan 14
Movie

Title of section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Read more Jan 18
Picture

Title of section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Read more Jan 24
Location

Title of section 4

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.

Read more Feb 14
Location

Title of section 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.

Read more Feb 18
Movie

Final Section

This is the content of the last section

Feb 26