Подробное описание и демонстрация работы блока о нас под номером №14 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 14
Создание сайтов
Это текст специально написан для демонстрации работы эффекта. Nullam egestas enim id enim blandit, nec pretium tellus.
подробнееБрендирование
Это текст специально написан для демонстрации работы эффекта. Nullam egestas enim id enim blandit, nec pretium tellus.
подробнееАдаптивный дизайн
Это текст специально написан для демонстрации работы эффекта. Nullam egestas enim id enim blandit, nec pretium tellus.
подробнее<div class="container"> <div class="row"> <div class="col-md-4"> <div class="serviceBox"> <h3>Web Development</h3> <div class="service-icon"> <i class="fa fa-globe"></i> </div> <div class="service-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas enim id enim blandit, nec pretium tellus. </p> <a href="#" class="btn btn-default">Read more</a> </div> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ text-align:center; background:hsl(0, 0%, 98%); border:1px solid hsl(0, 0%, 93%); padding:20px; text-align:center; } .serviceBox h3{ color: hsl(207, 15%, 28%); font-size: 15px; text-transform: uppercase; margin:0; } .serviceBox .service-icon i{ width:100px; height:100px; border-radius:50%; background-color: hsl(207, 15%, 28%); color: hsl(0, 0%, 100%); font-size:40px; line-height:100px; margin:30px 0; transition:all 0.3s ease-in-out 0.3s; } .serviceBox:hover .service-icon i{ transform: rotate(360deg); } .serviceBox .service-content p{ color:hsl(0, 0%, 53%); font-size:13px; } .serviceBox .service-content a{ background:hsl(147, 65%, 46%); box-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.3) inset, 0 1px 3px hsla(0, 0%, 0%, 0.1); border-color:transparent; color:#fff; font-size:13px; font-weight:bold; margin:0 0 -55px; padding: 10px 25px; } .serviceBox .service-content a:hover{ background:hsl(207, 15%, 28%); text-decoration:none; border-color:transparent; } @media only screen and (max-width: 990px){ .serviceBox{ margin-bottom: 35px; } }