(36 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
+ | #paragraph p{ | ||
+ | font-size:18px !important; | ||
+ | padding-left:0 !important; | ||
+ | } | ||
− | @media only screen and (max-width: | + | |
− | + | .timeline { | |
+ | display: flex; | ||
+ | margin: 0 auto; | ||
+ | flex-wrap: wrap; | ||
+ | flex-direction: column; | ||
+ | width: 80%; | ||
+ | max-width: 1000px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | |||
+ | .timeline__content-desc { | ||
+ | margin-top: 15px; | ||
+ | margin-bottom: 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 { | ||
+ | margin-top:10%; | ||
+ | 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-line; | ||
+ | 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); | ||
+ | } | ||
+ | |||
+ | .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); | ||
+ | border-radius:15px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .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; | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width: 1024px) { | ||
+ | .timeline__content { | ||
margin-top: 75px; | margin-top: 75px; | ||
− | } | + | } |
.timeline-item { | .timeline-item { | ||
− | |||
opacity: .3; | opacity: .3; | ||
filter: blur(2px); | filter: blur(2px); | ||
Line 17: | Line 156: | ||
transform: translateY(-80px); | transform: translateY(-80px); | ||
} | } | ||
− | + | .timeline-item:before { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
top: 0; | top: 0; | ||
− | } | + | left: 10px; |
+ | } | ||
+ | .timeline-item:nth-child(even) { | ||
+ | align-self: flex-start; | ||
+ | } | ||
+ | .timeline-item:nth-child(even):before { | ||
+ | top: 0; | ||
+ | right:0; | ||
+ | left:auto; | ||
+ | } | ||
+ | .timeline-item.active:before { | ||
+ | top: 0; | ||
+ | transition: .1s all .1s; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (max-width: 768px) { | ||
+ | .timeline__img{ | ||
+ | margin-top:10%; | ||
+ | } | ||
+ | .timeline-item:before { | ||
+ | font-size:16px; | ||
+ | top: -5%; | ||
+ | } | ||
+ | .timeline-item:nth-child(even):before { | ||
+ | font-size:16px; | ||
+ | top: -5%; | ||
+ | } | ||
+ | .timeline-item:before { | ||
+ | font-size:16px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
} | } | ||
Latest revision as of 13:24, 1 November 2017