Подробное описание и демонстрация работы блока о нас под номером №3 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 3
Создание сайтов
Это текст специально написан для демонстрации работы эффекта. Donec feugiat.
подробнееБрендирование
Это текст специально написан для демонстрации работы эффекта. Donec feugiat.
подробнееApp Development
Это текст специально написан для демонстрации работы эффекта. Donec feugiat.
подробнее<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="serviceBox"> <div class="service-icon"> <i class="fa fa-mobile"></i> </div> <div class="service-content"> <h3>Web Development</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat.</p> <a href="#" class="read">Read more <i class="fa fa-angle-right"></i> </a> </div> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ padding:30px 0 ; } .serviceBox .service-icon{ background:#58B25E; height: 70px; width: 70px; border-radius:50%; text-align: center; float: left; } .serviceBox .service-icon.red{ background:#F35958; } .serviceBox .service-icon.blue{ background:#02A2DD; } .serviceBox .service-icon.purple{ background:#9F84C4; } .serviceBox .service-icon.darkCyan{ background:#008B8B; } .serviceBox .service-icon.strongcyan{ background:#1ABC9C; } .serviceBox .service-icon i{ font-size:30px; color: #fff; line-height: 70px; } .serviceBox .service-content { margin-left: 95px; } .serviceBox .service-content h3{ color: hsl(0, 0%, 20%); font-size: 18px; font-weight: 600; margin-top: 0; } .serviceBox .service-content p{ color:hsl(0, 0%, 47%); line-height: 1.6em; } .serviceBox .read{ color: #61D3E2; text-decoration: none; } .serviceBox .read i{ font-size: 16px; margin-left: 10px; }