"Our Services / Offering"
Bootstrap 4.1.1 Snippet by tapan

<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 ----------> <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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <div class="section-block-grey"> <div class="container"> <div class="section-heading center-holder"> <h3>Our Services / Offering</h3> <div class="section-heading-line"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>incididunt ut labore et dolore magna aliqua.</p> </div> <div class="row mt-60"> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2"> <div class="serv-section-2-icon"> <i class="fas fa-gem"></i> </div> <div class="serv-section-desc"> <h4>Planning</h4> <h5>Business Planning</h5> </div> <div class="section-heading-line-left"></div> </div> </div> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2 serv-section-2-act"> <div class="serv-section-2-icon serv-section-2-icon-act"> <i class="fas fa-cogs"></i> </div> <div class="serv-section-desc"> <h4>Management</h4> <h5>Retirement Planning</h5> </div> <div class="section-heading-line-left"></div> </div> </div> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2"> <div class="serv-section-2-icon"> <i class="fas fa-signature"></i> </div> <div class="serv-section-desc"> <h4>Accumulation</h4> <h5>Support and Sell</h5> </div> <div class="section-heading-line-left"></div> </div> </div> </div> <div class="row mt-60"> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2"> <div class="serv-section-2-icon"> <i class="fas fa-shield-alt"></i> </div> <div class="serv-section-desc"> <h4>Security </h4> <h5>Secure Business</h5> </div> <div class="section-heading-line-left"></div> </div> </div> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2 serv-section-2-act"> <div class="serv-section-2-icon serv-section-2-icon-act"> <i class="far fa-clock"></i> </div> <div class="serv-section-desc"> <h4>24/7 Available </h4> <h5>All time available </h5> </div> <div class="section-heading-line-left"></div> </div> </div> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2"> <div class="serv-section-2-icon"> <i class="fas fa-signature"></i> </div> <div class="serv-section-desc"> <h4> Customer Support </h4> <h5>Support and Sell</h5> </div> <div class="section-heading-line-left"></div> </div> </div> </div> </div> </div>
.mt-60{ margin-top:60px; } .section-block-grey { padding: 90px 0px 90px 0px; background-color: #f9f9f9; } .serv-section-2 { position: relative; border: 1px solid #eee; background: #fff; box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16); border-radius: 5px; overflow: hidden; padding: 30px; } .serv-section-2:before { position: absolute; top: 0; right: 0px; z-index: 0; content: " "; width: 120px; height: 120px; background: #f5f5f5; border-bottom-left-radius: 136px; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .serv-section-2-icon { position: absolute; top: 18px; right: 22px; max-width: 100px; z-index: 1; text-align: center; } .serv-section-2-icon i { color: #001c48; font-size: 48px; line-height: 65px; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .serv-section-desc { position: relative; } .serv-section-2 h4 { color: #333; font-size: 20px; font-weight: 500; line-height: 1.5; } .serv-section-2 h5 { color: #333; font-size: 17px; font-weight: 400; line-height: 1; margin-top: 5px; } .section-heading-line-left { content: ''; display: block; width: 100px; height: 3px; background: #001c48; border-radius: 25%; margin-top: 15px; margin-bottom: 5px; } .serv-section-2 p { margin-top: 25px; padding-right: 50px; } .serv-section-2:hover .serv-section-2-icon i { color: #fff; } .serv-section-2:hover:before { background: #001c48; }

Related: See More


Questions / Comments:

You have literally made all my Xmas's come at once! I love what you've created here. You are very generous people. Now, just need to work out how to get these onto the website! Thank you, Thank you and Thank you. Irena

IrenaBena () - 2 years ago - Reply 0


You have literally made all my Xmas's come at once! I love what you've created here. You are very generous people. Now, just need to work out how to get these onto the website! Thank you, Thank you and Thank you. Irena

IrenaBena () - 2 years ago - Reply 0