Подробное описание и демонстрация работы блока о нас под номером №66 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 66
заговолок
01Это текст специально написан для демонстрации работы эффекта. Cras dictum convallis suscipit. Donec finibus neque at mi volutpat ornare.
Создание сайтов
02Это текст специально написан для демонстрации работы эффекта. Cras dictum convallis suscipit. Donec finibus neque at mi volutpat ornare.
Адаптивный дизайн
03Это текст специально написан для демонстрации работы эффекта. Cras dictum convallis suscipit. Donec finibus neque at mi volutpat ornare.
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="serviceBox"> <i class="fa fa-globe"></i> <h3 class="title">Web Design</h3> <span class="number">01</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum convallis suscipit. Donec finibus neque at mi volutpat ornare. </p> </div> </div> <div class="col-md-4 col-sm-6"> <div class="serviceBox"> <i class="fa fa-briefcase"></i> <h3 class="title">Web Development</h3> <span class="number">02</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum convallis suscipit. Donec finibus neque at mi volutpat ornare. </p> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ padding-bottom: 40px; position: relative; } .serviceBox:after{ content: ""; width: 100%; height: 10px; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; position: absolute; bottom: 0; left: 0; transition: all 0.5s ease 0s; } .serviceBox:hover:after{ border-color: #ef4789; } .serviceBox i{ display: block; font-size: 67px; color: #cd4646; text-align: left; margin-bottom: 25px; } .serviceBox:hover i{ animation: 0.3s ease 0s normal forwards 1 running loading; } .serviceBox .title{ display: inline-block; font-size: 22px; font-weight: bold; color: #282727; text-transform: capitalize; margin: 0 0 35px 0; float: left; } .serviceBox .number{ display: inline-block; float: right; font-size: 30px; font-weight: bold; line-height: 30px; color: #d6d6d6; } .serviceBox .description{ font-size: 16px; color: #8b8a8a; margin: 0; clear: both; } @keyframes loading{ 49%{ transform: translateY(-100%); } 50%{ opacity: 0; transform: translateY(100%); } 51%{ opacity: 1; } } @media only screen and (max-width:990px){ .serviceBox{ margin-bottom: 20px; } }