Counter Icon Style / Элементы / Сниппеты Bootstrap

Версия: v1.0.0

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

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

Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метка: 1531732324

⇄ ⇅

.counter .counter-icon{
 font-size: 40px;
 color: #fff;
 position: absolute;
 top: 32px;
 left: 27px;
 transition: all 0.3s ease 0s;
}

.counter:hover .counter-icon{ transform: rotateY(360deg); }

.counter .counter-content{
 color: #8a3b97;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-37%, -32%);
}

.counter .counter-value{
 display: inline-block;
 font-size: 30px;
 font-weight: 600;
 transition: all 0.3s ease 0s;
}

.counter:hover .counter-value{ text-shadow: 0 0 1px #000; }

.counter .title{
 font-size: 18px;
 text-transform: capitalize;
 padding: 0 10px;
 margin: 0;
}

.counter.red .counter-content{ color: #d7292a; }

.counter.green .counter-content{ color: #0baa98; }

.counter.orange .counter-content{ color: #f48529; }

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

<div class="col-md-3 col-sm-6">
 <div class="counter">
 <svg x="0" y="0" width="200px" height="200px" viewBox="0 0 200 200">
 <ellipse id="XMLID_18_" fill="#fff" cx="98.989" cy="103.608" rx="98.989" ry="96.392"/>
 <path id="XMLID_61_" fill="#8a3b97" d="M98.89,200c35.826,0,67.204-18.533,84.58-46.289c-1.611,1.152-28.674,27.49-84.408,23.651
 c-28.365-1.955-38.415,5.755-41.691,13.769C69.999,196.82,84.062,200,98.89,200z"/>
 <path id="XMLID_20_" fill="#8a3b97" d="M64.005,13.934c0-0.004,0.001-0.012,0.001-0.012c-2.463-1.004-3.301-2.504-3.455-3.89
 c-0.214-1.946,1.532-4.378,3.422-5.044C74.387,1.325,80.77,8.873,80.77,8.873l2.75-0.399c-5.414-6.275-11.986-7.284-17.383-6.442
 c-3.817,0.595-7.303,2.39-10.208,4.875c-4.445,3.803-7.88,3.155-7.88,3.155l-0.04,0.058c-0.754-0.038-1.512-0.058-2.276-0.058
 c-24.297,0-43.995,19.181-43.995,42.841c0,11.581,4.728,22.083,12.396,29.792l-0.014,0.002c6.883,6.682,5.943,13.461,5.943,13.461
 l0,0c-5.148,35.39-9.305,96.435,25.072,88.367l-1.022-0.664c0,0-30.975,4.986-18.011-80.804c0.527-2.658,2.715-9.368,11.222-8.104
 c0.167,0.031,0.335,0.057,0.502,0.087c0.223,0.041,0.442,0.076,0.673,0.127c0.718,0.157,1.326,0.233,1.841,0.244
 c1.769,0.21,3.566,0.333,5.392,0.333c24.298,0,43.996-19.181,43.996-42.841C89.727,35.593,79.179,20.692,64.005,13.934z"/>
 </svg>
 <div class="counter-icon fa fa-globe"></div>
 <div class="counter-content">
 <span class="counter-value">4458</span>
 <h3 class="title">Web Design</h3>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="counter red">
 <svg x="0" y="0" width="200px" height="200px" viewBox="0 0 200 200">
 <ellipse id="XMLID_18_" fill="#fff" cx="98.989" cy="103.608" rx="98.989" ry="96.392"/>
 <path id="XMLID_61_" fill="#d7292a" d="M98.89,200c35.826,0,67.204-18.533,84.58-46.289c-1.611,1.152-28.674,27.49-84.408,23.651
 c-28.365-1.955-38.415,5.755-41.691,13.769C69.999,196.82,84.062,200,98.89,200z"/>
 <path id="XMLID_20_" fill="#d7292a" d="M64.005,13.934c0-0.004,0.001-0.012,0.001-0.012c-2.463-1.004-3.301-2.504-3.455-3.89
 c-0.214-1.946,1.532-4.378,3.422-5.044C74.387,1.325,80.77,8.873,80.77,8.873l2.75-0.399c-5.414-6.275-11.986-7.284-17.383-6.442
 c-3.817,0.595-7.303,2.39-10.208,4.875c-4.445,3.803-7.88,3.155-7.88,3.155l-0.04,0.058c-0.754-0.038-1.512-0.058-2.276-0.058
 c-24.297,0-43.995,19.181-43.995,42.841c0,11.581,4.728,22.083,12.396,29.792l-0.014,0.002c6.883,6.682,5.943,13.461,5.943,13.461
 l0,0c-5.148,35.39-9.305,96.435,25.072,88.367l-1.022-0.664c0,0-30.975,4.986-18.011-80.804c0.527-2.658,2.715-9.368,11.222-8.104
 c0.167,0.031,0.335,0.057,0.502,0.087c0.223,0.041,0.442,0.076,0.673,0.127c0.718,0.157,1.326,0.233,1.841,0.244
 c1.769,0.21,3.566,0.333,5.392,0.333c24.298,0,43.996-19.181,43.996-42.841C89.727,35.593,79.179,20.692,64.005,13.934z"/>
 </svg>
 <div class="counter-icon fa fa-rocket"></div>
 <div class="counter-content">
 <span class="counter-value">2535</span>
 <h3 class="title">Web Development</h3>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="counter green">
 <svg x="0" y="0" width="200px" height="200px" viewBox="0 0 200 200">
 <ellipse id="XMLID_18_" fill="#fff" cx="98.989" cy="103.608" rx="98.989" ry="96.392"/>
 <path id="XMLID_61_" fill="#0baa98" d="M98.89,200c35.826,0,67.204-18.533,84.58-46.289c-1.611,1.152-28.674,27.49-84.408,23.651
 c-28.365-1.955-38.415,5.755-41.691,13.769C69.999,196.82,84.062,200,98.89,200z"/>
 <path id="XMLID_20_" fill="#0baa98" d="M64.005,13.934c0-0.004,0.001-0.012,0.001-0.012c-2.463-1.004-3.301-2.504-3.455-3.89
 c-0.214-1.946,1.532-4.378,3.422-5.044C74.387,1.325,80.77,8.873,80.77,8.873l2.75-0.399c-5.414-6.275-11.986-7.284-17.383-6.442
 c-3.817,0.595-7.303,2.39-10.208,4.875c-4.445,3.803-7.88,3.155-7.88,3.155l-0.04,0.058c-0.754-0.038-1.512-0.058-2.276-0.058
 c-24.297,0-43.995,19.181-43.995,42.841c0,11.581,4.728,22.083,12.396,29.792l-0.014,0.002c6.883,6.682,5.943,13.461,5.943,13.461
 l0,0c-5.148,35.39-9.305,96.435,25.072,88.367l-1.022-0.664c0,0-30.975,4.986-18.011-80.804c0.527-2.658,2.715-9.368,11.222-8.104
 c0.167,0.031,0.335,0.057,0.502,0.087c0.223,0.041,0.442,0.076,0.673,0.127c0.718,0.157,1.326,0.233,1.841,0.244
 c1.769,0.21,3.566,0.333,5.392,0.333c24.298,0,43.996-19.181,43.996-42.841C89.727,35.593,79.179,20.692,64.005,13.934z"/>
 </svg>
 <div class="counter-icon fa fa-briefcase"></div>
 <div class="counter-content">
 <span class="counter-value">4956</span>
 <h3 class="title">Brand Building</h3>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="counter orange">
 <svg x="0" y="0" width="200px" height="200px" viewBox="0 0 200 200">
 <ellipse id="XMLID_18_" fill="#fff" cx="98.989" cy="103.608" rx="98.989" ry="96.392"/>
 <path id="XMLID_61_" fill="#f48529" d="M98.89,200c35.826,0,67.204-18.533,84.58-46.289c-1.611,1.152-28.674,27.49-84.408,23.651
 c-28.365-1.955-38.415,5.755-41.691,13.769C69.999,196.82,84.062,200,98.89,200z"/>
 <path id="XMLID_20_" fill="#f48529" d="M64.005,13.934c0-0.004,0.001-0.012,0.001-0.012c-2.463-1.004-3.301-2.504-3.455-3.89
 c-0.214-1.946,1.532-4.378,3.422-5.044C74.387,1.325,80.77,8.873,80.77,8.873l2.75-0.399c-5.414-6.275-11.986-7.284-17.383-6.442
 c-3.817,0.595-7.303,2.39-10.208,4.875c-4.445,3.803-7.88,3.155-7.88,3.155l-0.04,0.058c-0.754-0.038-1.512-0.058-2.276-0.058
 c-24.297,0-43.995,19.181-43.995,42.841c0,11.581,4.728,22.083,12.396,29.792l-0.014,0.002c6.883,6.682,5.943,13.461,5.943,13.461
 l0,0c-5.148,35.39-9.305,96.435,25.072,88.367l-1.022-0.664c0,0-30.975,4.986-18.011-80.804c0.527-2.658,2.715-9.368,11.222-8.104
 c0.167,0.031,0.335,0.057,0.502,0.087c0.223,0.041,0.442,0.076,0.673,0.127c0.718,0.157,1.326,0.233,1.841,0.244
 c1.769,0.21,3.566,0.333,5.392,0.333c24.298,0,43.996-19.181,43.996-42.841C89.727,35.593,79.179,20.692,64.005,13.934z"/>
 </svg>
 <div class="counter-icon fa fa-mobile"></div>
 <div class="counter-content">
 <span class="counter-value">7812</span>
 <h3 class="title">Responsive Design</h3>
 </div>
 </div>
 </div>

</div>
 </div>

BootstrapTema

Counter Icon Style

Скриншот

Подробнее

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

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

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