
Подробное описание и демонстрация работы блока о нас под номером №6 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 6
Создание сайтов
Это текст специально написан для демонстрации работы эффекта. Sed mauris est, faucibus at.
Адаптивный дизайн
Это текст специально написан для демонстрации работы эффекта. Sed mauris est, faucibus at.
Clean & Clear Design
Это текст специально написан для демонстрации работы эффекта. Sed mauris est, faucibus at.
<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="serviceBox"> <div class="service-icon purple"> <i class="fa fa-shopping-cart"></i> </div> <div class="service-content"> <h3>Web Development</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris est, faucibus at. </p> </div> <a href="#" class="btn btn-default purple">Read more</a> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox { background:hsl(0, 0%, 100%); border: 2px solid hsl(0, 0%, 100%); border-radius: 4px; margin-top: 40px; padding: 0 30px 40px; text-align: center; } .serviceBox .service-icon{ position: relative; } .serviceBox .service-icon::after { border-radius: 50%; box-sizing: content-box; content: ""; height: 100%; pointer-events: none; position: absolute; width: 100%; } .serviceBox .service-icon.purple i { background:#7248F5; } .serviceBox .service-icon.light-blue i { background:#1DCFD1; } .serviceBox .service-icon.orange i { background:#F05135; } .serviceBox .service-icon.green i { background:#92D11D; } .serviceBox .service-icon i { border: 2px solid hsl(192, 24%, 96%); border-radius: 50%; color: hsl(0, 0%, 100%); display: block; font-size: 28px; height: 80px ; line-height: 80px; margin: -40px auto 0; position: relative; top: 0; width: 80px; } .serviceBox a{ border: none; } .serviceBox a:hover{ background: none; color: #000000; } .serviceBox a.purple{ color:#7248F5; } .serviceBox a.light-blue{ color:#1DCFD1; } .serviceBox a.orange{ color:#F05135; } .serviceBox a.green{ color:#92D11D; } .serviceBox .service-content h3{ font-size:16px; margin-top:35px; color:#000000; } .serviceBox .service-content p{ line-height:25px; } @media only screen and (max-width: 990px){ .serviceBox{ margin-bottom: 20px; } }