
Подробное описание и демонстрация работы блока о нас под номером №86 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 86
заговолок
Lorem ipsum dolor sit amet, consecte adipisicing elit. A alias aspernatur autem blanditiis. Lorem ipsum dolor sit amet.
Создание сайтов
Lorem ipsum dolor sit amet, consecte adipisicing elit. A alias aspernatur autem blanditiis. Lorem ipsum dolor sit amet.
Адаптивный дизайн
Lorem ipsum dolor sit amet, consecte adipisicing elit. A alias aspernatur autem blanditiis. Lorem ipsum dolor sit amet.
<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-globe"></i> </div> <h3 class="title">Web Design</h3> <p class="description"> Lorem ipsum dolor sit amet, consecte adipisicing elit. A alias aspernatur autem blanditiis. Lorem ipsum dolor sit amet. </p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="serviceBox yellow"> <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, consecte adipisicing elit. A alias aspernatur autem blanditiis. Lorem ipsum dolor sit amet. </p> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ padding: 70px 20px 30px; margin: 50px 0 110px; background: #951c45; text-align: center; position: relative; } .serviceBox:before{ content: ""; width: 100%; height: 100px; background: #951c45; position: absolute; bottom: -100px; left: 0; -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); clip-path: polygon(50% 100%, 0 0, 100% 0); } .serviceBox:after{ content: ""; width: 50%; height: 2px; background: #fff; position: absolute; bottom: 0; left: 0; transition: all 0.3s ease 0s; } .serviceBox:hover:after{ width: 100%; } .serviceBox .service-icon{ width: 100px; height: 100px; line-height: 100px; border-radius: 50%; background: #951c45; border: 5px solid #fff; margin: 0 auto; font-size: 40px; color: #fff; position: absolute; top: -50px; left: 0; right: 0; transition: all 0.3s ease 0s; } .serviceBox:hover .service-icon{ transform: rotateX(360deg); } .serviceBox .title{ display: block; font-size: 20px; font-weight: 700; color: #fff; text-transform: uppercase; margin: 0 0 10px 0; } .serviceBox .description{ font-size: 15px; color: #fff; line-height: 27px; margin-bottom: 0; } .serviceBox.yellow, .serviceBox.yellow:before, .serviceBox.yellow .service-icon{ background: #f7912f; } .serviceBox.blue, .serviceBox.blue:before, .serviceBox.blue .service-icon{ background: #0c5685; } .serviceBox.green, .serviceBox.green:before, .serviceBox.green .service-icon{ background: #95be3e; } @media only screen and (max-width:767px){ .serviceBox{ margin: 50px 0 160px; } }