
Подробное описание и демонстрация работы блока о нас под номером №48 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 48
Заголовок
Это текст специально написан для демонстрации работы эффекта. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.
подробнееБрендинг
Это текст специально написан для демонстрации работы эффекта. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.
подробнееДизайн
Это текст специально написан для демонстрации работы эффекта. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.
подробнее<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="serviceBox"> <span class="service-icon">1</span> <h3 class="title">Web Design</h3> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.</p> <a href="#" class="read-more">read more</a> </div> </div> <div class="col-md-4 col-sm-6"> <div class="serviceBox"> <span class="service-icon">2</span> <h3 class="title">Brand Building</h3> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.</p> <a href="#" class="read-more">read more</a> </div> </div> </div> </div> </div>css разметка для реализации блока о компании
.demo{ background: #eef7f9; } .serviceBox{ border-bottom: 4px solid #d0dde4; border-right: 4px solid #d0dde4; background: #fff; padding: 30px 40px 27px; transition: all 0.3s ease-in-out 0s; } .serviceBox:hover{ border-color: #27c9c6; } .serviceBox .service-icon{ display: block; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; background: #27c9c6; text-align: center; float: left; font-size: 20px; color: #fff; margin: 0 20px 0 0; transition: all 0.3s ease-in-out 0s; } .serviceBox .title{ display: inline-block; font-size: 20px; color: #041829; border-bottom: 3px solid #d9e7ed; padding-bottom: 6px; margin: 0 0 20px 0; transition: all 0.3s ease-in-out 0s; } .serviceBox:hover .title{ border-color: #27c9c6; } .serviceBox .description{ font-size: 18px; color: #929a9c; margin: 0 0 11px 0; } .serviceBox .read-more{ display: inline-block; font-size: 16px; font-weight: 500; color: #27c9c6; text-transform: capitalize; } .serviceBox .read-more:hover{ letter-spacing: 0.3px; color: #27c9c6; } .serviceBox .read-more:after{ content: "f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 16px; color: #27c9c6; margin-left: 7px; transition: all 0.2s ease 0s; } @media only screen and (max-width: 990px){ .serviceBox{ margin-bottom: 30px; } }