Color Timeline / Элементы / Сниппеты Bootstrap

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

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

Bootstrap: 3, 4

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

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

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

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

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

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

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

Рейтинг: 4.5 / 5 - 4 голосов

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

Авторство: Посмотреть

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

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

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

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

Добавлено: 2017-04-28 в 12:53

Метка: 1493373185

⇄ ⇅

/* style timeline */
 .panel-timeline{
 width: 80%;
 margin: 20px auto;
 position: relative;
 }
 .panel-timeline:before{
 content: "";
 display: block;
 width: 2px;
 height: 100%;
 background: rgba(255,255,255,0.2);
 margin: 0 0 0 -1px;
 position: absolute;
 top: 0;
 left: 50%;
 }
 .panel-timeline .timeline{
 width: 100%;
 margin-bottom: 20px;
 position: relative;
 }
 .panel-timeline .timeline:after{
 content: "";
 display: block;
 clear: both;
 }
 .panel-timeline .timeline-content{
 width: 40%;
 float: left;
 margin: 5px 0 0 0;
 border-radius: 6px;
 }
 .panel-timeline .date{
 display: block;
 width: 70px;
 height: 70px;
 border-radius: 50%;
 background: #25303b;
 padding: 5px 0;
 margin: 0 0 0 -36px;
 position: absolute;
 top: 0;
 left: 50%;
 font-size: 12px;
 font-weight: 900;
 text-transform: uppercase;
 color: rgba(255,255,255,0.5);
 border: 2px solid rgba(255,255,255,0.2);
 box-shadow: 0 0 0 7px #25303b;
 }
 .panel-timeline .date span{
 display: block;
 text-align: center;
 }
 .panel-timeline .day,
 .panel-timeline .year{
 font-size: 10px;
 }
 .panel-timeline .month{
 font-size: 18px;
 }
 .panel-timeline .title{
 padding: 15px;
 margin: 0;
 font-size: 20px;
 color: #fff;
 text-transform: uppercase;
 letter-spacing: -1px;
 border-radius: 6px 6px 0 0;
 position: relative;
 }
 .panel-timeline .title:after{
 content: "";
 width: 10px;
 height: 10px;
 position: absolute;
 top: 20px;
 right: -5px;
 transform: rotate(-45deg);
 }
 .panel-timeline .description{
 padding: 15px;
 margin: 0;
 font-size: 14px;
 color: #656565;
 background: #fff;
 border-radius: 0 0 6px 6px;
 }
 .panel-timeline .timeline:nth-child(2n+2) .timeline-content{
 float: right;
 }
 .panel-timeline .timeline:nth-child(2n+2) .title:after{
 left: -5px;
 }
 .panel-timeline .timeline:nth-child(1) .title,
 .panel-timeline .timeline:nth-child(1) .title:after{
 background: #9f84c4;
 }
 .panel-timeline .timeline:nth-child(2) .title,
 .panel-timeline .timeline:nth-child(2) .title:after{
 background: #02a2dd;
 }
 .panel-timeline .timeline:nth-child(3) .title,
 .panel-timeline .timeline:nth-child(3) .title:after{
 background: #58b25e;
 }
 .panel-timeline .timeline:nth-child(4) .title,
 .panel-timeline .timeline:nth-child(4) .title:after{
 background: #eab715;
 }
 @media only screen and (max-width: 990px){
 .panel-timeline{ width: 100%; }
 }
 @media only screen and (max-width: 767px){
 .panel-timeline:before,
 .panel-timeline .date{
 left: 6%;
 }
 .panel-timeline .timeline-content{
 width: 85%;
 float: right;
 }
 .panel-timeline .title:after{
 left: -5px;
 }
 }
 @media only screen and (max-width: 480px){
 .panel-timeline:before,
 .panel-timeline .date{
 left: 12%;
 }
 .panel-timeline .timeline-content{
 width: 75%;
 }
 .panel-timeline .date{
 width: 60px;
 height: 60px;
 margin-left: -30px;
 }
 .panel-timeline .month{
 font-size: 14px;
 }
 }
</style>

<div class="timeline">
 <div class="timeline-content">
 <span class="date">
 <span class="day">27</span>
 <span class="month">Апр</span>
 <span class="year">2017</span>
 </span>
 <h2 class="title"><span class="glyphicon glyphicon-asterisk"></span> Тимелине Бутстрап</h2>
 <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor. <a href="http://bootstraptema.ru/" target="_blank">BootstrapTema</a></p>
 </div>
 </div>

<div class="timeline">
 <div class="timeline-content">
 <span class="date">
 <span class="day">26</span>
 <span class="month">Апр</span>
 <span class="year">2017</span>
 </span>
 <h2 class="title"><span class="glyphicon glyphicon-phone"></span> Адаптивный дизайн</h2>
 <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p>
 </div>
 </div>

<div class="timeline">
 <div class="timeline-content">
 <span class="date">
 <span class="day">25</span>
 <span class="month">Апр</span>
 <span class="year">2017</span>
 </span>
 <h2 class="title"><span class="glyphicon glyphicon-tint"></span> Выбор расцветки</h2>
 <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p>
 </div>
 </div>

<div class="timeline">
 <div class="timeline-content">
 <span class="date">
 <span class="day">24</span>
 <span class="month">Апр</span>
 <span class="year">2017</span>
 </span>
 <h2 class="title"><span class="glyphicon glyphicon-heart-empty"></span> Простая установка</h2>
 <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p>
 </div>
 </div>

</div>

</div>
</div>

BootstrapTema

Color Timeline

Скриншот

Подробнее

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

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

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