Active Vertical Timeline Code

Active Timeline Code

<script src="https://drive.google.com/uc?export=view&id=1iBS8Jg9Ty5bjY_5QllDLxcNH0EkcrJto"></script>
<script src="https://drive.google.com/uc?export=view&id=1TRYODB131CM86wLA5rYNgCwB8xEjM-Va"></script>

<style type="text/css">
.sqs-block-quote blockquote {overflow:hidden;}
.sqs-block-quote blockquote span, .quote-block figcaption::first-letter, .quote-block .source::first-letter {display: none !important;}

.quote-block {color:inherit;font-size: inherit;}
/* Header */ .quote-block h1 {color:inherit;font-size: 22;margin: 5px 0 0;}
/* Image */ .quote-block img {max-width: 100%;margin: 5px 0;}
/* Date */ .quote-block.sqs-block-quote figcaption {font-size: 15px;font-weight: 500;}
/* Link */ .quote-block a {color: inherit;font-size: inherit;text-decoration: none;padding-bottom: 1px;background-image: -webkit-gradient(linear,left top,left bottom,from(#1c1c1c),to(#1c1c1c));background-image: -o-linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-image: linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-repeat: no-repeat;background-size: 100% 1px;background-position: 0 bottom;-webkit-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);-o-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);}
/* Link Hover */ .quote-block a:hover {background-position: center bottom 3px;}

.sqs-block-quote figure {display: flex;flex-direction: column;margin: 0 3px;}
.sqs-block-quote blockquote {order: 2;margin: 4px;}
.sqs-block-quote figcaption {order: 1;}

body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block figcaption {text-align: left;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: right;}

body:not(.sqs-edit-mode-active) .quote-block figcaption {padding: 0;margin: 0 0 5px 0;line-height: initial !important;}
.quote-block figcaption::first-letter {visibility: hidden;font-size: 0;}

body:not(.sqs-edit-mode-active) .quote-block.sqs-block {list-style-type: none;position: relative;width: 2px !important;margin: 0 auto;padding: 0 0 10px !important;background: #cccccc;}

body:not(.sqs-edit-mode-active) .quote-block::after {content: '';position: absolute;left: 50%;top: 50%;transform: translateX(-50%);width: 20px;height: 20px;border-radius: 50%;background: inherit;}

body:not(.sqs-edit-mode-active) .col .timeline-event:first-child .quote-block::after {top: 0;}
body:not(.sqs-edit-mode-active) .col .timeline-event:last-child .quote-block::after {bottom: 0;top: unset;}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {position: relative;bottom: 0px;width: 400px;visibility: hidden;opacity: 0;transition: all .5s ease-in-out;padding: 0;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {left: 45px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block div {left: -445px;}

body:not(.sqs-edit-mode-active) .quote-block::after {background: #34B451;}
body:not(.sqs-edit-mode-active) .quote-block.in-view::after {border: 2px solid #cccccc;}


body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {transform: translate3d(200px,0,0);}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {transform: translate3d(-200px,0,0);}

body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block.in-view .sqs-block-content {transform: none;visibility: visible;opacity: 1;}

.quote-block iframe {max-width: 100% !important;}

@media screen and (max-width: 992px) {
body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {width: 250px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: -289px;}
}

@media screen and (max-width: 600px) {
body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {transform:none !important;}
body:not(.sqs-edit-mode-active) .quote-block {margin-left: 20px !important;}
body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {width: calc(100vw - 91px);}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: 45px;}
body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: left;}
body:not(.sqs-edit-mode-active) .quote-block::after {top: 0;}
}
/* Paragraph */ .quote-block blockquote {color: #000000;font-size: 16px; line-height: 1.2;}
mark {
  background-color: #037d8b;
  color: white;
}
body:not(.sqs-edit-mode-active) .quote-block.sqs-block {padding: 0 0 5px !important;}
</style>