div.timeline-icon>i {
margin-top: 12px; margin-left: 12px;
}
- timeline .timeline-item:after,#timeline .timeline-item:before {
content: ; display: block; width: 100%; clear: both;
}
- timeline {
width: 90%; margin: 30px auto; position: relative; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease;
}
- timeline:before {
content: ""; width: 3px; height: 100%; background: #ee4d4d; left: 50%; top: 0; position: absolute;
}
- timeline:after {
content: ""; clear: both; display: table; width: 100%}
- timeline .timeline-item {
margin-bottom: 50px; position: relative;
}
- timeline .timeline-item .timeline-icon {
background: #ee4d4d; width: 50px; height: 50px; position: absolute; top: 0; left: 50%; overflow: hidden; margin-left: -23px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%}
- timeline .timeline-item .timeline-icon img {
position: relative; top: 14px; left: 14px;
}
- timeline .timeline-item .timeline-content {
width: 45%; background: #fff; padding: 20px; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;
}
- timeline .timeline-item .timeline-content h2 {
font-size: 1.5em; padding: 15px; background: #ee4d4d; color: #fff; margin: -20px -20px 0 -20px;
}
- timeline .timeline-item .timeline-content:before {
content: ; position: absolute; left: 45%; top: 20px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #ee4d4d;
}
- timeline .timeline-item .timeline-content.right {
float: right;
}
- timeline .timeline-item .timeline-content.right:before {
content: ; right: 45%; left: inherit; border-left: 0; border-right: 7px solid #ee4d4d;
}
@media screen and (max-width: 768px) {
#timeline { margin: 30px; padding: 0;
}
- timeline:before {
left: 0;
}
- timeline .timeline-item .timeline-content {
width: 90%; float: right;
}
- timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
left: 10%; margin-left: -6px; border-left: 0; border-right: 7px solid #ee4d4d;
}
- timeline .timeline-item .timeline-icon {
left: 0;
} }