Timeline Images / Элементы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

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

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

Bootstrap: 3, 4

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

Язык: Русский

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

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

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

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

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

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

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

Авторство: bootstraptema.ru

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

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

Теги: Responsive, Snippet, элемент, html, адаптивные, сниппет, Bootstrap, element

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

Добавлено: 2016-04-11 в 08:50

Метка: 1581169375

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />

<style>
.timeline {
 margin: 0px auto;
 max-width: 40em;
 overflow: hidden;
 height: auto;
 position: relative;
 padding: 0px;
 list-style-type: none;
 background: url(https://bootstraptema.ru/snippets/element/2016/timeline-images/line.png);
 background-repeat: repeat-y;
 background-position: 50% 0;
}
.timeline .year {
 background: #444;
 font-size: 1em;
 max-width: 4em;
 clear: both;
 margin: 1em auto 2em;
 color: white;
 border-radius: 30% / 100%;
 text-align: center;
 margin-top: 2em;
}
.timeline .year:first-of-type {
 margin-top: 0 !important;
}
.timeline .event {
 position: relative;
 text-align: center;
 float: right;
 clear: right;
 width: 45%;
 margin: 1em 2.5%;
 border-radius: 5px;
 list-style-type: none;
 display: block;
 padding: .4em;
 background: white;
 z-index: 15;
 color: #4d4d4d;
 border: 1px solid #9d9d9d;
 text-decoration: none;
 -webkit-transition: background .15s linear;
 -moz-transition: background .15s linear;
 -ms-transition: background .15s linear;
 -o-transition: background .15s linear;
 transition: background .15s linear;
}
.timeline .event.featured:after, .timeline .event.featured:before {
 display: none;
}
@media all and (max-width: 600px) {
 .timeline .event {
 width: 85%;
 }
}
.timeline .event.offset-first {
 margin-top: -1.5em !important;
}
.timeline .event img {
 margin-top: 10px;
 max-width:100%;
}
.timeline .event:hover {
 background: #e9e9e9;
}
.timeline .event:hover:after {
 background: #505050;
}
.timeline .event:nth-of-type(2n) {
 float: left;
 clear: left;
}
@media all and (min-width: 600px) {
 .timeline .event:nth-of-type(2n) {
 margin-top: 2em;
 }
}
@media all and (min-width: 650px) {
 .timeline .event:after {
 display: block;
 content: ' ';
 height: 9px;
 width: 9px;
 background: #9d9d9d;
 border-radius: 50%;
 position: absolute;
 left: -5%;
 top: 1.5em;
 border: 2px solid white;
 }
}
.timeline .event:nth-child(2n):after {
 right: -5%;
 left: auto;
}
</style>

<div class="container">

<ul class='timeline'>

<li class="year">2016</li>

<li class='event offset-first'>
<h4>Самолёты</h4>
<a href='#'><img src="https://bootstraptema.ru/snippets/element/2016/timeline-images/ts-1.jpg"/></a>
 </li>

<li class='event'>
<h4>Диван</h4>
<a href='#'><img src="https://bootstraptema.ru/snippets/element/2016/timeline-images/ts-2.jpg"/></a>
 </li>

<li class="year">2015</li>

<li class="event">
<h4>Стишок</h4>
<a href='#'><img src="https://bootstraptema.ru/snippets/element/2016/timeline-images/ts-4.jpg"/></a>
 </li>

<li class="event offset-first">
<h4>Медведи</h4>
<a href='#'><img src="https://bootstraptema.ru/snippets/element/2016/timeline-images/ts-3.jpg"/></a>
 </li>

</ul>

</div>