"Follow Steps"
Bootstrap 4.0.0 Snippet by naimansari

<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; }

Related: See More


Questions / Comments: