Подробное описание и демонстрация работы блока о нас под номером №39 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 39
заговолок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto cum dolore dolores fuga libero magni placeat possimus sequi
Брендирование
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto cum dolore dolores fuga libero magni placeat possimus sequi
Адаптивный дизайн
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto cum dolore dolores fuga libero magni placeat possimus sequi
<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> <div class="service-Content"> <h3 class="title">Web Design</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto cum dolore dolores fuga libero magni placeat possimus sequi </p> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="serviceBox"> <div class="service-icon"> <i class="fa fa-briefcase"></i> </div> <div class="service-Content"> <h3 class="title">Brand Building</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto cum dolore dolores fuga libero magni placeat possimus sequi </p> </div> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ border: 1px solid #ededed; padding: 30px 30px 30px 90px; position: relative; transition: all 0.5s ease 0s; } .serviceBox:hover{ border-color: #41d7f7; } .serviceBox:before, .serviceBox:after{ content: ""; display: block; width: 50px; height: 5px; background: #41d7f7; position: absolute; left: 0; opacity: 0; transition: all 0.5s ease 0s; } .serviceBox:before{ top: -3px; } .serviceBox:after{ bottom: -3px; } .serviceBox:hover:before, .serviceBox:hover:after{ left: 40px; opacity: 1; } .serviceBox .service-icon{ display: inline-block; position: absolute; top: 33%; left: 23px; font-size: 45px; color: #41d7f7; opacity: 0.3; transition: all 0.5s ease-in 0s; } .serviceBox:hover .service-icon{ opacity: 1; } .serviceBox .title{ font-size: 16px; font-weight: 700; color: #41d7f7; margin-bottom: 15px; } .serviceBox .description{ font-size: 13px; color: #666; line-height: 20px; } @media only screen and (max-width: 990px){ .serviceBox{ margin-bottom: 30px; } }