"content box effect "
Bootstrap 4.1.1 Snippet by ravic9089

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <section class="how-it-work"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-4 col-md-6"> <div class="single-how-it-work"> <div class="icon"> <i class="flaticon-shield"></i> </div> <div class="content"> <h4 class="title"> Creative & Technical </h4> <p> Be it web designing or graphic designing, web development or custom programming we provide with the best services. We are here to solve all your problems related to the above genres. </p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="single-how-it-work"> <div class="icon"> <i class="flaticon-calendar"></i> </div> <div class="content"> <h4 class="title"> EXPERIENCE </h4> <p> We excel in discussing as well as planning out brand new projects and strategize the processes of making it successful. We have sufficient knowledge and experience in the specified fields with the excellent technical team. Our technical as well as digital marketing team , both are outstanding. </p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="single-how-it-work"> <div class="icon"> <i class="flaticon-bell"></i> </div> <div class="content"> <h4 class="title"> AFFORDABLE COST </h4> <p> Our company is known for fixing excellent rates which attracts different kinds of customers. Affordable rates as well as attractive packages are provided in order to meet the corporate needs. Websites are made in low prices which would not make a hole in your pocket. Satisfactory prices are the main attractions. </p> </div> </div> </div> </div> </div> </section> </div>
/* How It Work Start */ .how-it-work { padding: 116px 0px 130px; } .how-it-work .section-heading { margin-bottom: 56px; } .single-how-it-work { text-align: center; border: 1px solid rgba(0, 0, 0, 0.08); padding: 27px 30px 26px; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .single-how-it-work .icon { font-size: 50px; line-height: 100px; width: 100px; height: 100px; background: rgba(94, 0, 217, 0.06); border-radius: 50%; display: inline-block; margin-bottom: 19px; font-weight: normal; color: #5e00d9; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .single-how-it-work .icon-img { margin-bottom: 25px; } .single-how-it-work .title { font-size: 24px; line-height: 34px; font-weight: 500; margin-bottom: 15px; } .single-how-it-work p { margin-bottom: 0px; } .single-how-it-work:hover { -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } .single-how-it-work:hover .icon { background: #5e00d9; color: #fff; } /* How It Work End */

Related: See More


Questions / Comments: