
Подробное описание и демонстрация работы блока о нас под номером №38 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 38
Заголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque natus obcaecati quaerat quas ratione!
подробнееСоздание сайтов
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque natus obcaecati quaerat quas ratione!
подробнееАдаптивный дизайн
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque natus obcaecati quaerat quas ratione!
подробнее<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="serviceBox"> <h3 class="title">Web Design</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque natus obcaecati quaerat quas ratione! </p> <a href="#" class="read">Read More</a> <div class="service-icon"> <i class="fa fa-globe"></i> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="serviceBox"> <h3 class="title">Web Development</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque natus obcaecati quaerat quas ratione! </p> <a href="#" class="read">Read More</a> <div class="service-icon"> <i class="fa fa-rocket"></i> </div> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ padding: 20px 0; position: relative; overflow: hidden; z-index: 1; } .serviceBox .title{ font-size: 18px; font-weight: 800; color: #626262; margin-bottom: 15px; transition: all 0.5s ease 0s; } .serviceBox:hover .title{ color: #6c1d8c; } .serviceBox .description{ font-size: 14px; color: #575a5e; margin-bottom: 20px; z-index: 1; } .serviceBox .read{ display: inline-block; padding: 10px 15px; background: #fadbea; font-size: 14px; color: #74628c; border-radius: 0 20px; transition: all 0.5s ease 0s; } .serviceBox:hover .read{ background: #6c1d8c; color: #fdfffc; } .serviceBox .service-icon i{ font-size: 70px; color: #fadbea; position: absolute; bottom: 10px; right: 10px; z-index: -1; transform: rotate(45deg) scale(1); transition: all 0.5s ease 0s; } .serviceBox:hover .service-icon i{ transform: rotate(0deg) scale(0.8); }