| Line 31: | Line 31: | ||
} | } | ||
| + | .timeline:before { | ||
| + | position: absolute; | ||
| + | left: 50%; | ||
| + | width: 2px; | ||
| + | height: 100%; | ||
| + | margin-left: -1px; | ||
| + | content: ""; | ||
| + | } | ||
| + | |||
| + | @media only screen and(max-width: 777px) { | ||
| + | .timeline:before { | ||
| + | left: 40px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | .timeline-item { | ||
| + | padding: 40px 0; | ||
| + | opacity: 0.3; | ||
| + | filter: blue(2px); | ||
| + | transition: 0.5s; | ||
| + | box-sizing: border-box; | ||
| + | width: calc(50% -40px); | ||
| + | display: flex; | ||
| + | position: relative; | ||
| + | transform: translateY(-80px); | ||
| + | } | ||
| + | |||
| + | .timeline-item:before{ | ||
| + | content: attr(data-text); | ||
| + | letter-spacing: 3px; | ||
| + | width: 100%; | ||
| + | position: absolute; | ||
| + | font-size: 18px; | ||
| + | border-left: 2px solid rgba(255, 255, 255, 0.5); | ||
| + | top: 70%; | ||
| + | margin-top: -5px; | ||
| + | padding-left: 15px; | ||
| + | opacity: 0; | ||
| + | right: calc(-100% -55px); | ||
| + | |||
| + | } | ||
</style> | </style> | ||
Revision as of 05:11, 14 October 2019
TIMELINE DESIGN
NEW AND CREATIVE
June
blah blah blah blah blah blah blah blah
July
blah blah blah blah blah blah blah blah
July
blah blah blah blah blah blah blah blah