Подробное описание и демонстрация работы блока о нас под номером №51 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 51
заговолок
Это текст специально написан для демонстрации работы эффекта. Sed sed ligula et orci congue dignissim sit amet vitae enim. Suspendisse a felis et urna mattis vestibulum id.
Создание сайтов
Это текст специально написан для демонстрации работы эффекта. Sed sed ligula et orci congue dignissim sit amet vitae enim. Suspendisse a felis et urna mattis vestibulum id.
Брендирование
Это текст специально написан для демонстрации работы эффекта. Sed sed ligula et orci congue dignissim sit amet vitae enim. Suspendisse a felis et urna mattis vestibulum id.
<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> <h3 class="title">Web Design</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ligula et orci congue dignissim sit amet vitae enim. Suspendisse a felis et urna mattis vestibulum id. </p> </div> </div> <div class="col-md-4 col-sm-6"> <div class="serviceBox"> <div class="service-icon"> <i class="fa fa-rocket"></i> </div> <h3 class="title">Web Development</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ligula et orci congue dignissim sit amet vitae enim. Suspendisse a felis et urna mattis vestibulum id. </p> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ border: 2px solid #fcb3ba; padding: 30px; margin: 60px 0 0 20px; position: relative; } .serviceBox .service-icon{ width: 80px; height: 80px; line-height: 80px; background: #fff; border: 2px solid #fcb3ba; text-align: center; font-size: 40px; color: #999; position: absolute; top: -55px; left: -20px; transition: all 0.5s ease 0s; } .serviceBox:hover .service-icon{ color: #fff; background: #9f1331; border: 2px solid #9f1331; } .serviceBox .title{ font-size: 22px; font-weight: 600; color: #3e5482; margin-bottom: 15px; } .serviceBox .description{ font-size: 15px; color: #7a696f; line-height: 27px; } @media only screen and (max-width: 990px){ .serviceBox{ margin-bottom: 80px; } }