Подробное описание и демонстрация работы блока о нас под номером №103 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 103
Заголовок
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 pink"> <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 разметка для реализации блока о компании
:root{ --gr-color1: linear-gradient(45deg, #ff9f43,#fc7a00); --gr-color2: linear-gradient(45deg, #DD6186,#c2305c); --gr-color3: linear-gradient(45deg, #43a1a0,#259390); --gr-color4: linear-gradient(45deg, #31BCEF,#159DD5); } .serviceBox{ color: #fff; font-family: 'Varela Round', sans-serif; text-align: center; } .serviceBox .service-icon{ background: var(--gr-color1); font-size: 50px; line-height: 93px; width: 100px; height: 100px; margin: 0 auto 20px; border: 5px solid #fff; box-shadow: 0 0 7px #555; border-radius: 50%; display: block; transition: all 0.3s ease 0s; } .serviceBox:hover .service-icon{ transform: rotateY(360deg) rotate(360deg); } .serviceBox .service-content{ background: var(--gr-color1); padding: 20px; border-radius: 10px 10px 50px 50px; transition: all 0.3s ease 0s; } .serviceBox:hover .service-content{ box-shadow: 5px 5px 5px rgba(0,0,0,0.3); } .serviceBox .title{ font-size: 20px; font-weight: 700; text-transform: uppercase; margin: 0 0 10px; } .serviceBox .description{ font-size: 15px; line-height: 27px; margin: 0; } .serviceBox.pink .service-icon, .serviceBox.pink .service-content{ background: var(--gr-color2); } .serviceBox.green .service-icon, .serviceBox.green .service-content{ background: var(--gr-color3); } .serviceBox.blue .service-icon, .serviceBox.blue .service-content{ background: var(--gr-color4); } @media only screen and (max-width:990px){ .serviceBox{ margin: 0 0 30px; } }