Line 2: | Line 2: | ||
<style> | <style> | ||
− | + | .timeline { | |
− | + | display: flex; | |
− | + | margin: 0 auto; | |
− | + | flex-wrap: wrap; | |
− | + | flex-direction: column; | |
− | + | width: 80%; | |
− | + | max-width: 1000px; | |
− | + | position: relative; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
+ | .timeline__content-desc { | ||
+ | margin: 15px; | ||
+ | font-size: 20px; | ||
+ | box-sizing: border-box; | ||
+ | color: #333; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | font-weight: normal; | ||
+ | line-height: 22px; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .timeline:before { | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | width: 2px; | ||
+ | height: 100%; | ||
+ | margin-left: -1px; | ||
+ | content: ""; | ||
+ | background: rgba(255, 255, 255, 0.07); | ||
+ | } | ||
+ | |||
+ | .timeline-item { | ||
+ | padding: 40px 0; | ||
+ | opacity: .3; | ||
+ | filter: blur(2px); | ||
+ | transition: .3s; | ||
+ | box-sizing: border-box; | ||
+ | width: calc(50% - 40px); | ||
+ | display: flex; | ||
+ | position: relative; | ||
+ | transform: translateY(-80px); | ||
+ | } | ||
+ | |||
+ | .timeline-item:before { | ||
+ | content: attr(data-text) '\a' attr(title); | ||
+ | white-space: pre; | ||
+ | letter-spacing: 3px; | ||
+ | width: 100%; | ||
+ | position: absolute; | ||
+ | color: #f9cb8f; | ||
+ | font-size: 24px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | border-left: 2px solid #f9cb8f; | ||
+ | top: 70%; | ||
+ | margin-top: -5px; | ||
+ | padding-left: 15px; | ||
+ | opacity: 0; | ||
+ | right: calc(-100% - 56px); | ||
+ | } | ||
+ | |||
+ | #t7.timeline-item:before { | ||
+ | content: attr(data-text) '\A' attr(title1) attr(title2); | ||
+ | white-space: pre; | ||
+ | } | ||
+ | #t9.timeline-item:before { | ||
+ | content: attr(data-text) '\A' attr(title1) '\A' attr(title2); | ||
+ | white-space: pre; | ||
+ | } | ||
+ | |||
+ | .timeline-item:nth-child(even) { | ||
+ | align-self: flex-end; | ||
+ | } | ||
+ | |||
+ | .timeline-item:nth-child(even):before { | ||
+ | right: auto; | ||
+ | text-align: right; | ||
+ | left: calc(-100% - 56px); | ||
+ | padding-left: 0; | ||
+ | border-left: none; | ||
+ | border-right: 2px solid #f9cb8f; | ||
+ | padding-right: 15px; | ||
+ | } | ||
+ | |||
+ | .timeline-item.active { | ||
+ | opacity: 1; | ||
+ | /*transform: translateY(0);*/ | ||
+ | filter: initial; | ||
+ | } | ||
+ | |||
+ | .timeline-item.active:before { | ||
+ | top: 50%; | ||
+ | transition: .1s all .1s; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | .timeline__img { | ||
+ | max-width: 100%; | ||
+ | box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4); | ||
+ | } | ||
+ | |||
+ | .timeline__img:hover { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .timeline-container { | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | padding: 80px 0; | ||
+ | transition: .3s ease 0s; | ||
+ | background-attachment: fixed; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | .timeline-container:before { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | content: ""; | ||
+ | } | ||
+ | |||
+ | .timeline-header { | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | margin-bottom: 120px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .timeline-header_title { | ||
+ | color: #f9cb8f; | ||
+ | font-size: 46px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | font-weight: normal; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .timeline-header_subtitle { | ||
+ | color: #3cbac8; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | font-size: 16px; | ||
+ | letter-spacing: 5px; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | #paragraph p{ | ||
+ | font-size:16px !important; | ||
+ | } | ||
+ | |||
Revision as of 11:02, 31 October 2017