|
|
| Line 3: |
Line 3: |
| | | | |
| | @media only screen and (max-width: 768px) { | | @media only screen and (max-width: 768px) { |
| − | #paragraph{
| |
| − | background-color:red !important;
| |
| − |
| |
| − | }
| |
| | .timeline__content { | | .timeline__content { |
| | margin-top: 75px; | | margin-top: 75px; |
| Line 66: |
Line 62: |
| | } | | } |
| | | | |
| − | .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;
| |
| − | }
| |
| | | | |
| | | | |
| | </style> | | </style> |
| | </html> | | </html> |
