
Подробное описание и демонстрация работы блока о нас под номером №108 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 108
Заголовок
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
Создание сайтов
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
Адаптивный дизайн
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css /> --> <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 adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum. </p> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="serviceBox green"> <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 adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum. </p> </div> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{ font-family: 'Titillium Web', sans-serif; text-align: center; } .serviceBox .service-icon{ color: #f1f0f0; background: linear-gradient(to bottom,#9E3221,#D24933); font-size: 50px; line-height: 100px; width: 100px; height: 100px; margin: 0 auto 15px; -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .serviceBox .service-icon i.fa{ transition: all 0.3s; } .serviceBox:hover .service-icon i.fa{ text-shadow: 0 0 5px #000; transform: rotateY(360deg); } .serviceBox .service-content{ color: #fff; background: linear-gradient(to bottom,#D24933,#9E3221); border-radius: 20px; padding: 20px 15px 20px ; position: relative; z-index: 1; } .serviceBox .service-content:before{ content: ""; background: #D24933; width: 25px; height: 25px; margin: 0 auto; transform: rotate(45deg); position: absolute; top: -12px; left: 0; right: 0; z-index: -1; } .serviceBox .title{ font-size: 20px; font-weight: 600; letter-spacing: 1px; margin: 0 0 10px; display: block; transition: all 0.3s; } .serviceBox:hover .title{ text-shadow: 0 0 5px #000; } .serviceBox .description{ font-size: 15px; line-height: 27px; margin: 0; } .serviceBox.green .service-icon{ background: linear-gradient(to bottom,#72873D,#B8BA2F); } .serviceBox.green .service-content{ background: linear-gradient(to bottom,#B8BA2F, #72873D); } .serviceBox.green .service-content:before{ background: #B8BA2F; } .serviceBox.blue .service-icon{ background: linear-gradient(to bottom,#36556C,#447F8F); } .serviceBox.blue .service-content{ background: linear-gradient(to bottom,#447F8F,#36556C); } .serviceBox.blue .service-content:before{ background: #447F8F; } .serviceBox.orange .service-icon{ background: linear-gradient(to bottom,#BE5428,#EC8324); } .serviceBox.orange .service-content{ background: linear-gradient(to bottom,#EC8324,#BE5428); } .serviceBox.orange .service-content:before{ background: #EC8324; } @media only screen and (max-width:990px){ .serviceBox{ margin: 0 0 30px; } }