Набор оригинальных счётчиков / Элементы / Сниппеты Bootstrap

Версия: v1.0

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

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

Bootstrap: 3, 4, 5

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

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

Вес файла: 1.3 Kb

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

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

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

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

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

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

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

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

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

Авторство: https://bestjquery.com/tutorial/counter/demo128/

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

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

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

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

Добавлено: 2021-01-27 в 09:20

Метка: 1611728558

⇄ ⇅

.counter .counter-content{
 color: #fff;
 background: #14A0C1;
 min-height: 193px;
 padding: 35px 10px 60px;
 margin: 0 0 0 35px;
 clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0 20%);
}

.counter .counter-icon{
 font-size: 40px;
 margin: 0 0 5px;
}

.counter h3{
 font-size: 17px;
 font-weight: 500;
 letter-spacing: 0.5px;
 text-transform: uppercase;
 margin: 0;
}

.counter .counter-value{
 color: #fff;
 background: #3DCFE8;
 font-size: 35px;
 font-weight: 600;
 text-shadow: 0 0 10px rgba(0,0,0,0.3);
 width: 155px;
 padding: 10px 5px 7px;
 margin: -33px 0 0;
 border-radius: 20px 20px 0 0;
 display: block;
 position: relative;
}

.counter .counter-value:after{
 content: '';
 background: linear-gradient(to top left, transparent 49%, #0E7385 50%);
 height: 35px;
 width: 45px;
 position: absolute;
 bottom: 0;
 right: -45px;
}

.counter.purple .counter-content{ background: #5058AB; }
.counter.purple .counter-value{ background: #7884CC; }
.counter.purple .counter-value:after{
 background: linear-gradient(to top left, transparent 49%, #132A87 50%);
}

.counter.green .counter-content{ background: #01CD9A; }
.counter.green .counter-value{ background: #5AE2BC; }
.counter.green .counter-value:after{
 background: linear-gradient(to top left, transparent 49%, #0A805E 50%);
}

.counter.magenta .counter-content{ background: #ea4848; }
.counter.magenta .counter-value{ background: #ea7272; }
.counter.magenta .counter-value:after{
 background: linear-gradient(to top left, transparent 49%, #a53636 50%);
}

@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-content">
 <div class="counter-icon">
 <i class="fa fa-globe"></i>
 </div>
 <h3>Web Designing</h3>
 </div>
 <span class="counter-value">1963</span>
 </div>
 </div>
 <div class="col-md-3 col-sm-6">
 <div class="counter purple">
 <div class="counter-content">
 <div class="counter-icon">
 <i class="fa fa-rocket"></i>
 </div>
 <h3>Web Development</h3>
 </div>
 <span class="counter-value">1854</span>
 </div>
 </div>
 <div class="col-md-3 col-sm-6">
 <div class="counter green">
 <div class="counter-content">
 <div class="counter-icon">
 <i class="fa fa-users"></i>
 </div>
 <h3>Brand Building</h3>
 </div>
 <span class="counter-value">1756</span>
 
 </div>
 </div>
 <div class="col-md-3 col-sm-6">
 <div class="counter magenta">
 <div class="counter-content">
 <div class="counter-icon">
 <i class="fa fa-mobile"></i>
 </div>
 <h3>Responsive Design</h3>
 </div>
 <span class="counter-value">1823</span>
 </div>
 </div>

</div>

BootstrapTema

Набор оригинальных счётчиков

Скриншот

Подробнее

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

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

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