|
|
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> |