Красивые счёчики Bootstrap & jQuery / Элементы / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Bootstrap: 3, 4

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

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

Вес файла: 1.3 Kb

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

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

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

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

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

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

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

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

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

Авторство: //goo.gl/ReZr7u

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

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

Теги: counter, счётчики, Bootstrap, Counters, Snippet, bestjquery

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

Добавлено: 2018-12-05 в 12:07

Метка: 1544000846

⇄ ⇅

.counter{
 color: #fff;
 font-family: 'Roboto', sans-serif;
 text-align: center;
 width: 200px;
 height: 235px;
 margin: 0 auto;
 padding: 33px 25px 20px;
 position: relative;
 z-index: 1;
}
.counter:before,
.counter:after{
 content: '';
 background: linear-gradient(-45deg,#22a6b3 33%,#68c1c9 29%,#68c1c9 63%,#7ed6df 0%);
 height: 200px;
 width: 200px;
 border: 18px solid #fff;
 border-radius: 50%;
 transform: translateX(-50%) rotate(0);
 position: absolute;
 left: 50%;
 top: 0;
 z-index: -1;
 transition: all 0.3s ease 0s;
}
.counter:hover:before{
 transform: translateX(-50%) rotate(360deg);
 box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.counter:after{
 background: #22a6b3;
 width: 150px;
 top: auto;
 bottom: 0;
 z-index: -2;
}
.counter .counter-icon{ font-size: 30px; }
.counter .counter-value{
 font-size: 30px;
 font-weight: 700;
 margin: 0 0 3px;
 display: block;
}
.counter h3{
 font-weight: 600;
 font-size: 15px;
 letter-spacing: 1px;
 text-transform: uppercase;
 margin: 0;
}
.counter.magenta:before{
 background: linear-gradient(-45deg,#c641c0 33%,#db4ed4 29%,#db4ed4 63%,#dd7ed9 0%);
}.counter.magenta:after{ background: #c641c0; }
.counter.green:before{
 background: linear-gradient(-45deg,#6eaa40 33%,#8abc62 29%,#8abc62 63%,#acd18e 0%);
}
.counter.green:after{ background: #6eaa40; }
.counter.orange:before{
 background: linear-gradient(-45deg,#e8742c 33%,#ef8b51 29%,#ef8b51 63%,#efac86 0%);
}
.counter.orange:after{ background: #e8742c; }
@media screen and (max-width:990px){
 .counter{ margin-bottom: 40px; }
}
</style>

<div class="col-md-3 col-sm-6">
 <div class="counter">
 <div class="counter-icon">
 <i class="fa fa-globe"></i>
 </div>
 <span class="counter-value">1245</span>
 <h3>Web Designing</h3>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="counter magenta">
 <div class="counter-icon">
 <i class="fa fa-mobile-alt"></i>
 </div>
 <span class="counter-value">1189</span>
 <h3>Responsive Design</h3>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="counter green">
 <div class="counter-icon">
 <i class="fa fa-briefcase"></i>
 </div>
 <span class="counter-value">1370</span>
 <h3>Brand Building</h3>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="counter orange">
 <div class="counter-icon">
 <i class="fa fa-rocket"></i>
 </div>
 <span class="counter-value">1182</span>
 <h3>Web Development</h3>
 </div>
 </div>

</div></div>

BootstrapTema

Красивые счёчики Bootstrap & jQuery

Скриншот

Подробнее

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

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

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