Простой дизайн счётчика / Элементы / Сниппеты Bootstrap

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

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

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

Вес файла: 1.2 Kb

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

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

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

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

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

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

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

Рейтинг: 3.0 / 5 - 2 голосов

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

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

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

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

Теги: элемент, element, Snippet, Bootstrap, counter, сниппет, счётчик

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

Добавлено: 2022-04-19 в 20:51

Метка: 1650390706

⇄ ⇅

.counter .counter-icon{
 font-size: 40px;
 line-height: 105px;
 width: 105px;
 height: 105px;
 display: inline-block;
}

.counter .counter-value{
 color: #fff;
 background: linear-gradient(to top left,#269390 49%,#46AEAF 50%);
 font-size: 35px;
 font-weight: 300;
 line-height: 105px;
 width: 105px;
 height: 105px;
 margin: 0 0 20px;
 text-shadow: 0 0 5px rgba(0,0,0,0.25);
 vertical-align: top;
 display: inline-block;
}

.counter h3{
 font-size: 18px;
 font-weight: 600;
 letter-spacing: 0.5px;
 text-transform: capitalize;
 margin: 0 0 20px;
}

.counter.pink{
 color: #e23a58;
 border-color: #ca3258;
}
.counter.pink .counter-value{ background: linear-gradient(to top left,#cc3254 49%,#e23a59 50%); }

.counter.yellow{
 color: #f6af23;
 border-color: #f2b317;
}
.counter.yellow .counter-value{ background: linear-gradient(to top left,#f2b218 49%,#fcc82c 50%); }

.counter.blue{
 color: #39506a;
 border-color: #3c506b;
}
.counter.blue .counter-value{ background: linear-gradient(to top left,#2f4154 49%,#3c506b 50%); }

@media screen and (max-width:990px){
 .counter{ margin-bottom: 40px; }
} 
</style>

<div class="row">
 <div class="col-md-3 col-sm-6">
 <div class="counter"> 
 <span class="counter-value">1963</span>
 <div class="counter-icon"><i class="fa fa-globe"></i></div> 
 <h3>Web Designing</h3>
 </div>
 </div>
 <div class="col-md-3 col-sm-6">
 <div class="counter yellow">
 <span class="counter-value">1854</span>
 <div class="counter-icon"><i class="fa fa-rocket"></i></div>
 <h3>Web Development</h3>
 </div>
 </div>
 <div class="col-md-3 col-sm-6">
 <div class="counter pink">
 <span class="counter-value">1756</span>
 <div class="counter-icon"><i class="fa fa-users"></i></div>
 <h3>Brand Building</h3>
 </div>
 </div>
 <div class="col-md-3 col-sm-6">
 <div class="counter blue">
 <span class="counter-value">1823</span>
 <div class="counter-icon"><i class="fa fa-briefcase"></i></div>
 <h3>Responsive Design</h3>
 </div>
 </div>
 </div>

</div>

BootstrapTema

Простой дизайн счётчика

Скриншот

Подробнее

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

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

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