
Подробное описание и демонстрация работы блока о нас под номером №22 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 22
Responsive Desgin
Это текст специально написан для демонстрации работы эффекта. Nam finibus, velit nec luctus dictum.
Retina Ready
Это текст специально написан для демонстрации работы эффекта. Nam finibus, velit nec luctus dictum.
Создание сайтов
Это текст специально написан для демонстрации работы эффекта. Nam finibus, velit nec luctus dictum.
<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="serviceBox"> <div class="service-icon"> <i class="fa fa-laptop"></i> </div> <div class="service-content"> <h3> <a href="#">Web Design</a> </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus, velit nec luctus dictum. </p> </div> <div class="read"> <a href="#">+</a> </div> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ text-align: center; padding: 40px 16px 30px; border: 1px solid transparent; transition:all 0.3s ease 0s; position: relative; z-index: 1; } .serviceBox:after, .serviceBox:before{ content: ""; position: absolute; top:0; left:0; right: 0; bottom: 0; transition:all 0.5s ease 0s; } .serviceBox:after{ border-bottom: 1px solid #d7d7d7; border-top: 1px solid #d7d7d7; transform: scaleX(0); transform-origin: 0 100% 0; z-index: -1; } .serviceBox:before{ border-left: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; transform: scaleY(0); transform-origin: 100% 0 0; z-index: -1; } .serviceBox:hover:after{ transform: scaleX(1); } .serviceBox:hover:before{ transform: scaleY(1); } .serviceBox .service-icon i{ font-size: 32px; line-height: 32px; color:#636363; transition: all 0.3s ease 0s; } .serviceBox .service-content h3{ margin-bottom: 25px; } .serviceBox .service-content h3 a{ font-size: 14px; letter-spacing: 4px; line-height: 22px; color:#181818; text-transform: uppercase; text-decoration: none; } .serviceBox .service-content h3 a:hover{ color:#636363; } .serviceBox .service-content p{ color:#636363; line-height: 26px; } .serviceBox .read{ margin-top: 20px; } .serviceBox .read a{ border:1px solid #636363; border-radius: 50%; color:#636363; display: inline-block; height: 18px; width: 18px; line-height: 16px; text-align: center; text-decoration: none; transition:all 0.3s ease 0s; opacity: 0; } .serviceBox .read a:hover, .serviceBox:hover .service-icon i{ color:#181818; border-color: #181818; } .serviceBox:hover .read a{ opacity: 1; transition: all 0.3s ease 0s; } @media screen and (max-width: 990px){ .serviceBox{ margin-bottom:10px; } }