Timeline by year CSS / Элементы / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, WHMCS

Язык: Английский

Вес файла: 1.4 Kb

Уникальный ID: 4796

Количество символов:

Посмотрели: 1373 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-4796-20

Скачали бесплатно: 60 раз

Прокомментировали: 0 раз

Рейтинг: 3.7 / 5 - 7 голосов

Тип лицензии: CC BY 4.0

Авторство: https://bestjquery.com/tutorial/timeline/demo150/

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, element, элемент, Timeline, Bootstrap, сниппет

Поделился: BootstrapТема

Добавлено: 2021-09-06 в 11:47

Метка: 1630918048

⇄ ⇅

.main-timeline .timeline{
 width: calc(50% + 65px);
 padding: 0 123px 0 0;
 float: left; 
}

.timeline a{
 text-decoration: none;
}

.main-timeline .timeline-content{
 color: #F63959;
 background: linear-gradient(to top,transparent 50%, #F63959 50%);
 text-align: center;
 min-height: 170px;
 padding: 15px;
 border-radius: 40px;
 display: block;
 position: relative;
 z-index: 1;
}

.main-timeline .timeline-content:before{
 content: '';
 background-color: #fff;
 border-radius: 35px;
 position: absolute;
 left: 7px;
 right: 7px;
 top: 7px;
 bottom: 7px;
 z-index: -1;
}

.main-timeline .timeline-content:hover{ text-decoration: none; }

.main-timeline .timeline-year{
 color: #fff;
 background: linear-gradient(transparent 50%, #F63959 50%);
 font-size: 33px;
 line-height: 130px;
 height: 130px;
 width: 130px;
 border-radius: 50%;
 transform: translateY(-50%);
 position: absolute;
 right: -123px;
 top: 50%;
 z-index: 1;
}

.main-timeline .timeline-year:before{
 content: '';
 background-color: #F63959;
 border-radius: inherit;
 border: 10px solid #fff;
 position: absolute;
 left: 7px;
 right: 7px;
 top: 7px;
 bottom: 7px;
 z-index: -1;
}

.main-timeline .timeline-icon{ font-size: 35px; }

.main-timeline .title{
 font-size: 20px;
 font-weight: 500;
 text-transform: capitalize;
 margin: 0 0 8px;
}

.main-timeline .description{
 color: #777;
 font-size: 13px;
 font-weight: 400;
 letter-spacing: 0.5px;
 line-height: 18px;
 margin: 0;
}

.main-timeline .timeline:nth-child(even){
 padding: 0 0 0 123px;
 float: right;
}

.main-timeline .timeline:nth-child(even) .timeline-year{
 right: auto;
 left: -123px;
}

.main-timeline .timeline:nth-child(4n+2) .timeline-content{
 color: #4C39D3;
 background: linear-gradient(to top,transparent 50%, #4C39D3 50%);
 border-color: #4C39D3;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-year{
 background: linear-gradient(transparent 50%, #4C39D3 50%);
}
.main-timeline .timeline:nth-child(4n+2) .timeline-year:before{ background: #4C39D3; }

.main-timeline .timeline:nth-child(4n+3) .timeline-content{
 color: #FC562E;
 background: linear-gradient(to top,transparent 50%, #FC562E 50%);
 border-color: #FC562E;
}
.main-timeline .timeline:nth-child(4n+3) .timeline-year{
 background: linear-gradient(transparent 50%, #FC562E 50%);
}
.main-timeline .timeline:nth-child(4n+3) .timeline-year:before{ background: #FC562E; }

.main-timeline .timeline:nth-child(4n+4) .timeline-content{
 color: #358AE6;
 background: linear-gradient(to top,transparent 50%, #358AE6 50%);
 border-color: #358AE6;
}
.main-timeline .timeline:nth-child(4n+4) .timeline-year{
 background: linear-gradient(transparent 50%, #358AE6 50%);
}
.main-timeline .timeline:nth-child(4n+4) .timeline-year:before{ background: #358AE6; }

@media screen and (max-width:767px){
 .main-timeline .timeline{
 width: 100%;
 margin: 0 0 30px;
 } 
}

@media screen and (max-width:576px){
 .main-timeline .timeline,
 .main-timeline .timeline:nth-child(even){
 padding: 123px 0 0 0;
 }

.main-timeline .timeline-year,
 .main-timeline .timeline:nth-child(even) .timeline-year{
 transform: translateY(0) translateX(-50%);
 left: 50%;
 right: auto;
 top: -123px;
 }
}
</style>

<div class="col-md-12">
 <div class="main-timeline">
 <div class="timeline">
 <a href="#" class="timeline-content">
 <div class="timeline-year">2021</div>
 <div class="timeline-icon"><i class="fa fa-globe"></i></div>
 <h3 class="title">Web Designing</h3>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo Integer males uada tellus lorem, et condimentum neque commodo
 </p>
 </a>
 </div>
 <div class="timeline">
 <a href="#" class="timeline-content">
 <div class="timeline-year">2020</div>
 <div class="timeline-icon"><i class="fa fa-rocket"></i></div> 
 <h3 class="title">Web Development</h3>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo Integer males uada tellus lorem, et condimentum neque commodo
 </p>
 </a>
 </div>
 <div class="timeline">
 <a href="#" class="timeline-content">
 <div class="timeline-year">2019</div>
 <div class="timeline-icon"><i class="fa fa-user"></i></div> 
 <h3 class="title">Java Script</h3>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo Integer males uada tellus lorem, et condimentum neque commodo
 </p>
 </a>
 </div>
 <div class="timeline">
 <a href="#" class="timeline-content">
 <div class="timeline-year">2018</div>
 <div class="timeline-icon"><i class="fa fa-briefcase"></i></div>
 <h3 class="title">Web Designing</h3>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo Integer males uada tellus lorem, et condimentum neque commodo
 </p>
 </a>
 </div>
 </div>

</div>

BootstrapTema

Timeline by year CSS

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0