<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>
</div>
</div>
</div>
</div>
.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 {
-webkit-transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-o-transition: all ease-out 0.3s;
transition: all ease-out 0.3s;
}
.how-it-work .panel:hover span {
background: rgba(0,0,0,0.4);
}
.how-it-work .panel:nth-child(even) {
background: #78c043;
}
.how-it-work .panel-body {
overflow-y: auto;
overflow: visible;
height: 120px;
padding-left: 120px;
position: relative;
}
.how-it-work .panel-body span {
position: absolute;
top: 15px;
left: 0px;
width: 90px;
height: 90px;
line-height: 90px;
color: #008931;
background: #f6f6f6;
text-align: center;
font-size: 36px;
font-weight: 800;
border-radius: 50%;
box-shadow: 0px 2px 10px rgba(0,0,0,0.4);
}
.how-it-work .panel-body span:before {
content: "";
position: absolute;
top: 35px;
left: -49px;
width: 50px;
height: 20px;
background: #f6f6f6;
box-shadow: 0px 8px 3px -5px rgba(0,0,0,0.2);
}
.how-it-work .panel:nth-child(even) span {
color: #78c043;
}
.how-it-work .step-heading {
font-size: 28px;
margin-top: 0px;
color: rgba(0,0,0,0.3);
padding-top:15px;
}
