"Follow Steps"
Bootstrap 4.0.0 Snippet by naimansari

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="how-it-work clearfix">
<div class="main-how-it">
<h4> Follow <span class="bg-theme"> Steps</span> </h4>
</div>
<div class="panel panel-default col-sm-10 col-sm-offset-2">
<div class="panel-body">
<span> 1 </span> <h3 class="step-heading"> Step 1 </h3>
Select your category and ask any question related to it.
</div>
</div>
<div class="panel panel-default col-sm-10 col-sm-offset-2">
<div class="panel-body">
<span> 2 </span> <h3 class="step-heading"> Step 2 </h3>
Connect with an Expert related to your question. The licensed professionals are confirmed by a third-party verification firm.
</div>
</div>
<div class="panel panel-default col-sm-10 col-sm-offset-2">
<div class="panel-body">
<span> 3 </span> <h3 class="step-heading"> Step 3 </h3>
Get your answer within a min. Although, sometimes it may take a little longer to answer your question because of the solution it provides could be a little tricky or lengthy.
</div>
</div>
<div class="panel panel-default col-sm-10 col-sm-offset-2">
<div class="panel-body">
<span> 4 </span> <h3 class="step-heading"> Step 4 </h3>
Don’t forget to give rating to your expert. We need the ratings to keep a track of your satisfaction level and experience with us and of course to improve ourselves.
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.how-it-work {
margin-bottom: 60px;
position: relative;
}
.main-how-it {
position: absolute;
top: 217px;
left: -355px;
background: #f6f6f6;
width: 544px;
height: 110px;
transform: rotate(-90deg);
border-radius: 50px;
box-shadow: 0px 2px 11px -2px rgba(0,0,0,0.4);
}
.main-how-it h4 {
font-size: 54px;
padding-top: 20px;
text-align: center;
text-transform: uppercase;
color:#78c043;
font-weight: 800;
}
.bg-theme {
color: #008931;
}
.how-it-work .panel {
border-top-left-radius: 60px;
border-bottom-left-radius: 60px;
color:#fff;
font-size: 16px;
background: #008931;
box-shadow: 0px 1px 7px 1px rgba(0,0,0,0.4);
margin-bottom:15px;
}
.how-it-work .panel span,
.how-it-work .panel:hover span {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: