Главная › Bootstrap › Service Box — стиль 101

Service Box — стиль 101

16.02.2019 0 221
1 Балл2 Балла3 Балла4 Балла5 Баллов (Нет оценок)
Service Box — стиль 101

Подробное описание и демонстрация работы блока о нас под номером №101 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.

Демо CSS блока о сервисе — стиль 101

Заголовок

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.

html разметка для реализации блока о компании 

<!-- <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="descripti<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Css Style Service Box : Demo 101</title>

<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">-->

<link rel="stylesheet" href="http://jrain.oscitas.netdna-cdn.com/tutorial/css/fontawesome-all.min.css">


<link rel="stylesheet" href="../../css/bootstrap-grid.min.css"/>

<link rel="stylesheet" href="../../css/common-1.css"/>    <link href="https://fonts.googleapis.com/css?family=Niramit:400,500,600,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="header" class="container-fluid">
<div class="row">
<div class="col-sm-4 hidden-xs text-left">
<a href="http://bestjquery.com/tutorial/service-box/demo100/" class="prev-button">
<i class="demo-icon icon-left-outline"></i>
previous demo
</a>
</div>

<div class="col-sm-4 col-xs-5 text-center logo">
<a href="http://www.bestjquery.com/"><img src="../../images/logo.png" width="138px" height="31px" alt="Best jQuery"/></a>
</div>

<div class="col-sm-4 col-xs-7 text-right">
<a href="http://www.bestjquery.com/codelab/" class="code-button">
codelab
<i class="demo-icon icon-right-outline"></i>
</a>
</div>        </div>
</div>

<div class="demo">
<div class="container">
<div class="row text-center">
<h1 class="white">service box style : demo 101</h1>
</div>

<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 green">
<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 class="col-md-3 col-sm-6">
<div class="serviceBox pink">
<div class="service-icon">
<i class="fa fa-briefcase"></i>
</div>
<h3 class="title">Brand Building</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 blue">
<div class="service-icon">
<i class="fa fa-mobile"></i>
</div>
<h3 class="title">Responsive 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>
</div>

<div id="code-wrapper" class="container-fluid">
<div class="row">
<div id="ad1_inline" class="col-md-12 text-center ads-728"></div>

<div class="col-md-6">
<h3 class="code-heading">HTML</h3>
<span>(Icon Fonts Used : <a href="https://fontawesome.com/v4.7.0/" target="_blank">Fontawesome</a> & CSS Framwork: <a href="https://getbootstrap.com/docs/3.3/" target="_blank">Bootstrap</a>)</span>
<div class="common-height">

<!-- <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 green">
<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{
--white: #fff;
--gr-color1: #FACC1E;
--gr-color2: #FF7924;
--gr-color3: #00C0A7;
--gr-color4: #00E97C;
--gr-color5: #FC4365;
--gr-color6: #FE6229;
--gr-color7: #009AFC;
--gr-color8: #E75A7D;
}
.serviceBox{
background-color: var(--white);
font-family: 'Niramit', sans-serif;
text-align: center;
margin: 30px 15px;
border: 1px solid transparent;
box-shadow: -5px -5px 0 0 rgba(0,0,0,0.1);
position: relative;
}
.serviceBox .service-icon{
color: var(--white);
background: linear-gradient(45deg,var(--gr-color1),var(--gr-color1),var(--gr-color2));
font-size: 60px;
line-height: 120px;
height: 120px;
width: 120px;
margin: -35px auto 20px;
border-radius: 50%;
transition:all 0.3s;
}
.serviceBox:hover .service-icon{
text-shadow: 0 0 2px #333;
box-shadow: 0 0 0 7px var(--white) inset, 0 0 0 10px var(--gr-color2);
}
.serviceBox .title{
color: var(--white);
background: linear-gradient(45deg,var(--gr-color2),var(--gr-color2),var(--gr-color1),var(--gr-color1));
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
padding: 15px 0;
margin: 0 -15px 10px;
display: block;
position: relative;
}
.serviceBox .title:before,
.serviceBox .title:after{
content: '';
background: linear-gradient(45deg, transparent 49%, #a5480e 50%);
height: 15px;
width: 14px;
position: absolute;
left: 0;
top: 100%;
}
.serviceBox .title:after{
background: linear-gradient(225deg, transparent 49%, #a5480e 50%);
top: auto;
bottom: 100%;
left: auto;
right: 0;
}
.serviceBox .description{
color: #666;
font-size: 15px;
line-height: 25px;
padding: 0 10px 10px;
}
.serviceBox.green .service-icon{
background: linear-gradient(45deg,var(--gr-color3),var(--gr-color3),var(--gr-color4));
}
.serviceBox.green:hover .service-icon{
box-shadow: 0 0 0 7px var(--white) inset, 0 0 0 10px var(--gr-color3);
}
.serviceBox.green .title{
background: linear-gradient(45deg,var(--gr-color3),var(--gr-color3),var(--gr-color4),var(--gr-color4));
}
.serviceBox.green .title:before{
background: linear-gradient(45deg, transparent 49%, #057264 50%);
}
.serviceBox.green .title:after{
background: linear-gradient(225deg, transparent 49%, #08894b 50%);
}
.serviceBox.pink .service-icon{
background: linear-gradient(45deg,var(--gr-color5),var(--gr-color5),var(--gr-color6));
}
.serviceBox.pink:hover .service-icon{
box-shadow: 0 0 0 7px var(--white) inset, 0 0 0 10px var(--gr-color5);
}
.serviceBox.pink .title{
background: linear-gradient(45deg,var(--gr-color5),var(--gr-color5),var(--gr-color6),var(--gr-color6));
}
.serviceBox.pink .title:before{
background: linear-gradient(45deg, transparent 49%, #a80624 50%);
}
.serviceBox.pink .title:after{
background: linear-gradient(225deg, transparent 49%, #ad350a 50%);
}
.serviceBox.blue .service-icon{
background: linear-gradient(45deg,var(--gr-color7),var(--gr-color7),var(--gr-color8));
}
.serviceBox.blue:hover .service-icon{
box-shadow: 0 0 0 7px var(--white) inset, 0 0 0 10px var(--gr-color7);
}
.serviceBox.blue .title{
background: linear-gradient(45deg,var(--gr-color7),var(--gr-color7),var(--gr-color8),var(--gr-color8));
}
.serviceBox.blue .title:before{
background: linear-gradient(45deg, transparent 49%, #0d6ca8 50%);
}
.serviceBox.blue .title:after{
background: linear-gradient(225deg, transparent 49%, #a30d30 50%);
}
@media only screen and (max-width:990px){
.serviceBox{ margin: 40px 10px 60px; }
}
Теги:
Bootstrap 
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *