Подробное описание и демонстрация работы блока о нас под номером №107 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 107
заговолок
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> <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 class="col-md-3 col-sm-6"> <div class="serviceBox purple"> <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 consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum. </p> </div> </div> </div> </div>css разметка для реализации блока о компании
:root{ --color1: #e25f2f; --color2: #b54479; --color3: #3498db; --color4: #079992; } .serviceBox{ font-family: 'Titillium Web', sans-serif; text-align: center; padding: 0 10px 15px; position: relative; z-index: 1; } .serviceBox:after{ content: ""; background: var(--color1); width: 100%; height: 40px; border-radius: 20px; position: absolute; left: 0; top: 110px; z-index: -2; } .serviceBox .service-icon{ color: #fff; background: var(--color1); font-size: 65px; line-height: 100px; width: 120px; height: 120px; padding: 5px 0 0 5px; margin: 0 auto 60px; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--color1); border-radius: 50% 50% 50% 15px; transform: rotate(-45deg); } .serviceBox .service-icon i.fa{ transform: rotate(45deg); transition: all 0.3s; } .serviceBox:hover .service-icon i.fa{ text-shadow: 0 0 5px #000; transform:rotate(-315deg); } .serviceBox .title{ color: var(--color1); font-size: 22px; font-weight: 600; text-transform: uppercase; margin: 0 0 10px; } .serviceBox .description{ color: #555; font-size: 15px; text-align: justify; letter-spacing: 1px; } .serviceBox.purple:after{ background: var(--color2); } .serviceBox.purple .service-icon{ background: var(--color2); box-shadow: 0 0 0 3px var(--color2); } .serviceBox.purple .title{ color: var(--color2); } .serviceBox.blue:after{ background: var(--color3); } .serviceBox.blue .service-icon{ background: var(--color3); box-shadow: 0 0 0 3px var(--color3); } .serviceBox.blue .title{ color: var(--color3); } .serviceBox.green:after{ background: var(--color4); } .serviceBox.green .service-icon{ background: var(--color4); box-shadow: 0 0 0 3px var(--color4); } .serviceBox.green .title{ color: var(--color4); } @media only screen and (max-width:990px){ .serviceBox{ margin: 0 0 30px; } }