
Подробное описание и демонстрация работы блока о нас под номером №46 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 46
заговолок
Это текст специально написан для демонстрации работы эффекта. Maecenas non risus a sem hendrerit.
Создание сайтов
Это текст специально написан для демонстрации работы эффекта. Maecenas non risus a sem hendrerit.
Адаптивный дизайн
Это текст специально написан для демонстрации работы эффекта. Maecenas non risus a sem hendrerit.
<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> <div class="service-content"> <h3 class="title">Web Design</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non risus a sem hendrerit. </p> </div> <a href="#" class="read">Read More</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="serviceBox"> <div class="service-icon"> <i class="fa fa-rocket"></i> </div> <div class="service-content"> <h3 class="title">Web Development</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non risus a sem hendrerit. </p> </div> <a href="#" class="read">Read More</a> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ border: 1px solid #4e4e4e; text-align: center; padding: 40px 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s; } .serviceBox:before, .serviceBox:after{ content: ""; width: 200%; height: 200%; background: #eba133; position: absolute; top: 160px; left: 0; z-index: -1; transform: rotate(-18deg); transition: all 0.5s ease 0s; } .serviceBox:before{ background: #4e4e4e; left: -120%; transform: rotate(24deg); } .serviceBox:hover:before{ transform: rotate(16deg); } .serviceBox:hover:after{ background: #684f8e; transform: rotate(-10deg); } .serviceBox .service-icon{ font-size: 60px; color: #684f8e; line-height: 100px; margin-bottom: 100px; } .serviceBox .service-content{ color: #fff; line-height: 25px; padding: 0 20px 20px; } .serviceBox .title{ font-size: 22px; font-weight: 700; margin-bottom: 10px; } .serviceBox .description{ font-size: 14px; } .serviceBox .read{ display: block; width: 100%; background: #fff; font-size: 15px; font-weight: 600; color: #eba133; padding: 10px; border-left: 1px solid #eba133; border-right: 1px solid #eba133; } .serviceBox:hover .read{ border-color: #684f8e; color: #684f8e; } @media only screen and (max-width: 990px){ .serviceBox{ margin-bottom: 30px; } } @media only screen and (max-width: 767px){ .serviceBox:before, .serviceBox:after{ top: 80px; } } @media only screen and (max-width: 480px){ .serviceBox:before, .serviceBox:after{ top: 140px; } }