
Подробное описание и демонстрация работы блока о нас под номером №62 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 62
заговолок
Это текст специально написан для демонстрации работы эффекта. In sed ligula eu metus facilisis blandit. Nulla.
Создание сайтов
Это текст специально написан для демонстрации работы эффекта. In sed ligula eu metus facilisis blandit. Nulla.
Адаптивный дизайн
Это текст специально написан для демонстрации работы эффекта. In sed ligula eu metus facilisis blandit. Nulla.
<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. In sed ligula eu metus facilisis blandit. Nulla. </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. In sed ligula eu metus facilisis blandit. Nulla. </p> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ text-align: center; } .serviceBox .service-icon{ width: 80px; height: 80px; line-height: 80px; border-radius: 50%; border: 1px solid #715afc; font-size:35px; color: #715afc; margin: 0 auto 15px; position: relative; } .serviceBox .service-icon i{ transform: scale(1); transition: all 0.3s ease-in-out 0s; } .serviceBox:hover .service-icon i{ transform: scale(1.15); } .serviceBox .service-icon:after{ content: ""; width: 90px; height: 90px; border-radius: 50%; background: transparent; position: absolute; top: -6px; left: -6px; transition: all 0.3s ease-in-out 0s; } .serviceBox:hover .service-icon:after{ box-shadow: 3px 3px 0 rgba(113, 90, 252, 0.89); } .serviceBox .title{ font-size: 24px; font-weight: 700; color: #484848; margin: 0 0 10px 0; } .serviceBox .description{ font-size: 16px; color: #777; padding: 0 20px; margin: 0; } @media only screen and (max-width:990px){ .serviceBox{ margin-bottom: 30px; } }