Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.timeline { | .timeline { | ||
display: flex; | display: flex; | ||
Line 211: | Line 150: | ||
font-weight: normal; | font-weight: normal; | ||
} | } | ||
+ | @media only screen and (max-width: 1024px) { | ||
+ | |||
+ | .timeline__content { | ||
+ | margin-top: 75px; | ||
+ | } | ||
+ | .timeline-item { | ||
+ | padding: 40px 0; | ||
+ | opacity: .3; | ||
+ | filter: blur(2px); | ||
+ | transition: .3s; | ||
+ | box-sizing: border-box; | ||
+ | width: 100%; | ||
+ | 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: #3cbac8; | ||
+ | font-size: 20px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | border-left: 2px solid #f9cb8f; | ||
+ | margin-top: 5%; | ||
+ | right: 0; | ||
+ | left: 10px; | ||
+ | padding-left: 15px; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | #t7.timeline-item:before { | ||
+ | content: attr(data-text) '\A' attr(title1) '\A' attr(title2); | ||
+ | white-space: pre; | ||
+ | } | ||
+ | .timeline-item:nth-child(even) { | ||
+ | align-self: flex-start; | ||
+ | } | ||
+ | .timeline-item:nth-child(even):before { | ||
+ | content: attr(data-text) '\a' attr(title); | ||
+ | white-space: pre; | ||
+ | letter-spacing: 3px; | ||
+ | width: 100%; | ||
+ | position: absolute; | ||
+ | color: #3cbac8; | ||
+ | font-size: 20px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | border-left: 2px solid #f9cb8f#; | ||
+ | margin-top: 5%; | ||
+ | right: 0; | ||
+ | left: 10px; | ||
+ | padding-left: 15px; | ||
+ | opacity: 1; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .timeline-item.active:before { | ||
+ | top: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
#paragraph p{ | #paragraph p{ | ||
font-size:16px !important; | font-size:16px !important; |
Revision as of 09:17, 1 November 2017