(34 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; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
.timeline { | .timeline { | ||
Line 73: | Line 16: | ||
position: relative; | position: relative; | ||
} | } | ||
+ | |||
.timeline__content-desc { | .timeline__content-desc { | ||
− | margin: 15px; | + | margin-top: 15px; |
+ | margin-bottom: 15px; | ||
font-size: 20px; | font-size: 20px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
Line 84: | Line 29: | ||
text-align: justify; | text-align: justify; | ||
} | } | ||
− | |||
.timeline:before { | .timeline:before { | ||
position: absolute; | position: absolute; | ||
Line 96: | Line 40: | ||
.timeline-item { | .timeline-item { | ||
− | + | margin-top:10%; | |
opacity: .3; | opacity: .3; | ||
filter: blur(2px); | filter: blur(2px); | ||
Line 108: | Line 52: | ||
.timeline-item:before { | .timeline-item:before { | ||
− | content: attr(data-text) '\ | + | content: attr(data-text) '\A' attr(title); |
− | white-space: pre; | + | white-space: pre-line; |
letter-spacing: 3px; | letter-spacing: 3px; | ||
width: 100%; | width: 100%; | ||
Line 122: | Line 66: | ||
opacity: 0; | opacity: 0; | ||
right: calc(-100% - 56px); | right: calc(-100% - 56px); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 162: | Line 97: | ||
max-width: 100%; | max-width: 100%; | ||
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4); | box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4); | ||
+ | border-radius:15px; | ||
} | } | ||
− | |||
− | |||
− | |||
.timeline-container { | .timeline-container { | ||
Line 208: | Line 141: | ||
font-weight: normal; | font-weight: normal; | ||
} | } | ||
− | + | ||
− | + | @media only screen and (max-width: 1024px) { | |
+ | .timeline__content { | ||
+ | margin-top: 75px; | ||
+ | } | ||
+ | .timeline-item { | ||
+ | opacity: .3; | ||
+ | filter: blur(2px); | ||
+ | transition: .3s; | ||
+ | box-sizing: border-box; | ||
+ | width: 100%; | ||
+ | display: flex; | ||
+ | position: relative; | ||
+ | transform: translateY(-80px); | ||
+ | } | ||
+ | .timeline-item:before { | ||
+ | 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