Подробное описание и демонстрация работы блока о нас под номером №83 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 83
заговолок
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="demo"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="serviceBox"> <div class="service-icon"> <span class="fa fa-globe"></span> </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 red"> <div class="service-icon"> <span class="fa fa-rocket"></span> </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> </div>css разметка для реализации блока о компании
.demo{ background: #bebfc1; } .serviceBox{ padding-bottom: 20px; border-radius: 0 10px 10px 10px; background: #fff; text-align: center; position: relative; z-index: 1; transition: all 0.3s ease 0s; } .serviceBox:hover{ box-shadow: 0 0 5px #000 inset; } .serviceBox:before{ content: ""; display: inline-block; width: 200px; height: 15px; border-radius: 10px 10px 0 0; background: #2999c3; z-index: -1; position: absolute; top: -15px; left: 0; } .serviceBox .service-icon{ width: 185px; height: 65px; background: #2999c3; font-size: 40px; margin-bottom: 80px; position: relative; transition: all 0.5s ease 0s; } .serviceBox .service-icon:after{ content: ""; width: 130px; height: 130px; background: #2999c3; border-radius: 0 0 20px 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scale(1,0.7) rotate(45deg); } .serviceBox .service-icon span{ display: block; font-size: 70px; color: #fff; position: absolute; top: 0; left: 50%; z-index: 1; transform: translateX(-50%) rotateX(360deg); transition: all 0.3s ease 0s; } .serviceBox:hover .service-icon span{ transform: translateX(-50%) rotateX(0); } .serviceBox .title{ font-size: 20px; color: #505050; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 10px 0; transition: all 0.3s ease 0.1s; } .serviceBox:hover .title{ color: #2999c3; } .serviceBox .description{ padding: 0 10px; font-size: 15px; color: #505050; line-height: 27px; margin-bottom: 15px; transition: all 0.3s ease 0s; } .serviceBox.darkblue:before, .serviceBox.darkblue .service-icon, .serviceBox.darkblue .service-icon:after{ background: #1a6bac; } .serviceBox.darkblue:hover .title{ color: #1a6bac; } .serviceBox.yellow:before, .serviceBox.yellow .service-icon, .serviceBox.yellow .service-icon:after{ background: #fcb833; } .serviceBox.yellow:hover .title{ color: #fcb833; } .serviceBox.red:before, .serviceBox.red .service-icon, .serviceBox.red .service-icon:after{ background: #d7182a; } .serviceBox.red:hover .title{ color: #d7182a; } @media only screen and (max-width:990px){ .serviceBox{ margin-bottom: 30px; } }