Подробное описание и демонстрация работы блока о нас под номером №19 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 19
Создание сайтов
Это текст специально написан для демонстрации работы эффекта. Vestibulum eget nibh dictum, euismod tellus ut, iaculis.
Брендирование
Это текст специально написан для демонстрации работы эффекта. Vestibulum eget nibh dictum, euismod tellus ut, iaculis.
Адаптивный дизайн
Это текст специально написан для демонстрации работы эффекта. Vestibulum eget nibh dictum, euismod tellus ut, iaculis.
<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-globe"></i> </div> <div class="service-content"> <h3>Web Development</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nibh dictum, euismod tellus ut, iaculis. </p> </div> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ padding:10px 0; } .serviceBox .service-icon{ background: hsl(214, 12%, 35%); color: #fff; width: 64px; height: 64px; line-height:64px; font-size:33px; text-align:center; float: left; } .serviceBox:hover .service-icon{ background:#e98b39; } .serviceBox .service-content{ margin-left:85px; } .serviceBox .service-content h3{ font-size:13px; margin-top: 5px; font-weight:bold; color:#000; } .serviceBox .service-content p{ font-size:13px; color:#000; line-height:21px; } @media screen and (max-width: 990px){ .serviceBox{ margin-bottom: 5px; } }